[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1156":1157,"_1158":1159},"routes/_app.x.$handle.$name",{"_104":103,"_32":46,"_112":91,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":60,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",725,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","src/frontend/components/InsightsTab.tsx","latestPath","fileId","b92e7d8c-1d2b-11f1-9351-42dde27851f2","name","InsightsTab.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { GoalRecommendation, InsightsResponse, RecommendationAction } from \"../../shared/types.ts\";\nimport { formatMinutes } from \"../../shared/utils.ts\";\nimport { fetchInsights, fetchLatestInsights, mergeIntents } from \"../utils/history-api.ts\";\n\nconst typeStyles: Record = {\n dormant_intent: { bg: \"bg-amber-50\", text: \"text-amber-700\", label: \"Dormant\" },\n declining_sessions: { bg: \"bg-red-50\", text: \"text-red-700\", label: \"Declining\" },\n streak: { bg: \"bg-green-50\", text: \"text-green-700\", label: \"Streak\" },\n suggestion: { bg: \"bg-blue-50\", text: \"text-blue-700\", label: \"Tip\" },\n merge_intents: { bg: \"bg-purple-50\", text: \"text-purple-700\", label: \"Merge\" },\n};\n\nexport function InsightsTab() {\n const [insights, setInsights] = useState(null);\n const [loading, setLoading] = useState(false);\n const [initialLoading, setInitialLoading] = useState(true);\n const [error, setError] = useState(null);\n const [actionStates, setActionStates] = useState>({});\n\n useEffect(() => {\n fetchLatestInsights().then(({ data }) => {\n if (data) setInsights(data);\n setInitialLoading(false);\n });\n }, []);\n\n const handleAction = async (index: number, action: RecommendationAction) => {\n setActionStates((s) => ({ ...s, [index]: \"pending\" }));\n try {\n if (action.kind === \"merge_intents\") {\n const ok = await mergeIntents(action.sourceIntents, action.targetIntent);\n setActionStates((s) => ({ ...s, [index]: ok ? \"success\" : \"error\" }));\n }\n } catch {\n setActionStates((s) => ({ ...s, [index]: \"error\" }));\n }\n };\n\n const generate = async () => {\n setLoading(true);\n setError(null);\n try {\n const data = await fetchInsights();\n setInsights(data);\n } catch (e) {\n setError(e instanceof Error ? e.message : \"Failed to generate insights\");\n }\n setLoading(false);\n };\n\n if (initialLoading) {\n return

;\n }\n\n if (loading) {\n return

Generating insights...

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

Your 🤖-friend can look at your work patterns and suggest what to focus on next

\n \n Ask 🤖-friend\n \n {error &&

{error}

}\n

\n );\n }\n\n const { recommendations, weeklyDigest } = insights;\n\n return (\n

\n {recommendations.length > 0 && (\n

Recommendations

\n {recommendations.map((rec, i) => {\n const style = typeStyles[rec.type];\n return (\n

\n \n {style.label}\n \n {rec.title}\n

{rec.detail}

\n {rec.action?.kind === \"merge_intents\" && (() => {\n const state = actionStates[i] ?? \"idle\";\n if (state === \"success\") return

Merged successfully

;\n if (state === \"error\") return

Merge failed

;\n return (\n handleAction(i, rec.action!)}\n className=\"mt-1.5 text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 disabled:opacity-50\"\n >\n {state === \"pending\" ? \"Merging...\" : `Merge into \"${rec.action.targetIntent}\"`}\n \n );\n })()}\n

\n );\n })}\n

\n )}\n\n

Weekly Digest

{weeklyDigest.totalHoursWorked.toFixed(1)}h

Work This Week

{weeklyDigest.totalSessions}

Sessions

\n\n {weeklyDigest.topIntents.length > 0 && (\n

Top intents

\n {weeklyDigest.topIntents.map((item, i) => (\n

\n {item.intent}\n {formatMinutes(item.totalMinutes)}\n

\n ))}\n

\n )}\n\n {weeklyDigest.patterns.length > 0 && (\n

Patterns

\n •\n {pattern}\n

\n )}\n

\n\n

\n \n Regenerate\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { GoalRecommendation, InsightsResponse, RecommendationAction } from \"../../shared/types.ts\";\nimport { formatMinutes } from \"../../shared/utils.ts\";\nimport { fetchInsights, fetchLatestInsights, mergeIntents } from \"../utils/history-api.ts\";\n\nconst typeStyles: Record = {\n dormant_intent: { bg: \"bg-amber-50\", text: \"text-amber-700\", label: \"Dormant\" },\n declining_sessions: { bg: \"bg-red-50\", text: \"text-red-700\", label: \"Declining\" },\n streak: { bg: \"bg-green-50\", text: \"text-green-700\", label: \"Streak\" },\n suggestion: { bg: \"bg-blue-50\", text: \"text-blue-700\", label: \"Tip\" },\n merge_intents: { bg: \"bg-purple-50\", text: \"text-purple-700\", label: \"Merge\" },\n};\n\nexport function InsightsTab() {\n const [insights, setInsights] = useState(null);\n const [loading, setLoading] = useState(false);\n const [initialLoading, setInitialLoading] = useState(true);\n const [error, setError] = useState(null);\n const [actionStates, setActionStates] = useState>({});\n\n useEffect(() => {\n fetchLatestInsights().then(({ data }) => {\n if (data) setInsights(data);\n setInitialLoading(false);\n });\n }, []);\n\n const handleAction = async (index: number, action: RecommendationAction) => {\n setActionStates((s) => ({ ...s, [index]: \"pending\" }));\n try {\n if (action.kind === \"merge_intents\") {\n const ok = await mergeIntents(action.sourceIntents, action.targetIntent);\n setActionStates((s) => ({ ...s, [index]: ok ? \"success\" : \"error\" }));\n if (ok) generate();\n }\n } catch {\n setActionStates((s) => ({ ...s, [index]: \"error\" }));\n }\n };\n\n const generate = async () => {\n setLoading(true);\n setError(null);\n try {\n const data = await fetchInsights();\n setInsights(data);\n } catch (e) {\n setError(e instanceof Error ? e.message : \"Failed to generate insights\");\n }\n setLoading(false);\n };\n\n if (initialLoading) {\n return

;\n }\n\n if (loading) {\n return

Generating insights...

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

Your 🤖-friend can look at your work patterns and suggest what to focus on next

\n \n Ask 🤖-friend\n \n {error &&

{error}

}\n

\n );\n }\n\n const { recommendations, weeklyDigest } = insights;\n\n return (\n

\n {recommendations.length > 0 && (\n

Recommendations

\n {recommendations.map((rec, i) => {\n const style = typeStyles[rec.type];\n return (\n

\n \n {style.label}\n \n {rec.title}\n

{rec.detail}

\n {rec.action?.kind === \"merge_intents\" && (() => {\n const state = actionStates[i] ?? \"idle\";\n if (state === \"success\") return

Merged successfully

;\n if (state === \"error\") return

Merge failed

\n );\n })}\n

\n )}\n\n

Weekly Digest

{weeklyDigest.totalHoursWorked.toFixed(1)}h

Work This Week

{weeklyDigest.totalSessions}

Sessions

\n\n {weeklyDigest.topIntents.length > 0 && (\n

Top intents

\n {weeklyDigest.topIntents.map((item, i) => (\n

\n {item.intent}\n {formatMinutes(item.totalMinutes)}\n

\n ))}\n

\n )}\n\n {weeklyDigest.patterns.length > 0 && (\n

Patterns

\n •\n {pattern}\n

\n )}\n

\n\n

\n \n Regenerate\n \n

\n );\n}\n","createdAt",["D",1773314426522],"branchVersion","branchId","2568f8fa-1099-11f1-8a6a-42dde27851f2","id","2564eb70-1099-11f1-8a6a-42dde27851f2","thirdTimer",["D",1771838536808],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","This version stores some data, so you can restart the app!","imageUrl","019bfe98-75fd-713b-83d5-edcffcda6af5","pinnedFileId","019c89ce-7cc0-75ad-bf76-e12eeaf4e6b3","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019bfe98-75fd-713b-83d5-f27288110d30","tursoName","2564eb70109911f18a6a42dde27851f2","tursoHostname","2564eb70109911f18a6a42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789533091345],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_18":56,"_108":109,"_110":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":96,"_97":98,"_99":100,"_101":46,"_102":103},"isOwned",758,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","private","forkedProjectId","d56cf5fe-7fe8-11f0-a138-0224a6c84d84","forkedProjectOrgId","7018ec7d-7a8e-4e8f-93d1-ab6a7334ca50","projectName","userHandle","ozanatgreenpt","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM4cGlWZXRaZkpPd3gzTU9Qb1ZJY3V6a2tVZyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":1151,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":1152,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":1153,"_85":1154,"_87":1155,"_89":25},"tree",[240,242,245,249,331,351,352,353,354,355,356,357,358],"files",[240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358],"counts",{"_230":64,"_231":151,"_232":64,"_233":234,"_235":236},"contents",[134,135,136,137,138,139,140,141,142,143,144,145,146],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":224,"_32":225,"_30":226,"_150":-5,"_42":43,"_41":227,"_152":60,"_39":228,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_27":229},{"_44":219,"_32":220,"_30":221,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":222,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_27":223},{"_44":213,"_32":214,"_30":215,"_150":-5,"_42":43,"_41":216,"_152":60,"_39":217,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_27":218},{"_44":208,"_32":209,"_30":210,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":211,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_27":212},{"_44":201,"_32":202,"_30":203,"_150":-5,"_42":43,"_41":204,"_152":60,"_39":205,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_27":207},{"_44":196,"_32":197,"_30":198,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":199,"_13":64,"_34":20,"_36":188,"_24":25,"_155":-5,"_27":200},{"_44":190,"_32":191,"_30":192,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":193,"_13":64,"_34":20,"_36":194,"_24":25,"_155":-5,"_27":195},{"_44":183,"_32":184,"_30":185,"_150":-5,"_42":43,"_41":186,"_152":25,"_39":187,"_13":151,"_34":20,"_36":188,"_24":25,"_155":-5,"_27":189},{"_44":175,"_32":176,"_30":177,"_150":-5,"_42":43,"_41":178,"_152":60,"_39":179,"_13":180,"_34":20,"_36":181,"_24":25,"_155":-5,"_27":182},{"_44":169,"_32":170,"_30":171,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":172,"_13":64,"_34":20,"_36":173,"_24":25,"_155":-5,"_27":174},{"_44":163,"_32":164,"_30":165,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":166,"_13":64,"_34":20,"_36":167,"_24":25,"_155":-5,"_27":168},{"_44":157,"_32":158,"_30":159,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":160,"_13":64,"_34":20,"_36":161,"_24":25,"_155":-5,"_27":162},{"_44":147,"_32":148,"_30":149,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":153,"_13":64,"_34":20,"_36":154,"_24":25,"_155":-5,"_27":156},"256fb172-1099-11f1-8a6a-42dde27851f2","knowledge.md","019c89ce-7cc0-75ad-bf77-6f9393c49117","parentId",1,"latest",["D",1771838536808],"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\";\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#### Batching operations\n\n```ts\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nconst charge = 10;\n\nexport const batchSqlite = await sqlite.batch([\n `create table if not exists accounts(person_id text unique, balance integer)`,\n {\n sql: `update accounts set balance = balance - :charge where person_id = 'Bob'`,\n args: { charge },\n },\n {\n sql: `update accounts set balance = balance + :charge where person_id = 'Alice'`,\n args: { charge },\n },\n]);\n```\n\n### OpenAI\n\nDo not use val.town std library, import from https://esm.town/v/cricks_unmixed4u/openai-client/main.tsx\n\nTypeScript interface for interacting with OpenAI's chat models, with optional global rate limiting, and uses Val Town's SQLite for persistent rate limit tracking.\n\nKey Components\n\nMessage Type: Defines the structure for chat messages (role and content).\nChatOpenAI(model: string): Factory function returning an object with an invoke(messages) method. This method sends an array of messages to the specified OpenAI chat model and returns the assistant's response.\nGlobalRateLimitedChatOpenAI(model: string, requestsPerSecond: number): Decorator for ChatOpenAI that enforces a global rate limit (requests per second) using a persistent SQLite table.\nGlobalRateLimiter: Class that implements the rate limiting logic. It checks the number of requests in the current time window and throws an error if the limit is exceeded. It uses a table (global_rate_limit_1) in Val Town's SQLite.\nensureGlobalRateLimitTableExists: Ensures the rate limit tracking table exists in the database at startup.\nUsage\nUse ChatOpenAI(model) for direct, unlimited access to OpenAI chat completions.\nUse GlobalRateLimitedChatOpenAI(model, requestsPerSecond) to enforce a global rate limit on chat completions, suitable for shared or public-facing endpoints.\nVal Town/Platform Notes\nUses Val Town’s standard SQLite API for persistent storage.\nDesigned for server-side use (no browser-specific code).\nNo secrets are hardcoded; OpenAI API keys are managed by the OpenAI SDK/environment.\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### AI/LLM Agent implementations\n\nImplement AI agent functionalities using LangGraph. To support multi-turn conversations, persist the graph state using Turso (Val Town’s SQLite).\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { LangGraph } from \"https://esm.sh/langgraph\";\nimport { v4 as uuid } from \"https://esm.sh/uuid\";\n\n// DB initialization:\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n state TEXT NOT NULL\n );\n`);\n\n// Persist & retrieve graph state\nasync function loadState(sessionId: string) {\n const rows = await sqlite.execute(\"SELECT state FROM sessions WHERE id = ?\", [sessionId]);\n return rows.length ? JSON.parse(rows[0].state) : null;\n}\n\nasync function saveState(sessionId: string, state: any) {\n const stateJson = JSON.stringify(state);\n await sqlite.execute(\"INSERT OR REPLACE INTO sessions(id, state) VALUES (?, ?)\", [sessionId, stateJson]);\n}\n\n// Define your graph\nconst createGraph = () =>\n new LangGraph()\n .addNode(\"start\", async input => ({ next: \"reply\", data: input }))\n .addNode(\"reply\", async ({ data }) => ({ next: null, data: `Echo: ${data}` }))\n .setEntryPoint(\"start\");\n\n// Entry point\nexport default async function (req: Request) {\n const { sessionId = uuid(), message } = await req.json();\n const graph = createGraph();\n\n const priorState = await loadState(sessionId);\n const result = await graph.invoke(message, priorState || undefined);\n\n await saveState(sessionId, result.state);\n return Response.json({ reply: result.data, sessionId });\n}\n```\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# Implementation plan\n\n## COMPLETE - Step 1 - Goal: Persist app-state \n\nCurrently, refreshing the window, or closing and reopening causes data loss.\nPersist application state so that this doesn't happen\n\n## COMPLETE - Step 2 - Goal: persist app-state per user\n\nAssign a uniqueId to each user that opens the page. Store this. It should have date information so the next day it gets reset automatically.\n\n","label",[148],"256fa93e-1099-11f1-8a6a-42dde27851f2","deno.json","019c89ce-7cc0-75ad-bf77-6919a60048a7",["D",1771838536808],"{\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\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\"dom\", \"dom.iterable\", \"dom.asynciterable\", \"deno.ns\", \"deno.unstable\"]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[158],"256f999e-1099-11f1-8a6a-42dde27851f2","biome.json","019c89ce-7cc0-75ad-bf77-647d6e3814a0",["D",1771838536808],"{\n \"$schema\": \"https://biomejs.dev/schemas/1.9.4/schema.json\",\n \"vcs\": {\n \"enabled\": false,\n \"clientKind\": \"git\",\n \"useIgnoreFile\": false\n },\n \"files\": {\n \"ignoreUnknown\": false,\n \"ignore\": []\n },\n \"formatter\": {\n \"enabled\": true,\n \"indentStyle\": \"space\",\n \"lineEnding\": \"lf\",\n \"indentWidth\": 2,\n \"lineWidth\": 90\n },\n \"organizeImports\": {\n \"enabled\": true\n },\n \"linter\": {\n \"enabled\": true,\n \"rules\": {\n \"recommended\": true\n }\n },\n \"javascript\": {\n \"formatter\": {\n \"quoteStyle\": \"double\"\n }\n }\n}\n",[164],"256f202c-1099-11f1-8a6a-42dde27851f2","article.md","019c89ce-7cc0-75ad-bf77-6216ddce600a",["D",1771838536808],"# Third Time: a better way to work\n\nHOW CAN you be more productive? Instead of half-working all day, it’s better to work in focused stints, with breaks in between to recover.\n\nThere are various ways to do this, but here's my new technique, called **Third Time**. The gist of it is:\n\n- **Work for as long or as short as you like**, until you want or need to break; then\n- **Break for up to one-third of the time** you’ve just worked.\n\nSo after 15 minutes of dealing with emails, you could stop for up to 5 minutes. After an hour-long meeting, you can take a good 20-minute break. And if a task bores you after 3 minutes, you can even break then — but only for 1 minute! Breaks reward you for working, but proper breaks have to be earned.\n\n\n\nThis kind of pattern is natural; [research](https://link.springer.com/chapter/10.1007/978-1-4842-4221-6_9) confirms that people tend to take longer breaks after working for longer. (One-third is just a recommendation; you can use other break fractions if you prefer.)\n\nThird Time has many advantages over other techniques such as [Pomodoro](https://www.lesswrong.com/posts/FDCJ2BfAT9qJGrpFa/what-s-wrong-with-pomodoro) (which I’ll discuss later), but the key one is flexibility. It adapts to your attention span, energy, and schedule, as well as to other people and events. And Third Time isn’t just for your day-job — it suits anything that needs focus or effort, such as studying, practicing an instrument, personal admin, writing, or fitness training.\n\n## Using Third Time\n\nHere’s an example of the basic procedure:\n\n1. Note the time, or start a stopwatch\n2. **Work** for as long or short as you like, until you want or need to break\n3. Suppose you worked for 45 minutes. This earns you 45 ÷ 3 = 15 minutes off; so set an alarm for 15 minutes\n4. **Break** until the alarm goes off\n5. Go back to step 1.\n\n### Breaks\n\nYou needn’t take the full break. Maybe you have a tight deadline, an important customer calls, you’re keen to resume work, or only have a short gap before a meeting. Whatever the reason, **if you end a break (say) 5 minutes early, add 5 minutes to your next break**. You don’t lose the remaining time, it’s just postponed:\n\n\n\nYou can shorten and postpone breaks like this, but don’t let them overrun. Break time must be earned by working; it’s like a debit card, not a credit card. So always set an alarm for the end of a break, and resume work as soon as it goes off (don’t snooze it!)\n\n**Take breaks whenever you like**. Surprisingly, _you’ll still end up doing the same amount of work!_ For example: instead of working for 45 minutes plus a 15-minute break, suppose you do just three minutes’ work plus a one-minute break, and repeat that over and over again. You’ll still be working three-quarters of the time; so in an hour, you’d still get 45 minutes’ work done.\n\nThat said, it’s annoying to end a break after just one minute, and keep switching back and forth. So even with tedious tasks, you’ll soon find yourself working longer — and perhaps even enjoying it — to earn a decent break.\n\nWhile breaking too often is counterproductive, so is breaking too seldom, such as when immersed in an interesting project. Notice when you start to flag, and give yourself a break, to restore focus and avoid burnout.\n\n**Take proper breaks**.Don’t think, talk or read about work. Instead, get up, walk around, drink water, go outside, chillax. (There’ll be more about how to work & break properly in Part 2 of this article.)\n\nThough it’s best to choose when to work and break yourself, nothing changes if others are in charge. Suppose your boss fixes an hour-long meeting for you, then a five-minute gap, followed by a video call. The meeting earns you a 20-minute break; you can only take five minutes of it, but just add the remaining 15 minutes to your next break. (And if you really can’t take a full break then, carry the leftover time forward again, and so on.)\n\n### Interruptions\n\nSimilarly, nothing special happens if you get a work-related interruption, e.g. your boss calls you while you’re hard at it. The call is still work, so the clock keeps ticking. Either deal with the interruption, or postpone it (e.g. send to voicemail) and resume what you were doing.\n\n\n\n**Personal interruptions are different**. Suppose you’re working from home, and the doorbell rings: **this isn’t work, so** **a break starts then**. Once the interruption is over, figure out when you stopped work, and hence when this break should end (by dividing by 3 as usual). Then either take the rest of the break, or resume work (saving the remaining break time for later). If you’ve already overrun the end of the break, start work immediately.\n\n### Meal breaks & big breaks\n\nMost people stop work for lunch, some for dinner. With Third Time, you can divide the day into two or three separate sessions — morning, afternoon, maybe evening — to allow for proper meal breaks between.\n\nIf you only take a short time off for lunch, a normal break may suffice for it. For instance, an hour-long meeting just before lunch earns you a 20-minute break — enough to eat at your desk, anyway. Or you could save up more eating time by shortening earlier breaks. If you have lunch in a normal break like this, meals need no special treatment, and your whole workday is a single session.\n\nBut if a normal break won’t do, you can take a **big** **break**. This meansa meal break that **lasts as long as you like** — longer than you’ve earned from previous work. The only constraint is that you must decide at the start of the break when to resume work, then set an alarm, and obey it as usual. This stops you getting lazy.\n\nIf you work into the evening, you can extend dinner in the same way: when a normal break isn’t long enough, you can take a big break, provided you set an alarm first. But only take big breaks for lunch and dinner.\n\nBreak minutes you’ve earned are used up by a big break, so **you can’t carry them over** **to the afternoon/evening**. Each session starts with a clean slate. (Hence you don’t need to time the work stint just before the meal.) Similarly, you can’t carry unused breaks over from one day to the next.\n\nSometimes you’ll have a personal task, e.g. going out to buy something, that’s too long to do in a normal break. If possible, do it in a big break, or before/after work. Try to avoid taking unofficial breaks for errands or anything else, lest you allow more and more exceptions to the system, and relapse into chaos.\n\n### Other fractions\n\nWhat matters is not the _absolute_ length of work and breaks, but their length _relative to each other_. Not enough breaks per hour worked, and you burn out; too many, and you don’t get enough things done.\n\n[Fitness training](https://www.hprc-online.org/physical-fitness/training-performance/optimize-your-workouts-proper-workrest-ratios) and other [physical activities](https://link.springer.com/chapter/10.1007/978-3-319-70217-9_6) follow the same principle. For instance, with high-intensity interval training (HIIT) you might rest for half of the time you work: between 20-second sprints, you’d rest for 10 seconds; after a 2-minute dash, rest for 1 minute.\n\nThird Time recommends breaking for one-third of your work time (a similar proportion to the [Pomodoro and DeskTime](https://www.lesswrong.com/posts/FDCJ2BfAT9qJGrpFa/what-s-wrong-with-pomodoro) techniques). If this sounds lax, a [survey](https://www.vouchercloud.com/resources/office-worker-productivity) showed Britons spend less than half their time in the office actually working! So, with Third Time, you’ll accomplish much more than many people — particularly if you keep your work highly focussed, with no distractions.\n\nBut instead of one-third, you can use whatever fraction you like, such as:\n\n- **1/2**: 40 mins work + 20 mins breaks per hour. Working 2/3 of the time. Lazy\n- **1/3**: 45 mins work + 15 mins breaks per hour. Working 3/4 of the time. Standard\n- **1/4**: 48 mins work + 12 mins breaks per hour. Working 4/5 of the time. Industrious\n- **1/5**: 50 mins work + 10 mins breaks per hour. Working 5/6 of the time. Hard\n- **1/6**: 51½ mins work + 8½ mins breaks per hour. Working 6/7 of the time. Grinding\n\nIf you take a big break, you could shrink your other breaks by using a smaller fraction. For instance, neuroscientist Dr Daniel Levitin [suggests](https://qz.com/740607/the-biggest-productivity-myth-is-that-rigid-rules-like-the-pomodoro-technique-are-for-everyone/) working 90-minute stints with 15-minute breaks, plus a long lunch. A fraction of 15 ÷ 90 = 1/6 will achieve this.\n\nShould a deadline or crisis strike, so you need to get a lot done fast, don’t abandon Third Time — just switch to a smaller fraction. Or save up breaks and use them later. Conversely, if you’re tired, or there’s not much to do, you could try a bigger fraction to get more breaks.\n\nDifferent break fractions also suit different activities, from the gym to piano practice.\n\nThe other fractions, above right, let you calculate how much work you’ve done, or will do, without needing a timesheet or schedule. For example, Third Time’s default of 1/3 makes you work 3/4 of the time, so in an eight-hour day you’d complete six hours’ work — regardless of how your meetings, appointments, and interruptions pan out. (To calculate how long you worked if you took a big break, or didn’t use all your breaks, see footnote.[\\[1\\]](https://www.lesswrong.com/posts/RWu8eZqbwgB9zaerh/third-time-a-better-way-to-work#fny901itl0678))\n\n## Advantages of Third Time\n\nVarious time management techniques involve working for fixed time periods. The most popular one, named Pomodoro after a tomato-shaped timer, alternates 25-minute work stints with 5-minute breaks (or occasionally longer).\n\n\n\nWhile there are benefits to this kind of pattern, there are big problems too, which I discuss in a [separate post](https://www.lesswrong.com/posts/FDCJ2BfAT9qJGrpFa/what-s-wrong-with-pomodoro). In a nutshell, 25-minute stints may be far from optimal. Indeed, any fixed time period is unnatural and mechanical; thoughtful, creative work doesn’t watch clocks. And it's hard to work with other people this way, as their meetings, calls and interruptions won’t fit in with your timeslots. Nor will crises and deadlines. Basically, techniques like Pomodoro are too rigid.\n\nThis is because they insist on regulating your work. Third Time’s key insight is that this is unnecessary — you can guarantee how much work you’ll do, just by limiting breaks. This gives you complete freedom in how to divide up your day.\n\n\n\nPeople work best with loose constraints, somewhere between total freedom and total restriction. Total freedom is anarchy — the life of the lazy, the workaholic, and the procrastinator. Total restriction is tyranny — ruled by a despotic tomato, and forced to work like a robot.\n\nThird Time applies a light touch, keeping you in the happy, creative zone between these extremes. Its flexibility is its big advantage over other systems:\n\n- **Break whenever you want** or need to, to suit your attention span, energy, schedule, and the task at hand\n- You **get the same amount of work done**, however often you break!\n- Third Time accommodates **meetings, appointments, calls, interruptions, meals, and personal tasks**\n- Unlike Pomodoro, it's **not just for working alone**, so you can **use it all day**\n- When on a roll, you **don’t get interrupted by alarms** for the end of fixed time stints\n- **Save up unused break time** for later\n- Choose a **break fraction to suit you**, or even vary it with the situation\n- With tedious work, ploughing on **rewards you** with a longer break — an incentive to keep going\n- With a **deadline or crisis**, you can take quick, occasional breaks, or none at all. Third Time automatically makes up the shortfall once the storm has passed.\n\nIf you like Pomodoro or other methods (e.g. the pressure of their short-term deadlines), you can still use them with Third Time to get the best of both worlds, as it doesn’t forbid fixed work stints. I’ll explain more in Part 2 of this article. In fact, Third Time is really a general form of time management technique that encompasses the others, and solves their flaws.\n\nOther benefits of Third Time include:\n\n- Encourages **focussed work** and **proper breaks**, rather than inefficient half-working (more in Part 2)\n- Ensures you **don’t underwork or overwork**\n- Easy to **calculate how many hours’ work** you’ve done or will do, without a timesheet or schedule\n- You can even **knock off work early** every day (see Part 2)\n- It’s not just for work — use Third Time for **study, sport & fitness training, personal admin, hobbies, etc.** — anything that needs prolonged focus or effort.\n\n## Summary\n\nLastly, here in one place are all the steps for using Third Time:\n\n1. Note the time, or start a stopwatch\n2. **Work** until you want or need to break\n3. Divide how long you’ve just worked by 3 (or use your chosen fraction), and add any minutes left over from previous breaks\n4. Set an alarm for that long\n5. **Break** until the alarm goes off, or you decide to resume work\n6. If you resume early, note how much time was left, to add to your next break\n7. Go back to step 1.\n\nAdditional rules:\n\n- If you have to stop work for a **non-work-related interruption**, start a break immediately.\n- You can (optionally) take a **big break** for lunch and/or dinner, lasting as long as you like. Set an alarm at the start for when you’ll resume work. A big break uses up any saved break minutes, so you can’t carry them over to the afternoon/evening.\n- **Avoid taking other unearned breaks** if possible — so try to do personal tasks during normal or big breaks, or before/after your work day.\n\n(Third Time would also work well in a smartphone/web app, or smart speaker skill. Anyone want to create one?)",[170],"9120a5ac-10a8-11f1-9621-42dde27851f2","README.md","019c89ce-7cc0-75ad-bf77-5ffc88b7dc3a",44,["D",1771845160030],3,"# Third Time - Productivity Timer\n\nA minimalist web app implementing the \"Third Time\" productivity method.\n\n## The Method\n\n- **Work** for as long or short as you like, until you want or need to break\n- **Break** for up to one-third of the time you've just worked\n- Save unused break time for later\n- Handle interruptions and big breaks (meals)\n\n## Features\n\n- Flexible work/break timing\n- Break time banking system\n- Interruption handling\n- Big break support for meals\n- Clean, distraction-free interface with flat design\n- Consistent rounded corners throughout the UI\n- Customizable break fractions (1/2, 1/3, 1/4, 1/5, 1/6)\n- **Group timers**: share a passphrase to see each other's timer status anonymously\n\n## Usage\n\n1. Click \"Start Working\" to begin a work session\n2. Click \"Take Break\" when you want to stop working\n3. The app calculates your earned break time (work time ÷ 3)\n4. Take your break and click \"Resume Work\" when ready\n5. Any unused break time is saved for later\n\n## Group Timers\n\nEnter a shared passphrase in the footer to join a group. Members see each other's timer mode (Working / Breaking / Idle) and elapsed time — no names or IDs are shared. Group state is polled every 10 seconds.\n\n## Project Structure\n\n```\nsrc/\n├── backend/\n│ ├── index.ts # Hono API server + static files\n│ └── database/\n│ ├── migrations.ts # SQLite schema migrations\n│ └── queries.ts # DB query functions\n├── frontend/\n│ ├── components/ # React components\n│ │ ├── GroupTimerCard.tsx # Group member timer card\n│ │ └── Footer.tsx # Footer with group passphrase UI\n│ ├── favicon.http.tsx # Favicon\n│ ├── index.html # Main app interface\n│ ├── index.tsx # React app entry point\n│ ├── style.css # Styling\n│ └── utils/ # Utility functions\n│ ├── timer-actions.ts # Timer actions\n│ ├── state-persistence.ts # Backend state sync\n│ ├── passphrase.ts # Passphrase localStorage helper\n│ ├── group-api.ts # Group members API fetch\n│ └── user-id.ts # Daily user ID generation\n└── shared/\n ├── types.ts # Shared TypeScript types\n └── utils.tsx # Shared utility functions\n```\n",[176],"b851f328-10a4-11f1-8b37-42dde27851f2","AGENTS.md","3f8bd73e-1099-11f1-99e6-42dde27851f2",19,["D",1771843507801],"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\";\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- **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",[184],"256f0db2-1099-11f1-8a6a-42dde27851f2",".vtignore","019c89ce-7cc0-75ad-bf77-5982c011874c",["D",1771838536808],".git\n.vscode\n.DS_Store\nnode_modules\nvendor",[191],"256ebc5e-1099-11f1-8a6a-42dde27851f2",".cursorrules","019c89ce-7cc0-75ad-bf77-56197bb5f070",["D",1771838536808],[197],"f4e0a62e-1b10-11f1-a885-42dde27851f2","starter-template","f4e0a6ec-1b10-11f1-a885-42dde27851f2",550,["D",1772989506687],"directory",[202],"256eb952-1099-11f1-8a6a-42dde27851f2","src","019c89ce-7cc0-75ad-bf77-53e53c457105",["D",1771838536808],[209],"633562ee-1185-11f1-b387-42dde27851f2","docs","633563a2-1185-11f1-b387-42dde27851f2",127,["D",1771940001785],[214],"256d8190-1099-11f1-8a6a-42dde27851f2",".cursor","019c89ce-7cc0-75ad-bf76-de6159eeef16",["D",1771838536808],[220],"5f83aef4-130f-11f1-82a8-42dde27851f2",".claude","5f83afbc-130f-11f1-82a8-42dde27851f2",241,["D",1772109217300],[225],"pulls","branches","forks","envVars",{"_237":151,"_239":64},"connections",{"_237":64,"_238":64},"count","unfilledCount","emptyCount",{"_44":224,"_32":225,"_30":226,"_150":-5,"_42":43,"_41":227,"_152":60,"_39":1148,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1149,"_27":1150},{"_44":1140,"_32":1141,"_30":1142,"_150":226,"_42":43,"_41":1143,"_152":25,"_39":1144,"_13":700,"_34":20,"_36":1145,"_24":25,"_155":-5,"_360":1146,"_27":1147},{"_44":219,"_32":220,"_30":221,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":1137,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1138,"_27":1139},{"_44":1133,"_32":1132,"_30":1127,"_150":221,"_42":43,"_41":151,"_152":60,"_39":1134,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1135,"_27":1136},{"_44":1124,"_32":1125,"_30":1126,"_150":1127,"_42":43,"_41":151,"_152":60,"_39":1128,"_13":64,"_34":20,"_36":1129,"_24":25,"_155":-5,"_360":1130,"_27":1131},{"_44":213,"_32":214,"_30":215,"_150":-5,"_42":43,"_41":216,"_152":60,"_39":1121,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1122,"_27":1123},{"_44":1114,"_32":1115,"_30":1116,"_150":215,"_42":43,"_41":791,"_152":60,"_39":1117,"_13":526,"_34":20,"_36":1118,"_24":25,"_155":-5,"_360":1119,"_27":1120},{"_44":1107,"_32":1108,"_30":1109,"_150":215,"_42":43,"_41":1025,"_152":60,"_39":1110,"_13":180,"_34":20,"_36":1111,"_24":25,"_155":-5,"_360":1112,"_27":1113},{"_44":1099,"_32":1100,"_30":1101,"_150":215,"_42":43,"_41":1102,"_152":60,"_39":1103,"_13":180,"_34":20,"_36":1104,"_24":25,"_155":-5,"_360":1105,"_27":1106},{"_44":208,"_32":209,"_30":210,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":1096,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1097,"_27":1098},{"_44":1092,"_32":962,"_30":957,"_150":210,"_42":43,"_41":151,"_152":60,"_39":1093,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1094,"_27":1095},{"_44":1087,"_32":1064,"_30":1059,"_150":957,"_42":43,"_41":1088,"_152":60,"_39":1089,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1090,"_27":1091},{"_44":1079,"_32":1080,"_30":1081,"_150":1059,"_42":43,"_41":707,"_152":60,"_39":1082,"_13":746,"_34":1083,"_36":1084,"_24":25,"_155":-5,"_360":1085,"_27":1086},{"_44":1072,"_32":1073,"_30":1074,"_150":1059,"_42":43,"_41":707,"_152":60,"_39":1075,"_13":180,"_34":35,"_36":1076,"_24":25,"_155":-5,"_360":1077,"_27":1078},{"_44":1065,"_32":1066,"_30":1067,"_150":1059,"_42":43,"_41":542,"_152":60,"_39":1068,"_13":151,"_34":35,"_36":1069,"_24":25,"_155":-5,"_360":1070,"_27":1071},{"_44":1056,"_32":1057,"_30":1058,"_150":1059,"_42":43,"_41":542,"_152":60,"_39":1060,"_13":151,"_34":35,"_36":1061,"_24":25,"_155":-5,"_360":1062,"_27":1063},{"_44":1052,"_32":999,"_30":992,"_150":957,"_42":43,"_41":180,"_152":60,"_39":1053,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":1054,"_27":1055},{"_44":1044,"_32":1045,"_30":1046,"_150":992,"_42":43,"_41":690,"_152":60,"_39":1047,"_13":1048,"_34":35,"_36":1049,"_24":25,"_155":-5,"_360":1050,"_27":1051},{"_44":1037,"_32":1038,"_30":1039,"_150":992,"_42":43,"_41":707,"_152":60,"_39":1040,"_13":180,"_34":35,"_36":1041,"_24":25,"_155":-5,"_360":1042,"_27":1043},{"_44":1030,"_32":1031,"_30":1032,"_150":992,"_42":43,"_41":707,"_152":60,"_39":1033,"_13":180,"_34":35,"_36":1034,"_24":25,"_155":-5,"_360":1035,"_27":1036},{"_44":1022,"_32":1023,"_30":1024,"_150":992,"_42":43,"_41":1025,"_152":60,"_39":1026,"_13":526,"_34":35,"_36":1027,"_24":25,"_155":-5,"_360":1028,"_27":1029},{"_44":1014,"_32":1015,"_30":1016,"_150":992,"_42":43,"_41":681,"_152":60,"_39":1017,"_13":1018,"_34":35,"_36":1019,"_24":25,"_155":-5,"_360":1020,"_27":1021},{"_44":1007,"_32":1008,"_30":1009,"_150":992,"_42":43,"_41":791,"_152":60,"_39":1010,"_13":151,"_34":35,"_36":1011,"_24":25,"_155":-5,"_360":1012,"_27":1013},{"_44":1000,"_32":1001,"_30":1002,"_150":992,"_42":43,"_41":579,"_152":60,"_39":1003,"_13":151,"_34":35,"_36":1004,"_24":25,"_155":-5,"_360":1005,"_27":1006},{"_44":989,"_32":990,"_30":991,"_150":992,"_42":43,"_41":993,"_152":25,"_39":994,"_13":995,"_34":35,"_36":996,"_24":25,"_155":-5,"_360":997,"_27":998},{"_44":984,"_32":976,"_30":971,"_150":957,"_42":43,"_41":985,"_152":60,"_39":986,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":987,"_27":988},{"_44":977,"_32":978,"_30":979,"_150":971,"_42":43,"_41":617,"_152":60,"_39":980,"_13":850,"_34":35,"_36":981,"_24":25,"_155":-5,"_360":982,"_27":983},{"_44":969,"_32":705,"_30":970,"_150":971,"_42":43,"_41":707,"_152":60,"_39":972,"_13":180,"_34":35,"_36":973,"_24":25,"_155":-5,"_360":974,"_27":975},{"_44":963,"_32":457,"_30":58,"_150":957,"_42":43,"_41":681,"_152":25,"_39":964,"_13":965,"_34":610,"_36":966,"_24":25,"_155":-5,"_360":967,"_27":968},{"_44":954,"_32":955,"_30":956,"_150":957,"_42":43,"_41":533,"_152":60,"_39":958,"_13":736,"_34":35,"_36":959,"_24":25,"_155":-5,"_360":960,"_27":961},{"_44":950,"_32":561,"_30":554,"_150":210,"_42":43,"_41":151,"_152":60,"_39":951,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":952,"_27":953},{"_44":946,"_32":427,"_30":766,"_150":554,"_42":43,"_41":151,"_152":60,"_39":947,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":948,"_27":949},{"_44":941,"_32":464,"_30":904,"_150":766,"_42":43,"_41":942,"_152":60,"_39":943,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":944,"_27":945},{"_44":936,"_32":501,"_30":937,"_150":904,"_42":43,"_41":905,"_152":60,"_39":938,"_13":151,"_34":35,"_36":504,"_24":25,"_155":-5,"_360":939,"_27":940},{"_44":930,"_32":494,"_30":931,"_150":904,"_42":43,"_41":767,"_152":60,"_39":932,"_13":180,"_34":35,"_36":933,"_24":25,"_155":-5,"_360":934,"_27":935},{"_44":925,"_32":487,"_30":926,"_150":904,"_42":43,"_41":905,"_152":60,"_39":927,"_13":151,"_34":35,"_36":490,"_24":25,"_155":-5,"_360":928,"_27":929},{"_44":920,"_32":480,"_30":921,"_150":904,"_42":43,"_41":905,"_152":60,"_39":922,"_13":151,"_34":35,"_36":483,"_24":25,"_155":-5,"_360":923,"_27":924},{"_44":915,"_32":473,"_30":916,"_150":904,"_42":43,"_41":905,"_152":60,"_39":917,"_13":151,"_34":35,"_36":476,"_24":25,"_155":-5,"_360":918,"_27":919},{"_44":909,"_32":466,"_30":910,"_150":904,"_42":43,"_41":767,"_152":60,"_39":911,"_13":180,"_34":35,"_36":912,"_24":25,"_155":-5,"_360":913,"_27":914},{"_44":902,"_32":457,"_30":903,"_150":904,"_42":43,"_41":905,"_152":60,"_39":906,"_13":151,"_34":35,"_36":461,"_24":25,"_155":-5,"_360":907,"_27":908},{"_44":894,"_32":895,"_30":896,"_150":766,"_42":43,"_41":791,"_152":25,"_39":897,"_13":898,"_34":35,"_36":899,"_24":25,"_155":-5,"_360":900,"_27":901},{"_44":887,"_32":888,"_30":889,"_150":766,"_42":43,"_41":594,"_152":60,"_39":890,"_13":557,"_34":35,"_36":891,"_24":25,"_155":-5,"_360":892,"_27":893},{"_44":880,"_32":881,"_30":882,"_150":766,"_42":43,"_41":767,"_152":60,"_39":883,"_13":746,"_34":35,"_36":884,"_24":25,"_155":-5,"_360":885,"_27":886},{"_44":875,"_32":450,"_30":876,"_150":766,"_42":43,"_41":151,"_152":60,"_39":877,"_13":64,"_34":35,"_36":453,"_24":25,"_155":-5,"_360":878,"_27":879},{"_44":869,"_32":443,"_30":870,"_150":766,"_42":43,"_41":767,"_152":60,"_39":871,"_13":526,"_34":35,"_36":872,"_24":25,"_155":-5,"_360":873,"_27":874},{"_44":862,"_32":863,"_30":864,"_150":766,"_42":43,"_41":387,"_152":60,"_39":865,"_13":151,"_34":35,"_36":866,"_24":25,"_155":-5,"_360":867,"_27":868},{"_44":854,"_32":855,"_30":856,"_150":766,"_42":43,"_41":767,"_152":60,"_39":857,"_13":858,"_34":35,"_36":859,"_24":25,"_155":-5,"_360":860,"_27":861},{"_44":846,"_32":847,"_30":848,"_150":766,"_42":43,"_41":594,"_152":60,"_39":849,"_13":850,"_34":35,"_36":851,"_24":25,"_155":-5,"_360":852,"_27":853},{"_44":839,"_32":840,"_30":841,"_150":766,"_42":43,"_41":791,"_152":60,"_39":842,"_13":557,"_34":35,"_36":843,"_24":25,"_155":-5,"_360":844,"_27":845},{"_44":831,"_32":832,"_30":833,"_150":766,"_42":43,"_41":767,"_152":25,"_39":834,"_13":835,"_34":35,"_36":836,"_24":25,"_155":-5,"_360":837,"_27":838},{"_44":825,"_32":436,"_30":826,"_150":766,"_42":43,"_41":151,"_152":60,"_39":827,"_13":64,"_34":35,"_36":828,"_24":25,"_155":-5,"_360":829,"_27":830},{"_44":820,"_32":33,"_30":31,"_150":766,"_42":43,"_41":14,"_152":25,"_39":821,"_13":822,"_34":35,"_36":38,"_24":25,"_155":-5,"_360":823,"_27":824},{"_44":815,"_32":429,"_30":816,"_150":766,"_42":43,"_41":151,"_152":60,"_39":817,"_13":64,"_34":35,"_36":432,"_24":25,"_155":-5,"_360":818,"_27":819},{"_44":808,"_32":809,"_30":810,"_150":766,"_42":43,"_41":542,"_152":60,"_39":811,"_13":151,"_34":35,"_36":812,"_24":25,"_155":-5,"_360":813,"_27":814},{"_44":803,"_32":420,"_30":804,"_150":766,"_42":43,"_41":151,"_152":60,"_39":805,"_13":64,"_34":35,"_36":424,"_24":25,"_155":-5,"_360":806,"_27":807},{"_44":796,"_32":797,"_30":798,"_150":766,"_42":43,"_41":791,"_152":60,"_39":799,"_13":151,"_34":35,"_36":800,"_24":25,"_155":-5,"_360":801,"_27":802},{"_44":788,"_32":789,"_30":790,"_150":766,"_42":43,"_41":791,"_152":60,"_39":792,"_13":746,"_34":35,"_36":793,"_24":25,"_155":-5,"_360":794,"_27":795},{"_44":781,"_32":782,"_30":783,"_150":766,"_42":43,"_41":151,"_152":60,"_39":784,"_13":64,"_34":35,"_36":785,"_24":25,"_155":-5,"_360":786,"_27":787},{"_44":773,"_32":774,"_30":775,"_150":766,"_42":43,"_41":571,"_152":25,"_39":776,"_13":777,"_34":35,"_36":778,"_24":25,"_155":-5,"_360":779,"_27":780},{"_44":763,"_32":764,"_30":765,"_150":766,"_42":43,"_41":767,"_152":60,"_39":768,"_13":769,"_34":35,"_36":770,"_24":25,"_155":-5,"_360":771,"_27":772},{"_44":758,"_32":740,"_30":733,"_150":554,"_42":43,"_41":759,"_152":60,"_39":760,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":761,"_27":762},{"_44":750,"_32":751,"_30":752,"_150":733,"_42":43,"_41":753,"_152":60,"_39":754,"_13":526,"_34":35,"_36":755,"_24":25,"_155":-5,"_360":756,"_27":757},{"_44":741,"_32":742,"_30":743,"_150":733,"_42":43,"_41":744,"_152":60,"_39":745,"_13":746,"_34":35,"_36":747,"_24":25,"_155":-5,"_360":748,"_27":749},{"_44":730,"_32":731,"_30":732,"_150":733,"_42":43,"_41":734,"_152":60,"_39":735,"_13":736,"_34":35,"_36":737,"_24":25,"_155":-5,"_360":738,"_27":739},{"_44":725,"_32":724,"_30":719,"_150":554,"_42":43,"_41":726,"_152":60,"_39":727,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":728,"_27":729},{"_44":716,"_32":717,"_30":718,"_150":719,"_42":43,"_41":587,"_152":60,"_39":720,"_13":151,"_34":20,"_36":721,"_24":25,"_155":-5,"_360":722,"_27":723},{"_44":712,"_32":639,"_30":634,"_150":554,"_42":43,"_41":151,"_152":60,"_39":713,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":714,"_27":715},{"_44":704,"_32":705,"_30":706,"_150":634,"_42":43,"_41":707,"_152":60,"_39":708,"_13":180,"_34":35,"_36":709,"_24":25,"_155":-5,"_360":710,"_27":711},{"_44":696,"_32":697,"_30":698,"_150":634,"_42":43,"_41":594,"_152":60,"_39":699,"_13":700,"_34":35,"_36":701,"_24":25,"_155":-5,"_360":702,"_27":703},{"_44":687,"_32":688,"_30":689,"_150":634,"_42":43,"_41":690,"_152":60,"_39":691,"_13":692,"_34":35,"_36":693,"_24":25,"_155":-5,"_360":694,"_27":695},{"_44":678,"_32":679,"_30":680,"_150":634,"_42":43,"_41":681,"_152":25,"_39":682,"_13":683,"_34":35,"_36":684,"_24":25,"_155":-5,"_360":685,"_27":686},{"_44":671,"_32":672,"_30":673,"_150":634,"_42":43,"_41":651,"_152":25,"_39":674,"_13":186,"_34":35,"_36":675,"_24":25,"_155":-5,"_360":676,"_27":677},{"_44":664,"_32":665,"_30":666,"_150":634,"_42":43,"_41":579,"_152":60,"_39":667,"_13":151,"_34":35,"_36":668,"_24":25,"_155":-5,"_360":669,"_27":670},{"_44":657,"_32":658,"_30":659,"_150":634,"_42":43,"_41":524,"_152":60,"_39":660,"_13":151,"_34":35,"_36":661,"_24":25,"_155":-5,"_360":662,"_27":663},{"_44":648,"_32":649,"_30":650,"_150":634,"_42":43,"_41":651,"_152":60,"_39":652,"_13":653,"_34":35,"_36":654,"_24":25,"_155":-5,"_360":655,"_27":656},{"_44":640,"_32":641,"_30":642,"_150":634,"_42":43,"_41":524,"_152":60,"_39":643,"_13":644,"_34":35,"_36":645,"_24":25,"_155":-5,"_360":646,"_27":647},{"_44":631,"_32":632,"_30":633,"_150":634,"_42":43,"_41":151,"_152":60,"_39":635,"_13":64,"_34":35,"_36":636,"_24":25,"_155":-5,"_360":637,"_27":638},{"_44":623,"_32":624,"_30":625,"_150":554,"_42":43,"_41":626,"_152":60,"_39":627,"_13":151,"_34":20,"_36":628,"_24":25,"_155":-5,"_360":629,"_27":630},{"_44":614,"_32":615,"_30":616,"_150":554,"_42":43,"_41":617,"_152":25,"_39":618,"_13":619,"_34":35,"_36":620,"_24":25,"_155":-5,"_360":621,"_27":622},{"_44":606,"_32":607,"_30":608,"_150":554,"_42":43,"_41":151,"_152":60,"_39":609,"_13":64,"_34":610,"_36":611,"_24":25,"_155":-5,"_360":612,"_27":613},{"_44":600,"_32":407,"_30":601,"_150":554,"_42":43,"_41":587,"_152":60,"_39":602,"_13":180,"_34":20,"_36":603,"_24":25,"_155":-5,"_360":604,"_27":605},{"_44":592,"_32":400,"_30":593,"_150":554,"_42":43,"_41":594,"_152":25,"_39":595,"_13":596,"_34":35,"_36":597,"_24":25,"_155":-5,"_360":598,"_27":599},{"_44":584,"_32":585,"_30":586,"_150":554,"_42":43,"_41":587,"_152":60,"_39":588,"_13":151,"_34":20,"_36":589,"_24":25,"_155":-5,"_360":590,"_27":591},{"_44":576,"_32":577,"_30":578,"_150":554,"_42":43,"_41":579,"_152":60,"_39":580,"_13":151,"_34":20,"_36":581,"_24":25,"_155":-5,"_360":582,"_27":583},{"_44":568,"_32":569,"_30":570,"_150":554,"_42":43,"_41":571,"_152":25,"_39":572,"_13":186,"_34":35,"_36":573,"_24":25,"_155":-5,"_360":574,"_27":575},{"_44":562,"_32":393,"_30":563,"_150":554,"_42":43,"_41":151,"_152":60,"_39":564,"_13":64,"_34":20,"_36":565,"_24":25,"_155":-5,"_360":566,"_27":567},{"_44":551,"_32":552,"_30":553,"_150":554,"_42":43,"_41":555,"_152":60,"_39":556,"_13":557,"_34":35,"_36":558,"_24":25,"_155":-5,"_360":559,"_27":560},{"_44":547,"_32":530,"_30":523,"_150":210,"_42":43,"_41":151,"_152":60,"_39":548,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":549,"_27":550},{"_44":539,"_32":540,"_30":541,"_150":523,"_42":43,"_41":542,"_152":60,"_39":543,"_13":151,"_34":35,"_36":544,"_24":25,"_155":-5,"_360":545,"_27":546},{"_44":531,"_32":385,"_30":532,"_150":523,"_42":43,"_41":533,"_152":25,"_39":534,"_13":535,"_34":35,"_36":536,"_24":25,"_155":-5,"_360":537,"_27":538},{"_44":520,"_32":521,"_30":522,"_150":523,"_42":43,"_41":524,"_152":60,"_39":525,"_13":526,"_34":35,"_36":527,"_24":25,"_155":-5,"_360":528,"_27":529},{"_44":201,"_32":202,"_30":203,"_150":-5,"_42":43,"_41":204,"_152":60,"_39":517,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":518,"_27":519},{"_44":512,"_32":427,"_30":422,"_150":203,"_42":43,"_41":513,"_152":60,"_39":514,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":515,"_27":516},{"_44":507,"_32":464,"_30":459,"_150":422,"_42":43,"_41":508,"_152":60,"_39":509,"_13":64,"_34":206,"_36":-5,"_24":25,"_155":-5,"_360":510,"_27":511},{"_44":500,"_32":501,"_30":502,"_150":459,"_42":43,"_41":387,"_152":60,"_39":503,"_13":151,"_34":35,"_36":504,"_24":25,"_155":-5,"_360":505,"_27":506},{"_44":493,"_32":494,"_30":495,"_150":459,"_42":43,"_41":387,"_152":60,"_39":496,"_13":151,"_34":35,"_36":497,"_24":25,"_155":-5,"_360":498,"_27":499},{"_44":486,"_32":487,"_30":488,"_150":459,"_42":43,"_41":387,"_152":60,"_39":489,"_13":151,"_34":35,"_36":490,"_24":25,"_155":-5,"_360":491,"_27":492},{"_44":479,"_32":480,"_30":481,"_150":459,"_42":43,"_41":387,"_152":60,"_39":482,"_13":151,"_34":35,"_36":483,"_24":25,"_155":-5,"_360":484,"_27":485},{"_44":472,"_32":473,"_30":474,"_150":459,"_42":43,"_41":387,"_152":60,"_39":475,"_13":151,"_34":35,"_36":476,"_24":25,"_155":-5,"_360":477,"_27":478},{"_44":465,"_32":466,"_30":467,"_150":459,"_42":43,"_41":387,"_152":60,"_39":468,"_13":151,"_34":35,"_36":469,"_24":25,"_155":-5,"_360":470,"_27":471},{"_44":456,"_32":457,"_30":458,"_150":459,"_42":43,"_41":387,"_152":60,"_39":460,"_13":151,"_34":35,"_36":461,"_24":25,"_155":-5,"_360":462,"_27":463},{"_44":449,"_32":450,"_30":451,"_150":422,"_42":43,"_41":387,"_152":60,"_39":452,"_13":151,"_34":35,"_36":453,"_24":25,"_155":-5,"_360":454,"_27":455},{"_44":442,"_32":443,"_30":444,"_150":422,"_42":43,"_41":387,"_152":60,"_39":445,"_13":151,"_34":35,"_36":446,"_24":25,"_155":-5,"_360":447,"_27":448},{"_44":435,"_32":436,"_30":437,"_150":422,"_42":43,"_41":387,"_152":60,"_39":438,"_13":151,"_34":35,"_36":439,"_24":25,"_155":-5,"_360":440,"_27":441},{"_44":428,"_32":429,"_30":430,"_150":422,"_42":43,"_41":387,"_152":60,"_39":431,"_13":151,"_34":35,"_36":432,"_24":25,"_155":-5,"_360":433,"_27":434},{"_44":419,"_32":420,"_30":421,"_150":422,"_42":43,"_41":387,"_152":60,"_39":423,"_13":151,"_34":35,"_36":424,"_24":25,"_155":-5,"_360":425,"_27":426},{"_44":413,"_32":176,"_30":414,"_150":203,"_42":43,"_41":387,"_152":60,"_39":415,"_13":151,"_34":20,"_36":416,"_24":25,"_155":-5,"_360":417,"_27":418},{"_44":406,"_32":407,"_30":408,"_150":203,"_42":43,"_41":387,"_152":60,"_39":409,"_13":151,"_34":20,"_36":410,"_24":25,"_155":-5,"_360":411,"_27":412},{"_44":399,"_32":400,"_30":401,"_150":203,"_42":43,"_41":387,"_152":60,"_39":402,"_13":151,"_34":35,"_36":403,"_24":25,"_155":-5,"_360":404,"_27":405},{"_44":392,"_32":393,"_30":394,"_150":203,"_42":43,"_41":387,"_152":60,"_39":395,"_13":151,"_34":20,"_36":396,"_24":25,"_155":-5,"_360":397,"_27":398},{"_44":384,"_32":385,"_30":386,"_150":203,"_42":43,"_41":387,"_152":60,"_39":388,"_13":151,"_34":35,"_36":389,"_24":25,"_155":-5,"_360":390,"_27":391},{"_44":196,"_32":197,"_30":198,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":381,"_13":64,"_34":20,"_36":188,"_24":25,"_155":-5,"_360":382,"_27":383},{"_44":190,"_32":191,"_30":192,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":378,"_13":64,"_34":20,"_36":194,"_24":25,"_155":-5,"_360":379,"_27":380},{"_44":183,"_32":184,"_30":185,"_150":-5,"_42":43,"_41":186,"_152":25,"_39":375,"_13":151,"_34":20,"_36":188,"_24":25,"_155":-5,"_360":376,"_27":377},{"_44":175,"_32":176,"_30":177,"_150":-5,"_42":43,"_41":178,"_152":60,"_39":372,"_13":180,"_34":20,"_36":181,"_24":25,"_155":-5,"_360":373,"_27":374},{"_44":169,"_32":170,"_30":171,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":369,"_13":64,"_34":20,"_36":173,"_24":25,"_155":-5,"_360":370,"_27":371},{"_44":163,"_32":164,"_30":165,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":366,"_13":64,"_34":20,"_36":167,"_24":25,"_155":-5,"_360":367,"_27":368},{"_44":157,"_32":158,"_30":159,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":363,"_13":64,"_34":20,"_36":161,"_24":25,"_155":-5,"_360":364,"_27":365},{"_44":147,"_32":148,"_30":149,"_150":-5,"_42":43,"_41":151,"_152":60,"_39":359,"_13":64,"_34":20,"_36":154,"_24":25,"_155":-5,"_360":361,"_27":362},["D",1771838536808],"children",[],[148],["D",1771838536808],[],[158],["D",1771838536808],[],[164],["D",1771838536808],[],[170],["D",1771845160030],[],[176],["D",1771843507801],[],[184],["D",1771838536808],[],[191],["D",1771838536808],[],[197],"31798fd4-1bbf-11f1-bec7-42dde27851f2","types.ts","fb7f0ca0-1b10-11f1-a885-42dde27851f2",584,["D",1773064340667],"export type NotificationTypes = \"success\" | \"info\" | \"warning\";\n",[],[202,385],"31798bc4-1bbf-11f1-bec7-42dde27851f2","style.css","fb79ae18-1b10-11f1-b676-42dde27851f2",["D",1773064340667],"/* Notification animations */\n\n.notification {\n animation: slideIn 0.3s ease-out;\n}\n\n.slide-out {\n animation: slideOut 0.3s ease-in forwards;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes slideOut {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(100%);\n opacity: 0;\n }\n}\n",[],[202,393],"3179622a-1bbf-11f1-bec7-42dde27851f2","index.tsx","04d280b6-1b11-11f1-8638-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Button } from \"./components/Button.tsx\";\nimport { Card, CardHeader } from \"./components/Card.tsx\";\nimport { Link } from \"./components/Link.tsx\";\nimport { Notification } from \"./components/Notification.tsx\";\nimport { Badge, Container, Input, Label, Tabs } from \"./components/ui/index.ts\";\n\nfunction App() {\n const [activeTab, setActiveTab] = useState(\"overview\");\n const [inputValue, setInputValue] = useState(\"\");\n const [notification, setNotification] = useState<{\n message: string;\n type: \"success\" | \"info\" | \"warning\";\n } | null>(null);\n\n return (\n \n

Starter Template

\n A demo of the component library. Built with{\" \"}\n Twind and React.\n

\n\n {/* Tabs */}\n \n\n

\n {activeTab === \"overview\" && (\n <>\n \n Buttons\n

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

\n \n\n \n Badges\n

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

\n Active\n Info\n Error\n Warning\n New\n Archived\n

\n \n\n \n Pill Tabs\n {}}\n variant=\"pill\"\n />\n \n \n )}\n\n {activeTab === \"forms\" && (\n \n Form Elements\n

\n Name\n \n

\n Small Input\n {}}\n placeholder=\"Compact\"\n size=\"sm\"\n />\n

\n \n

\n \n )}\n\n {activeTab === \"data\" && (\n \n Links\n

\n Check out Deno and{\" \"}\n Hono to build your backend.\n

\n \n )}\n

\n\n {notification && (\n setNotification(null)}\n />\n )}\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[202,400],"317958f2-1bbf-11f1-bec7-42dde27851f2","index.html","f98282b0-1b10-11f1-b914-42dde27851f2",["D",1773064340667],"\n\n \n \n \n\n \n My App\n\n \n \n \n\n \n \n\n \n \n\n \n

\n \n \n\n",[],[202,407],"31797a76-1bbf-11f1-bec7-42dde27851f2","2ebf485e-1b12-11f1-99ef-42dde27851f2",["D",1773064340667],"The starter template is designed for static serving (Twind shim + esm.sh imports, no build step), so it maps to Val Town pretty directly. Here's the approach:\n\n**1. Create an HTTP val that serves the HTML**\n\n```ts\n// your-app.ts (HTTP val)\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Serve component files from companion vals\n if (url.pathname === \"/style.css\") {\n return new Response(styleCSS, { headers: { \"content-type\": \"text/css\" } });\n }\n if (url.pathname === \"/index.tsx\") {\n return new Response(indexTSX, { headers: { \"content-type\": \"application/typescript\" } });\n }\n \n return new Response(indexHTML, { headers: { \"content-type\": \"text/html\" } });\n}\n```\n\n**2. The challenge: multi-file structure**\n\nVal Town vals are single files, so you have two options:\n\n- **Inline everything** — Collapse the components into one or two vals. This is simplest but loses the nice file structure.\n- **Use Val Town's module imports** — Publish each component as its own val, then change the import paths in `index.tsx` to `https://esm.town/v/yourname/Button` etc.\n\n**3. Practical steps**\n\n1. Create a new HTTP val\n2. Paste the `index.html` content as a template string, updating the `\n \n`;\n\nexport default () => new Response(html, { headers: { \"content-type\": \"text/html\" } });\n```\n\nThe esm.sh React imports and Twind CDN shim will work as-is in Val Town since they're already URL-based. The main adaptation is flattening the file structure to fit Val Town's single-file-per-val model.\n",[],[202,176],"317920ee-1bbf-11f1-bec7-42dde27851f2","Notification.tsx","158659aa-1b11-11f1-a502-42dde27851f2","f51a3a7e-1b10-11f1-a8c0-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { getAsset, type NotificationTypes } from \"./Icons.tsx\";\n\ninterface NotificationProps {\n message: string;\n type: NotificationTypes;\n onClose: () => void;\n}\n\nexport function Notification({ message, type, onClose }: NotificationProps) {\n const [isClosing, setIsClosing] = useState(false);\n const notificationRef = useRef(null);\n\n const handleClose = () => {\n setIsClosing(true);\n setTimeout(() => {\n onClose();\n }, 300);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n handleClose();\n }\n };\n\n useEffect(() => {\n const timer = setTimeout(handleClose, 3000);\n\n return () => clearTimeout(timer);\n }, []);\n\n const icon = getAsset(type);\n\n const notificationColors = {\n success: \"bg-[#ecfdf3] border border-[#bffcd9] text-[#008a2e]\",\n info: \"bg-[#f0f8ff] border border-[#dde7fd] text-[#0973dc]\",\n warning: \"bg-[#fffcf0] border border-[#fbeeb1] text-[#dc7609]\",\n };\n\n return (\n \n

\n {icon}\n {message}\n

\n \n );\n}\n",[],[202,427,420],"components","31791a54-1bbf-11f1-bec7-42dde27851f2","Link.tsx","0a424e8c-1b11-11f1-9b5b-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport const Link = ({\n children,\n href,\n className = \"\",\n}: {\n children: React.ReactNode;\n href: string;\n className?: string;\n}) => (\n \n {children}\n \n);\n",[],[202,427,429],"31791158-1bbf-11f1-bec7-42dde27851f2","Icons.tsx","0e58f660-1b11-11f1-aa83-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { NotificationTypes } from \"../types.ts\";\n\nconst Icon = ({\n children,\n title,\n className,\n}: {\n children: React.ReactNode;\n title: string;\n className?: string;\n}) => (\n \n {title}\n {children}\n \n);\n\nexport const getAsset = (type: NotificationTypes): JSX.Element | null => {\n switch (type) {\n case \"success\":\n return SuccessIcon;\n\n case \"info\":\n return InfoIcon;\n\n case \"warning\":\n return WarningIcon;\n\n default:\n return null;\n }\n};\n\nconst SuccessIcon = (\n \n \n \n \n);\n\nconst WarningIcon = (\n \n \n \n \n \n);\n\nconst InfoIcon = (\n \n \n \n \n \n);\n",[],[202,427,436],"31790d2a-1bbf-11f1-bec7-42dde27851f2","Card.tsx","092a8dde-1b11-11f1-96ef-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface CardProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function CardHeader({ children, className = \"\" }: CardProps) {\n return

{children}

;\n}\n\nexport function Card({ children, className = \"\" }: CardProps) {\n return (\n \n {children}\n \n );\n}\n",[],[202,427,443],"31790492-1bbf-11f1-bec7-42dde27851f2","Button.tsx","092323d2-1b11-11f1-a08f-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ButtonProps {\n children: React.ReactNode;\n onClick: () => void;\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"info\"\n | \"warning\"\n | \"purple\"\n | \"danger\"\n | \"neutral\";\n size?: \"sm\" | \"md\" | \"lg\";\n className?: string;\n type?: \"button\" | \"submit\" | \"reset\";\n title?: string;\n disabled?: boolean;\n}\n\nexport function Button({\n children,\n onClick,\n variant = \"primary\",\n size = \"md\",\n className = \"\",\n type = \"button\",\n title,\n disabled = false,\n}: ButtonProps) {\n const baseClasses =\n \"border-2 border-black text-black font-semibold rounded-lg transition-colors\";\n\n const variantClasses = {\n primary: \"bg-green(300 hover:400)\",\n secondary: \"bg-gray(100 hover:200)\",\n info: \"bg-blue(300 hover:400)\",\n warning: \"bg-yellow(300 hover:400)\",\n purple: \"bg-purple(300 hover:400)\",\n danger: \"bg-red(300 hover:400)\",\n neutral: \"\",\n };\n\n const sizeClasses = {\n sm: \"py-2 px-4 text-sm\",\n md: \"py-3 px-6\",\n lg: \"py-3 px-6 text-lg\",\n };\n\n return (\n \n {children}\n \n );\n}\n",[],[202,427,450],"3179382c-1bbf-11f1-bec7-42dde27851f2","index.ts","28c3be94-1b12-11f1-bdb5-42dde27851f2","f5338d94-1b10-11f1-a885-42dde27851f2",["D",1773064340667],"export { Input } from \"./Input.tsx\";\nexport { Table } from \"./Table.tsx\";\nexport type { Column } from \"./Table.tsx\";\nexport { Tabs } from \"./Tabs.tsx\";\nexport { Label } from \"./Label.tsx\";\nexport { Container } from \"./Container.tsx\";\nexport { Badge } from \"./Badge.tsx\";\n",[],[202,427,464,457],"ui","31795140-1bbf-11f1-bec7-42dde27851f2","Tabs.tsx","21046da8-1b11-11f1-82e4-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Tab {\n id: string;\n label: string;\n}\n\ninterface TabsProps {\n tabs: Tab[];\n activeTab: string;\n onTabChange: (id: string) => void;\n variant?: \"underline\" | \"pill\";\n className?: string;\n}\n\nexport function Tabs({\n tabs,\n activeTab,\n onTabChange,\n variant = \"underline\",\n className = \"\",\n}: TabsProps) {\n if (variant === \"pill\") {\n return (\n

\n {tabs.map((t) => (\n onTabChange(t.id)}\n className={`px-3 py-1 text-sm rounded ${\n activeTab === t.id\n ? \"bg-gray-800 text-white\"\n : \"bg-gray-100 text-gray-600 hover:bg-gray-200\"\n }`}\n >\n {t.label}\n \n ))}\n

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

\n {tabs.map((t) => (\n onTabChange(t.id)}\n className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${\n activeTab === t.id\n ? \"border-blue-600 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700\"\n }`}\n >\n {t.label}\n \n ))}\n

\n );\n}\n",[],[202,427,464,466],"3179490c-1bbf-11f1-bec7-42dde27851f2","Table.tsx","20038aba-1b11-11f1-82c1-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface Column {\n key: string;\n header: string;\n render?: (row: T) => React.ReactNode;\n className?: string;\n}\n\ninterface TableProps {\n columns: Column[];\n data: T[];\n rowKey: (row: T) => string | number;\n emptyMessage?: string;\n loading?: boolean;\n loadingMessage?: string;\n}\n\nexport function Table({\n columns,\n data,\n rowKey,\n emptyMessage = \"No data.\",\n loading = false,\n loadingMessage = \"Loading...\",\n}: TableProps) {\n if (loading) return

{loadingMessage}

;\n if (data.length === 0) return

{emptyMessage}

;\n\n return (\n

\n \n \n \n {columns.map((col) => (\n \n ))}\n \n \n \n {data.map((row) => (\n \n {columns.map((col) => (\n \n ))}\n \n ))}\n \n

\n {col.header}\n
\n {col.render ? col.render(row) : (row as any)[col.key]}\n

\n );\n}\n",[],[202,427,464,473],"3179431c-1bbf-11f1-bec7-42dde27851f2","Label.tsx","1b3b2c54-1b11-11f1-8eb8-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface LabelProps {\n children: React.ReactNode;\n htmlFor?: string;\n hint?: string;\n className?: string;\n}\n\nexport function Label({ children, htmlFor, hint, className = \"\" }: LabelProps) {\n return (\n <>\n \n {children}\n \n {hint &&

{hint}

}\n \n );\n}\n",[],[202,427,464,480],"31793bf6-1bbf-11f1-bec7-42dde27851f2","Input.tsx","1a36e41a-1b11-11f1-82c5-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface InputProps {\n type?: \"text\" | \"password\" | \"number\";\n value: string;\n onChange: (value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n placeholder?: string;\n size?: \"sm\" | \"md\";\n autoFocus?: boolean;\n step?: string;\n list?: string;\n className?: string;\n disabled?: boolean;\n}\n\nconst sizeClasses = {\n sm: \"py-1 px-2 text-sm\",\n md: \"py-2 px-3\",\n};\n\nexport function Input({\n type = \"text\",\n value,\n onChange,\n onKeyDown,\n placeholder,\n size = \"md\",\n autoFocus,\n step,\n list,\n className = \"\",\n disabled,\n}: InputProps) {\n const baseClasses =\n \"border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\";\n\n return (\n onChange(e.target.value)}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n className={`${baseClasses} ${sizeClasses[size]} ${className}`}\n autoFocus={autoFocus}\n step={step}\n list={list}\n disabled={disabled}\n />\n );\n}\n",[],[202,427,464,487],"3179339a-1bbf-11f1-bec7-42dde27851f2","Container.tsx","17f63746-1b11-11f1-b861-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ContainerProps {\n children: React.ReactNode;\n size?: \"md\" | \"lg\";\n className?: string;\n}\n\nconst sizeClasses = {\n md: \"max-w-2xl mx-auto p-6\",\n lg: \"max-w-5xl mx-auto p-4\",\n};\n\nexport function Container({ children, size = \"md\", className = \"\" }: ContainerProps) {\n return (\n

\n {children}\n

\n );\n}\n",[],[202,427,464,494],"31792c24-1bbf-11f1-bec7-42dde27851f2","Badge.tsx","17fd0b0c-1b11-11f1-a1fe-42dde27851f2",["D",1773064340667],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype BadgeColor = \"green\" | \"blue\" | \"gray\" | \"red\" | \"yellow\" | \"purple\";\n\ninterface BadgeProps {\n children?: React.ReactNode;\n color?: BadgeColor;\n variant?: \"dot\" | \"label\";\n className?: string;\n}\n\nconst dotColorClasses: Record = {\n green: \"bg-green-500\",\n blue: \"bg-blue-500\",\n gray: \"bg-gray-400\",\n red: \"bg-red-500\",\n yellow: \"bg-yellow-500\",\n purple: \"bg-purple-500\",\n};\n\nconst labelColorClasses: Record = {\n green: \"bg-green-100 text-green-700\",\n blue: \"bg-blue-100 text-blue-700\",\n gray: \"bg-gray-100 text-gray-700\",\n red: \"bg-red-100 text-red-700\",\n yellow: \"bg-yellow-100 text-yellow-700\",\n purple: \"bg-purple-100 text-purple-700\",\n};\n\nexport function Badge({\n children,\n color = \"gray\",\n variant = \"dot\",\n className = \"\",\n}: BadgeProps) {\n if (variant === \"dot\") {\n return (\n \n );\n }\n\n return (\n \n {children}\n \n );\n}\n",[],[202,427,464,501],"f5338cb8-1b10-11f1-a885-42dde27851f2",552,["D",1772989507235],[334,335,336,337,338,339,340],[202,427,464],"f51a39ac-1b10-11f1-a8c0-42dde27851f2",551,["D",1772989507068],[333,341,342,343,344,345],[202,427],["D",1772989506687],[332,346,347,348,349,350],[202],"078655ca-11a8-11f1-9bac-42dde27851f2","utils.ts","019c89ce-7cc0-75ad-bf77-4b76e64f68d6","019c89ce-7cc0-75ad-bf77-4c6578e2b551",150,["D",1771954880337],2,"/**\n * Formats seconds into a time string (HH:MM:SS or MM:SS)\n * @param {number} seconds - The number of seconds to format\n * @returns {string} Formatted time string\n */\nexport function formatTime(seconds: number): string {\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const secs = seconds % 60;\n\n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, \"0\")}:${secs\n .toString()\n .padStart(2, \"0\")}`;\n }\n return `${minutes.toString()}:${secs.toString().padStart(2, \"0\")}`;\n}\n\n/**\n * Formats minutes into a human-readable duration string\n * @param {number} minutes - The number of minutes to format\n * @returns {string} Formatted duration string (e.g., \"30s\", \"5m\", \"2h 30m\")\n */\nexport function formatMinutes(minutes: number): string {\n if (minutes < 1) return `${Math.round(minutes * 60)}s`;\n if (minutes < 60) return `${Math.round(minutes)}m`;\n const hours = Math.floor(minutes / 60);\n const mins = Math.round(minutes % 60);\n return `${hours}h ${mins}m`;\n}\n\nexport function relativeDate(dateStr: string): string {\n const date = new Date(dateStr);\n const now = new Date();\n const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n const diffDays = Math.round((today.getTime() - target.getTime()) / (1000 * 60 * 60 * 24));\n\n if (diffDays === 0) return \"today\";\n if (diffDays === 1) return \"yesterday\";\n return date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n",[],[209,530,521],"shared","e0857f34-1e02-11f1-8d27-42dde27851f2","019c89ce-7cc0-75ad-bf77-47820114ade7",722,["D",1773313313066],26,"export interface TimerState {\n mode: \"idle\" | \"working\" | \"breaking\";\n workStartTime: number | null;\n breakStartTime: number | null;\n savedBreakMinutes: number;\n breakFraction: number;\n totalWorkTime: number;\n totalBreakTime: number;\n sessionStartedAt: number | null;\n}\n\nexport interface SessionStats {\n workTime: number;\n breakTime: number;\n efficiency: number;\n}\n\nexport type BreakFraction = {\n value: number;\n label: string;\n description: string;\n};\n\nexport interface GroupMemberState {\n mode: \"idle\" | \"working\" | \"breaking\";\n workStartTime: number | null;\n breakStartTime: number | null;\n displayName: string | null;\n sessionIntent: string | null;\n breakFraction: number;\n}\n\nexport type TimerEventType =\n | \"work_started\"\n | \"break_started\"\n | \"work_resumed\"\n | \"interruption\"\n | \"big_break_started\"\n | \"session_reset\"\n | \"break_fraction_changed\"\n | \"intent_set\"\n | \"intent_cleared\"\n | \"nudge\";\n\nexport interface TimerEvent {\n eventType: TimerEventType;\n timestamp: number;\n metadata?: Record;\n}\n\nexport interface TimerEventLog extends TimerEvent {\n id: number;\n userId: string;\n displayName: string;\n}\n\nexport type NotificationTypes = \"success\" | \"info\" | \"warning\" | \"default\";\n\nexport interface IntentSummary {\n intent: string;\n sessionCount: number;\n totalWorkTime: number;\n avgSessionLength: number;\n daysWorked: number;\n lastWorked: string;\n}\n\nexport interface PeriodSummary {\n period: string;\n totalWorkTime: number;\n totalBreakTime: number;\n sessionCount: number;\n}\n\nexport interface SessionRecord {\n id: number;\n intent: string | null;\n workTime: number; // minutes\n breakTime: number; // minutes\n startedAt: string; // ISO string\n endedAt: string; // ISO string\n breakFraction: number;\n}\n\nexport interface SessionPage {\n sessions: SessionRecord[];\n nextCursor: string | null; // started_at of last item, null if no more pages\n}\n\nexport interface VersionedTimerState extends TimerState {\n version: number;\n displayName?: string | null;\n sessionIntent?: string | null;\n}\n\nexport interface IntentEvent {\n eventType: \"intent_set\" | \"intent_cleared\";\n timestamp: number;\n intent: string | null;\n}\n\nexport interface GlobalAggregate {\n totalSessions: number;\n totalWorkTime: number; // minutes\n totalBreakTime: number; // minutes\n avgSessionLength: number; // minutes\n distinctIntents: number;\n firstSessionDate: string | null;\n}\n\nexport type RecommendationAction =\n | { kind: \"merge_intents\"; sourceIntents: string[]; targetIntent: string };\n\nexport interface GoalRecommendation {\n type: \"dormant_intent\" | \"declining_sessions\" | \"streak\" | \"suggestion\" | \"merge_intents\";\n title: string;\n detail: string;\n intentName?: string | null;\n action?: RecommendationAction | null;\n}\n\nexport interface WeeklyDigest {\n topIntents: Array<{ intent: string; totalMinutes: number }>;\n totalHoursWorked: number;\n totalSessions: number;\n patterns: string[];\n}\n\nexport interface InsightsResponse {\n recommendations: GoalRecommendation[];\n weeklyDigest: WeeklyDigest;\n generatedAt: string;\n}\n",[],[209,530,385],"e38787b2-1318-11f1-bf72-42dde27851f2","auth-types.ts","5ffcc51e-130f-11f1-83d1-42dde27851f2",258,["D",1772113304240],"export interface StudioKareUser {\n id: string;\n email: string;\n createdAt: string;\n}\n\nexport interface StudioKareSession {\n id: string;\n userId: string;\n expiresAt: Date;\n}\n",[],[209,530,540],"256eb75e-1099-11f1-8a6a-42dde27851f2",["D",1771838536808],[328,329,330],[209,530],"d66f91ee-1bd5-11f1-9fa3-42dde27851f2","sw.js","3afbbdfe-1a19-11f1-8291-42dde27851f2","019c89ce-7cc0-75ad-bf77-4040dc281a06",605,["D",1773074066448],9,"const CACHE_NAME = \"thirdtimer-v3\";\nconst APP_SHELL = [\n \"/\",\n \"/src/frontend/style.css\",\n \"/src/frontend/index.tsx\",\n];\n\nself.addEventListener(\"install\", (e) => {\n e.waitUntil(\n caches.open(CACHE_NAME).then((c) => c.addAll(APP_SHELL))\n );\n self.skipWaiting();\n});\n\nself.addEventListener(\"activate\", (e) => {\n e.waitUntil(\n caches.keys().then((keys) =>\n Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))\n )\n );\n self.clients.claim();\n});\n\nself.addEventListener(\"notificationclick\", (e) => {\n e.notification.close();\n e.waitUntil(\n clients.matchAll({ type: \"window\" }).then((list) => {\n for (const client of list) {\n if (client.url.includes(\"/\") && \"focus\" in client) return client.focus();\n }\n if (clients.openWindow) return clients.openWindow(\"/\");\n })\n );\n});\n\nself.addEventListener(\"fetch\", (e) => {\n const url = new URL(e.request.url);\n\n if (url.pathname.startsWith(\"/api/\") || url.pathname.startsWith(\"/auth/\")) return;\n if (e.request.method !== \"GET\") return;\n\n const CACHED_HOSTS = [\"esm.sh\", \"cdn.skypack.dev\", \"fonts.googleapis.com\", \"fonts.gstatic.com\"];\n const isThirdParty = CACHED_HOSTS.includes(url.host);\n\n if (isThirdParty) {\n // Cache-first for immutable CDN resources\n e.respondWith(\n caches.match(e.request).then((cached) => {\n if (cached) return cached;\n return fetch(e.request).then((response) => {\n if (response.ok) {\n const clone = response.clone();\n caches.open(CACHE_NAME).then((c) => c.put(e.request, clone));\n }\n return response;\n });\n })\n );\n } else if (url.origin === self.location.origin) {\n // Network-first for app resources\n e.respondWith(\n fetch(e.request).then((response) => {\n if (response.ok) {\n const clone = response.clone();\n caches.open(CACHE_NAME).then((c) => c.put(e.request, clone));\n }\n return response;\n }).catch(() => caches.match(e.request))\n );\n }\n});\n",[],[209,561,552],"frontend","256e9ae4-1099-11f1-8a6a-42dde27851f2","019c89ce-7cc0-75ad-bf77-3cdeea301751",["D",1771838536808],"/* Custom styles for Third Time app */\n\n.pulse-work {\n animation: pulse-green 2s infinite;\n}\n\n.pulse-break {\n animation: pulse-blue 2s infinite;\n}\n\n.notification {\n animation: slideIn 0.3s ease-out;\n}\n\n.slide-out {\n animation: slideOut 0.3s ease-in forwards;\n}\n\n@keyframes pulse-green {\n 0%,\n 100% {\n background-color: rgba(34, 197, 94, 0.1);\n }\n 50% {\n background-color: rgba(34, 197, 94, 0.2);\n }\n}\n\n@keyframes pulse-blue {\n 0%,\n 100% {\n background-color: rgba(59, 130, 246, 0.1);\n }\n 50% {\n background-color: rgba(59, 130, 246, 0.2);\n }\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes slideOut {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(100%);\n opacity: 0;\n }\n}\n",[],[209,561,393],"71bf6f94-1afe-11f1-b593-42dde27851f2","settings.tsx","cad84936-187c-11f1-a83c-42dde27851f2",538,["D",1772981555737],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Container, Input, Label } from \"./components/ui/index.ts\";\nimport { getAuthUser } from \"./utils/auth.ts\";\nimport {\n getBeeminderGoalSlug,\n getBeeminderMinutesPerUnit,\n getBeeminderToken,\n getNotificationsEnabled,\n getNotificationThresholdHours,\n getTogglApiToken,\n getTogglWorkspaceId,\n setBeeminderGoalSlug,\n setBeeminderMinutesPerUnit,\n setBeeminderToken,\n setNotificationsEnabled,\n setNotificationThresholdHours,\n setTogglApiToken,\n setTogglWorkspaceId,\n} from \"./utils/passphrase.ts\";\nimport { getPreferences, setPreferences } from \"./utils/settings-api.ts\";\nimport { setFocusModeConfig } from \"./utils/passphrase.ts\";\nimport yaml from \"https://esm.sh/js-yaml@4.1.0\";\n\n// --- Break Fraction Presets ---\n\nconst BREAK_FRACTIONS = [\n { value: 1 / 2, label: \"1/2\", description: \"Lazy (67% work time)\" },\n { value: 1 / 3, label: \"1/3\", description: \"Standard (75% work time)\" },\n { value: 1 / 4, label: \"1/4\", description: \"Industrious (80% work time)\" },\n { value: 1 / 5, label: \"1/5\", description: \"Hard (83% work time)\" },\n { value: 1 / 6, label: \"1/6\", description: \"Grinding (86% work time)\" },\n];\n\n// --- Account Section ---\n\nfunction AccountSection(\n { authUser }: { authUser: ReturnType },\n) {\n if (!authUser) {\n return (\n

Account

\n You are not logged in. Settings are saved to the server for\n authenticated users.{\" \"}\n \n Go back to the app\n {\" \"}\n to log in.\n

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

Account

\n Logged in as {authUser.email}\n

\n );\n}\n\n// --- Timer Section ---\n\nfunction TimerSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [currentFraction, setCurrentFraction] = useState(null);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n fetch(\"/api/me/state\")\n .then((r) => r.ok ? r.json() : null)\n .then((state) => {\n if (state?.breakFraction != null) {\n setCurrentFraction(state.breakFraction);\n }\n })\n .catch(() => {})\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleChange = async (fraction: number) => {\n if (!authUser) return;\n setSaving(true);\n try {\n // Load current state, update break fraction, save back\n const resp = await fetch(\"/api/me/state\");\n const state = resp.ok ? await resp.json() : null;\n if (state) {\n await fetch(\"/api/me/state\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n state: { ...state, breakFraction: fraction },\n }),\n });\n }\n setCurrentFraction(fraction);\n } catch {\n // silently fail\n }\n setSaving(false);\n };\n\n return (\n

Timer

\n {!authUser && (\n

\n Log in to change timer settings from here.\n

\n )}\n Break Fraction\n {loading ?

: (\n <>\n

\n {BREAK_FRACTIONS.map((f) => (\n handleChange(f.value)}\n disabled={!authUser || saving}\n title={f.description}\n class={`px-3 py-1.5 text-sm border rounded font-semibold transition-colors disabled:opacity-50 ${\n currentFraction === f.value\n ? \"bg-blue-300 border-blue-400 hover:bg-blue-400\"\n : \"bg-gray-100 border-gray-300 hover:bg-gray-200\"\n }`}\n >\n {f.label}\n \n ))}\n

\n {currentFraction != null && (\n

\n Current:{\" \"}\n {BREAK_FRACTIONS.find((f) => f.value === currentFraction)\n ?.description ?? `1/${Math.round(1 / currentFraction)}`}\n

\n )}\n \n )}\n

\n );\n}\n\n// --- Beeminder Section ---\n\nfunction BeeminderSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [token, setToken] = useState(\"\");\n const [goalSlug, setGoalSlug] = useState(\"\");\n const [minutesPerUnit, setMinutesPerUnit] = useState(\"15\");\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [feedback, setFeedback] = useState<\n { type: \"success\" | \"error\"; message: string } | null\n >(null);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n getPreferences()\n .then(async (prefs) => {\n const hasServerPrefs =\n !!(prefs.beeminder_token || prefs.beeminder_goal_slug);\n if (hasServerPrefs) {\n setToken(prefs.beeminder_token || \"\");\n setGoalSlug(prefs.beeminder_goal_slug || \"\");\n setMinutesPerUnit(prefs.beeminder_minutes_per_unit || \"15\");\n return;\n }\n // Migrate localStorage values to the server for existing users\n // who configured Beeminder via the Timeline UI before the Settings page existed\n const localToken = getBeeminderToken() || \"\";\n const localGoalSlug = getBeeminderGoalSlug() || \"\";\n const localMinutes = String(getBeeminderMinutesPerUnit());\n setToken(localToken);\n setGoalSlug(localGoalSlug);\n setMinutesPerUnit(localMinutes);\n if (localToken || localGoalSlug) {\n await setPreferences({\n beeminder_token: localToken,\n beeminder_goal_slug: localGoalSlug,\n beeminder_minutes_per_unit: localMinutes,\n }).catch(() => {});\n }\n })\n .catch(() => {\n // Server unreachable — show localStorage values\n setToken(getBeeminderToken() || \"\");\n setGoalSlug(getBeeminderGoalSlug() || \"\");\n setMinutesPerUnit(String(getBeeminderMinutesPerUnit()));\n })\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleSave = async () => {\n if (!authUser) return;\n setSaving(true);\n setFeedback(null);\n try {\n await setPreferences({\n beeminder_token: token,\n beeminder_goal_slug: goalSlug,\n beeminder_minutes_per_unit: minutesPerUnit,\n });\n // Sync to localStorage so Timeline UI stays consistent\n setBeeminderToken(token || null);\n setBeeminderGoalSlug(goalSlug || null);\n setBeeminderMinutesPerUnit(Number(minutesPerUnit) || 15);\n setFeedback({ type: \"success\", message: \"Saved\" });\n } catch {\n setFeedback({ type: \"error\", message: \"Failed to save\" });\n }\n setSaving(false);\n };\n\n return (\n

Integrations — Beeminder

\n {!authUser && (\n

\n )}\n {loading\n ?

\n : (\n

\n Auth Token\n \n

\n Goal Slug\n \n

\n Minutes per Unit\n \n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n {feedback && (\n \n {feedback.message}\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Toggl Section ---\n\nfunction TogglSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [token, setToken] = useState(\"\");\n const [workspaceId, setWorkspaceId] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [fetching, setFetching] = useState(false);\n const [feedback, setFeedback] = useState<\n { type: \"success\" | \"error\"; message: string } | null\n >(null);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n getPreferences()\n .then(async (prefs) => {\n const hasServerPrefs =\n !!(prefs.toggl_api_token || prefs.toggl_workspace_id);\n if (hasServerPrefs) {\n setToken(prefs.toggl_api_token || \"\");\n setWorkspaceId(prefs.toggl_workspace_id || \"\");\n return;\n }\n // Migrate localStorage values to the server\n const localToken = getTogglApiToken() || \"\";\n const localWorkspace = getTogglWorkspaceId() || \"\";\n setToken(localToken);\n setWorkspaceId(localWorkspace);\n if (localToken || localWorkspace) {\n await setPreferences({\n toggl_api_token: localToken,\n toggl_workspace_id: localWorkspace,\n }).catch(() => {});\n }\n })\n .catch(() => {\n setToken(getTogglApiToken() || \"\");\n setWorkspaceId(getTogglWorkspaceId() || \"\");\n })\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleFetchWorkspace = async () => {\n if (!token) return;\n setFetching(true);\n setFeedback(null);\n try {\n const resp = await fetch(\"/api/integrations/toggl/workspace\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ token }),\n });\n if (!resp.ok) {\n setFeedback({ type: \"error\", message: \"Failed to fetch workspace\" });\n } else {\n const data = await resp.json();\n setWorkspaceId(String(data.workspaceId));\n setFeedback({ type: \"success\", message: \"Workspace fetched\" });\n }\n } catch {\n setFeedback({ type: \"error\", message: \"Network error\" });\n }\n setFetching(false);\n };\n\n const handleSave = async () => {\n if (!authUser) return;\n setSaving(true);\n setFeedback(null);\n try {\n await setPreferences({\n toggl_api_token: token,\n toggl_workspace_id: workspaceId,\n });\n setTogglApiToken(token || null);\n setTogglWorkspaceId(workspaceId || null);\n setFeedback({ type: \"success\", message: \"Saved\" });\n } catch {\n setFeedback({ type: \"error\", message: \"Failed to save\" });\n }\n setSaving(false);\n };\n\n return (\n

\n Integrations — Toggl Track [BETA]\n

\n Send completed work sessions to Toggl from the History timeline.\n

\n {!authUser && (\n

\n Log in to configure Toggl Track.\n

\n )}\n {loading\n ?

\n : (\n

\n API Token\n \n

\n Find your token at{\" \"}\n \n track.toggl.com/profile\n \n

\n Workspace ID\n

\n \n \n {fetching ? \"...\" : \"Fetch\"}\n \n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n {feedback && (\n \n {feedback.message}\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Notification Section ---\n\nfunction NotificationSection() {\n const [enabled, setEnabled] = useState(() => getNotificationsEnabled());\n const [threshold, setThreshold] = useState(() => String(getNotificationThresholdHours()));\n const [permission, setPermission] = useState(() =>\n typeof Notification !== \"undefined\" ? Notification.permission : \"unavailable\"\n );\n\n const handleEnableTest = async () => {\n if (typeof Notification === \"undefined\") return;\n const result = await Notification.requestPermission();\n setPermission(result);\n if (result === \"granted\") {\n setNotificationsEnabled(true);\n setEnabled(true);\n new Notification(\"Third Timer\", { body: \"Notifications are working!\" });\n }\n };\n\n const handleToggle = () => {\n const next = !enabled;\n setNotificationsEnabled(next);\n setEnabled(next);\n };\n\n const handleThresholdChange = (val: string) => {\n setThreshold(val);\n const num = parseFloat(val);\n if (!isNaN(num) && num > 0) {\n setNotificationThresholdHours(num);\n }\n };\n\n return (\n

Notifications

\n Get a browser notification when your timer has been running for a long time.\n

\n {permission === \"unavailable\" ? (\n

\n Notifications are not supported in this browser.\n

\n ) : (\n

\n {permission === \"denied\" ? (\n

\n Notifications are blocked. Please allow notifications for this site in your browser settings.\n

\n ) : permission !== \"granted\" ? (\n \n Enable & Test\n \n ) : (\n <>\n

\n \n \n Enabled\n \n

\n \n Send test notification\n \n \n )}\n

\n Threshold (hours)\n \n

\n )}\n

\n );\n}\n\n// --- Focus Mode Section ---\n\nconst DEFAULT_FOCUS_YAML = `sections:\n header: false\n stats: true\n breakFraction: false\n resetSession: false\n history: false\n helpText: false\n footer: false\n`;\n\nfunction FocusModeSection(\n { authUser }: { authUser: ReturnType },\n) {\n const [yamlText, setYamlText] = useState(DEFAULT_FOCUS_YAML);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [feedback, setFeedback] = useState<\n { type: \"success\" | \"error\"; message: string } | null\n >(null);\n\n useEffect(() => {\n if (!authUser) {\n setLoading(false);\n return;\n }\n getPreferences()\n .then((prefs) => {\n if (prefs.focus_mode_config) {\n setYamlText(prefs.focus_mode_config);\n }\n })\n .catch(() => {})\n .finally(() => setLoading(false));\n }, [authUser]);\n\n const handleSave = async () => {\n if (!authUser) return;\n setFeedback(null);\n\n // Validate YAML\n try {\n const parsed = yaml.load(yamlText);\n if (!parsed || typeof parsed !== \"object\" || !(parsed as Record).sections) {\n setFeedback({ type: \"error\", message: \"YAML must have a 'sections' key\" });\n return;\n }\n } catch (e) {\n setFeedback({ type: \"error\", message: `Invalid YAML: ${(e as Error).message}` });\n return;\n }\n\n setSaving(true);\n try {\n await setPreferences({ focus_mode_config: yamlText });\n // Sync to localStorage so the main app picks it up\n setFocusModeConfig(yamlText);\n setFeedback({ type: \"success\", message: \"Saved\" });\n } catch {\n setFeedback({ type: \"error\", message: \"Failed to save\" });\n }\n setSaving(false);\n };\n\n return (\n

Focus Mode

\n Configure which UI sections are visible when focus mode is enabled.\n Toggle focus mode on/off from the main timer page.\n

\n {!authUser && (\n

\n )}\n {loading\n ?

\n : (\n

\n YAML Configuration\n setYamlText((e.target as HTMLTextAreaElement).value)}\n disabled={!authUser}\n rows={10}\n class=\"w-full mt-1 px-3 py-2 text-sm font-mono border border-gray-300 rounded bg-white disabled:opacity-50 disabled:bg-gray-50\"\n spellcheck={false}\n />\n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n {feedback && (\n \n {feedback.message}\n \n )}\n

\n )}\n

\n );\n}\n\n// --- Settings Page ---\n\nfunction SettingsPage() {\n const [authUser] = useState(() => getAuthUser());\n\n return (\n \n

Settings

\n \n ← Back to app\n \n

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

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[209,561,569],"c27f97c4-193c-11f1-b392-42dde27851f2","settings.html","cad4787e-187c-11f1-8458-42dde27851f2",411,["D",1772788417660],"\n\n \n \n \n \n\n Third Timer — Settings\n \n\n \n \n \n\n \n \n \n\n \n \n\n \n

\n \n \n\n",[],[209,561,577],"b1b4dffc-1a19-11f1-8b90-42dde27851f2","manifest.json","2c8f4d58-1a19-11f1-807d-42dde27851f2",525,["D",1772883308296],"{\n \"name\": \"Third Timer\",\n \"short_name\": \"ThirdTimer\",\n \"description\": \"Work flexibly, break proportionally\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#ffffff\",\n \"theme_color\": \"#000000\",\n \"icons\": [\n {\n \"src\": \"/icons/icon.svg\",\n \"sizes\": \"any\",\n \"type\": \"image/svg+xml\",\n \"purpose\": \"any\"\n },\n {\n \"src\": \"/icons/icon.svg\",\n \"sizes\": \"any\",\n \"type\": \"image/svg+xml\",\n \"purpose\": \"maskable\"\n }\n ]\n}\n",[],[209,561,585],"39c25e08-1d3d-11f1-9234-42dde27851f2","019c89ce-7cc0-75ad-bf77-39fcb9b489bf",693,["D",1773228422125],76,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { TimerState } from \"../shared/types.ts\";\nimport { BreakFractionSettings } from \"./components/BreakFractionSettings.tsx\";\nimport { OnboardingTip } from \"./components/OnboardingTip.tsx\";\nimport { Button } from \"./components/Button.tsx\";\nimport { Footer } from \"./components/Footer.tsx\";\nimport { HelpText } from \"./components/HelpText.tsx\";\nimport { Notification } from \"./components/Notification.tsx\";\nimport { TimerContainer } from \"./components/TimerContainer.tsx\";\nimport { HistoryView } from \"./components/HistoryView.tsx\";\nimport { Container } from \"./components/ui/index.ts\";\nimport * as TimerActions from \"./utils/timer-actions.ts\";\nimport { archiveSession } from \"./utils/history-api.ts\";\nimport { useOnboarding } from \"./hooks/useOnboarding.ts\";\nimport { useFocusMode } from \"./hooks/useFocusMode.ts\";\nimport { addPassphrase, getOwnerToken, getSessionIntent } from \"./utils/passphrase.ts\";\nimport { logEvent, initEventFlushing } from \"./utils/event-log.ts\";\nimport { loadState, saveState, debouncedSaveState } from \"./utils/state-persistence.ts\";\nimport { useStateSync } from \"./hooks/useStateSync.ts\";\nimport { ConflictDialog } from \"./components/ConflictDialog.tsx\";\nimport { isUserIdValidForToday } from \"./utils/user-id.ts\";\nimport { getAuthUser, linkAccount } from \"./utils/auth.ts\";\nimport { getPreferences } from \"./utils/settings-api.ts\";\nimport { setBeeminderToken, setBeeminderGoalSlug, setBeeminderMinutesPerUnit, setTogglApiToken, setTogglWorkspaceId } from \"./utils/passphrase.ts\";\n\nfunction App() {\n const [state, setState] = useState(() => {\n return {\n mode: \"idle\",\n workStartTime: null,\n breakStartTime: null,\n savedBreakMinutes: 0,\n breakFraction: 1 / 3,\n totalWorkTime: 0,\n totalBreakTime: 0,\n sessionStartedAt: null,\n };\n });\n\n const [authUser] = useState(() => getAuthUser());\n const onboarding = useOnboarding();\n const focusMode = useFocusMode();\n\n const [isLoading, setIsLoading] = useState(true);\n\n // Multi-device sync for authenticated users\n const { conflictState, resolveConflict } = useStateSync({\n authUser,\n state,\n setState,\n isLoading,\n });\n\n // Auto-link ownerToken when authenticated\n useEffect(() => {\n if (!authUser) return;\n const ownerToken = getOwnerToken();\n const linkedKey = `studiokare_linked_${authUser.id}_${ownerToken}`;\n if (!localStorage.getItem(linkedKey)) {\n linkAccount(ownerToken).then((ok) => {\n if (ok) localStorage.setItem(linkedKey, \"1\");\n });\n }\n }, [authUser]);\n\n // Hydrate Beeminder preferences from server for authenticated users\n useEffect(() => {\n if (!authUser) return;\n getPreferences().then((prefs) => {\n if (prefs.beeminder_token) setBeeminderToken(prefs.beeminder_token);\n if (prefs.beeminder_goal_slug) setBeeminderGoalSlug(prefs.beeminder_goal_slug);\n if (prefs.beeminder_minutes_per_unit) setBeeminderMinutesPerUnit(Number(prefs.beeminder_minutes_per_unit));\n if (prefs.toggl_api_token) setTogglApiToken(prefs.toggl_api_token);\n if (prefs.toggl_workspace_id) setTogglWorkspaceId(prefs.toggl_workspace_id);\n }).catch(() => {}); // non-fatal\n }, [authUser]);\n\n // Hydrate group memberships from server for authenticated users\n useEffect(() => {\n if (!authUser) return;\n fetch(\"/api/me/groups\")\n .then((r) => r.json())\n .then((data) => {\n const groups: string[] = data.groups ?? [];\n for (const g of groups) {\n addPassphrase(g);\n }\n })\n .catch(() => {}); // non-fatal\n }, [authUser]);\n\n // Load state on app initialization, archive stale sessions from previous days\n useEffect(() => {\n const initializeState = async () => {\n try {\n // Check for day rollover: if stored user_id is from a previous day,\n // archive that stale session before the new user_id is generated\n const storedUserId = localStorage.getItem(\"timer_user_id\");\n if (storedUserId && !isUserIdValidForToday(storedUserId)) {\n // Load the stale state using the old user_id directly\n try {\n const resp = await fetch(`/api/state/${storedUserId}`);\n if (resp.ok) {\n const staleState = await resp.json();\n if (staleState && (staleState.totalWorkTime > 0 || staleState.mode === \"working\")) {\n // Intent from localStorage is the best we have for day-rollover\n const intent = getSessionIntent();\n // Include in-progress work/break so we don't lose the last block\n let workTime = staleState.totalWorkTime;\n let breakTime = staleState.totalBreakTime;\n const now = Date.now();\n if (staleState.mode === \"working\" && staleState.workStartTime) {\n workTime += (now - staleState.workStartTime) / 1000 / 60;\n }\n if (staleState.mode === \"breaking\" && staleState.breakStartTime) {\n breakTime += Math.min(\n (now - staleState.breakStartTime) / 1000 / 60,\n staleState.savedBreakMinutes,\n );\n }\n await archiveSession({\n intent,\n workTime,\n breakTime,\n breakFraction: staleState.breakFraction,\n sessionStartedAt: staleState.sessionStartedAt ?? null,\n });\n }\n }\n } catch {\n // Non-critical: skip archival if fetch fails\n }\n // Clear the stale user_id so getUserId() generates a fresh one\n localStorage.removeItem(\"timer_user_id\");\n }\n\n const savedState = await loadState();\n\n // If authenticated but no auth state exists yet, adopt today's anonymous session\n if (authUser && !savedState) {\n const anonUserId = localStorage.getItem(\"timer_user_id\");\n if (anonUserId) {\n // anonUserId is always today's here — stale ones were removed above\n try {\n const anonResp = await fetch(`/api/state/${anonUserId}`);\n if (anonResp.ok) {\n const anonState: TimerState | null = await anonResp.json();\n if (anonState && (anonState.totalWorkTime > 0 || anonState.mode === \"working\" || anonState.mode === \"breaking\")) {\n await saveState(anonState);\n localStorage.removeItem(\"timer_user_id\");\n setState(anonState);\n return;\n }\n }\n } catch {\n // Non-critical: skip adoption if fetch fails\n }\n }\n }\n\n if (savedState) {\n setState(savedState);\n }\n } catch (error) {\n console.warn(\"Failed to load initial state:\", error);\n } finally {\n setIsLoading(false);\n }\n };\n\n initializeState();\n }, []);\n\n // Save state whenever it changes (anonymous users only — auth users use useStateSync)\n useEffect(() => {\n if (!isLoading && !authUser) {\n debouncedSaveState(state);\n }\n }, [state, isLoading, authUser]);\n\n const [notification, setNotification] = useState<{\n message: string;\n type: \"success\" | \"info\" | \"warning\";\n } | null>(null);\n\n const showNotification = useCallback(\n (message: string, type: \"success\" | \"info\" | \"warning\" = \"info\") => {\n setNotification({ message, type });\n },\n [],\n );\n\n // Show notification and clean up URL if redirected back after email change\n useEffect(() => {\n const params = new URLSearchParams(window.location.search);\n if (params.has(\"email_changed\")) {\n showNotification(\"Email address updated successfully\", \"success\");\n const url = new URL(window.location.href);\n url.searchParams.delete(\"email_changed\");\n window.history.replaceState({}, \"\", url.toString());\n }\n }, []);\n\n const [showHistory, setShowHistory] = useState(false);\n const [historyVersion, setHistoryVersion] = useState(0);\n\n const resetSession = useCallback(async () => {\n // Capture intent from localStorage BEFORE resetting anything\n const intent = getSessionIntent();\n\n // Calculate final work/break including any in-progress segment\n let finalWorkTime = state.totalWorkTime;\n let finalBreakTime = state.totalBreakTime;\n const now = Date.now();\n if (state.mode === \"working\" && state.workStartTime) {\n finalWorkTime += (now - state.workStartTime) / 1000 / 60;\n }\n if (state.mode === \"breaking\" && state.breakStartTime) {\n const breakDuration = (now - state.breakStartTime) / 1000 / 60;\n finalBreakTime += Math.min(breakDuration, state.savedBreakMinutes);\n }\n\n logEvent(\"session_reset\", { totalWorkTime: finalWorkTime, totalBreakTime: finalBreakTime });\n\n if (finalWorkTime > 0) {\n const ok = await archiveSession({\n intent,\n workTime: finalWorkTime,\n breakTime: finalBreakTime,\n breakFraction: state.breakFraction,\n sessionStartedAt: state.sessionStartedAt,\n });\n if (ok) {\n setHistoryVersion((v) => v + 1);\n }\n }\n\n const result = TimerActions.resetSession(state);\n setState(result.newState);\n if (result.notification) {\n showNotification(result.notification.message, result.notification.type);\n }\n }, [state, showNotification]);\n\n const handleBreakFractionChange = useCallback((fraction: number) => {\n setState((prev) => {\n logEvent(\"break_fraction_changed\", { oldValue: prev.breakFraction, newValue: fraction });\n return {\n ...prev,\n breakFraction: fraction,\n };\n });\n }, []);\n\n if (isLoading) {\n return (\n \n

Third Timer

\n \n );\n }\n\n return (\n \n {conflictState && (\n \n )}\n {notification && (\n setNotification(null)}\n />\n )}\n {focusMode.isVisible(\"header\") && (\n

Third Timer

Work flexibly, break proportionally

\n )}\n

\n \n {focusMode.enabled ? \"Focus ON\" : \"Focus\"}\n \n

\n \n {(onboarding.isTipVisible(\"seen_break_fraction\") || focusMode.isVisible(\"breakFraction\")) && onboarding.has(\"started_timer\") && (state.mode !== \"idle\" || state.totalWorkTime > 0) && (\n <>\n \n {onboarding.isTipVisible(\"seen_break_fraction\") && (\n

\n { onboarding.dismissTip(\"seen_break_fraction\"); onboarding.complete(\"seen_reset_session\"); }}>\n

The break fraction controls how much break you earn per work time — e.g. 1/3 means 20 minutes of work earns ~7 minutes of break.

\n \n

\n )}\n \n )}\n

\n {(onboarding.isTipVisible(\"seen_reset_session\") || focusMode.isVisible(\"resetSession\")) && (state.mode !== \"idle\" || state.totalWorkTime > 0) && (\n <>\n \n {onboarding.isTipVisible(\"seen_reset_session\") && (\n

\n onboarding.dismissTip(\"seen_reset_session\")}>\n

Use Reset Session to end your current session and start fresh. Your session will be saved to history.

\n \n

\n )}\n \n )}\n {focusMode.isVisible(\"history\") && (\n

\n setShowHistory((v) => !v)}\n className=\"text-sm text-gray-500 hover:text-gray-700 underline\"\n >\n {showHistory ? \"Hide History\" : \"View History\"}\n \n

\n )}\n

\n {focusMode.isVisible(\"history\") && showHistory && }\n {focusMode.isVisible(\"helpText\") && }\n {focusMode.isVisible(\"footer\") &&

Recommendations

Weekly Digest

Recommendations

Weekly Digest

Hi

Hi

Starter Template

Account

Account

Timer

Integrations — Beeminder

\n Integrations — Toggl Track [BETA]\n

Notifications

Focus Mode

Settings

Third Timer

Third Timer

Admin Login

Presets

{group}

Admin Dashboard

Daily

Weekly

Intentions

\n Timer updated on another device\n

Invalid or expired link

Invalid or expired link

Hi

Diff · v725