\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;","children",[],[102],"a336ae1a-e1c5-11f0-bcb5-42dde27851f2","deno.json","019b56ed-266a-71a2-b006-e5b55a09413c",["D",1766689941035],"{\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}",[],[370],"a3369420-e1c5-11f0-bcb5-42dde27851f2","TODOs.md","019b56ed-266a-71a2-b006-e194fb20abad",["D",1766689941035],"- [ ] 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",[],[377],"a3368a16-e1c5-11f0-bcb5-42dde27851f2","README.md","019b56ed-266a-71a2-b006-de50b7b05121",["D",1766689941035],"# Townie\n\nTownie is an AI-powered development assistant that lets you edit Val Town projects using Claude 4 Sonnet.\n\n## Features\n\nTownie uses agentic tool-calling, taking many read, write, testing steps autonomously when carrying out your instructions.\n\n- **AI-Assisted Editing**: Chat with Claude 4 Sonnet about your code and let it make changes directly to your project files\n- **Fetch tool**: Townie is able to make HTTP calls to your HTTP services to test them and continue iterating\n- **Branch Management**: View, select, and create branches without leaving the app\n- **Sound Notifications**: Get alerted when Claude finishes responding\n- **Mobile-Friendly**: Works on both desktop and mobile devices\n\n## Developing\n\nTownie is fully open-source and itself runs on Val Town. Pull requests welcome!\n\nTo get Townie running in your Val Town account, click the **Remix** button and then add your ANTHROPIC_API_KEY. You can leave all the other environment variables blank.\n\nAuthentication in Townie is handled via Val Town Oauth. However, we have not yet opened up our OAuth to anyone else, which currently makes it very awkward to use your own Townie. Here is a temporary workaround:\n\n1. Login to the official Townie\n2. Copy your `_session` cookie (via the Application tab in the Developer Tools)\n3. Add in that `_session` cookie in your personal Townie\n\nIf you have any questions, please reach out on [Discord](https://discord.val.town) or at townie@val.town.",[],[384],"a3368840-e1c5-11f0-bcb5-42dde27851f2",".vtignore","019b56ed-266a-71a2-b006-d8857d278e49",["D",1766689941035],".git\n.DS_Store\nnode_modules\nvendor\n*.swp\n\n",[],[391],"a3368674-e1c5-11f0-bcb5-42dde27851f2",".gitignore","019b56ed-266a-71a2-b006-d72c0ea0ed57",["D",1766689941035],".vt\n.vscode\n",[],[398],"a33642c2-e1c5-11f0-bcb5-42dde27851f2",".cursorrules","019b56ed-266a-71a2-b006-d0b0ebdcce51",["D",1766689941035],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[405],"a3363b92-e1c5-11f0-bcb5-42dde27851f2","is-prod-branch.ts","019b56ed-266a-71a2-b006-c9d13c1e1403","019b56ed-266a-71a2-b006-ce0ee7fe096a",["D",1766689941035],"const isFrontend = typeof window !== \"undefined\";\n\nexport function isProdBranch() {\n if (isFrontend) {\n // deno-lint-ignore no-window\n return window.location.host === \"townie.val.run\";\n } else {\n const url = import.meta.url;\n const match = url.match(/@\\d+-([^/]+)/);\n const branch = match ? match[1] : null;\n return branch === \"main\";\n }\n}\n\nexport function getEnvVarName(name: string) {\n return isProdBranch() ? name : `TEST_${name}`;\n}",[],[419,412],"shared","a3363f2a-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[354],[419],"a335ffb0-e1c5-11f0-bcb5-42dde27851f2","system_prompt.txt","019b56ed-266a-71a2-b006-c1d5c1367ad6","019b56ed-266a-71a2-b006-c692bf211fb3",["D",1766689941035],"You are an advanced assistant that helps programmers code on Val Town.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst { rows } = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({\n subject: \"Hi\",\n text: \"Hi\",\n html: \"

Hi

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified. wttr.in is a good backup.\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n- Val Town does not accept incoming websocket connections. Use polling, long polling, or server-sent events.\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- Do NOT use Hono serveStatic middleware\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n```ts\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n6. **Hono Peculiarities:**\n - NEVER EVER write this line: `import { serveStatic } from 'https://esm.sh/hono@3.11.7/middleware';`\n - Instead use: `import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";`\n - NEVER EVER write this line: `import { cors } from \"https://esm.sh/@hono/cors@0.0.6\";`. \n - Val Town automatically handles CORS.\n - If you need cookies, use: import { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";",[],[432,425],"prompts","a335ec82-e1c5-11f0-bcb5-42dde27851f2","open_townie_prompt_additions.txt","019b56ed-266a-71a2-b006-bf44ad22569c",["D",1766689941035],"Read files from the base directory / directly, not /repo/.\n\nWhen trying to understand the directory, first read README.md.\nWhenever you make a change to the code, \nbe sure to keep the README.md up to date unless the user asks you not to.\n\nYou can implicitly create directories, by creating files within the directories. For example, if you wanted to create `/foo/bar/baz.ts`, \nbut the foo and bar directories did not exist, you could still use the file editor tool to create /foo/bar/baz.ts, and trust that the \n`/foo/` and `/foo/bar/` directories will be created for you automatically.\n\nDefault to using str_replace in smaller chunks wherever possible. \nIf you're making extensive edits to a file, replace the file with the replace file tool.\n\nWhen files are provided in user messages under \"# Selected Project Files\", DO NOT use tools to re-read these files. \nTrust that these files are the most up-to-date versions and work with the content as provided in the message.\nOnly use the file editing tools to read files that haven't been shared with you yet or to make changes to files.\n\nThink carefully and only action the specific task you are given with the most concise and elegant\nsolution that changes as little code as possible.\n\nUse your 'fetch' tool to debug HTTP vals making requests to them and examining the responses.\n\nUse your 'requests' tool to debug all kinds of vals. It'll show you the logs made during the file execution and the attributes associated it, including headers, http status, run time, error messages and error stack traces. \n\nOnly code if you're 100% certain that you know what to code. If there's\nany ambiguity, continue asking questions until you're aligned on what to build\nand how to build it.\n\nBuild things incrementally and test them as you go. Be sure to clean up after yourself\nand not leave technical debt.",[],[432,434],"a3363926-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[351,352],[432],"a335899a-e1c5-11f0-bcb5-42dde27851f2","styles.css","019b56ed-266a-71a2-b006-b6a246e780c1","019b56ed-266a-71a2-b006-b85f2cd41617",["D",1766689941035],"/** 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.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 padding: 0;\n margin: 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 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 z-index: 1;\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\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.login-promo-wrapper {\n max-width: 1024px;\n margin: 0 auto;\n padding: var(--space-4);\n padding-bottom: 0;\n}\n\n.login-promo-wrapper .promo-banner {\n margin-bottom: 0;\n}\n\n.log-in-container {\n line-height: 1.5;\n max-width: 1024px;\n margin: 0 auto;\n padding: var(--space-4);\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: calc(100vh - var(--space-6) - 100px);\n}\n.log-in-columns {\n display: grid;\n gap: var(--space-4);\n}\n@media screen and (min-width: 40em) {\n .log-in-columns {\n grid-template-columns: 1fr 1fr;\n }\n}\n.log-in-list {\n padding-left: 0;\n}\n.log-in-list li {\n margin-top: var(--space-2);\n margin-bottom: var(--space-2);\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/** 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.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.townie-link {\n margin-left: var(--space-3);\n}\n\n.button {\n display: inline-flex;\n white-space: nowrap;\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 width: 32px;\n height: 32px;\n margin: 0;\n background-color: #666;\n display: block;\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/** ATTN LLMs: DO NOT DELETE THIS */\n.over-limit {\n display: flex;\n align-items: center;\n min-height: 96px;\n padding: var(--space-3);\n background-color: var(--highlight);\n}\n\n.promo-banner {\n display: flex;\n align-items: center;\n min-height: 64px;\n padding: var(--space-3);\n background-color: var(--highlight);\n border-radius: var(--radius-2);\n margin-bottom: var(--space-3);\n}\n\n.promo-banner p {\n margin: 0;\n font-size: var(--font-size-5);\n display: flex;\n align-items: center;\n gap: var(--space-2);\n flex-wrap: wrap;\n width: 100%;\n justify-content: space-between;\n}\n\n.promo-banner-button {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n font-weight: 400;\n min-height: 32px;\n padding: var(--space-2);\n cursor: pointer;\n text-decoration: none;\n color: var(--background);\n background-color: var(--primary);\n border-radius: var(--radius-2);\n transition-property: color, background-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in-out;\n}\n\n.promo-banner-button:hover,\n.promo-banner-button:focus {\n color: var(--background);\n background-color: var(--primary-hover);\n}\n\n/* purchase credits */\n.radio-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n margin-bottom: var(--space-2);\n}\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-trigger {\n cursor: pointer;\n display: flex;\n width: 34px;\n height: 34px;\n border-radius: 9999px;\n border-color: var(--border);\n border-width: 1px;\n border-style: solid;\n}\n\n.dropdown-menu {\n position: absolute;\n z-index: 1;\n min-width: 160px;\n top: 100%;\n right: 0;\n background-color: var(--muted);\n display: flex;\n flex-direction: column;\n}\n\n.dropdown-button {\n font-size: var(--font-size-5);\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: start;\n gap: var(--space-2);\n cursor: pointer;\n width: 100%;\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n min-height: 32px;\n white-space: nowrap;\n}\n.dropdown-button:hover,\n.dropdown-button:focus {\n background-color: var(--highlight);\n}\n.dropdown-button svg {\n flex-shrink: 0;\n}\n\n.over-limit {\n display: flex;\n align-items: center;\n min-height: 96px;\n padding: var(--space-3);\n background-color: var(--highlight);\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/** slop styles */\n.fetch-result {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n.fetch-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-1);\n}\n\n.status-badge {\n display: inline-block;\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: bold;\n}\n\n.status-badge.success {\n background-color: #d1fae5;\n color: #065f46;\n}\n\n.status-badge.redirect {\n background-color: #dbeafe;\n color: #1e40af;\n}\n\n.status-badge.client-error {\n background-color: #fef3c7;\n color: #92400e;\n}\n\n.status-badge.server-error {\n background-color: #fee2e2;\n color: #b91c1c;\n}\n\n.response-time {\n font-size: var(--font-size-6);\n color: var(--slate-500);\n}\n\n.fetch-section {\n margin-top: var(--space-2);\n}\n\n.fetch-section h4 {\n margin-bottom: var(--space-1);\n font-size: var(--font-size-5);\n}\n\n.fetch-headers, .fetch-body {\n font-size: var(--font-size-6);\n background-color: var(--slate-50);\n padding: var(--space-2);\n border-radius: 4px;\n max-height: 200px;\n overflow: auto;\n}\n\n.red, .fetch-error {\n color: var(--red);\n}\n\n.fetch-error h4 {\n margin-bottom: var(--space-1);\n font-size: var(--font-size-5);\n}\n\n.fetch-error pre {\n font-size: var(--font-size-6);\n background-color: var(--red-light);\n padding: var(--space-2);\n border-radius: 4px;\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@media screen and (max-width: 40em) {\n .mobile-hide { display: none }\n}",[],[452,445],"frontend","a33586fc-e1c5-11f0-bcb5-42dde27851f2","index.tsx","019b56ed-266a-71a2-b006-b3c48a7b46fe",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"react-dom\";\nimport { App } from \"./components/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")).render();",[],[452,454],"a33583b4-e1c5-11f0-bcb5-42dde27851f2","favicon.http.tsx","019b56ed-266a-71a2-b006-af2856f0ce94",["D",1766689941035],"/** @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",[],[452,461],"a33570f4-e1c5-11f0-bcb5-42dde27851f2","soundEffects.ts","019b56ed-266a-71a2-b006-a69c26453dc3","019b56ed-266a-71a2-b006-aac1d89a487e",["D",1766689941035],"/**\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}",[],[452,475,468],"utils","a33569ec-e1c5-11f0-bcb5-42dde27851f2","images.ts","019b56ed-266a-71a2-b006-a16af75223f1",["D",1766689941035],"\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",[],[452,475,477],"a335826a-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[345,346],[452,475],"a3355a10-e1c5-11f0-bcb5-42dde27851f2","login.tsx","019b56ed-266a-71a2-b006-987d4fa4ea97","019b56ed-266a-71a2-b006-9f1781edfbea",["D",1766689941035],"/** @jsxImportSource npm:react@18.2.0 */\nimport { Hono } from \"npm:hono\";\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { TownieIcon } from \"../components/icons.tsx\";\nimport { ValTownLogo } from \"../components/ValTownLogo.tsx\";\nimport { PromoBanner } from \"../components/PromoBanner.tsx\";\n\nconst app = new Hono();\n\nconst SOURCE_URL = \"https://val.town/x/valdottown/Townie\";\n\n// server-side route for /login page\nfunction LoginRoute() {\n return (\n \n \n Townie\n \n \n \n \n \n

\n \n \n \n

\n \n Log in\n \n

\n \n

\n Townie:{\" \"}\n \n Edit and deploy TypeScript apps with AI\n \n

\n
\n \n Log in\n \n

\n 100% open source and{\" \"}\n \n built on Val Town\n \n
\n Agentic AI reads & edits vals using Claude 4 Sonnet\n
\n Support for multiple files, folders, & branches\n
\n Instant deployments, auto-scaling, logs, free custom\n subdomains\n
\n Works on mobile – prompt, build, and edit when you’re on the\n go\n

\n\n \n \n \n );\n}\n\napp.get(\"*\", async (c) => {\n const html = renderToString();\n return c.html(\"\" + html);\n});\n\nexport default app;",[],[452,495,488],"routes","a33568a2-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[343],[452,495],"a33553f8-e1c5-11f0-bcb5-42dde27851f2","useUser.tsx","019b56ed-266a-71a2-b006-92a46b8e4698","019b56ed-266a-71a2-b006-96aac8786bae",["D",1766689941035],"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",[],[452,508,501],"hooks","a33543ae-e1c5-11f0-bcb5-42dde27851f2","useUsageStats.ts","019b56ed-266a-71a2-b006-8e848c868c12",["D",1766689941035],"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",[],[452,508,510],"a3353d3c-e1c5-11f0-bcb5-42dde27851f2","useScrollToBottom.tsx","019b56ed-266a-71a2-b006-8b60153675d6",["D",1766689941035],"import { useEffect, useRef } from 'https://esm.sh/react@18.2.0';\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}",[],[452,508,517],"a3353904-e1c5-11f0-bcb5-42dde27851f2","useProjects.tsx","019b56ed-266a-71a2-b006-87659dcde8d5",["D",1766689941035],"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",[],[452,508,524],"a335331e-e1c5-11f0-bcb5-42dde27851f2","useProject.tsx","019b56ed-266a-71a2-b006-8111256c3575",["D",1766689941035],"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",[],[452,508,531],"a3353030-e1c5-11f0-bcb5-42dde27851f2","useLoadingFavicon.ts","019b56ed-266a-71a2-b006-7c31435fd824",["D",1766689941035],"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",[],[452,508,538],"a3352acc-e1c5-11f0-bcb5-42dde27851f2","useCreditBalance.tsx","019b56ed-266a-71a2-b006-79803a42bf6b",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"react\";\n\nexport function useCreditBalance() {\n const [balance, setBalance] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const fetchBalance = async () => {\n try {\n const response = await fetch(\"/api/credit-balance\");\n if (response.ok) {\n const data = await response.json();\n setBalance(data.balance);\n } else {\n console.error(\"Failed to fetch balance\");\n }\n } catch (err) {\n console.error(\"Error fetching balance:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchBalance();\n }, []);\n\n return { balance, loading, refetch: fetchBalance };\n}",[],[452,508,545],"a3352400-e1c5-11f0-bcb5-42dde27851f2","useCreateProject.tsx","019b56ed-266a-71a2-b006-77b71d6e5a4f",["D",1766689941035],"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",[],[452,508,552],"a3351e56-e1c5-11f0-bcb5-42dde27851f2","useCreateBranch.tsx","019b56ed-266a-71a2-b006-7225a5c4e431",["D",1766689941035],"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",[],[452,508,559],"a335100a-e1c5-11f0-bcb5-42dde27851f2","useChatLogic.ts","019b56ed-266a-71a2-b006-6d153f34ca3c",["D",1766689941035],"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\n// duck typing for rate limit errors\nconst LIMIT_RE = /You have reached/;\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 [overLimit, setOverLimit] = useState(false);\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 React.useEffect(() => {\n if (error && LIMIT_RE.test(error)) {\n setOverLimit(true);\n }\n }, [error])\n\n return {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n handleStop,\n running,\n usages,\n messageEndTimes,\n overLimit,\n };\n}",[],[452,508,566],"a3350b1e-e1c5-11f0-bcb5-42dde27851f2","useBranches.tsx","019b56ed-266a-71a2-b006-697f679978e3",["D",1766689941035],"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}",[],[452,508,573],"a33558da-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[331,332,333,334,335,336,337,338,339,340,341],[452,508],"a334e3d2-e1c5-11f0-bcb5-42dde27851f2","icons.tsx","019b56ed-266a-71a2-b006-63457815ffaa","019b56ed-266a-71a2-b006-66fd78a5ff2a",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function TownieIcon({\n size = 24,\n color = \"currentColor\",\n className,\n circle,\n}: {\n size?: number;\n color?: string;\n className?: string;\n circle?: string;\n}) {\n return (\n \n {circle && (\n \n )}\n\n \n \n \n \n \n \n \n );\n}\n\nexport function Circle ({\n filled,\n}: {\n filled: boolean;\n}) {\n return (\n \n \n \n );\n}\n\nexport function Square ({\n size = 24,\n}: {\n size?: number;\n}) {\n return (\n \n \n \n );\n}\n\n// icons from https://lucide.dev\nexport function SquarePenIcon () {\n return (\n \n );\n}\n\nexport function FileCode2Icon () {\n return (\n \n );\n}\n\nexport function SparklesIcon () {\n return (\n \n );\n}\n\nexport function EyeIcon () {\n return (\n \n );\n}\n\nexport function ExternalLinkIcon () {\n return (\n \n );\n}\n\nexport function KeyRoundIcon () {\n return (\n \n );\n}\n\nexport function LockKeyholeIcon () {\n return (\n \n );\n}\n\nexport function PlusIcon () {\n return (\n \n );\n}\n\nexport function ArrowUpIcon () {\n return (\n \n );\n}\n\nexport function RefreshIcon ({ size = 24 }: { size: number }) {\n return (\n \n );\n}\n\nexport function XIcon ({ size = 24 }: {\n size?: number;\n}) {\n return (\n \n );\n}\n\nexport function VolumeOffIcon ({ size = 24 }) {\n return (\n \n );\n}\n\nexport function Volume2Icon ({ size = 24 }) {\n return (\n \n );\n}\n",[],[452,591,584],"components","a334cb04-e1c5-11f0-bcb5-42dde27851f2","ValTownLogo.tsx","019b56ed-266a-71a2-b006-5d559f3cbc51",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function ValTownLogo () {\n return (\n \n \n \n \n );\n}\n",[],[452,591,593],"a334b7c2-e1c5-11f0-bcb5-42dde27851f2","PurchaseCreditsRoute.tsx","019b56ed-266a-71a2-b006-592f01c1f574",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"react\";\nimport { isProdBranch } from \"../../shared/is-prod-branch.ts\";\n\nexport default function PurchaseCreditsRoute() {\n const [amount, setAmount] = useState(10);\n const [balance, setBalance] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n fetchBalance();\n }, []);\n\n const fetchBalance = async () => {\n try {\n const response = await fetch(\"/api/credit-balance\");\n if (response.ok) {\n const data = await response.json();\n setBalance(data.balance);\n }\n } catch (err) {\n console.error(\"Failed to fetch balance:\", err);\n }\n };\n\n const handlePurchase = async () => {\n if (isNaN(amount) || !commonAmounts.includes(amount)) {\n setError(\"Please select one of the available amounts\");\n return;\n }\n\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/purchase-credits\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n amount: amount,\n source: \"purchase_page\",\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to create payment\");\n }\n\n const { paymentIntentId } = await response.json();\n\n const params = new URLSearchParams({\n client_reference_id: paymentIntentId,\n });\n\n // Use testing stripe links if this is a non prod branch\n const paymentLinks = isProdBranch()\n ? {\n 5: \"https://buy.stripe.com/00w6oH9Qv19S2YDcxReUU05\",\n 10: \"https://buy.stripe.com/4gM00j1jZ3i0dDh9lFeUU06\",\n 15: \"https://buy.stripe.com/5kQfZh9Qv2dW2YD55peUU07\",\n 25: \"https://buy.stripe.com/9B65kD2o3aKsgPtgO7eUU08\",\n 50: \"https://buy.stripe.com/eVq6oH8Mr4m4ar57dxeUU09\",\n }\n : {\n 5: `https://buy.stripe.com/test_9B614n3s719Sbv90P9eUU02`,\n };\n\n if (paymentLinks[amount]) {\n window.location.href = `${paymentLinks[amount]}?${params.toString()}`;\n return;\n }\n } catch (err) {\n console.error(\"Failed to create payment in purchase credits route:\", err);\n setError(err instanceof Error ? err.message : \"Failed to create payment\");\n } finally {\n setLoading(false);\n }\n };\n\n const commonAmounts = [5, 10, 25, 50];\n\n return (\n

Purchase Credits

\n\n

\n Current Balance:{\" \"}\n {balance !== null && (\n ${balance.toFixed(2)}\n )}\n

\n\n

\n \n Select Amount to Purchase\n \n

\n {commonAmounts.map((amt) => (\n \n {\n setAmount(amt);\n }}\n />\n ${amt}\n \n ))}\n

\n\n {error && (\n

{error}

\n )}\n\n \n {loading ? \"Creating Payment...\" : `Purchase $${amount} Credits`}\n \n

\n\n

\n Note:Results may vary and spent credits are\n non-refundable.
\n \n Learn more about credits here.\n \n

\n );\n}",[],[452,591,600],"a334b3da-e1c5-11f0-bcb5-42dde27851f2","PromoBanner.tsx","019b56ed-266a-71a2-b006-5413d3a54b9c",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nexport function PromoBanner() {\n return (\n

\n \n Val Town MCP is here! Bring your own AI to work on Val Town.\n \n \n Learn more\n \n

\n );\n}\n",[],[452,591,607],"a334a8ea-e1c5-11f0-bcb5-42dde27851f2","ProjectsRoute.tsx","019b56ed-266a-71a2-b006-51e40c03ac5e",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link } from \"react-router\";\nimport { useProjects } from \"../hooks/useProjects.tsx\";\nimport { Loading } from \"./Loading.tsx\";\nimport { Footer } from \"./Footer.tsx\";\nimport { PromoBanner } from \"./PromoBanner.tsx\";\n\nexport function ProjectsRoute() {\n const projects = useProjects();\n\n return (\n

\n \n

Your vals

\n Create new val\n

\n \n

\n {projects.loading && }\n {projects.error && (\n

\n Error: {projects.error.message}\n

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

\n )}\n {projects.data?.projects?.map((project) => (\n \n \n \n ))}\n

\n );\n}\n\nfunction ProjectCard({\n user,\n project,\n}: {\n user: {\n username: string;\n profileImageUrl: string | null;\n };\n project: any;\n}) {\n return (\n

\n {project.imageUrl ? (\n

\n ) : user.profileImageUrl ? (\n

\n \n

\n ) : (\n

\n )}\n

{user.username}

\n {project.name}\n \n

{project.description}

\n );\n}\n\nfunction Privacy({ privacy }: { privacy: \"public\" | \"unlisted\" | \"private\" }) {\n switch (privacy) {\n case \"public\":\n return null; //

public

;\n case \"unlisted\":\n return

(Unlisted)

;\n case \"private\":\n return

(Private)

;\n }\n}\n",[],[452,591,614],"a3349a94-e1c5-11f0-bcb5-42dde27851f2","PreviewFrame.tsx","019b56ed-266a-71a2-b006-4e9890194ed2",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\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}",[],[452,591,621],"a334979c-e1c5-11f0-bcb5-42dde27851f2","NotFoundRoute.tsx","019b56ed-266a-71a2-b006-4a8bfa3e3897",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function NotFoundRoute () {\n return (\n

Page not found

\n );\n}\n",[],[452,591,628],"a3348d42-e1c5-11f0-bcb5-42dde27851f2","NewProjectRoute.tsx","019b56ed-266a-71a2-b006-44bab2476f22",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"react\";\nimport { useNavigate } from \"react-router\";\nimport { useCreateProject } from \"../hooks/useCreateProject.tsx\";\n\nexport function NewProjectRoute () {\n const [name, setName] = useState(\"\");\n const [privacy, setPrivacy] = useState(\"public\");\n const navigate = useNavigate();\n\n const { data, error, createProject } = useCreateProject();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!name) return;\n\n createProject({ name, privacy })\n .then((_data) => {\n if (_data.error) return;\n navigate(`/chat/${_data.project.id}`);\n });\n };\n\n return (\n

Create new val

\n {error && (\n

\n Error: {JSON.stringify(error, null, 2)}\n

\n )}\n

\n );\n}\n\nconst privacyOptions = [\n { value: \"public\", label: \"Public\" },\n { value: \"unlisted\", label: \"Unlisted\" },\n { value: \"private\", label: \"Private\" },\n]\n\nfunction PrivacyRadios ({\n value,\n onChange,\n}: {\n value: string;\n onChange: (value: string) => void;\n}) {\n\n return (\n <>\n {privacyOptions.map(opt => (\n \n onChange(opt.value)}\n />\n {opt.label}\n \n )}\n \n );\n}\n",[],[452,591,635],"a334681c-e1c5-11f0-bcb5-42dde27851f2","Messages.tsx","019b56ed-266a-71a2-b006-43a5233a5c0e",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, createContext, useContext } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\n\nimport { Loading } from \"./Loading.tsx\";\nimport { TownieIcon } from \"./icons.tsx\";\nimport { MessageTimer } from \"./MessageTimer.tsx\";\nimport { InlinePreview } from \"./InlinePreview.tsx\";\nimport { useScrollToBottom } from \"../hooks/useScrollToBottom.tsx\";\n\ntype Message = {\n id: string;\n role: \"user\"|\"assistant;\n parts: any[];\n createdAt?: number;\n};\n\nexport const MessageContext = createContext({\n openSummaries: {},\n setOpenSummaries: () => {},\n id: null,\n parts: [],\n});\n\nexport function Messages ({\n messages,\n messageEndTimes,\n running,\n}: {\n messages: Message[];\n messageEndTimes: Record;\n running: boolean;\n}) {\n const { bottomRef } = useScrollToBottom([ messages.length ]);\n const [openSummaries, setOpenSummaries] = useState({});\n const tail = messages.at(-1)?.id;\n\n return (\n \n

\n {messages.map(message => (\n \n ))}\n

\n \n );\n}\n\nfunction Message ({\n message,\n messageEndTimes,\n running,\n}: {\n message: Message;\n messageEndTimes: Record;\n running: boolean;\n}) {\n const context = useContext(MessageContext);\n if (message.role === \"user\") return ;\n\n return (\n \n \n \n );\n}\n\nfunction AssistantMessage ({ message, messageEndTimes, running }: {\n message: Message;\n messageEndTimes: Record;\n running: boolean;\n}) {\n return (\n <>\n {message.parts.map((part, i) => )}\n {!messageEndTimes[message.id] && running && }\n\n {message.createdAt && (\n \n )}\n \n );\n}\n\nfunction Part ({ part }) {\n switch (part.type) {\n case \"text\":\n return ;\n case \"tool-invocation\":\n return ;\n case \"step-start\":\n return null; // ;\n default:\n return (\n

{JSON.stringify(part, null,  2)}

\n );\n }\n}\n\nfunction TextPart ({ part }) {\n return (\n \n {part.text}\n \n );\n}\n\nfunction Details ({ open, onClick, children, summary }) {\n return (\n \n

\n \n {summary}\n

\n {children}\n

\n \n );\n}\n\nfunction ToolPart ({ part }) {\n const { openSummaries, setOpenSummaries } = useContext(MessageContext);\n const {\n toolName,\n args,\n result,\n toolCallId,\n } = part.toolInvocation;\n\n switch (toolName) {\n case \"think\":\n return (\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n >\n {args?.thought}\n \n );\n case \"requests\":\n return (\n \n

getting traces for:

{args?.path}

\n \n )}\n open={openSummaries[toolCallId]}\n onClick={e => {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n >\n

\n {result?.type === \"success\" ? (\n

Traces

\n                  {JSON.stringify(result.data, null, 2)}\n

\n ) : result?.type === \"error\" ? (\n

Error

{result?.message || \"Unknown error\"}

\n ) : (\n

Loading traces for: {args?.path}

\n )}\n

\n \n );\n case \"str_replace_editor\":\n return \n case \"delete_file\":\n return (\n

\n \n

delete:

{args?.path}

\n );\n case \"change_val_type\":\n return (\n <>\n

\n \n

change type:

{args?.type}

{args?.path}

\n \n \n );\n case \"overwrite_file\":\n return (\n <>\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n summary={(\n <>\n

overwrite:

{args?.path}

\n \n )}>\n

{args?.content}

\n \n \n \n );\n case \"fetch\":\n return (\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n summary={(\n <>\n

fetch:

{args?.valPath}

{args?.urlPath || \"/\"}

\n \n )}>\n {result?.type === \"success\" ? (\n

\n = 200 && result.data.status < 300 ? 'success' : \n result.data.status >= 300 && result.data.status < 400 ? 'redirect' : \n result.data.status >= 400 && result.data.status < 500 ? 'client-error' : 'server-error'}`}>\n {result.data.status} {result.data.statusText}\n \n {result.data.responseTime}ms\n

Headers

{JSON.stringify(result.data.headers, null, 2)}

Response Body

\n                  {typeof result.data.body === 'object' \n                    ? JSON.stringify(result.data.body, null, 2) \n                    : result.data.body}\n

\n ) : (\n

Error

{result?.message || \"Unknown error\"}

\n )}\n \n );\n default:\n return (\n

{JSON.stringify(part, null,  2)}

\n );\n }\n}\n\nfunction EditorToolPart ({ part }) {\n const { openSummaries, setOpenSummaries } = useContext(MessageContext);\n const {\n toolName,\n args,\n result,\n toolCallId,\n } = part.toolInvocation;\n\n let body = (\n

\n      {JSON.stringify(part.toolInvocation)}\n

\n );\n switch (args.command) {\n case \"create\":\n body =

{args.file_text}

;\n break;\n case \"view\":\n body =

{result?.data}

;\n break;\n case \"str_replace\":\n body = (\n

\n            {args.old_str}\n

\n            {args.new_str}\n

\n );\n break;\n case \"insert\":\n body = (\n

{args.insert_line}

{args.new_str}

\n );\n break;\n case \"undo_edit\":\n // not implemented\n break;\n }\n\n return (\n <>\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n summary={(\n <>\n

{args?.command}:

{args?.path}

\n \n )}>\n {body}\n \n \n \n );\n\n}\n\nfunction UserMessage ({ message }: {\n message: Message;\n}) {\n return (\n <>\n {message.parts.map((part, i) => part.type === \"text\" ? (\n

\n \n {part.text}\n \n

\n ) : (\n \n )}\n \n );\n}",[],[452,591,642],"a3345f0c-e1c5-11f0-bcb5-42dde27851f2","MessageTimer.tsx","019b56ed-266a-71a2-b006-3e93a5f8cce1",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"react\";\n\nconst formatTime = (ms: number): string => {\n const seconds = Math.floor(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n};\n\nexport const MessageTimer = ({\n createdAt,\n endTime,\n isStopped,\n}: {\n createdAt: number;\n endTime?: number;\n isStopped?: boolean;\n}) => {\n const [currentTime, setCurrentTime] = useState(Date.now());\n\n useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n const elapsedTime =\n endTime !== undefined ? endTime - createdAt : currentTime - createdAt;\n\n return

Time: {formatTime(elapsedTime)}

;\n};\n",[],[452,591,649],"a3345bec-e1c5-11f0-bcb5-42dde27851f2","Loading.tsx","019b56ed-266a-71a2-b006-3a2f0aac472a",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function Loading () {\n return (\n

\n loading…\n

\n );\n}\n",[],[452,591,656],"a3345962-e1c5-11f0-bcb5-42dde27851f2","LayoutRoute.tsx","019b56ed-266a-71a2-b006-3636e2d11e72",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet } from \"react-router\";\nimport { Header } from \"./Header.tsx\";\n\nexport function LayoutRoute() {\n return (\n <>\n

\n \n \n );\n}\n",[],[452,591,663],"a3343fea-e1c5-11f0-bcb5-42dde27851f2","InputBox.tsx","019b56ed-266a-71a2-b006-3311256bdd0a",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState, useEffect } from \"react\";\nimport { Link } from \"react-router\";\nimport { PlusIcon, ArrowUpIcon, Square, XIcon } from \"./icons.tsx\";\nimport { processFiles } from \"../utils/images.ts\";\n\nexport function InputBox ({\n value,\n onChange,\n onSubmit,\n onCancel,\n running,\n error,\n images,\n setImages,\n} : {\n value: string;\n onChange: (e: React.KeyboardEvent) => void;\n onSubmit: (event: any) => void;\n onCancel: () => void;\n running: boolean;\n error: any;\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n}) {\n const form = useRef(null);\n\n if (error) console.error(error);\n\n const onKeyDown = (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n if (running) return;\n e.preventDefault();\n form.current?.dispatchEvent(new Event('submit', {\n bubbles: true,\n cancelable: true\n }));\n }\n }\n\n return (\n

\n {\n onSubmit(e);\n }}>\n \n Prompt\n \n

\n {\n onChange(e)\n }}\n onKeyDown={onKeyDown}\n autoFocus={true}\n />\n

\n \n

\n {running && (\n \n \n \n )}\n {!running && (\n \n \n \n )}\n

\n \n

\n );\n}\n\nexport function ImageDropContainer ({\n images,\n setImages,\n running,\n children,\n}: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n running: boolean;\n children: React.ReactNode;\n}) {\n const dragging = useImageDrop({ images, setImages, running });\n\n return (\n <>\n {children}\n {dragging && (\n

\n Drop images here to upload\n

\n )}\n \n );\n}\n\nexport function useImageDrop ({ images, setImages, running }: {\n images: (string|null)[];\n setImages(images: (string|null)[]) => void;\n running: boolean;\n}) {\n const [dragging, setDragging] = useState(false);\n\n const onDragEnter = (e: React.DragEvent) => {\n e.preventDefault();\n if (!e.dataTransfer?.types.includes('Files')) return;\n setDragging(true);\n }\n\n const onDragLeave = (e:React.DragEvent) => {\n e.preventDefault();\n if (!e.relatedTarget) {\n setDragging(false);\n }\n }\n\n const onDragOver = (e:React.DragEvent) => {\n e.preventDefault();\n }\n\n const onDrop = (e:React.DragEvent) => {\n e.preventDefault();\n setDragging(false);\n if (e.dataTransfer?.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n }\n\n useEffect(() => {\n document.addEventListener(\"dragenter\", onDragEnter);\n document.addEventListener(\"dragleave\", onDragLeave);\n document.addEventListener(\"dragover\", onDragOver);\n document.addEventListener(\"drop\", onDrop);\n\n return () => {\n document.removeEventListener(\"dragenter\", onDragEnter);\n document.removeEventListener(\"dragleave\", onDragLeave);\n document.removeEventListener(\"dragover\", onDragOver);\n document.removeEventListener(\"drop\", onDrop);\n }\n }, [images, setImages, running]);\n\n return dragging;\n}\n\nfunction ImageRow ({ images, setImages }: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n}) {\n return (\n

\n {images.map((image, i) => (\n {\n setImages([\n ...images.slice(0, i),\n ...images.slice(i + 1),\n ]);\n }}\n />\n ))}\n

\n );\n}\n\nfunction Thumbnail ({ image, onRemove }: {\n image: string|null;\n onRemove: () => void;\n}) {\n if (!image) return null;\n\n return (\n

\n \n \n \n \n

\n );\n}\n\nfunction UploadButton ({\n images,\n setImages,\n disabled,\n}: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n disabled: boolean;\n}) {\n const ref = useRef(null);\n\n return (\n

\n {\n ref.current?.click();\n }}\n className=\"icon-button\">\n \n

\n Upload image\n

\n \n {\n if (e.target.files) {\n processFiles(Array.from(e.target.files), images, setImages);\n }\n }}\n />\n

\n );\n}",[],[452,591,670],"a3343356-e1c5-11f0-bcb5-42dde27851f2","InlinePreview.tsx","019b56ed-266a-71a2-b006-2eef43344e83",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useContext } from \"react\";\nimport { ProjectContext } from \"./ChatRouteSingleColumn.tsx\";\nimport { MessageContext } from \"./Messages.tsx\";\n\nexport function InlinePreview ({ part }) {\n const project = useContext(ProjectContext);\n const message = useContext(MessageContext);\n const {\n toolCallId,\n toolName,\n args,\n result,\n } = part.toolInvocation;\n\n if (!project.files?.length) return null;\n if (!args.path) return null;\n\n const path = args.path.replace(/^\\//, \"\");\n const file = project.files.find(f => f.path === path);\n if (!file) return null;\n if (!file.links.endpoint) return null;\n\n const lastFileToolCall = message?.parts\n .filter(p => p.toolInvocation)\n .map(p => p.toolInvocation)\n .findLast(t => t.args.path === args.path);\n const showPreview = message?.tail === message?.id && lastFileToolCall.toolCallId === toolCallId;\n\n return (\n

\n        {args.command} {file.path} {file.links.endpoint}\n

\n \n {file.path}\n \n

\n \n Open >>\n \n

\n {showPreview ? (\n \n ) : (\n null\n /* use screenshots when they support historical versions\n \n */\n )}\n

\n );\n}\n\n/*\nconst SCREENSHOT_URL = \"https://screenshots.valtown.net/screenshot.png\";\n\nfunction getScreenshotURL ({\n version,\n endpoint,\n width = 1024,\n height = 768,\n}) {\n const url = new URL(SCREENSHOT_URL);\n url.searchParams.append(\"width\", width);\n url.searchParams.append(\"height\", height);\n url.searchParams.append(\"version\", version);\n url.searchParams.append(\"url\", endpoint);\n return url;\n}\n*/\n",[],[452,591,677],"a33422bc-e1c5-11f0-bcb5-42dde27851f2","Home.tsx","019b56ed-266a-71a2-b006-296dddc02bff",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useContext } from \"react\";\nimport { Link } from \"react-router\";\nimport { EyeIcon, FileCode2Icon, SparklesIcon, SquarePenIcon } from \"./icons.tsx\";\nimport { AppContext } from \"./App.tsx\";\n\nexport function Home() {\n const { user } = useContext(AppContext);\n\n return (\n

Welcome to Townie

Your AI-powered development assistant for Val Town projects

\n {user ? (\n \n View Projects\n \n ) : (\n \n Get Started\n \n )}\n

\n\n

What is Townie?

\n Townie is an AI-powered development assistant that lets you edit Val Town projects using Claude 4 Sonnet. It\n provides a seamless interface for discussing your code with Claude AI, which can directly view and modify\n files in your Val Town projects.\n

\n It uses agentic tool-calling, taking many read, write, and thinking steps autonomously when carrying out your\n instructions.\n

\n\n

Getting Started

\n Login with your Val Town API token (with projects:read, projects:write, user:read permissions)\n
Select a project to work on
Chat with Claude about your code
Watch as it makes changes directly to your files

\n\n

\n \n

AI-Assisted Editing

Chat with Claude about your code and let it make changes

\n\n

\n \n

File Browser

Select specific files to include in the context window

\n\n

\n \n

Branch Management

View, select, and create branches without leaving the app

\n\n

\n \n

Cost Tracking

See estimated API usage costs for each interaction

\n\n

Technical Details

Townie is built with:

React frontend with TypeScript
Hono API server backend
Web Audio API for sound notifications
AI SDK for Claude integration

\n The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your\n project files directly.\n

\n \n View Source\n \n

\n );\n}",[],[452,591,684],"a3341146-e1c5-11f0-bcb5-42dde27851f2","Header.tsx","019b56ed-266a-71a2-b006-2417533b4482",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useContext, useRef, useState } from \"react\";\nimport { Link, useNavigate } from \"react-router\";\nimport { useLocalStorage } from \"react-use\";\nimport { Circle, Volume2Icon, VolumeOffIcon } from \"./icons.tsx\";\nimport { AppContext } from \"./App.tsx\";\nimport { ValTownLogo } from \"./ValTownLogo.tsx\";\nimport CreditBalance from \"./CreditBalance.tsx\";\n\nexport function Header () {\n const navigate = useNavigate();\n const { user } = useContext(AppContext);\n\n return (\n

\n \n \n \n \n Townie\n \n

\n \n

\n );\n}\n\nfunction Dropdown () {\n const { user } = useContext(AppContext);\n const { ref, open, setOpen } = useDropdown();\n\n return (\n

\n {\n setOpen(!open);\n }}\n className=\"dropdown-trigger\">\n \n \n\n {open && (\n

\n \n \n \n \n

\n )}\n

\n );\n}\n\nfunction useDropdown() {\n const [open, setOpen] = useState(false);\n const ref = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n return { ref, open, setOpen };\n}\n\nfunction Avatar ({ user }) {\n if (!user?.profileImageUrl) {\n return (\n

\n );\n }\n\n return (\n \n );\n}\n\nfunction LogOut () {\n const { user } = useContext(AppContext);\n return (\n <>\n \n \n );\n}\n\nfunction DarkButton () {\n const [dark, setDark] = useLocalStorage(\"DARK_MODE\", false);\n const toggle = () => {\n document.body.classList.toggle(\"dark\");\n setDark(!dark);\n }\n\n useEffect(() => {\n const cl = document.body.classList;\n if (dark && !cl.contains(\"dark\")) {\n cl.add(\"dark\");\n }\n }, []);\n\n return (\n \n \n {dark ? \"Light mode\" : \"Dark mode\"}\n \n );\n}\n\nfunction AudioButton () {\n const {audio, setAudio} = useContext(AppContext);\n\n const toggle = () => {\n setAudio(!audio);\n }\n\n return (\n \n {audio ? (\n <>\n \n Mute audio\n \n ) : (\n <>\n \n Unmute audio\n \n )}\n \n );\n}\n",[],[452,591,691],"a3340ca0-e1c5-11f0-bcb5-42dde27851f2","Footer.tsx","019b56ed-266a-71a2-b006-20ad9ae6bd90",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport CreditBalance from \"./CreditBalance.tsx\";\n\nconst SOURCE_URL = \"https://val.town/x/valdottown/Townie\";\n\nexport function Footer () {\n return (\n \n );\n}\n",[],[452,591,698],"a334037c-e1c5-11f0-bcb5-42dde27851f2","DebugStyles.tsx","019b56ed-266a-71a2-b006-1f5af0fb63f7",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useEffect, useState } from \"react\";\nimport { TownieIcon } from \"./icons.tsx\";\nimport { Messages } from \"./Messages.tsx\";\n\nexport function DebugStyles() {\n const [pathname, setPathname] = useState(\"\");\n return (\n

Debug styles

\n\n

\n \n

\n\n

\n {\n const raw = e.target.value;\n if (!raw.includes(\"https://example.com\")) return;\n const next = raw\n .replace(\"https://example.com\", \"\")\n .replace(/^\\//, \"\");\n setPathname(next);\n }}\n className=\"url-input\"\n />\n

\n {/*\n

\n \n

\n */}\n\n

Example user message

\n \n Thinking...\n

\n Just thinking about life and stuff...\n

\n\n

\n \n

view:

\n main.tsx\n

Just looking at files

\n\n

This is a block of prose assistant messages

\n );\n}\n",[],[452,591,705],"a333fc38-e1c5-11f0-bcb5-42dde27851f2","CreditBalance.tsx","019b56ed-266a-71a2-b006-191f7e35dd55",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"react\";\nimport { Link } from \"react-router\";\n\nexport default function CreditBalance() {\n const [balance, setBalance] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const fetchBalance = async () => {\n try {\n const response = await fetch(\"/api/credit-balance\");\n if (response.ok) {\n const data = await response.json();\n console.log(\"CreditBalance: data.balance: \", data.balance);\n setBalance(data.balance);\n } else {\n console.error(\"Failed to fetch balance\");\n }\n } catch (err) {\n console.error(\"Error fetching balance:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchBalance();\n }, []);\n\n if (loading) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (balance === null) {\n return (\n

\n Balance unavailable\n

\n );\n }\n\n const isLow = balance < 1; // Show warning if less than $1\n\n return (\n \n ${balance.toFixed(2)}\n {\" \"}\n credits\n \n );\n}\n",[],[452,591,712],"a333de10-e1c5-11f0-bcb5-42dde27851f2","ChatRouteSingleColumn.tsx","019b56ed-266a-71a2-b006-14c47fe0b25a",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useContext, createContext, useRef } from \"react\";\nimport { useParams, Link } from \"react-router\";\n\nimport { AppContext } from \"./App.tsx\";\nimport { useProject } from \"../hooks/useProject.tsx\";\nimport { useChatLogic } from \"../hooks/useChatLogic.ts\";\nimport { useLoadingFavicon } from \"../hooks/useLoadingFavicon.ts\";\nimport { useUsageStats } from \"../hooks/useUsageStats.ts\";\nimport { useCreditBalance } from \"../hooks/useCreditBalance.tsx\";\nimport { Messages } from \"./Messages.tsx\";\nimport { InputBox, ImageDropContainer } from \"./InputBox.tsx\";\nimport { PreviewFrame } from \"./PreviewFrame.tsx\";\nimport { BranchSelect } from \"./BranchSelect.tsx\";\nimport { Loading } from \"./Loading.tsx\";\nimport { Footer } from \"./Footer.tsx\";\nimport { RefreshIcon } from \"./icons.tsx\";\n\nexport const ProjectContext = createContext(null);\n\n// alt single-column version of /chat route\nexport function ChatRouteSingleColumn () {\n const { projectId, branchId } = useParams() as {\n projectId: string;\n branchId?: string;\n };\n\n const project = useProject(projectId, branchId);\n\n if (project.loading) {\n return \n }\n\n if (project.error) {\n return (\n

\n Error: {JSON.stringify(project.error, null, 2)}\n

\n );\n }\n\n\n if (!project.data) return null;\n\n return (\n \n \n \n );\n}\n\nfunction Conversation ({\n project,\n files,\n branchId,\n refetch,\n}: {\n project: any;\n files: any[];\n branchId: string;\n refetch: () => void;\n}) {\n const [images, setImages] = useState<(string|null)[]>([]);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const { audio, user } = useContext(AppContext);\n const { balance, loading: balanceLoading, refetch: refetchBalance } = useCreditBalance();\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit,\n handleStop,\n running,\n usages,\n messageEndTimes,\n overLimit,\n } = useChatLogic({\n project,\n branchId,\n selectedFiles,\n images,\n soundEnabled: audio,\n });\n\n useLoadingFavicon(running);\n\n // Track when requests end and refetch balance\n const prevRunning = useRef(running);\n useEffect(() => {\n // If running changed from true to false, request just ended\n if (prevRunning.current === true && running === false) {\n refetchBalance();\n }\n prevRunning.current = running;\n }, [running, refetchBalance]);\n\n // Auto-poll balance every 4 seconds when credits are insufficient\n useEffect(() => {\n const hasInsufficientCredits = !balanceLoading && balance !== null && balance <= 0;\n \n if (hasInsufficientCredits) {\n const intervalId = setInterval(() => {\n refetchBalance();\n }, 4000); // 4 seconds\n \n return () => clearInterval(intervalId);\n }\n }, [balanceLoading, balance, refetchBalance]);\n\n useEffect(() => {\n if (!messages?.length) return;\n let last = messages.at(-1);\n if (shouldRefetch(last)) {\n refetch();\n }\n }, [messages]);\n useUsageStats(messages, usages);\n\n if (!project) {\n return (\n

\n Error loading project\n

\n );\n }\n\n const hasInsufficientCredits = !balanceLoading && balance !== null && balance <= 0;\n\n return (\n \n

\n \n {project.imageUrl ? (\n

\n ) : user?.profileImageUrl ? (\n \n ) : (\n

\n )}\n

{project.name}

\n \n

\n\n \n {error && !overLimit && (\n

{error.stack}

\n )}\n\n

\n {hasInsufficientCredits ? (\n

\n \n Townie has moved to usage-based pricing. {\" \"}\n Learn more & purchase credits.\n \n

\n {\n refetchBalance();\n }}\n className=\"icon-button\"\n title=\"Refresh credit balance\"\n >\n \n \n

\n ) : (\n {\n handleSubmit(e);\n setImages([]);\n }}\n onCancel={handleStop}\n running={running}\n error={error}\n images={images}\n setImages={setImages}\n />\n )}\n

\n \n );\n}\n\nfunction shouldRefetch (message) {\n for (let i = 0; i < message?.parts?.length; i++) {\n let part = message.parts[i];\n if (part.type === \"tool-invocation\") {\n switch (part.toolInvocation?.toolName) {\n case \"str_replace_editor\":\n if (part.toolInvocation?.args?.command === \"create\") {\n return true;\n }\n break;\n case \"delete_file\":\n case \"change_val_type\":\n return true;\n }\n }\n }\n return false;\n}",[],[452,591,719],"a333d3ca-e1c5-11f0-bcb5-42dde27851f2","BranchSelect.tsx","019b56ed-266a-71a2-b006-10edc2a3bc7b",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"react\";\nimport { useNavigate, useParams } from \"react-router\";\nimport { useBranches } from \"../hooks/useBranches.tsx\";\nimport { useCreateBranch } from \"../hooks/useCreateBranch.tsx\";\n\nconst NEW_BRANCH_VAL = \"__NEW_BRANCH__\";\n\nexport function BranchSelect() {\n const { projectId, branchId } = useParams() as {\n projectId: string;\n branchId: string;\n };\n const navigate = useNavigate();\n const branches = useBranches(projectId);\n const createBranch = useCreateBranch(projectId);\n\n const branch = useMemo(() => {\n if (!branchId) return \"main\";\n if (!branches.data) return \"\";\n const b = branches.data.find((b) => b.id === branchId);\n return b?.name ?? \"main\";\n }, [branchId, branches.data]);\n\n const createBranchPrompt = () => {\n const branchName = window.prompt(\"Create new branch\");\n if (branchName === null || branchName === \"\") return;\n console.log(\"create branch\", branchName);\n createBranch.createBranch({ name: branchName }).then((res) => {\n if (res.error) {\n window.alert(res.error);\n return;\n }\n branches.refetch();\n if (res?.branch?.id) {\n navigate(`/chat/${projectId}/branch/${res.branch.id}`);\n }\n });\n };\n\n const handleChange = (e) => {\n const name = e.target.value;\n if (name === NEW_BRANCH_VAL) {\n return createBranchPrompt();\n }\n const next = branches.data?.find((b) => b.name === name);\n if (next?.id) {\n navigate(`/chat/${projectId}/branch/${next.id}`);\n }\n };\n\n return (\n <>\n \n Branch\n \n \n {branches.loading && }\n {branches.data?.map((branch) => (\n \n ))}\n \n \n \n );\n}\n",[],[452,591,726],"a333cca4-e1c5-11f0-bcb5-42dde27851f2","App.tsx","019b56ed-266a-71a2-b006-0c0bd71c1248",["D",1766689941035],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { createContext, useState } from \"react\";\nimport { BrowserRouter, Link, Navigate, Outlet, Route, Routes, useLocation } from \"react-router\";\nimport { useLocalStorage } from \"react-use\";\nimport { useUser } from \"../hooks/useUser.tsx\";\nimport { ChatRouteSingleColumn } from \"./ChatRouteSingleColumn.tsx\";\nimport { DebugStyles } from \"./DebugStyles.tsx\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport PurchaseCreditsRoute from \"./PurchaseCreditsRoute.tsx\";\n\nexport const AppContext = createContext({\n audio: false,\n setAudio: () => {},\n user: null,\n});\n\nexport function App() {\n const [audio, setAudio] = useLocalStorage(\"AUDIO\", false);\n const user = useUser();\n\n return (\n \n \n \n }>\n } />\n } />\n } />\n } />\n } />\n \n \n \n \n );\n}",[],[452,591,733],"a3350772-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329],[452,591],"a335ead4-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[307,330,342,344,347,348,349],[452],"a333c524-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b006-064cbae746fe",["D",1766689941035],"import { Hono } from \"npm:hono\";\nimport createBranchApp from \"./routes/create-branch.ts\";\nimport createProjectApp from \"./routes/create-project.ts\";\nimport creditBalanceApp from \"./routes/credit-balance.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 purchaseCreditsApp from \"./routes/purchase-credits.ts\";\nimport sendMessageApp from \"./routes/send-message.ts\";\nimport stripeWebhookApp from \"./routes/stripe-webhook.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(\"/purchase-credits\", purchaseCreditsApp);\napp.route(\"/credit-balance\", creditBalanceApp);\napp.route(\"/stripe-webhook\", stripeWebhookApp);\napp.route(\"/user\", userRoute);\n\n// This is the entry point for HTTP vals\nexport default app.fetch;\n",[],[211,102],"a333bfde-e1c5-11f0-bcb5-42dde27851f2","fileWithLinesNumbers.ts","019b56ed-266a-71a2-b005-fe7b36ebe6d3","019b56ed-266a-71a2-b006-006795b21330",["D",1766689941035],"export default function fileWithLineNumbers(text: string, view_range) {\n const lines = text.split(\"\\n\")\n .map((line, index) => (index + 1) + \": \" + line)\n\n if (view_range) {\n return lines.slice(view_range[0] - 1, view_range[1]).join(\"\\n\")\n }\n \n return lines.join(\"\\n\")\n}",[],[211,475,754],"a333baa2-e1c5-11f0-bcb5-42dde27851f2","calculateCost.tsx","019b56ed-266a-71a2-b005-f8cf224350a8",["D",1766689941035],"// Rates for Claude 4 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}",[],[211,475,762],"a333c3da-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[303,304],[211,475],["D",1766689941035],[],[211,115,78],["D",1766689941035],[],[211,115,90],["D",1766689941035],[],[211,115,96],["D",1766689941035],[],[211,115,102],["D",1766689941035],[],[211,115,108],["D",1766689941035],[],[211,115,113],["D",1766689941035],[296,297,298,299,300,301],[211,115],"a3334f36-e1c5-11f0-bcb5-42dde27851f2","user.ts","019b56ed-266a-71a2-b005-d5a9de245cda","019b56ed-266a-71a2-b005-d8aff53a979b",["D",1766689941035],"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",[],[211,495,794],"a33334ba-e1c5-11f0-bcb5-42dde27851f2","stripe-webhook.ts","019b56ed-266a-71a2-b005-d00033c74314",["D",1766689941035],"import { discordWebhook } from \"https://esm.town/v/stevekrouse/discordWebhook/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport Stripe from \"npm:stripe\";\nimport { getEnvVarName } from \"../../shared/is-prod-branch.ts\";\nimport { addCredits } from \"../database/queries.tsx\";\n\nconst app = new Hono();\n\nconst stripe = new Stripe(Deno.env.get(getEnvVarName(\"STRIPE_SECRET_KEY\")) as string, {\n apiVersion: \"2024-06-20\",\n});\n\napp.post(\"/\", async (c) => {\n const body = await c.req.text();\n // Get raw body as bytes for signature verification\n // const rawBody = await c.req.arrayBuffer();\n // const body = new TextDecoder().decode(rawBody);\n const signature = c.req.header(\"Stripe-Signature\");\n\n if (!signature) {\n console.error(\"Missing Stripe signature\");\n return c.json({ error: \"Missing signature\" }, 400);\n }\n\n let event: Stripe.Event;\n\n try {\n // Verify webhook signature for security\n event = await stripe.webhooks.constructEventAsync(\n body,\n signature,\n Deno.env.get(getEnvVarName(\"STRIPE_WEBHOOK_SECRET\"))!,\n );\n } catch (err) {\n console.error(\"Webhook signature verification failed:\", err);\n return c.json({ error: \"Invalid signature\" }, 400);\n }\n\n if (event.type === \"checkout.session.completed\" && event.data.object.metadata.source === \"townie_credits\") {\n console.log(\"checkout.session.completed event: \", JSON.stringify(event, null, 2));\n\n const session = event.data.object as Stripe.Checkout.Session;\n\n if (!session.client_reference_id) {\n console.error(\"No client reference id found on checkout session:\", session.id);\n return c.json({ error: \"Missing payment intent\" }, 400);\n }\n\n try {\n // TODO: could not get the SDK working but would be great to use this instead of the fetch\n // const paymentIntent: Stripe.PaymentIntent = await stripe.paymentIntents.retrieve(session.client_reference_id);\n\n const response = await fetch(`https://api.stripe.com/v1/payment_intents/${session.client_reference_id}`, {\n method: \"GET\",\n headers: {\n \"Authorization\": `Bearer ${Deno.env.get(getEnvVarName(\"STRIPE_SECRET_KEY\"))}`,\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to retrieve payment intent: ${response.status} ${response.statusText}`);\n }\n\n const paymentIntent = await response.json() as Stripe.PaymentIntent;\n\n const userId = paymentIntent.metadata.user_id;\n const username = paymentIntent.metadata.username || \"unknown\";\n const purchaseSource = paymentIntent.metadata.purchase_source || \"unknown\";\n\n if (!userId) {\n console.error(\"Missing user_id in payment intent metadata:\", paymentIntent.id);\n return c.json({ error: \"Missing user metadata\" }, 400);\n }\n\n // Convert cents to dollars\n const dollars = paymentIntent.amount / 100;\n\n // Add credits to user account\n await addCredits(\n userId,\n dollars,\n `Stripe purchase - ${username} - ${purchaseSource}`,\n paymentIntent.id,\n );\n\n console.log(`Added $${dollars} credits to user ${userId} (${username}) from payment ${paymentIntent.id}`);\n\n let editLink = `([edit](${sourceURL(Error())}))`;\n await discordWebhook({\n url: Deno.env.get(\"DISCORD_WEBHOOK_URL\")!,\n content: `🤖💸 [@${username}](https://val.town/u/${username}) bought $${dollars} Townie credits ${editLink}`,\n flags: [\"SUPPRESS_EMBEDS\"],\n });\n\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Failed to process checkout.session.completed:\", error);\n // Throw error to ensure webhook retry - this is critical for credit delivery\n throw new Error(`Failed to add credits for session ${session.id}: ${error.message}`);\n }\n }\n\n console.log(\"Unhandled event type:\", JSON.stringify(event, null, 2));\n});\n\n// Helper function to get a link to the current line\n// If useful, we should move to https://www.val.town/x/std/utils\nfunction sourceURL(e: Error) {\n const match = e.stack?.match(/at\\s+(https:\\/\\/esm\\.town\\/v\\/[^:]+):(\\d+):(\\d+)/);\n if (!match) return null;\n\n const [_, url, line] = match;\n return url.replace(\n /https:\\/\\/esm\\.town\\/v\\/([^\\/]+)\\/([^@]+)@(\\d+)-([^\\/]+)\\/(.*)/,\n \"https://www.val.town/x/$1/$2/branch/$4/code/$5\",\n ) + `#L${line}`;\n}\n\nexport default app;",[],[211,495,802],"a3330abc-e1c5-11f0-bcb5-42dde27851f2","send-message.ts","019b56ed-266a-71a2-b005-cf444a00985a",["D",1766689941035],"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { createAnthropic } from \"npm:@ai-sdk/anthropic@1.2.12\";\nimport {\n convertToCoreMessages,\n type CoreUserMessage,\n streamText,\n} from \"npm:ai@4.3.19\";\nimport { Hono } from \"npm:hono\";\nimport { PostHog } from \"npm:posthog-node\";\nimport { withTracing } from \"npm:@posthog/ai@4.4.0\";\nimport {\n finishTrackingUsage,\n getUser,\n hasInsufficientCredits,\n insertInferenceCall,\n startTrackingUsage,\n} from \"../database/queries.tsx\";\nimport {\n makeChangeValTypeTool,\n makeFetchTool,\n makeTextEditorTool,\n makeTracesTool,\n} from \"../tools/index.ts\";\n\nconst app = new Hono();\n\n// Load system prompts\nconst systemPromptPromise = readFile(\n \"/prompts/system_prompt.txt\",\n import.meta.url,\n);\nconst openTowniePromptAdditionsPromise = readFile(\n \"/prompts/open_townie_prompt_additions.txt\",\n import.meta.url,\n);\n\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\") as string | undefined;\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const {\n messages,\n project,\n branchId,\n selectedFiles,\n images,\n } = await c.req.json();\n\n const apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\");\n\n if (await hasInsufficientCredits({ bearerToken })) {\n return Response.json({\n error: \"Insufficient credits to continue.\",\n action: \"purchase_credits\",\n message: \"Purchase credits to keep using Townie.\",\n purchaseUrl: \"/purchase-credits\",\n }, { status: 403 });\n }\n\n const model = \"claude-sonnet-4-20250514\";\n\n const user = await getUser(bearerToken);\n\n const rowid = await startTrackingUsage({\n our_api_token: true,\n bearerToken,\n branch_id: branchId,\n val_id: project.id,\n num_images: images?.length || 0,\n model,\n });\n\n const anthropic = createAnthropic({ apiKey });\n let tracedModel = anthropic(model); \n \n if (Deno.env.get(\"POSTHOG_PROJECT_API_KEY\")) {\n const phClient = new PostHog(Deno.env.get(\"POSTHOG_PROJECT_API_KEY\"), {\n host: \"https://us.i.posthog.com\",\n });\n\n // Generate trace ID for this conversation\n const traceId = `townie_${rowid}_${Date.now()}`;\n\n // Wrap the Anthropic model with PostHog tracing\n tracedModel = withTracing(anthropic(model), phClient, {\n posthogDistinctId: user.id,\n posthogTraceId: traceId,\n posthogProperties: {\n townie_project_id: project.id,\n townie_branch_id: branchId,\n townie_usage_id: rowid,\n townie_num_images: images?.length || 0,\n townie_selected_files_count: selectedFiles?.length || 0,\n },\n posthogGroups: {\n project: project.id,\n user: user?.id || `anonymous_${rowid}`,\n },\n });\n }\n\n const 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 // Add cache control to the last message\n const 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 try {\n const result = streamText({\n model: tracedModel,\n messages: coreMessages,\n system: system + \"\\n\\n\" + open_townie_prompt_additions,\n tools: {\n str_replace_editor: makeTextEditorTool({\n bearerToken,\n project,\n branch_id: branchId,\n }),\n change_val_type: makeChangeValTypeTool({\n bearerToken,\n project,\n branch_id: branchId,\n }),\n fetch: makeFetchTool({ bearerToken, project, branch_id: branchId }),\n requests: makeTracesTool({ bearerToken, project, branch_id: branchId }),\n },\n // Steve increased maxSteps from 20 to 40 on Jun 25, 2025 because folks were complaining\n // about Townie stopping for no reason. The ideal interface is to have a \"continue?\" button\n // after a certain number of steps, but I think this is a quick fix, but we should see if it\n // causes any other issues\n maxSteps: 40,\n maxTokens: 4_096 * 10,\n abortSignal: c.req.raw.signal,\n onStepFinish: async (result: any) => {\n await insertInferenceCall({\n user_id: user.id,\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:\n result.providerMetadata.anthropic.cacheReadInputTokens,\n cache_write_tokens:\n result.providerMetadata.anthropic.cacheCreationInputTokens,\n });\n\n const stillHasCredits =\n !(await hasInsufficientCredits({ bearerToken })); // Check for at least 1 cent\n if (!stillHasCredits) {\n throw new Error(\"insufficient_credits\");\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:\n result.providerMetadata.anthropic.cacheReadInputTokens,\n cache_write_tokens:\n 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 } catch (error) {\n console.log(\"Caught error in streamText:\", error);\n throw error;\n }\n});\n\nexport default app;",[],[211,495,809],"a332f8ba-e1c5-11f0-bcb5-42dde27851f2","purchase-credits.ts","019b56ed-266a-71a2-b005-c8defbe2bf39",["D",1766689941035],"import { Hono } from \"npm:hono\";\nimport Stripe from \"npm:stripe\";\nimport { getUser } from \"../database/queries.tsx\";\nimport { getEnvVarName } from \"../../shared/is-prod-branch.ts\";\n\nconst app = new Hono();\n\n// Check for required environment variables\nconst stripeSecretKey = Deno.env.get(getEnvVarName(\"STRIPE_SECRET_KEY\"));\nif (!stripeSecretKey) {\n console.error(`${getEnvVarName(\"STRIPE_SECRET_KEY\")} environment variable is not set`);\n}\n\nconst stripe = stripeSecretKey\n ? new Stripe(stripeSecretKey, {\n apiVersion: \"2024-04-10\",\n })\n : null;\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n\n const { amount, source } = await c.req.json();\n\n // Validate amount: $1 minimum, $100 maximum\n if (!amount || typeof amount !== \"number\" || amount < 1 || amount > 100) {\n return c.json({\n error: \"Invalid amount. Must be between $1 and $100.\",\n }, 400);\n }\n\n try {\n // Check if Stripe is configured\n if (!stripe) {\n return c.json({\n error: \"Payment system not configured. Please contact support.\",\n }, 503);\n }\n\n const user = await getUser(bearerToken as string);\n if (!user || !user.id || !user.username) {\n return c.json({ error: \"Invalid user data\" }, 400);\n }\n\n // Create Stripe payment intent\n // const paymentIntent = await stripe.paymentIntents.create({\n // amount: Math.round(amount * 100), // Convert dollars to cents\n // currency: \"usd\",\n // automatic_payment_methods: {\n // enabled: true,\n // },\n // metadata: {\n // // Store user info for webhook processing\n // user_id: user.id,\n // username: user.username,\n // purchase_source: source || \"api\", // e.g., \"insufficient_credits\", \"settings_page\"\n // },\n // description: `Townie credits purchase - $${amount} for ${user.username}`,\n // api_key: stripeSecretKey,\n // });\n\n const params = new URLSearchParams({\n amount: Math.round(amount * 100).toString(),\n currency: \"usd\",\n \"automatic_payment_methods[enabled]\": \"true\",\n \"metadata[user_id]\": user.id,\n \"metadata[username]\": user.username,\n \"metadata[purchase_source]\": source || \"api\",\n description: `Townie credits purchase - $${amount} for ${user.username}`,\n });\n\n const response = await fetch(\"https://api.stripe.com/v1/payment_intents\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${stripeSecretKey}`,\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n \"Stripe-Version\": \"2024-04-10\",\n },\n body: params,\n });\n const paymentIntent = await response.json();\n if (!response.ok) {\n throw new Error(`Stripe API error: ${paymentIntent.error?.message || \"Unknown error\"}`);\n }\n\n return c.json({\n paymentIntentId: paymentIntent.id,\n clientSecret: paymentIntent.client_secret,\n amount: amount,\n });\n } catch (error) {\n return c.json({\n error: `Failed to create payment. Please try again.`,\n }, 500);\n }\n});\n\nexport default app;",[],[211,495,816],"a332f4be-e1c5-11f0-bcb5-42dde27851f2","projects-loader.ts","019b56ed-266a-71a2-b005-c63d50fecfb4",["D",1766689941035],"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",[],[211,495,823],"a332f04a-e1c5-11f0-bcb5-42dde27851f2","project.ts","019b56ed-266a-71a2-b005-c0f1c72cbe98",["D",1766689941035],"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",[],[211,495,830],"a332ea28-e1c5-11f0-bcb5-42dde27851f2","project-files.ts","019b56ed-266a-71a2-b005-bf0ed3a545d2",["D",1766689941035],"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",[],[211,495,837],"a332e500-e1c5-11f0-bcb5-42dde27851f2","project-branches.ts","019b56ed-266a-71a2-b005-bb87c0fb4b00",["D",1766689941035],"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",[],[211,495,844],"a332de52-e1c5-11f0-bcb5-42dde27851f2","credit-balance.ts","019b56ed-266a-71a2-b005-b4e3e5cbcb6d",["D",1766689941035],"import { Hono } from \"npm:hono\";\nimport { getCreditBalance, getUser } from \"../database/queries.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n\n try {\n const user = await getUser(bearerToken);\n const balance = await getCreditBalance(user.id);\n\n return c.json({\n balance: balance,\n userId: user.id,\n username: user.username,\n });\n } catch (error) {\n console.error(\"Failed to get credit balance:\", error);\n console.log(\n \"This error is likely due to polling happening here: https://www.val.town/x/valdottown/Townie/code/frontend/components/ChatRouteSingleColumn.tsx#L96-117\",\n );\n console.log(\n \"Because the token has expired, ticket here: https://github.com/val-town/val.town/issues/9359\",\n );\n return c.json({\n error: \"Failed to get balance. Please try again.\",\n }, 500);\n }\n});\n\nexport default app;",[],[211,495,851],"a332da06-e1c5-11f0-bcb5-42dde27851f2","create-project.ts","019b56ed-266a-71a2-b005-b198895aed4b",["D",1766689941035],"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",[],[211,495,858],"a332d268-e1c5-11f0-bcb5-42dde27851f2","create-branch.ts","019b56ed-266a-71a2-b005-ad67f9016f66",["D",1766689941035],"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",[],[211,495,865],"a3335396-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[284,285,286,287,288,289,290,291,292,293,294],[211,495],"a332cdd6-e1c5-11f0-bcb5-42dde27851f2","shell.tsx","019b56ed-266a-71a2-b005-a651b40f2c61","019b56ed-266a-71a2-b005-ab69f1f14113",["D",1766689941035],"import { addCredits } from \"./queries.tsx\";\n\nconst userId = \"01998de1-b21e-72cb-82dc-21763da86a8b\";\nconst note = \"charmaine gave $10 credits to jeffrey young\";\nconst numberOfCredits = 10;\nconst result = await addCredits(\n userId,\n numberOfCredits,\n note,\n `${crypto.randomUUID()}_vt_internal`,\n);\nconsole.log(result);",[],[211,883,876],"database","a332bed6-e1c5-11f0-bcb5-42dde27851f2","schema.tsx","019b56ed-266a-71a2-b005-a2eabe02ecc8",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\n\nexport const USAGE_TABLE = \"townie_usage\";\nexport const INFERENCE_CALLS_TABLE = \"townie_inference_calls_2\";\nexport const CREDIT_ADDITIONS_TABLE = \"townie_credit_additions\";\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(prefix: string = \"\") {\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.batch([\n `CREATE TABLE IF NOT EXISTS ${prefix}${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 `CREATE TABLE IF NOT EXISTS ${prefix}${INFERENCE_CALLS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id TEXT NOT NULL,\n usage_id INTEGER NOT NULL REFERENCES ${prefix}${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 `CREATE TABLE IF NOT EXISTS ${prefix}${CREDIT_ADDITIONS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id TEXT NOT NULL,\n created_at INTEGER NOT NULL,\n stripe_payment_intent_id TEXT,\n amount REAL NOT NULL,\n note TEXT\n )`,\n `CREATE INDEX IF NOT EXISTS idx_${prefix}townie_credit_additions_user_id ON ${prefix}${CREDIT_ADDITIONS_TABLE}(user_id)`,\n `CREATE INDEX IF NOT EXISTS idx_${prefix}townie_inference_calls_user_id ON ${prefix}${INFERENCE_CALLS_TABLE}(user_id)`,\n `CREATE INDEX IF NOT EXISTS idx_${prefix}townie_inference_calls_usage_id ON ${prefix}${INFERENCE_CALLS_TABLE}(usage_id)`,\n `CREATE INDEX IF NOT EXISTS idx_${prefix}${CREDIT_ADDITIONS_TABLE}_stripe_payment_intent_id ON ${prefix}${CREDIT_ADDITIONS_TABLE}(stripe_payment_intent_id)`,\n ]);\n}\n\nexport async function deleteTables(prefix: string) {\n await sqlite.execute(`DROP TABLE IF EXISTS ${prefix}${INFERENCE_CALLS_TABLE}`);\n await sqlite.execute(`DROP TABLE IF EXISTS ${prefix}${USAGE_TABLE}`);\n await sqlite.execute(`DROP TABLE IF EXISTS ${prefix}${CREDIT_ADDITIONS_TABLE}`);\n await sqlite.execute(`DROP INDEX IF EXISTS idx_${prefix}townie_credit_additions_user_id`);\n await sqlite.execute(`DROP INDEX IF EXISTS idx_${prefix}townie_inference_calls_user_id`);\n await sqlite.execute(`DROP INDEX IF EXISTS idx_${prefix}townie_inference_calls_usage_id`);\n}\n\nexport async function migrateTables(prefix?: string) {\n await createTables(prefix);\n}\n\n// migrateTables();",[],[211,883,885],"a332afcc-e1c5-11f0-bcb5-42dde27851f2","queries_test.tsx","019b56ed-266a-71a2-b005-9c84137d2ff6",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport {\n addCredits,\n calculatePartialUsageFromInferenceCalls,\n finishTrackingUsage,\n getCreditBalance,\n insertInferenceCall,\n} from \"./queries.tsx\";\nimport { deleteTables, migrateTables } from \"./schema.tsx\";\nimport {\n CREDIT_ADDITIONS_TABLE,\n INFERENCE_CALLS_TABLE,\n USAGE_TABLE,\n} from \"./schema.tsx\";\n\nasync function runTests() {\n await deleteTables(\"test_\");\n await migrateTables(\"test_\");\n\n const userId = crypto.randomUUID();\n const val_id = crypto.randomUUID();\n const branch_id = crypto.randomUUID();\n\n await addCredits(userId, 5, \"test note\", null, \"test_\");\n await addCredits(userId, 2, \"test note\", null, \"test_\");\n await addCredits(userId, 10, \"test note\", null, \"test_\");\n const balance = await getCreditBalance(userId, \"test_\");\n if (balance !== 17) {\n throw new Error(\"Test failed\");\n }\n\n const { lastInsertRowid: usage_id } = await sqlite.execute(\n `INSERT INTO test_${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 userId,\n \"test_user\",\n Date.now(),\n val_id,\n branch_id,\n \"some model\",\n 1,\n 0,\n ],\n );\n\n await insertInferenceCall({\n usage_id,\n input_tokens: 10000,\n output_tokens: 10000,\n step_type: \"x\",\n finish_reason: \"x\",\n user_id: userId,\n tablePrefix: \"test_\",\n });\n\n await insertInferenceCall({\n usage_id,\n input_tokens: 10000,\n output_tokens: 10000,\n step_type: \"x\",\n finish_reason: \"x\",\n user_id: userId,\n tablePrefix: \"test_\",\n });\n\n const result = await calculatePartialUsageFromInferenceCalls(\n usage_id,\n \"test_\",\n );\n\n await finishTrackingUsage({\n rowid: usage_id,\n finish_reason: \"test-finished\",\n input_tokens: result.input_tokens,\n output_tokens: result.output_tokens,\n cache_read_tokens: result.cache_read_tokens,\n cache_write_tokens: result.cache_write_tokens,\n tablePrefix: \"test_\",\n });\n\n if (await getCreditBalance(userId, \"test_\") !== 16.46) {\n throw new Error(\"Test failed\");\n }\n\n await addCredits(\n userId,\n -10,\n \"test note\",\n \"stripe_payment_intent_id\",\n \"test_\",\n );\n if (await getCreditBalance(userId, \"test_\") !== 6.46) {\n throw new Error(\"Test failed\");\n }\n\n // Checks that the same payment intent id doesn't add credits again\n await addCredits(\n userId,\n 10,\n \"test note\",\n \"stripe_payment_intent_id\",\n \"test_\",\n );\n if (await getCreditBalance(userId, \"test_\") !== 6.46) { // the balance should be the same\n throw new Error(\"Test failed\");\n }\n}\n\nawait runTests();",[],[211,883,892],"a33291ae-e1c5-11f0-bcb5-42dde27851f2","queries.tsx","019b56ed-266a-71a2-b005-9a35e90cf1c3",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { calculateCost } from \"../utils/calculateCost.tsx\";\nimport {\n CREDIT_ADDITIONS_TABLE,\n INFERENCE_CALLS_TABLE,\n USAGE_TABLE,\n} from \"./schema.tsx\";\n\nconst PRICE_MULTIPLIER = 1.5;\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\n// Get user's current credit balance\nexport async function getCreditBalance(\n userId: string,\n tablePrefix: string = \"\",\n): Promise {\n const result = await sqlite.execute(\n `\n SELECT \n COALESCE(additions.total, 0) - COALESCE(usage.total, 0) as balance\n FROM \n (SELECT SUM(amount) as total FROM ${tablePrefix}${CREDIT_ADDITIONS_TABLE} WHERE user_id = ?) additions,\n (SELECT SUM(price * ${PRICE_MULTIPLIER}) as total FROM ${tablePrefix}${INFERENCE_CALLS_TABLE} WHERE user_id = ?) usage\n `,\n [userId, userId],\n );\n\n return result.rows[0][0] || 0;\n}\n\n// Check if user has insufficient credits for estimated cost\nexport async function hasInsufficientCredits({\n bearerToken,\n estimatedCost = 0.01,\n tablePrefix = \"\",\n}: {\n bearerToken: string;\n estimatedCost?: number;\n tablePrefix: string;\n}): Promise {\n const user = await getUser(bearerToken);\n const balance = await getCreditBalance(user.id, tablePrefix);\n\n return balance < estimatedCost;\n}\n\n// Add credits to user account\nexport async function addCredits(\n userId: string,\n amount: number,\n note: string,\n stripePaymentIntentId?: string | null,\n tablePrefix = \"\",\n) {\n const result = await sqlite.execute(\n `\n INSERT INTO ${tablePrefix}${CREDIT_ADDITIONS_TABLE} (user_id, created_at, amount, note, stripe_payment_intent_id)\n SELECT ?, ?, ?, ?, ?\n WHERE NOT EXISTS (\n SELECT 1 FROM ${tablePrefix}${CREDIT_ADDITIONS_TABLE} \n WHERE stripe_payment_intent_id = ? AND stripe_payment_intent_id IS NOT NULL\n )\n `,\n [\n userId,\n Date.now(),\n amount,\n note,\n stripePaymentIntentId || null,\n stripePaymentIntentId,\n ],\n );\n\n if (result.rowsAffected === 0 && stripePaymentIntentId) {\n console.error(\n \"Tried to add credits but they already exist with this stripe_payment_intent_id:\",\n stripePaymentIntentId,\n );\n }\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 user_id,\n tablePrefix = \"\",\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 user_id: string;\n tablePrefix: 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 ${tablePrefix}${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 user_id\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 user_id,\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 tablePrefix = \"\",\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 tablePrefix?: string;\n}) {\n const user = await getUser(bearerToken);\n const { lastInsertRowid } = await sqlite.execute(\n `INSERT INTO ${tablePrefix}${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 calculatePartialUsageFromInferenceCalls(\n usageId: number,\n tablePrefix: string = \"\",\n) {\n const result = await sqlite.execute(\n `\n SELECT \n SUM(input_tokens) as total_input_tokens,\n SUM(output_tokens) as total_output_tokens,\n SUM(cache_read_tokens) as total_cache_read_tokens,\n SUM(cache_write_tokens) as total_cache_write_tokens\n FROM ${tablePrefix}${INFERENCE_CALLS_TABLE}\n WHERE usage_id = ?\n `,\n [usageId],\n );\n\n const row = result.rows[0];\n if (!row || !row.total_input_tokens) {\n return null; // No inference calls found\n }\n\n return {\n input_tokens: row.total_input_tokens || 0,\n output_tokens: row.total_output_tokens || 0,\n cache_read_tokens: row.total_cache_read_tokens || 0,\n cache_write_tokens: row.total_cache_write_tokens || 0,\n };\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 tablePrefix = \"\",\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 tablePrefix: string;\n}) {\n const price = calculateCost({\n input_tokens: input_tokens || 0,\n output_tokens: output_tokens || 0,\n cache_read_tokens,\n cache_write_tokens,\n });\n\n try {\n await sqlite.execute(\n `UPDATE ${tablePrefix}${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}",[],[211,883,899],"a3327d54-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b005-912a39744a00","019b56ed-266a-71a2-b005-97a8314942e7",["D",1766689941035],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { getCreditAdditions } from \"./api/credit-additions.ts\";\nimport { handleApiRequest } from \"./api/index.ts\";\nimport { getInferenceCalls } from \"./api/inference-calls.ts\";\nimport {\n getInferenceCallsForRequest,\n getInferenceTotalsForRequest,\n getRequestById,\n getRequests,\n} from \"./api/requests.ts\";\nimport { getUserSummary } from \"./api/user-summary.ts\";\nimport { getValSummary } from \"./api/val-summary.ts\";\nimport { basicAuthMiddleware } from \"./auth.ts\";\nimport { renderCreditAdditions } from \"./views/credit-additions.ts\";\nimport { renderDashboard } from \"./views/dashboard.ts\";\nimport { renderInferenceCalls } from \"./views/inference-calls.ts\";\nimport { renderRequests } from \"./views/requests.ts\";\nimport { renderUsageDetail } from \"./views/usage-detail.ts\";\nimport { renderUserDetail } from \"./views/user-detail.ts\";\nimport { renderValDetail } from \"./views/val-detail.ts\";\n\nconst app = new Hono();\n\n// Authentication middleware for all routes\napp.use(\"*\", async (c, next) => {\n const authResponse = await basicAuthMiddleware(c.req.raw);\n if (authResponse) {\n return authResponse;\n }\n await next();\n});\n\n// API routes\napp.all(\"/api/*\", async (c) => {\n return handleApiRequest(c.req.raw);\n});\n\n// Dashboard home page\napp.get(\"/\", async (c) => {\n const userData = await getUserSummary();\n return c.html(renderDashboard(userData));\n});\n\n// User detail page\napp.get(\"/user/:userId\", async (c) => {\n const userId = c.req.param(\"userId\");\n if (!userId) {\n return c.text(\"User ID is required\", 400);\n }\n\n const userData = await getUserSummary(userId);\n\n // Get all requests for this user\n const url = new URL(c.req.url);\n url.searchParams.set(\"user_id\", userId);\n const userRequests = await getRequests(url);\n\n // Get credit additions for this user\n const creditUrl = new URL(c.req.url);\n creditUrl.searchParams.set(\"user_id\", userId);\n const userCreditAdditions = await getCreditAdditions(creditUrl);\n\n return c.html(renderUserDetail(userData, userId, userRequests.data, userCreditAdditions.data));\n});\n\n// Usage/request detail page\napp.get(\"/usage/:usageId\", async (c) => {\n const usageId = c.req.param(\"usageId\");\n if (!usageId || isNaN(parseInt(usageId))) {\n return c.text(\"Valid Usage ID is required\", 400);\n }\n\n // Get usage details\n const usage = await getRequestById(usageId);\n if (!usage) {\n return c.text(\"Usage request not found\", 404);\n }\n\n // Get inference calls for this usage\n const inferenceCalls = await getInferenceCallsForRequest(usageId);\n const inferenceTotals = await getInferenceTotalsForRequest(usageId);\n\n return c.html(renderUsageDetail(usage, inferenceCalls, inferenceTotals));\n});\n\n// Val detail page\napp.get(\"/val/:valId\", async (c) => {\n const valId = c.req.param(\"valId\");\n if (!valId) {\n return c.text(\"Val ID is required\", 400);\n }\n\n // Get val summary and requests\n const valData = await getValSummary(valId);\n\n return c.html(renderValDetail(valId, valData.summary, valData.requests));\n});\n\n// Requests page\napp.get(\"/requests\", async (c) => {\n const url = new URL(c.req.url);\n const requestsData = await getRequests(url);\n return c.html(renderRequests(\n requestsData.data,\n requestsData.pagination,\n url.toString(),\n requestsData.filtered,\n ));\n});\n\n// Inference calls page\napp.get(\"/inference\", async (c) => {\n const url = new URL(c.req.url);\n const inferenceData = await getInferenceCalls(url);\n return c.html(renderInferenceCalls(\n inferenceData.data,\n inferenceData.pagination,\n url.toString(),\n inferenceData.filtered,\n ));\n});\n\n// Credit additions page\napp.get(\"/credit-additions\", async (c) => {\n const url = new URL(c.req.url);\n const creditData = await getCreditAdditions(url);\n return c.html(renderCreditAdditions(\n creditData.data,\n creditData.pagination,\n url.toString(),\n creditData.filtered,\n creditData.summary,\n ));\n});\n\n// 404 handler\napp.notFound((c) => {\n return c.text(\"Admin page not found\", 404);\n});\n\nexport default app;",[],[211,883,912,102],"usage-dashboard","a33274a8-e1c5-11f0-bcb5-42dde27851f2","auth.ts","019b56ed-266a-71a2-b005-8eceb474862c",["D",1766689941035],"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}",[],[211,883,912,914],"a332679c-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b005-88059ea89950",["D",1766689941035],"# 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",[],[211,883,912,384],"a33252de-e1c5-11f0-bcb5-42dde27851f2","val-detail.ts","019b56ed-266a-71a2-b005-83da67c80b3e","019b56ed-266a-71a2-b005-85c04f5205e6",["D",1766689941035],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate, formatBoolean } from \"../utils/formatters.ts\";\n\ninterface UsageRequest {\n id: number;\n user_id: string;\n username: string;\n timestamp: number;\n finish_timestamp?: number;\n val_id: string;\n branch_id: string | null;\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\ninterface ValSummary {\n val_id: 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 inference_price: number;\n original_price?: number;\n total_images: number;\n used_inference_data?: boolean;\n inference_price_primary?: boolean;\n}\n\nexport function renderValDetail(valId: string, summary: ValSummary, requests: UsageRequest[] = []): string {\n // Generate the content\n const content = `\n

Val Details: ${valId}

\n ← Back to all users\n

\n \n

Total Requests: ${formatNumber(summary.request_count)}

Total Price: ${formatPrice(summary.total_price)}\n ${summary.used_inference_data ? 'I' : ''}\n ${summary.inference_price_primary && summary.original_price !== undefined && Math.abs(summary.original_price - summary.total_price) > 0.0001 ? \n `*` : \n ''}\n

Inference Calls Price: ${formatPrice(summary.inference_price)}

\n \n

Usage Summary

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Input Tokens	Output Tokens	Cache Read	Cache Write	Total Price	Images
${formatNumber(summary.total_input_tokens)}	${formatNumber(summary.total_output_tokens)}	${formatNumber(summary.total_cache_read_tokens)}	${formatNumber(summary.total_cache_write_tokens)}	${formatPrice(summary.total_price)}	${formatNumber(summary.total_images)}

\n \n

Val Requests (${requests.length})

\n ${requests.length > 0 ? `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${requests.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	User	Timestamp	Branch ID	Input	Output	Cache Read	Cache Write	Model	Price	Finish	Images
${row.id}	${row.username}	${formatDate(row.timestamp)}	${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)}

\n ` : '

No requests found for this val.

'}\n

\n `;\n \n return renderLayout(content, {\n title: `Usage Dashboard - Val ${valId}`,\n activeTab: \"val\"\n });\n}",[],[211,883,912,934,927],"views","a332389e-e1c5-11f0-bcb5-42dde27851f2","user-detail.ts","019b56ed-266a-71a2-b005-7d4ef08af306",["D",1766689941035],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate, formatBoolean } from \"../utils/formatters.ts\";\nimport { CreditAddition } from \"../api/credit-additions.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 inference_price: number;\n total_images: number;\n used_inference_data?: boolean;\n}\n\ninterface UsageRequest {\n id: number;\n user_id: string;\n username: string;\n timestamp: number;\n finish_timestamp?: number;\n val_id: string;\n branch_id: string | null;\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\nexport function renderUserDetail(data: UserSummaryRow[], userId: string, requests: UsageRequest[] = [], creditAdditions: CreditAddition[] = []): string {\n // User data should only have one row if we're filtering by user ID\n const userData = data[0] || {\n user_id: userId,\n username: \"Unknown User\",\n request_count: 0,\n total_input_tokens: 0,\n total_output_tokens: 0,\n total_cache_read_tokens: 0,\n total_cache_write_tokens: 0,\n total_price: 0,\n inference_price: 0,\n total_images: 0\n };\n \n // Generate the content\n const content = `\n

User Details: ${userData.username} (${userData.user_id})

\n ← Back to all users\n

\n \n

Total Requests: ${formatNumber(userData.request_count)}

Total Price: ${formatPrice(userData.total_price)}

Total Inference Price: ${formatPrice(userData.inference_price || 0)}

Total Credit Additions: ${formatPrice(creditAdditions.reduce((sum, item) => sum + item.amount, 0))}

\n \n

Usage Summary

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Input Tokens	Output Tokens	Cache Read	Cache Write	Total Price	Inference Price	Images
${formatNumber(userData.total_input_tokens)} ${userData.used_inference_data ? 'I' : ''}	${formatNumber(userData.total_output_tokens)} ${userData.used_inference_data ? 'I' : ''}	${formatNumber(userData.total_cache_read_tokens)} ${userData.used_inference_data ? 'I' : ''}	${formatNumber(userData.total_cache_write_tokens)} ${userData.used_inference_data ? 'I' : ''}	${formatPrice(userData.total_price)} ${userData.used_inference_data ? 'I' : ''}	${formatPrice(userData.inference_price \|\| 0)}	${formatNumber(userData.total_images)}

\n \n

Credit Additions

\n ${creditAdditions.length > 0 ? `\n \n \n \n \n \n \n \n \n \n \n \n ${creditAdditions.map(row => `\n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	Date	Amount	Note	Stripe Payment ID
${row.id}	${formatDate(row.created_at)}	${formatPrice(row.amount)}	${row.note \|\| \"-\"}	${row.stripe_payment_intent_id \|\| \"-\"}

\n ` : '

No credit additions found for this user.

'}\n \n

User Requests (${requests.length})

\n ${requests.length > 0 ? `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${requests.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	Timestamp	Val ID	Branch ID	Input	Output	Cache Read	Cache Write	Model	Price	Finish	Images
${row.id}	${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)}

\n ` : '

No requests found for this user.

'}\n \n

\n View All Inference Calls\n

\n `;\n \n return renderLayout(content, {\n title: `Usage Dashboard - ${userData.username}`,\n activeTab: \"user\"\n });\n}",[],[211,883,912,934,936],"a33219d6-e1c5-11f0-bcb5-42dde27851f2","usage-detail.ts","019b56ed-266a-71a2-b005-79c5712449f3",["D",1766689941035],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate, formatBoolean } from \"../utils/formatters.ts\";\n\ninterface UsageDetail {\n id: number;\n user_id: string;\n username: string;\n timestamp: number;\n finish_timestamp?: number;\n val_id: string;\n branch_id: string | null;\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\ninterface InferenceCall {\n id: number;\n usage_id: number;\n timestamp: number;\n input_tokens?: number;\n output_tokens?: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n price?: number;\n step_type?: string;\n finish_reason?: string;\n}\n\ninterface InferenceTotals {\n input_tokens: number;\n output_tokens: number;\n cache_read_tokens: number;\n cache_write_tokens: number;\n price: number;\n count: number;\n}\n\nexport function renderUsageDetail(\n usage: UsageDetail, \n inferenceCalls: InferenceCall[],\n inferenceTotals: InferenceTotals | null\n): string {\n // Calculate duration if both timestamps are available\n let duration = '';\n if (usage.timestamp && usage.finish_timestamp) {\n const durationMs = usage.finish_timestamp - usage.timestamp;\n const seconds = Math.floor(durationMs / 1000);\n if (seconds < 60) {\n duration = `${seconds} seconds`;\n } else {\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n duration = `${minutes} min ${remainingSeconds} sec`;\n }\n }\n \n // Check for discrepancies between usage record and inference calls\n const hasDiscrepancy = inferenceTotals && (\n (usage.input_tokens !== inferenceTotals.input_tokens && usage.input_tokens !== undefined) ||\n (usage.output_tokens !== inferenceTotals.output_tokens && usage.output_tokens !== undefined) ||\n (usage.cache_read_tokens !== inferenceTotals.cache_read_tokens && usage.cache_read_tokens !== undefined) ||\n (usage.cache_write_tokens !== inferenceTotals.cache_write_tokens && usage.cache_write_tokens !== undefined) ||\n (usage.price !== inferenceTotals.price && usage.price !== undefined)\n );\n \n // Generate the content\n const content = `\n

Usage Request Details

\n ← Back to all requests\n

\n \n

Request Summary

\n ID: ${usage.id}\n

\n User: ${usage.username}\n

\n Val ID: ${usage.val_id}\n

\n Branch ID: ${usage.branch_id || 'main'}\n

\n Start Time: ${formatDate(usage.timestamp)}\n

\n End Time: ${usage.finish_timestamp ? formatDate(usage.finish_timestamp) : 'N/A'}\n

\n Duration: ${duration || 'N/A'}\n

\n Model: ${usage.model}\n

\n Input Tokens: ${formatNumber(usage.input_tokens)}\n

\n Output Tokens: ${formatNumber(usage.output_tokens)}\n

\n Cache Read: ${formatNumber(usage.cache_read_tokens)}\n

\n Cache Write: ${formatNumber(usage.cache_write_tokens)}\n

\n Price: ${formatPrice(usage.price)}\n

\n Finish Reason: ${usage.finish_reason || 'N/A'}\n

\n Images: ${formatNumber(usage.num_images)}\n

\n Our API: ${formatBoolean(usage.our_api_token)}\n

\n \n ${hasDiscrepancy ? `\n

\n Warning: Discrepancies detected between usage record and inference calls.\n

\n \n

Comparison

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 0.0001 ? 'discrepancy' : ''}\">\n \n \n \n \n \n \n

Metric	Usage Record	Inference Calls (${inferenceTotals?.count \|\| 0})	Difference
Input Tokens	${formatNumber(usage.input_tokens)}	${formatNumber(inferenceTotals?.input_tokens)}	${formatNumber((usage.input_tokens \|\| 0) - (inferenceTotals?.input_tokens \|\| 0))}
Output Tokens	${formatNumber(usage.output_tokens)}	${formatNumber(inferenceTotals?.output_tokens)}	${formatNumber((usage.output_tokens \|\| 0) - (inferenceTotals?.output_tokens \|\| 0))}
Cache Read	${formatNumber(usage.cache_read_tokens)}	${formatNumber(inferenceTotals?.cache_read_tokens)}	${formatNumber((usage.cache_read_tokens \|\| 0) - (inferenceTotals?.cache_read_tokens \|\| 0))}
Cache Write	${formatNumber(usage.cache_write_tokens)}	${formatNumber(inferenceTotals?.cache_write_tokens)}	${formatNumber((usage.cache_write_tokens \|\| 0) - (inferenceTotals?.cache_write_tokens \|\| 0))}
Price	${formatPrice(usage.price)}	${formatPrice(inferenceTotals?.price)}	${formatPrice((usage.price \|\| 0) - (inferenceTotals?.price \|\| 0))}

\n ` : ''}\n \n

Inference Calls (${inferenceCalls.length})

\n ${inferenceCalls.length > 0 ? `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${inferenceCalls.map(call => `\n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	Timestamp	Step Type	Input	Output	Cache Read	Cache Write	Price	Finish
${call.id}	${formatDate(call.timestamp)}	${call.step_type \|\| '-'}	${formatNumber(call.input_tokens)}	${formatNumber(call.output_tokens)}	${formatNumber(call.cache_read_tokens)}	${formatNumber(call.cache_write_tokens)}	${formatPrice(call.price)}	${call.finish_reason \|\| '-'}

\n ` : '

No inference calls found for this request.

'}\n

\n `;\n \n return renderLayout(content, {\n title: `Usage Dashboard - Request #${usage.id}`,\n activeTab: \"request\"\n });\n}",[],[211,883,912,934,943],"a3320a22-e1c5-11f0-bcb5-42dde27851f2","requests.ts","019b56ed-266a-71a2-b005-755d9665e1e2",["D",1766689941035],"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, filtered = false): 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 // No client-side script needed\n const script = '';\n \n // Generate the content\n const content = `\n

${filtered ? 'Filtered' : 'All'} Usage Requests

\n ${filtered ? '

← Back to all users

' : ''}\n

Total Requests: ${totalRequests}

Total Price: ${formatPrice(totalPrice)}

\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}",[],[211,883,912,934,950],"a331eaf6-e1c5-11f0-bcb5-42dde27851f2","layout.ts","019b56ed-266a-71a2-b005-730a1371eddf",["D",1766689941035],"/**\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 .back-link {\n margin-bottom: 15px;\n }\n .back-link a {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: #3498db;\n }\n .back-link a:hover {\n text-decoration: underline;\n }\n .actions {\n margin-top: 20px;\n display: flex;\n gap: 10px;\n }\n .button {\n display: inline-block;\n padding: 8px 15px;\n background-color: #3498db;\n color: white;\n text-decoration: none;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n }\n .button:hover {\n background-color: #2980b9;\n }\n .summary-card {\n background-color: #f8f9fa;\n border-radius: 5px;\n padding: 15px;\n margin-bottom: 20px;\n }\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 10px;\n }\n .card-item {\n padding: 5px;\n }\n .alert {\n padding: 10px 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n .alert-warning {\n background-color: #fcf8e3;\n border: 1px solid #faebcc;\n color: #8a6d3b;\n }\n .comparison-table {\n margin-bottom: 30px;\n }\n tr.discrepancy {\n background-color: #fcf8e3;\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 Credit Additions\n ${activeTab === 'user' ? `User Details` : ''}\n

\n \n ${content}\n \n \n \n \n `;\n}",[],[211,883,912,934,957],"a331d7e6-e1c5-11f0-bcb5-42dde27851f2","inference-calls.ts","019b56ed-266a-71a2-b005-6d35cc83ef27",["D",1766689941035],"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)' : ''}

\n ${filtered ? '

← Back to all users

' : ''}\n

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}",[],[211,883,912,934,964],"a331ca8a-e1c5-11f0-bcb5-42dde27851f2","dashboard.ts","019b56ed-266a-71a2-b005-6b29b8bea86b",["D",1766689941035],"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 inference_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 const totalInferencePrice = data.reduce((sum, row) => sum + (row.inference_price || 0), 0);\n \n // Generate the content\n const content = `\n

Usage by User

Total Users: ${totalUsers}

Total Price: ${formatPrice(totalPrice)}

Total Inference Price: ${formatPrice(totalInferencePrice)}

\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 `).join(\"\")}\n \n

User ID	Username	Requests	Input Tokens	Output Tokens	Cache Read	Cache Write	Total Price	Inference 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' : ''}	${formatPrice(row.inference_price \|\| 0)}	${formatNumber(row.total_images)}

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - User Summary\",\n activeTab: \"grouped\"\n });\n}",[],[211,883,912,934,971],"a331b69e-e1c5-11f0-bcb5-42dde27851f2","credit-additions.ts","019b56ed-266a-71a2-b005-669b7d01afff",["D",1766689941035],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate } from \"../utils/formatters.ts\";\nimport { PaginationResult, renderPaginationControls } from \"../utils/pagination.ts\";\nimport { CreditAddition } from \"../api/credit-additions.ts\";\n\ninterface CreditAdditionsSummary {\n total_count: number;\n total_amount: number;\n}\n\n/**\n * Render the credit additions page\n */\nexport function renderCreditAdditions(\n data: CreditAddition[],\n pagination: PaginationResult,\n url: string,\n filtered: boolean = false,\n summary: CreditAdditionsSummary = { total_count: 0, total_amount: 0 }\n): string {\n const currentUrl = new URL(url);\n \n const filterForm = `\n \n `;\n \n const summarySection = `\n

Total Credit Additions: ${formatNumber(summary.total_count)}

Total Amount: ${formatPrice(summary.total_amount)}

\n `;\n \n // Generate pagination controls\n const paginationControls = renderPaginationControls(pagination, url);\n \n const table = data.length > 0 ? `\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 `).join(\"\")}\n \n

ID	User ID	Date	Amount	Note	Stripe Payment ID
${row.id}	${row.user_id}	${formatDate(row.created_at)}	${formatPrice(row.amount)}	${row.note \|\| \"-\"}	${row.stripe_payment_intent_id \|\| \"-\"}

\n \n ${paginationControls}\n ` : '

No credit additions found.

';\n \n // Generate the content\n const content = `\n

Credit Additions${filtered ? \" (Filtered)\" : \"\"}

\n ${filterForm}\n ${summarySection}\n ${paginationControls}\n ${table}\n

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - Credit Additions\",\n activeTab: \"credit-additions\",\n scripts: [`\n document.addEventListener('DOMContentLoaded', function() {\n // Date inputs initialization\n const today = new Date();\n const formatDate = date => {\n const yyyy = date.getFullYear();\n const mm = String(date.getMonth() + 1).padStart(2, '0');\n const dd = String(date.getDate()).padStart(2, '0');\n return yyyy + '-' + mm + '-' + dd;\n };\n \n // Set default values for date inputs if they're empty\n const startDateInput = document.getElementById('start_date');\n const endDateInput = document.getElementById('end_date');\n \n if (!startDateInput.value && !endDateInput.value) {\n // By default, don't set any dates to allow seeing all records\n }\n });\n `]\n });\n}",[],[211,883,912,934,978],"a332663e-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[268,269,270,271,272,273,274,275],[211,883,912,934],"a331a758-e1c5-11f0-bcb5-42dde27851f2","pagination.ts","019b56ed-266a-71a2-b005-5da378d4333b","019b56ed-266a-71a2-b005-61c0d821debc",["D",1766689941035],"/**\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}",[],[211,883,912,475,989],"a331a2bc-e1c5-11f0-bcb5-42dde27851f2","formatters.ts","019b56ed-266a-71a2-b005-5a20b8b633ae",["D",1766689941035],"// 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};",[],[211,883,912,475,997],"a331b4dc-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[265,266],[211,883,912,475],"a3318f48-e1c5-11f0-bcb5-42dde27851f2","val-summary.ts","019b56ed-266a-71a2-b005-53b261a18d74","019b56ed-266a-71a2-b005-57b43dc4a5b7",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport { USAGE_TABLE, INFERENCE_CALLS_TABLE } from \"../../schema.tsx\";\n\n/**\n * Get usage data for a specific val\n */\nexport async function getValSummary(valId: string) {\n // Get summary data for the val from the usage table\n const usageSummaryResult = await sqlite.execute(`\n SELECT \n val_id,\n COUNT(*) as request_count,\n SUM(input_tokens) as total_input_tokens,\n SUM(output_tokens) as total_output_tokens,\n SUM(cache_read_tokens) as total_cache_read_tokens,\n SUM(cache_write_tokens) as total_cache_write_tokens,\n SUM(price) as total_price,\n SUM(num_images) as total_images\n FROM ${USAGE_TABLE}\n WHERE val_id = ? AND our_api_token = 1\n GROUP BY val_id\n `, [valId]);\n \n // Get summary data from inference calls table (for pricing)\n const inferenceSummaryResult = await sqlite.execute(`\n SELECT \n u.val_id,\n COUNT(DISTINCT i.usage_id) as inference_request_count,\n SUM(i.input_tokens) as inference_input_tokens,\n SUM(i.output_tokens) as inference_output_tokens,\n SUM(i.cache_read_tokens) as inference_cache_read_tokens,\n SUM(i.cache_write_tokens) as inference_cache_write_tokens,\n SUM(i.price) as inference_price\n FROM ${INFERENCE_CALLS_TABLE} i\n JOIN ${USAGE_TABLE} u ON i.usage_id = u.id\n WHERE u.val_id = ? AND u.our_api_token = 1\n GROUP BY u.val_id\n `, [valId]);\n \n // Get all requests for this val\n const requestsResult = await sqlite.execute(`\n SELECT * FROM ${USAGE_TABLE}\n WHERE val_id = ? AND our_api_token = 1\n ORDER BY timestamp DESC\n `, [valId]);\n \n // If no summary data was found, create a default summary\n const usageSummary = usageSummaryResult.rows[0] || {\n val_id: valId,\n request_count: 0,\n total_input_tokens: 0,\n total_output_tokens: 0,\n total_cache_read_tokens: 0,\n total_cache_write_tokens: 0,\n total_price: 0,\n total_images: 0\n };\n \n const inferenceSummary = inferenceSummaryResult.rows[0] || {\n val_id: valId,\n inference_request_count: 0,\n inference_input_tokens: 0,\n inference_output_tokens: 0,\n inference_cache_read_tokens: 0,\n inference_cache_write_tokens: 0,\n inference_price: 0\n };\n \n // Merge the summaries, prioritizing inference data for pricing\n const summary = {\n val_id: valId,\n request_count: usageSummary.request_count,\n // Original values from usage table\n original_input_tokens: usageSummary.total_input_tokens,\n original_output_tokens: usageSummary.total_output_tokens,\n original_cache_read_tokens: usageSummary.total_cache_read_tokens,\n original_cache_write_tokens: usageSummary.total_cache_write_tokens,\n original_price: usageSummary.total_price,\n // Use inference data as source of truth when available\n total_input_tokens: inferenceSummary.inference_input_tokens || usageSummary.total_input_tokens,\n total_output_tokens: inferenceSummary.inference_output_tokens || usageSummary.total_output_tokens,\n total_cache_read_tokens: inferenceSummary.inference_cache_read_tokens || usageSummary.total_cache_read_tokens,\n total_cache_write_tokens: inferenceSummary.inference_cache_write_tokens || usageSummary.total_cache_write_tokens,\n total_price: inferenceSummary.inference_price || usageSummary.total_price,\n // Always include inference price for comparison\n inference_price: inferenceSummary.inference_price || 0,\n total_images: usageSummary.total_images,\n // Add flag to indicate inference data usage\n used_inference_data: !!inferenceSummary.inference_price,\n inference_price_primary: true\n };\n \n return {\n summary,\n requests: requestsResult.rows\n };\n}",[],[211,883,912,1015,1008],"api","a33176ac-e1c5-11f0-bcb5-42dde27851f2","user-summary.ts","019b56ed-266a-71a2-b005-4e0cac307bb8",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport { USAGE_TABLE, INFERENCE_CALLS_TABLE } from \"../../schema.tsx\";\n\n/**\n * Get usage data grouped by user\n * This includes a fallback to inference calls data when usage data is missing\n */\nexport async function getUserSummary(userId?: string) {\n // First, get the standard grouped data from the usage table\n let query = `\n SELECT \n user_id, \n username,\n COUNT(*) as request_count,\n SUM(input_tokens) as total_input_tokens,\n SUM(output_tokens) as total_output_tokens,\n SUM(cache_read_tokens) as total_cache_read_tokens,\n SUM(cache_write_tokens) as total_cache_write_tokens,\n SUM(price) as total_price,\n SUM(num_images) as total_images\n FROM ${USAGE_TABLE}\n WHERE our_api_token = 1\n `;\n \n if (userId) {\n query += ` AND user_id = '${userId}'`;\n }\n \n query += `\n GROUP BY user_id, username\n ORDER BY total_price DESC\n `;\n \n const groupedUsageData = await sqlite.execute(query);\n\n // Get total inference calls price per user\n let inferenceQuery = `\n SELECT \n u.user_id,\n SUM(i.price) as inference_price\n FROM ${INFERENCE_CALLS_TABLE} i\n JOIN ${USAGE_TABLE} u ON i.usage_id = u.id\n WHERE u.our_api_token = 1\n `;\n \n if (userId) {\n inferenceQuery += ` AND u.user_id = '${userId}'`;\n }\n \n inferenceQuery += `\n GROUP BY u.user_id\n `;\n \n const inferenceCallsPrice = await sqlite.execute(inferenceQuery);\n\n // Create a map of inference calls price by user_id\n const inferencePriceByUser = new Map();\n for (const row of inferenceCallsPrice.rows) {\n inferencePriceByUser.set(row.user_id, row.inference_price || 0);\n }\n\n // Now get data from inference calls for requests with missing data\n let missingDataQuery = `\n SELECT \n u.user_id,\n u.username,\n u.id as usage_id,\n SUM(i.input_tokens) as inf_input_tokens,\n SUM(i.output_tokens) as inf_output_tokens,\n SUM(i.cache_read_tokens) as inf_cache_read_tokens,\n SUM(i.cache_write_tokens) as inf_cache_write_tokens,\n SUM(i.price) as inf_price\n FROM ${INFERENCE_CALLS_TABLE} i\n JOIN ${USAGE_TABLE} u ON i.usage_id = u.id\n WHERE (u.price IS NULL OR u.input_tokens IS NULL)\n `;\n \n if (userId) {\n missingDataQuery += ` AND u.user_id = '${userId}'`;\n }\n \n missingDataQuery += `\n GROUP BY u.user_id, u.username, u.id\n `;\n \n const inferenceData = await sqlite.execute(missingDataQuery);\n\n // Create a map of inference data by user_id\n const inferenceByUser = new Map();\n for (const row of inferenceData.rows) {\n if (!inferenceByUser.has(row.user_id)) {\n inferenceByUser.set(row.user_id, {\n input_tokens: 0,\n output_tokens: 0,\n cache_read_tokens: 0,\n cache_write_tokens: 0,\n price: 0,\n request_count: 0\n });\n }\n \n const userData = inferenceByUser.get(row.user_id);\n userData.input_tokens += row.inf_input_tokens || 0;\n userData.output_tokens += row.inf_output_tokens || 0;\n userData.cache_read_tokens += row.inf_cache_read_tokens || 0;\n userData.cache_write_tokens += row.inf_cache_write_tokens || 0;\n userData.price += row.inf_price || 0;\n userData.request_count += 1;\n }\n\n // Merge the data, using inference data when usage data is missing or zero\n const mergedData = groupedUsageData.rows.map(row => {\n const inferenceUserData = inferenceByUser.get(row.user_id);\n const inferencePrice = inferencePriceByUser.get(row.user_id) || 0;\n \n if (!inferenceUserData) {\n return {\n ...row,\n inference_price: inferencePrice\n };\n }\n \n // For each field, use the usage data if it exists, otherwise use inference data\n return {\n ...row,\n total_input_tokens: row.total_input_tokens || inferenceUserData.input_tokens,\n total_output_tokens: row.total_output_tokens || inferenceUserData.output_tokens,\n total_cache_read_tokens: row.total_cache_read_tokens || inferenceUserData.cache_read_tokens,\n total_cache_write_tokens: row.total_cache_write_tokens || inferenceUserData.cache_write_tokens,\n total_price: row.total_price || inferenceUserData.price,\n inference_price: inferencePrice,\n // Add a flag to indicate that inference data was used\n used_inference_data: !row.total_price || !row.total_input_tokens\n };\n });\n\n // Add any users that only exist in inference data\n for (const [userId, userData] of inferenceByUser.entries()) {\n if (!mergedData.some(row => row.user_id === userId)) {\n // Get the username from the inference data\n const userRow = inferenceData.rows.find(row => row.user_id === userId);\n if (userRow) {\n mergedData.push({\n user_id: userId,\n username: userRow.username,\n request_count: userData.request_count,\n total_input_tokens: userData.input_tokens,\n total_output_tokens: userData.output_tokens,\n total_cache_read_tokens: userData.cache_read_tokens,\n total_cache_write_tokens: userData.cache_write_tokens,\n total_price: userData.price,\n inference_price: inferencePriceByUser.get(userId) || 0,\n total_images: 0,\n used_inference_data: true\n });\n }\n }\n }\n\n // Sort by total price\n mergedData.sort((a, b) => (b.total_price || 0) - (a.total_price || 0));\n\n return mergedData;\n}",[],[211,883,912,1015,1017],"a3316a0e-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b005-49235f132f8d",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\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 const userId = url.searchParams.get(\"user_id\");\n \n // Build WHERE clause if userId is provided\n const whereClause = userId ? `WHERE user_id = '${userId}'` : '';\n \n // Get total count for pagination\n const countResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${USAGE_TABLE} ${whereClause}\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 ${whereClause}\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 filtered: !!userId\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}",[],[211,883,912,1015,950],"a3315ffa-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b005-475faca87e7e",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\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 const userId = url.searchParams.get(\"user_id\");\n \n // Build the WHERE clause based on filters\n let whereClause = \"\";\n if (usageId) {\n whereClause = `WHERE i.usage_id = ${usageId}`;\n } else if (userId) {\n whereClause = `WHERE u.user_id = '${userId}'`;\n }\n \n // Get total count for pagination\n let countQuery = `\n SELECT COUNT(*) as total \n FROM ${INFERENCE_CALLS_TABLE} i\n `;\n \n if (userId) {\n countQuery = `\n SELECT COUNT(*) as total \n FROM ${INFERENCE_CALLS_TABLE} i\n JOIN ${USAGE_TABLE} u ON i.usage_id = u.id\n ${whereClause}\n `;\n } else {\n countQuery += whereClause;\n }\n \n const countResult = await sqlite.execute(countQuery);\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 || userId)\n };\n}",[],[211,883,912,1015,964],"a33154b0-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b005-41030225151c",["D",1766689941035],"import { getRequests, getRequestById, getInferenceCallsForRequest } from \"./requests.ts\";\nimport { getUserSummary } from \"./user-summary.ts\";\nimport { getInferenceCalls } from \"./inference-calls.ts\";\nimport { getCreditAdditions } from \"./credit-additions.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 if (path === \"credit-additions\") {\n const userId = url.searchParams.get(\"user_id\");\n const data = await getCreditAdditions(url);\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}",[],[211,883,912,1015,102],"a3313e08-e1c5-11f0-bcb5-42dde27851f2","019b56ed-266a-71a2-b005-3d53ed260608",["D",1766689941035],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport { CREDIT_ADDITIONS_TABLE } from \"../../schema.tsx\";\nimport { getPaginationParams, getPaginationSQL, calculatePagination } from \"../utils/pagination.ts\";\n\nexport interface CreditAddition {\n id: number;\n user_id: string;\n created_at: number;\n stripe_payment_intent_id: string | null;\n amount: number;\n note: string;\n}\n\n/**\n * Get credit additions with optional filtering and pagination\n */\nexport async function getCreditAdditions(url: URL) {\n // Parse pagination parameters\n const { page, pageSize } = getPaginationParams(url);\n \n // Parse filtering parameters\n const userId = url.searchParams.get(\"user_id\");\n const startDate = url.searchParams.get(\"start_date\");\n const endDate = url.searchParams.get(\"end_date\");\n \n // Build the WHERE clause based on filters\n let whereClause = \"\";\n const whereParams: any[] = [];\n \n if (userId) {\n whereClause += \" WHERE user_id = ?\";\n whereParams.push(userId);\n }\n \n // Add date range filters if provided\n if (startDate) {\n const startTimestamp = new Date(startDate).getTime();\n whereClause += whereClause ? \" AND\" : \" WHERE\";\n whereClause += \" created_at >= ?\";\n whereParams.push(startTimestamp);\n }\n \n if (endDate) {\n const endTimestamp = new Date(endDate).getTime();\n whereClause += whereClause ? \" AND\" : \" WHERE\";\n whereClause += \" created_at <= ?\";\n whereParams.push(endTimestamp);\n }\n \n // Get total count for pagination\n const countResult = await sqlite.execute(\n `SELECT COUNT(*) as total FROM ${CREDIT_ADDITIONS_TABLE}${whereClause}`,\n whereParams\n );\n const totalItems = countResult.rows[0].total;\n \n // Get paginated data\n const paginationSQL = getPaginationSQL(page, pageSize);\n \n // Get the credit additions with pagination\n const query = `\n SELECT \n id, \n user_id, \n created_at, \n stripe_payment_intent_id, \n amount, \n note\n FROM ${CREDIT_ADDITIONS_TABLE}\n ${whereClause}\n ORDER BY created_at DESC\n ${paginationSQL}\n `;\n \n const result = await sqlite.execute(\n query,\n whereParams\n );\n \n // Process the results\n const data: CreditAddition[] = result.rows.map(row => ({\n id: row.id,\n user_id: row.user_id,\n created_at: row.created_at,\n stripe_payment_intent_id: row.stripe_payment_intent_id,\n amount: row.amount,\n note: row.note\n }));\n \n // Get the total sum for filtered results\n const sumResult = await sqlite.execute(\n `SELECT SUM(amount) as total FROM ${CREDIT_ADDITIONS_TABLE}${whereClause}`,\n whereParams\n );\n const totalAmount = sumResult.rows[0].total || 0;\n \n // Calculate pagination metadata\n const pagination = calculatePagination({ page, pageSize, totalItems });\n \n return {\n data,\n pagination,\n filtered: !!whereClause,\n summary: {\n total_count: totalItems,\n total_amount: totalAmount\n }\n };\n}",[],[211,883,912,1015,978],"a331a186-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[258,259,260,261,262,263],[211,883,912,1015],"a3329050-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[257,264,267,276,277,278],[211,883,912],"a332d13c-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[256,279,280,281,282],[211,883],"a333cb64-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[255,283,295,302,305],[211],"a3311c02-e1c5-11f0-bcb5-42dde27851f2","extensions.json","019b56ed-266a-71a2-b005-34a3989de9c7","019b56ed-266a-71a2-b005-3ba3ff05d5ed",["D",1766689941035],"{\n \"recommendations\": [\n \"denoland.vscode-deno\"\n ]\n}",[],[1071,1064],".vscode","a3313b56-e1c5-11f0-bcb5-42dde27851f2",["D",1766689941035],[253],[1071],["D",1766689941035],["D",1789704041373],{"_11":12,"_170":84},{"_11":12,"_166":-5,"_83":84,"_31":82,"_167":168,"_169":30},{"_39":40,"_13":16,"_33":36,"_155":118,"_156":73,"_157":158,"_159":122,"_160":161,"_162":163,"_164":14,"_165":12},"ctx",{"_52":-5,"_191":1114,"_1115":1116,"_1117":1118,"_1119":30,"_1120":30,"_1121":30,"_1122":24,"_1123":-5,"_1124":-7,"_1125":-7,"_1126":26,"_1127":30,"_1128":30,"_1129":-5,"_1130":30,"_1131":30,"_1132":30,"_1133":-5},"ENV",{"_1085":1086,"_1087":1088,"_1089":16,"_1090":1091,"_1092":1093,"_1094":1095,"_1096":1097,"_1098":1099,"_1100":1101,"_1102":1103,"_1104":1105,"_1106":1107,"_1108":1109,"_1110":1111,"_1112":1113},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

History · tools