\n {block.heading_2?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

\n {block.heading_3?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

\n {block.bulleted_list_item?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

\n {block.numbered_list_item?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

\n \n \n {block.to_do?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n \n

\n \n {block.code?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n \n

\n Unsupported block type: {block.type}\n

{renderBlockContent()}

{value}

\n {Array.isArray(value) && value.map((item: string, i: number) => (\n \n {item}\n \n ))}\n

\n {value ? new Date(value).toLocaleDateString() : '-'}\n

\n );\n\n case 'url':\n return (\n \n {value}\n \n );\n\n case 'email':\n return (\n \n {value}\n \n );\n\n case 'phone_number':\n return (\n \n {value}\n \n );\n\n case 'status':\n return {value};\n\n default:\n return (\n \n Unsupported: {property.type}\n \n );\n }\n };\n\n return (\n

\n {name}: {renderValue()}\n

\n );\n}\n",[],[354,360,384],[354,360],{"_105":393,"_96":394,"_157":395,"_159":355,"_160":142,"_161":176,"_163":119,"_107":396,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":397,"_99":406},"6363c854-ba88-11f0-9722-0224a6c84d84","hooks","019a55c4-9acc-74ad-b23a-8e3274545811",["D",1762375539404],[398],{"_105":399,"_96":400,"_157":401,"_159":395,"_160":142,"_161":202,"_163":119,"_107":402,"_101":178,"_165":204,"_167":403,"_168":22,"_169":-5,"_170":404,"_99":405},"1ad18de8-ba8c-11f0-8668-0224a6c84d84","useHealth.ts","6363a70c-ba88-11f0-9722-0224a6c84d84",["D",1762377135643],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface HealthData {\n timestamp: string;\n project: {\n username: string;\n name: string;\n branch: string;\n links: {\n self: {\n project: string;\n };\n };\n };\n configuration: {\n NOTION_API_KEY: boolean;\n WEBHOOK_SECRET: boolean;\n };\n}\n\ninterface UseHealthResult {\n health: HealthData | null;\n loading: boolean;\n error: string | null;\n}\n\nexport function useHealth(): UseHealthResult {\n const [health, setHealth] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchHealth() {\n try {\n const response = await fetch('/api/health');\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const result = await response.json();\n setHealth(result);\n setError(null);\n } catch (err: any) {\n setError(err.message || 'Failed to fetch health data');\n setHealth(null);\n } finally {\n setLoading(false);\n }\n }\n\n fetchHealth();\n }, []);\n\n return { health, loading, error };\n}\n",[],[354,394,400],[354,394],{"_105":408,"_96":345,"_157":409,"_159":355,"_160":142,"_161":176,"_163":119,"_107":410,"_101":213,"_165":179,"_167":411,"_168":22,"_169":-5,"_170":412,"_99":413},"636436a4-ba88-11f0-9722-0224a6c84d84","340d9950-b343-11f0-9835-0224a6c84d84",["D",1762375539404],"# Frontend\n\nThis directory contains the React frontend for the Notion webhook integration application.\n\n## Structure\n\n- **index.html** - HTML shell that loads the React app\n- **index.tsx** - React app entry point\n- **components/** - React components\n - **App.tsx** - Main application component\n - **NotionBlock.tsx** - Renders Notion block content\n - **NotionProperty.tsx** - Displays Notion page properties\n\n## React Configuration\n\n**IMPORTANT**: All React files must:\n1. Include `/** @jsxImportSource https://esm.sh/react@18.2.0 */` at the top\n2. Pin React dependencies to version 18.2.0: `?deps=react@18.2.0`\n3. Use consistent React version across all imports\n\n## Styling\n\nUses Pico CSS (minimal CSS framework loaded from CDN in index.html). Pico automatically styles semantic HTML elements without requiring CSS classes, keeping markup clean and maintainable. We use it in classless mode with custom padding styles for proper spacing.\n\n## API Communication\n\n- Fetch data from `/api/*` endpoints\n- Use shared types from `../shared/types.ts`\n- Handle loading and error states in components\n\n## Error Handling\n\nThe error catching script is included in index.html to capture client-side errors for better debugging.\n\n## Development\n\nSince this is a Val Town project, the frontend is served through Hono routes defined in `main.http.tsx`.\n",[],[354,345],{"_105":415,"_96":416,"_157":417,"_159":355,"_160":142,"_161":176,"_163":119,"_107":418,"_101":188,"_165":179,"_167":419,"_168":22,"_169":-5,"_170":420,"_99":421},"63643c8a-ba88-11f0-9722-0224a6c84d84","index.html","3412c51a-b343-11f0-833e-0224a6c84d84",["D",1762375539404],"\n\n \n \n \n Notion Webhook Integration\n\n \n \n \n\n \n \n \n \n

\n\n \n \n \n\n",[],[354,416],{"_105":423,"_96":424,"_157":425,"_159":355,"_160":142,"_161":426,"_163":119,"_107":427,"_101":32,"_165":204,"_167":428,"_168":22,"_169":-5,"_170":429,"_99":430},"34d2d0d0-b343-11f0-9734-0224a6c84d84","index.tsx","34d2d184-b343-11f0-9734-0224a6c84d84",30,["D",1761576166583],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render(\n \n \n \n);\n",[],[354,424],[354],{"_105":433,"_96":434,"_157":435,"_159":-5,"_160":142,"_161":436,"_163":119,"_107":437,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":438,"_99":464},"335985a0-b343-11f0-9734-0224a6c84d84","shared","33598668-b343-11f0-9734-0224a6c84d84",4,["D",1761576165404],[439,446,455],{"_105":440,"_96":345,"_157":441,"_159":435,"_160":142,"_161":176,"_163":119,"_107":442,"_101":178,"_165":179,"_167":443,"_168":22,"_169":-5,"_170":444,"_99":445},"636443a6-ba88-11f0-9722-0224a6c84d84","346f015e-b343-11f0-b824-0224a6c84d84",["D",1762375539404],"# Shared\n\nThis directory contains code shared between frontend (browser) and backend (Deno).\n\n**Critical Rule:** All code here MUST work in both browser and Deno environments.\n\n## Files\n\n### `types.ts` - TypeScript Interfaces\n\n**Purpose:** Define data structures shared across all layers of the application.\n\n**What Goes Here:**\n- ✅ Controller response format (`ControllerResponse`)\n- ✅ Notion data structures (`NotionPage`, `NotionDatabase`, etc.)\n- ✅ API request/response types (`UpdatePageRequest`, `PageResponse`, etc.)\n- ✅ Common data models used in both frontend and backend\n- ✅ Enum types for shared constants\n\n**Naming Conventions:**\n- Interfaces/Types: PascalCase (e.g., `NotionWebhookPayload`, `PageResponse`)\n- Enum values: SCREAMING_SNAKE_CASE or PascalCase depending on usage\n\n**Example:**\n\n```typescript\n// Standardized controller response\nexport interface ControllerResponse {\n success: boolean;\n data: T | null;\n error: string | null;\n details?: string;\n}\n\n// Notion page structure\nexport interface NotionPage {\n id: string;\n properties: Record;\n created_time: string;\n last_edited_time: string;\n}\n\n// API request type\nexport interface UpdatePageRequest {\n properties: Record;\n}\n```\n\n### `utils.ts` - Browser-Compatible Utility Functions\n\n**Purpose:** Pure utility functions that work in BOTH browser and Deno environments.\n\n**Critical Constraint:** NO platform-specific APIs allowed.\n\n**What Goes Here:**\n- ✅ String manipulation functions\n- ✅ Date formatting (using standard Date API only)\n- ✅ Data transformation functions\n- ✅ Validation helpers (using standard JavaScript)\n- ✅ Array/object utilities\n- ✅ Notion-specific helpers (ID formatting, rich text extraction)\n\n**What Does NOT Go Here:**\n- ❌ Deno APIs (`Deno.env`, `Deno.readFile`, etc.) → use `backend/utils/`\n- ❌ Browser APIs (`window`, `document`, `localStorage`) → use frontend code\n- ❌ Node APIs (`fs`, `path`, etc.)\n- ❌ External API calls → use `backend/services/`\n- ❌ Business logic → use `backend/controllers/`\n\n**Rules:**\n- Pure functions with predictable outputs\n- No side effects (no global state, no I/O)\n- Single responsibility per function\n- Type-safe with TypeScript\n- Well-documented with JSDoc comments\n\n**Example Functions:**\n\n```typescript\n/**\n * Check if a string is a valid Notion page ID format\n */\nexport function isValidPageId(pageId: string): boolean {\n if (!pageId || typeof pageId !== 'string') {\n return false;\n }\n const cleanId = pageId.replace(/-/g, '');\n return cleanId.length === 32 && /^[a-f0-9]+$/i.test(cleanId);\n}\n\n/**\n * Format a Notion page ID with hyphens in standard format (8-4-4-4-12)\n */\nexport function formatPageId(pageId: string): string {\n const clean = pageId.replace(/-/g, '');\n return `${clean.slice(0, 8)}-${clean.slice(8, 12)}-${clean.slice(12, 16)}-${clean.slice(16, 20)}-${clean.slice(20)}`;\n}\n\n/**\n * Extract plain text from Notion rich text array\n */\nexport function getPlainText(richText: any[]): string {\n if (!Array.isArray(richText)) {\n return '';\n }\n return richText.map(text => text.plain_text || '').join('');\n}\n\n/**\n * Get a property value from Notion page properties by type\n */\nexport function getPropertyValue(properties: any, propertyName: string): any {\n const property = properties[propertyName];\n if (!property) return null;\n\n switch (property.type) {\n case 'title':\n return getPlainText(property.title);\n case 'rich_text':\n return getPlainText(property.rich_text);\n case 'number':\n return property.number;\n case 'select':\n return property.select?.name || null;\n case 'date':\n return property.date?.start || null;\n // ... more types\n default:\n return property;\n }\n}\n```\n\n## Import Patterns\n\n### From Frontend (Browser)\n\n```typescript\n// frontend/components/App.tsx\nimport { getPropertyValue } from \"../../shared/utils.ts\";\nimport type { NotionPage } from \"../../shared/types.ts\";\n```\n\n### From Backend (Deno)\n\n```typescript\n// backend/controllers/pageController.ts\nimport { isValidPageId } from '../../shared/utils.ts';\nimport type { ControllerResponse } from '../../shared/types.ts';\n```\n\n## Shared vs Backend Utils\n\n### When to Use `shared/utils.ts`\n\nUse when the function:\n- Works in both browser AND Deno\n- Uses only standard JavaScript/TypeScript\n- Has no platform-specific dependencies\n\n**Examples:**\n- String formatting: `formatPageId(id)`\n- Data extraction: `getPlainText(richText)`\n- Simple validation: `isValidEmail(email)`\n- Array utilities: `chunk(array, size)`\n\n### When to Use `backend/utils/`\n\nUse when the function:\n- Only runs in Deno (backend)\n- Needs Deno-specific APIs (Web Crypto, file system, etc.)\n- Is never called from frontend\n\n**Examples:**\n- Cryptography: `sha256(message)` using Web Crypto API\n- JWT signing: `signToken(payload)` using Deno crypto\n- Environment parsing: `parseEnvConfig()`\n- File hashing: `hashFile(path)`\n\n## Guidelines for Adding Code\n\n### Adding New Types\n\n1. Define interface in `types.ts`\n2. Use clear, descriptive PascalCase names\n3. Document complex types with JSDoc comments\n4. Include all required fields, mark optional with `?`\n5. Use generics where appropriate\n\n```typescript\n/**\n * Response from page update operations\n */\nexport interface PageUpdateResponse {\n page: NotionPage;\n updatedAt: string;\n changes: string[];\n}\n```\n\n### Adding New Utils\n\n1. Verify function works in BOTH browser and Deno\n2. Test with standard JavaScript only (no platform APIs)\n3. Write as pure function (no side effects)\n4. Add JSDoc documentation\n5. Use TypeScript types for parameters and return values\n6. Keep functions small and focused\n\n```typescript\n/**\n * Normalize a Notion page ID by removing hyphens\n * @param pageId - The page ID with or without hyphens\n * @returns The normalized ID (32 hex characters)\n */\nexport function normalizePageId(pageId: string): string {\n return pageId.replace(/-/g, '');\n}\n```\n\n## Testing Compatibility\n\nTo ensure code works in both environments:\n\n### Browser Test\nOpen browser console and test:\n```javascript\n// Test your function\nconst result = getPlainText([{plain_text: \"Hello\"}]);\nconsole.log(result); // Should work\n```\n\n### Deno Test\n```typescript\n// Test in Deno REPL or script\nimport { getPlainText } from \"./shared/utils.ts\";\nconsole.log(getPlainText([{plain_text: \"Hello\"}])); // Should work\n```\n\n### ❌ Common Mistakes\n\n```typescript\n// ❌ BAD - Uses Deno API\nexport function getEnv(key: string): string {\n return Deno.env.get(key) || ''; // Won't work in browser!\n}\n\n// ❌ BAD - Uses browser API\nexport function saveToLocal(key: string, value: string): void {\n localStorage.setItem(key, value); // Won't work in Deno!\n}\n\n// ❌ BAD - Uses Node API\nexport function readFile(path: string): string {\n return require('fs').readFileSync(path); // Won't work anywhere in Val Town!\n}\n\n// ✅ GOOD - Pure JavaScript\nexport function toKebabCase(str: string): string {\n return str.toLowerCase().replace(/\\s+/g, '-');\n}\n```\n\n## Best Practices\n\n1. **Platform Independence:** Never use Deno, Node, or browser-specific APIs\n2. **Pure Functions:** No side effects, predictable outputs\n3. **Type Safety:** Always use TypeScript types\n4. **Documentation:** Add JSDoc comments for public functions\n5. **Single Responsibility:** Each function does one thing well\n6. **Test Both Environments:** Verify code works in browser and Deno\n7. **Standard Library Only:** Use only JavaScript standard library features\n8. **No External Calls:** No API calls, database queries, or file I/O\n\n## Common Use Cases\n\n### Notion ID Utilities\n```typescript\nisValidPageId(id) // Validate format\nnormalizePageId(id) // Remove hyphens\nformatPageId(id) // Add hyphens (8-4-4-4-12)\n```\n\n### Notion Data Extraction\n```typescript\ngetPlainText(richText) // Extract text from rich text\ngetPropertyValue(properties, name) // Get typed property value\n```\n\n### Data Validation\n```typescript\nisValidEmail(email) // Email format check\nisValidUrl(url) // URL format check\nisEmpty(value) // Check for empty values\n```\n\n### String Utilities\n```typescript\nslugify(text) // Convert to URL-safe slug\ntruncate(text, length) // Truncate with ellipsis\ncapitalize(text) // Capitalize first letter\n```\n\n## See Also\n\n- `/backend/README.md` - Backend architecture and `backend/utils/`\n- `/frontend/README.md` - Frontend architecture\n- `CLAUDE.md` - Complete project architecture guidelines\n",[],[434,345],{"_105":447,"_96":448,"_157":449,"_159":435,"_160":142,"_161":450,"_163":119,"_107":451,"_101":32,"_165":204,"_167":452,"_168":22,"_169":-5,"_170":453,"_99":454},"3475c1e2-b343-11f0-83fd-0224a6c84d84","types.ts","3475c2be-b343-11f0-83fd-0224a6c84d84",25,["D",1761576167271],"/**\n * Shared TypeScript types and interfaces\n * These work in both frontend (browser) and backend (Deno)\n */\n\n/**\n * Standard response format for all controller functions\n */\nexport interface ControllerResponse {\n success: boolean;\n data: T | null;\n error: string | null;\n details?: string;\n}\n\n/**\n * Notion page response (simplified)\n * For full types, use @notionhq/client types in backend\n */\nexport interface NotionPage {\n id: string;\n object: 'page';\n created_time: string;\n last_edited_time: string;\n properties: Record;\n parent: {\n type: string;\n database_id?: string;\n page_id?: string;\n };\n url: string;\n}\n\n/**\n * Notion database response (simplified)\n */\nexport interface NotionDatabase {\n id: string;\n object: 'database';\n created_time: string;\n last_edited_time: string;\n title: Array<{\n type: string;\n plain_text: string;\n }>;\n properties: Record;\n}\n\n/**\n * Notion webhook payload\n */\nexport interface NotionWebhookPayload {\n type: 'page' | 'database';\n page?: NotionPage;\n database?: NotionDatabase;\n}\n\n/**\n * Common page properties (extend as needed)\n */\nexport interface PageProperties {\n [key: string]: any;\n}\n\n/**\n * API request/response types\n */\nexport interface UpdatePageRequest {\n properties: PageProperties;\n}\n\nexport interface CreatePageRequest {\n databaseId: string;\n properties: PageProperties;\n}\n\nexport interface PageResponse {\n page: NotionPage;\n}\n\nexport interface PagesListResponse {\n pages: NotionPage[];\n}\n",[],[434,448],{"_105":456,"_96":457,"_157":458,"_159":435,"_160":142,"_161":459,"_163":119,"_107":460,"_101":32,"_165":204,"_167":461,"_168":22,"_169":-5,"_170":462,"_99":463},"3466b1c0-b343-11f0-be0d-0224a6c84d84","utils.ts","3466b274-b343-11f0-be0d-0224a6c84d84",23,["D",1761576167138],"/**\n * Shared utility functions\n * IMPORTANT: These must work in both browser AND Deno (no Deno APIs allowed)\n */\n\n/**\n * Check if a string is a valid Notion page ID format\n */\nexport function isValidPageId(pageId: string): boolean {\n if (!pageId || typeof pageId !== 'string') {\n return false;\n }\n\n // Notion IDs are 32 characters (with or without hyphens)\n const cleanId = pageId.replace(/-/g, '');\n return cleanId.length === 32 && /^[a-f0-9]+$/i.test(cleanId);\n}\n\n/**\n * Normalize a Notion page ID (remove hyphens)\n */\nexport function normalizePageId(pageId: string): string {\n return pageId.replace(/-/g, '');\n}\n\n/**\n * Format a Notion page ID with hyphens in standard format\n * 8-4-4-4-12\n */\nexport function formatPageId(pageId: string): string {\n const clean = normalizePageId(pageId);\n return `${clean.slice(0, 8)}-${clean.slice(8, 12)}-${clean.slice(12, 16)}-${clean.slice(16, 20)}-${clean.slice(20)}`;\n}\n\n/**\n * Extract plain text from Notion rich text array\n */\nexport function getPlainText(richText: any[]): string {\n if (!Array.isArray(richText)) {\n return '';\n }\n return richText.map(text => text.plain_text || '').join('');\n}\n\n/**\n * Safely get a property value from Notion page properties\n */\nexport function getPropertyValue(properties: any, propertyName: string): any {\n const property = properties[propertyName];\n if (!property) {\n return null;\n }\n\n // Extract value based on property type\n switch (property.type) {\n case 'title':\n return getPlainText(property.title);\n case 'rich_text':\n return getPlainText(property.rich_text);\n case 'number':\n return property.number;\n case 'select':\n return property.select?.name || null;\n case 'multi_select':\n return property.multi_select?.map((s: any) => s.name) || [];\n case 'date':\n return property.date?.start || null;\n case 'checkbox':\n return property.checkbox;\n case 'url':\n return property.url;\n case 'email':\n return property.email;\n case 'phone_number':\n return property.phone_number;\n case 'status':\n return property.status?.name || null;\n default:\n return property;\n }\n}\n",[],[434,457],[434],{"_105":466,"_96":467,"_157":468,"_159":-5,"_160":142,"_161":469,"_163":119,"_107":470,"_101":178,"_165":179,"_167":471,"_168":22,"_169":-5,"_170":472,"_99":473},"cda20732-b34c-11f0-a588-0224a6c84d84",".vtignore","348c5164-b343-11f0-a4cb-0224a6c84d84",69,["D",1761580289701],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\nvars.env",[],[467],{"_105":475,"_96":476,"_157":477,"_159":-5,"_160":142,"_161":478,"_163":119,"_107":479,"_101":32,"_165":179,"_167":480,"_168":22,"_169":-5,"_170":481,"_99":482},"34852a88-b343-11f0-be0d-0224a6c84d84","AGENTS.md","34852b46-b343-11f0-be0d-0224a6c84d84",27,["D",1761576167373],"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});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[476],{"_105":484,"_96":485,"_157":486,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":487,"_101":488,"_165":179,"_167":489,"_168":22,"_169":-5,"_170":490,"_99":491},"95057a0c-ba91-11f0-a239-0224a6c84d84","CLAUDE.md","3493a0e0-b343-11f0-b2ec-0224a6c84d84",["D",1762379488149],19,"# CLAUDE.md\n\nThis file provides project-specific development guidelines for working with this Val Town application.\n\n**Prerequisites**: This assumes you've completed initial setup. If scaffolding a new val from scratch, see `SCAFFOLD.md` first.\n\n**Note**: For general Val Town platform patterns (triggers, redirects, standard library, React config), see `AGENTS.md`.\n\n## Project Identity\n\nThis is a **Notion webhook integration application** that:\n\n- Receives webhooks from Notion when pages/databases change\n- Processes Notion data and integrates with external services (Firecrawler, etc.)\n- Saves processed results back to Notion\n- Provides a React frontend for viewing and managing Notion data\n\n## Architecture Overview\n\nThis val follows a strict **3-layer MVC architecture**. See sections below for detailed patterns.\n\n## Import Patterns\n\n```bash\nmkdir -p backend/controllers backend/routes/api backend/routes/tasks backend/routes/views backend/services backend/utils backend/crons backend/email\nmkdir -p frontend/components frontend/hooks\nmkdir -p shared\n```\n\n**Directory Purpose:**\n- `backend/controllers/` - Business logic\n- `backend/routes/` - HTTP endpoints (webhook handlers, APIs, views)\n- `backend/services/` - External API integrations\n- `backend/utils/` - Backend-only utilities (pure functions, no external deps)\n- `backend/crons/` - Val Town cron trigger handlers (scheduled tasks)\n- `backend/email/` - Val Town email triggers & utilities (incoming/outgoing emails)\n- `frontend/components/` - React components\n- `frontend/hooks/` - Custom React hooks\n- `shared/` - Cross-platform code (types, utilities)\n\n### 2. Create main.http.tsx (Hono Entry Point)\n\nCreate `main.http.tsx` with:\n\n- **IMPORTANT**: Use `.http.tsx` extension (see AGENTS.md for Val Town trigger types)\n- Hono app initialization\n- Error unwrapper: `app.onError((err, c) => { throw err; })`\n- Static file serving using Val Town utils (see AGENTS.md for serveFile pattern)\n- Root route serving `frontend/index.html`\n- Authentication middleware (array-based protection pattern)\n- Commented route mounting examples\n- Export: `export default app.fetch`\n\n### 3. Create Backend Service Files\n\nOrganize services by external API. For Notion, create a directory structure:\n\n**backend/services/notion/index.ts**:\n\n- Import Notion client: `import { Client } from \"npm:@notionhq/client@2\"`\n- Initialize and export client: `export const notion = new Client({ auth: Deno.env.get(\"NOTION_API_KEY\") })`\n- Re-export all functions from submodules:\n - `export * from \"./pages.ts\"`\n - `export * from \"./databases.ts\"`\n\n**backend/services/notion/pages.ts**:\n\n- Import shared client: `import { notion } from \"./index.ts\"`\n- Export page-related functions:\n - `getNotionPage(pageId)` - Fetch page by ID\n - `updateNotionPage(pageId, properties)` - Update page properties\n - `createNotionPage(databaseId, properties)` - Create new page\n - `getPageBlocks(pageId)` - Get page content blocks\n\n**backend/services/notion/databases.ts**:\n\n- Import shared client: `import { notion } from \"./index.ts\"`\n- Export database-related functions:\n - `queryNotionDatabase(databaseId, filter?, sorts?)` - Query database\n - `getNotionDatabase(databaseId)` - Get database info\n\n**Service function rules:**\n\n- All functions return `{success, data, error}` format\n- Catch errors and return error objects (don't throw)\n- Use the shared `notion` client from index.ts\n\n### 4. Create Backend Controller Files\n\n**IMPORTANT:** Organize controllers by purpose or context. Each controller handles a specific domain or concern.\n\n**backend/controllers/healthController.ts**:\n\n- Export `getHealth()` function for system health checks\n- Returns system information in `data`:\n - `timestamp` - Current ISO timestamp\n - `project` - Val Town project info (from `backend/utils/valtown.ts`)\n - `configuration` - Environment variable status (NOTION_API_KEY, WEBHOOK_SECRET)\n- Uses `backend/utils/valtown.ts` for project information\n- No service calls needed (checks environment variables and parses import.meta.url)\n- Returns standard `{success, data, error, details?}` format\n- Route returns just `data` (success indicated by HTTP 200)\n- PUBLIC - No authentication required\n- **Default baseline view**: Displayed on root `/` by `App.tsx`\n - Shows project name in H1: `username/projectname`\n - Shows endpoint path in H2: `/api/health`\n - Displays full JSON response\n - As you add more info to health endpoint, it automatically appears in UI\n\n**backend/controllers/pageController.ts**:\n\n- Import Notion service: `import * as notionService from '../services/notion/index.ts'`\n- Export controller functions:\n - `getPage(pageId)` - Get page with validation\n - `updatePage(pageId, properties)` - Update with validation\n - `createPage(databaseId, properties)` - Create with validation\n - `getPageContent(pageId)` - Get blocks with validation\n - `getRecentPages(hours?)` - Get recently edited pages\n- All functions return `{success, data, error, details?}` format\n- Include `filterSensitiveProperties()` helper to remove button properties\n- Validate inputs before calling services\n\n**Controller Organization Pattern:**\n- Group related operations in one controller (e.g., all page operations in `pageController.ts`)\n- Separate concerns by domain (health, pages, webhooks, etc.)\n- Controllers can grow to include more functions as features are added\n- May call services (Notion, external APIs) or just check system state (health)\n\n### 5. Create Authentication Middleware\n\n**backend/routes/authCheck.ts**:\n\n- Import Hono types: `import { Context, Next } from \"npm:hono@4\"`\n- Export `webhookAuth(c, next)` function:\n - Check for `X-API-KEY` header (case-insensitive)\n - Compare with `Deno.env.get('WEBHOOK_SECRET')`\n - If WEBHOOK_SECRET not configured, log warning and bypass auth (development mode)\n - Return 401 if invalid or missing\n - Call `await next()` if valid\n - Log failed authentication attempts\n\n### 6. Create Shared Types\n\n**shared/types.ts**:\n\n- Define `ControllerResponse` interface with `{success, data, error, details?}`\n- Define Notion types: `NotionPage`, `NotionDatabase`, `NotionWebhookPayload`\n- Define API types: `UpdatePageRequest`, `CreatePageRequest`, etc.\n- Use generic types that work in browser and Deno\n\n### 7. Create Shared Utils\n\n**shared/utils.ts**:\n\n- Export utility functions:\n - `isValidPageId(pageId)` - Validate Notion ID format\n - `normalizePageId(pageId)` - Remove hyphens\n - `formatPageId(pageId)` - Add hyphens in 8-4-4-4-12 format\n - `getPlainText(richText)` - Extract text from Notion rich text\n - `getPropertyValue(properties, name)` - Get value by property type\n- ONLY use standard JavaScript (no Deno or browser-specific APIs)\n\n### 8. Create Backend Utils\n\n**backend/utils/** directory:\n\n- **IMPORTANT**: Only for pure utility functions with NO external dependencies and NO business logic\n- Can use Deno APIs (unlike shared/utils.ts which must be browser-compatible)\n\n**backend/utils/valtown.ts** (default utility):\n\n- Import Val Town standard library: `import { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\"`\n- Export functions:\n - `getProjectInfo()` - Get Val Town project info (username, name, branch, links)\n - `getProjectName()` - Get just the project/val name\n - `getProjectUsername()` - Get the owner's username\n - `getBlobKeyPrefix()` - Get namespaced blob key prefix (`username_projectname`)\n - `getProjectUrl()` - Get the Val Town project URL\n- Used by `healthController.ts` to populate project info\n- Used by services for blob key namespacing\n\n**Additional utils (create as needed):**\n\n- `cryptoUtils.ts` - JWT signing, hashing with Web Crypto API\n- `validationUtils.ts` - Advanced validation using Deno features\n- `envUtils.ts` - Environment variable parsing helpers\n\n**Rules:**\n\n- Export pure functions only (no side effects)\n- Keep functions small and focused on single responsibilities\n- **Do NOT add**:\n - External API calls (those go in `services/`)\n - Business logic (that goes in `controllers/`)\n - Browser-compatible code (that goes in `shared/utils.ts`)\n\n### 9. Create Val Town Triggers (Optional)\n\n**IMPORTANT**: These are Val Town-specific features for scheduled tasks and email handling.\n\n**Val Town Trigger Documentation:**\n- Cron triggers: https://docs.val.town/vals/cron/\n- Email triggers: https://docs.val.town/vals/email/\n- Email utilities: https://docs.val.town/reference/std/email/\n\n#### Cron Handlers (`backend/crons/`)\n\nCreate cron handlers for scheduled tasks:\n\n**When to create:**\n- ✅ Periodic data synchronization (hourly, daily, weekly)\n- ✅ Scheduled cleanup or maintenance tasks\n- ✅ Regular status checks or health monitoring\n- ✅ Batch processing at intervals\n- ✅ Scheduled reports or summaries\n\n**File naming:** `[taskName].cron.tsx`\n\n**Pattern:**\n```typescript\n// backend/crons/syncNotionData.cron.tsx\nimport * as pageController from '../controllers/pageController.ts';\n\nexport default async function syncNotionData(interval: Interval) {\n console.log(`[Cron] Starting sync at ${new Date().toISOString()}`);\n\n try {\n const result = await pageController.syncAllPages();\n\n if (!result.success) {\n console.error(`[Cron] Sync failed: ${result.error}`);\n return;\n }\n\n console.log(`[Cron] Sync completed`);\n } catch (err) {\n console.error(`[Cron] Error:`, err);\n }\n}\n```\n\n**Rules:**\n- Use `.cron.tsx` extension\n- Export default async function accepting `interval: Interval`\n- Call controllers (same architecture as routes)\n- Execute and complete (no return value needed)\n- Add logging for monitoring\n- Configure schedule in Val Town UI\n\n#### Email Handlers (`backend/email/`)\n\nCreate email handlers for two purposes:\n\n**1. Email Triggers** - Handle incoming emails\n\n**When to create:**\n- ✅ Process incoming support/contact emails\n- ✅ Create Notion pages from email content\n- ✅ Auto-reply to specific patterns\n- ✅ Parse and route inbound messages\n\n**File naming:** `[handlerName].email.tsx`\n\n**Pattern:**\n```typescript\n// backend/email/processTicket.email.tsx\nimport { email } from \"https://esm.town/v/std/email\";\nimport * as ticketController from '../controllers/ticketController.ts';\n\nexport default async function processTicket(email: Email) {\n console.log(`[Email] From: ${email.from}, Subject: ${email.subject}`);\n\n try {\n const result = await ticketController.createTicket({\n from: email.from,\n subject: email.subject,\n body: email.text\n });\n\n if (!result.success) {\n return await email.send({\n to: email.from,\n subject: \"Re: \" + email.subject,\n text: \"Error processing your email.\"\n });\n }\n\n return await email.send({\n to: email.from,\n subject: \"Re: \" + email.subject,\n text: `Ticket created: ${result.data.ticketId}`\n });\n } catch (err) {\n console.error(`[Email] Error:`, err);\n }\n}\n```\n\n**2. Email Utilities** - Send emails from code\n\n**When to create:**\n- ✅ Send notifications from controllers\n- ✅ Email reports from crons\n- ✅ Send alerts or confirmations\n\n**File naming:** `[utilityName].ts`\n\n**Pattern:**\n```typescript\n// backend/email/notifications.ts\nimport { email } from \"https://esm.town/v/std/email\";\n\nexport async function sendNotification(to: string, subject: string, body: string) {\n try {\n await email.send({ to, subject, text: body });\n return { success: true, data: null, error: null };\n } catch (err: any) {\n return { success: false, data: null, error: err.message };\n }\n}\n```\n\n**Rules for email triggers:**\n- Use `.email.tsx` extension\n- Export default async function accepting `email: Email`\n- Call controllers for business logic\n- Return email response using `email.send()`\n- Configure email address in Val Town UI\n\n**Rules for email utilities:**\n- Use `.ts` extension (regular TypeScript)\n- Export functions that send emails\n- Return `{success, data, error}` format\n- Can be called by controllers, services, or crons\n\n#### Architecture with Triggers\n\nAll three trigger types follow the same architecture:\n\n```\nHTTP Route ┐\nCron ├──→ Controller → Service → External API\nEmail ┘\n```\n\nControllers can also call email utilities:\n\n```\nController → Email Utility → email.send()\n```\n\n### 10. Create Frontend Files\n\n**frontend/index.html**:\n\n- Include Pico CSS: ``\n- Add custom styles for root padding:\n ```html\n \n ```\n- Include error catching script (see AGENTS.md)\n- Root div: `

`\n- Load React: ``\n\n**frontend/index.tsx**:\n\n- JSX import source and pinned React versions (see AGENTS.md for React configuration)\n- Import App component\n- Render `` to root element\n\n**frontend/hooks/useHealth.ts**:\n\n- Custom React hook for fetching `/api/health` data\n- Returns `{ health, loading, error }`\n- Fetches on component mount (empty dependency array)\n- Handles HTTP errors gracefully\n\n**frontend/components/App.tsx**:\n\n- JSX import source and pinned React imports\n- **Default pattern**: Displays `/api/health` endpoint data\n - H1: Shows `project.username/project.name` from health data\n - H2: Clickable link to `/api/health` endpoint (opens in new tab)\n - Displays full health JSON in `

` tag\n  - Link to Val Town environment variables (constructed from `project.links.self.project + \"/environment-variables\"`)\n- Uses `useHealth()` custom hook for data fetching\n- Handles loading and error states\n- **This is the baseline default view** - as `/api/health` grows with more system info, it automatically appears here\n\n**frontend/components/NotionBlock.tsx**:\n\n- Render different Notion block types (paragraph, heading, lists, code, etc.)\n- Use semantic HTML (Pico CSS provides automatic styling)\n\n**frontend/components/NotionProperty.tsx**:\n\n- Import `getPropertyValue` from shared/utils\n- Render different property types (title, select, date, checkbox, etc.)\n- Use semantic HTML (Pico CSS provides automatic styling)\n\n### 11. Create README Files\n\n**IMPORTANT Documentation Pattern:** Use top-level README.md files ONLY. Do NOT create README files in subdirectories.\n\n**Create README.md in these locations:**\n\n- **Project root (`/README.md`)** - Overview and architecture\n  - Project purpose and identity\n  - Quick start guide\n  - Architecture overview diagram\n  - Links to detailed documentation\n\n- **`backend/README.md`** - Complete backend documentation\n  - All 4 layers documented: Routes, Controllers, Services, Utils\n  - Directory structure visualization\n  - Example patterns for each layer\n  - Rules and best practices\n  - How to add new features (10-step checklist)\n  - Error handling strategy\n  - Authentication patterns\n  - Import patterns\n\n- **`frontend/README.md`** - Complete frontend documentation\n  - React component structure\n  - Styling guidelines (Pico CSS)\n  - State management patterns\n  - API integration patterns\n  - Component examples\n\n- **`shared/README.md`** - Complete shared code documentation\n  - `types.ts` guidelines and examples\n  - `utils.ts` guidelines and examples\n  - Browser/Deno compatibility rules\n  - When to use `shared/utils.ts` vs `backend/utils/`\n  - Testing compatibility guide\n  - Common use cases with examples\n\n**❌ DO NOT create README files in:**\n- `backend/controllers/`\n- `backend/routes/`\n- `backend/services/`\n- `backend/utils/` ← Document in `/backend/README.md` instead\n- `frontend/components/`\n- Any other subdirectories\n\n**Why Top-Level Only:**\n- Easier to maintain (fewer files to update)\n- Complete context in one place per layer\n- No duplication across multiple files\n- Simpler navigation for developers\n\n**When Adding Features:**\n\nWhen you add new functionality to the codebase, ALWAYS update the relevant top-level README:\n\n1. **Added controller/service/route/util?** → Update `/backend/README.md`\n2. **Added React component?** → Update `/frontend/README.md`\n3. **Added shared type/util?** → Update `/shared/README.md`\n4. **Changed architecture?** → Update root `/README.md` and `CLAUDE.md`\n\n**README Content Standards:**\n\nEach top-level README should include:\n- Directory structure visualization\n- Purpose and responsibilities of each file/subdirectory\n- Code examples for common patterns\n- Rules and guidelines (what goes where)\n- Best practices\n- How to add new features\n- Cross-references to other documentation\n\n### 12. Environment Variables\n\nDocument required environment variables:\n\n- `NOTION_API_KEY` - Notion integration token (required)\n- `WEBHOOK_SECRET` - Shared secret for API and webhook authentication (required for production, optional for development)\n- `RECENT_PAGES_LOOKBACK_HOURS` - Hours to look back for recent pages (optional, defaults to 24)\n- Add service-specific keys as needed (e.g., `FIRECRAWLER_API_KEY`)\n\n### 13. Verify Scaffold\n\nAfter scaffolding, verify:\n\n- ✅ All directories exist\n- ✅ main.http.tsx exports `app.fetch`\n- ✅ Service functions return `{success, data, error}`\n- ✅ Controller functions return `{success, data, error, details?}`\n- ✅ Frontend has JSX import source and pinned React versions\n- ✅ Shared code has no Deno/browser-specific APIs\n- ✅ README files explain each directory's purpose\n\n## Import Patterns\n\n**Note:** This project uses `npm:` imports for backend packages (diverging from the general Val Town pattern in AGENTS.md which recommends `esm.sh` everywhere). We use `npm:` for better performance with packages like Notion SDK that only run server-side.\n\nThis val runs in different environments, so import patterns matter.\n\n### Backend Imports (Deno only)\n\nFor code that ONLY runs in the backend (controllers, services, routes, utils, main.http.tsx):\n\n**Use `npm:` specifier:**\n\n```typescript\nimport { Hono } from \"npm:hono@4\";\nimport { Client } from \"npm:@notionhq/client@2\";\n```\n\n**Benefits:**\n\n- ✅ Modern Deno way\n- ✅ Faster resolution (no CDN roundtrip)\n- ✅ Better caching\n- ✅ More explicit about npm packages\n\n**Val Town utilities still use URLs:**\n\n```typescript\nimport {\n  readFile,\n  serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Frontend/Shared Imports (Browser compatible)\n\nFor code in `frontend/` and `shared/` that runs in the BROWSER:\n\n**Use `esm.sh` with version pins:**\n\n```typescript\n// Frontend React components\nimport { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\n// Shared utilities (work in both browser and Deno)\nimport { getPropertyValue } from \"../../shared/utils.ts\";\n```\n\n**Why esm.sh for frontend:**\n\n- ✅ Works in browser (no `npm:` support)\n- ✅ CDN delivery for client-side\n- ✅ Automatic bundling and transpilation\n\n### Quick Reference\n\n| Location        | Environment | Import Pattern                   | Example                       |\n| --------------- | ----------- | -------------------------------- | ----------------------------- |\n| `backend/`      | Deno only   | `npm:package@version`            | `npm:hono@4`                  |\n| `main.http.tsx` | Deno only   | `npm:package@version`            | `npm:hono@4`                  |\n| `frontend/`     | Browser     | `https://esm.sh/package@version` | `https://esm.sh/react@18.2.0` |\n| `shared/`       | Both        | `https://esm.sh/package@version` | `https://esm.sh/date-fns@3`   |\n| Val Town utils  | Deno        | `https://esm.town/v/...`         | Val Town standard library     |\n\n### Common Packages\n\n**Backend (use `npm:`):**\n\n- Hono: `npm:hono@4`\n- Notion: `npm:@notionhq/client@2`\n- Database drivers, server-only utilities\n\n**Frontend (use `esm.sh`):**\n\n- React: `https://esm.sh/react@18.2.0`\n- React DOM: `https://esm.sh/react-dom@18.2.0/client`\n- Browser-compatible libraries\n\n**Shared (use `esm.sh`):**\n\n- Date utilities: `https://esm.sh/date-fns@3`\n- Validation libraries: `https://esm.sh/zod@3`\n- Any package used in both frontend and backend\n\n## Strict MVC Architecture\n\nThis val follows a **3-layer architecture**. Every feature MUST follow this pattern. **NEVER skip layers**.\n\n```\nRequest → Route → Controller → Service → External API\n                                              ↓\nResponse ← Format ← Standard Response ← Result\n```\n\n### Layer 1: Routes (`backend/routes/`)\n\n**Location:**\n\n- `routes/api/` - API endpoints for data operations\n- `routes/tasks/` - Notion webhook handlers\n- `routes/views/` - User-facing HTML/React views\n\n**Responsibility: HTTP ONLY**\n\n- Extract request parameters (query, body, headers)\n- Apply authentication middleware from `authCheck.ts`\n- Call controller functions\n- Format controller responses into HTTP responses\n- Map success/error to HTTP status codes\n\n**Rules:**\n\n- ❌ NO business logic in routes\n- ❌ NEVER call services directly from routes\n- ✅ Routes are thin wrappers around controllers\n- ✅ Always return proper HTTP responses with status codes:\n  - `200` - Success\n  - `400` - Validation errors, bad request\n  - `401` - Authentication failures\n  - `500` - Server/external service errors\n\n**Example pattern:**\n\n```typescript\napp.post(\"/api/tasks/:id\", async (c) => {\n  const pageId = c.req.param(\"id\");\n  const body = await c.req.json();\n\n  const result = await pageController.updatePage(pageId, body);\n\n  if (!result.success) {\n    return c.json({ error: result.error, details: result.details }, 400);\n  }\n\n  return c.json(result.data);\n});\n```\n\n### Layer 2: Controllers (`backend/controllers/`)\n\n**Responsibility: Business logic and orchestration**\n\n- Validate request data\n- Orchestrate multiple service calls\n- Transform and filter data\n- Remove sensitive information\n\n**IMPORTANT: Work with Notion pages generically**\n\n- The fundamental object in Notion is a **page** (not task, project, etc.)\n- Controllers and services should use `pageId` and work with any Notion page\n- Routes can be domain-specific (e.g., `/api/tasks/:id`), but they should call generic page controllers\n- This allows the architecture to handle any type of Notion page (tasks, projects, notes, etc.)\n\n**MUST return this exact structure:**\n\n```typescript\n{\n  success: boolean,\n  data: any | null,\n  error: string | null,\n  details?: string  // Additional error context\n}\n```\n\n**Rules:**\n\n- ❌ NEVER return HTTP responses (controllers are HTTP-agnostic)\n- ❌ NEVER call external APIs directly\n- ✅ Always call service layer functions\n- ✅ Return standardized response structure\n- ✅ Validate all input data\n- ✅ Filter sensitive data (e.g., button properties)\n\n**Example pattern:**\n\n```typescript\nexport async function updatePage(pageId: string, properties: any) {\n  // Validate\n  if (!pageId || !properties) {\n    return {\n      success: false,\n      data: null,\n      error: \"Invalid input\",\n      details: \"pageId and properties are required\",\n    };\n  }\n\n  // Call service\n  const result = await notionService.updatePage(pageId, properties);\n\n  if (!result.success) {\n    return {\n      success: false,\n      data: null,\n      error: \"Failed to update page\",\n      details: result.error,\n    };\n  }\n\n  return {\n    success: true,\n    data: result.data,\n    error: null,\n  };\n}\n```\n\n### Layer 3: Services (`backend/services/`)\n\n**Responsibility: External API calls ONLY**\n\n- Make HTTP requests to external APIs\n- Handle API authentication\n- Parse and normalize API responses\n- Manage retries and API-specific error handling\n\n**Create services for:**\n\n- Notion API (`notionService.ts`)\n- Firecrawler (`firecrawlerService.ts`)\n- Val Town blob storage (`blobService.ts`)\n- Any other external service\n\n**Rules:**\n\n- ✅ Return structured results with `{success, data, error}`\n- ✅ Handle all API errors gracefully (don't throw)\n- ✅ Use environment variables for API keys\n- ✅ Export typed functions\n\n**Example pattern:**\n\n```typescript\nexport async function getNotionPage(pageId: string) {\n  try {\n    const notion = new Client({ auth: Deno.env.get(\"NOTION_API_KEY\") });\n    const page = await notion.pages.retrieve({ page_id: pageId });\n\n    return {\n      success: true,\n      data: page,\n      error: null,\n    };\n  } catch (err) {\n    return {\n      success: false,\n      data: null,\n      error: err.message,\n    };\n  }\n}\n```\n\n## Adding New Endpoints - Step-by-Step\n\nWhen asked to \"build a /tasks/ endpoint\" or any new feature, follow this checklist:\n\n1. ✅ **Create route file** in appropriate directory:\n\n   - Webhook handlers → `routes/tasks/`\n   - API endpoints → `routes/api/`\n   - Views → `routes/views/`\n\n2. ✅ **Extract request data** in route (params, query, body)\n\n3. ✅ **Create controller function** in `backend/controllers/[feature].ts`\n\n   - Implement validation\n   - Implement business logic\n   - Orchestrate service calls\n\n4. ✅ **Create/update service functions** in `backend/services/[service].ts`\n\n   - Make external API calls\n   - Return `{success, data, error}` structure\n\n5. ✅ **Return standardized response** from controller\n\n6. ✅ **Format HTTP response** in route based on controller result\n\n7. ✅ **Add TypeScript types** to `shared/types.ts` if data is shared across layers\n\n8. ✅ **Import route** into `main.http.tsx` and mount on Hono app\n\n9. ✅ **Test the endpoint**\n\n**Note:** Authentication is applied globally in `main.http.tsx` for all `/api/*` and `/tasks/*` routes (except `/api/health`). No per-route authentication setup needed.\n\n## Notion Integration Patterns\n\n### Webhook Handlers (`routes/tasks/`)\n\nAll Notion webhooks live in `routes/tasks/`. When creating webhook handlers:\n\n- Validate webhook signature/authentication\n- Extract Notion event data\n- Call appropriate controller\n- Return `200` status quickly (webhooks timeout)\n- Use async processing for slow operations\n\n**Service Integration:**\n- Follow the \"External Service Integration Pattern\" section below for organizing Notion service functions\n\n## External Service Integration Pattern\n\n### For Simple Services (Single File)\n\nWhen integrating a simple external service (like Firecrawler):\n\n1. **Create service file**: `backend/services/[serviceName].ts`\n\n2. **Initialize client and export typed functions**:\n\n```typescript\nimport { SomeClient } from \"npm:some-client@1\";\n\nexport const client = new SomeClient({\n  apiKey: Deno.env.get(\"SERVICE_API_KEY\"),\n});\n\nexport async function fetchFromService(params: ServiceParams) {\n  try {\n    const result = await client.fetch(params);\n    return { success: true, data: result, error: null };\n  } catch (err: any) {\n    return { success: false, data: null, error: err.message };\n  }\n}\n```\n\n### For Complex Services (Directory Structure)\n\nWhen integrating a complex service with multiple concerns (like Notion with pages, databases, blocks):\n\n1. **Create service directory**: `backend/services/[serviceName]/`\n\n2. **Create index.ts** - Initialize client and re-export:\n\n```typescript\nimport { Client } from \"npm:@servicename/client@2\";\n\nexport const client = new Client({ auth: Deno.env.get(\"SERVICE_API_KEY\") });\n\nexport * from \"./pages.ts\";\nexport * from \"./databases.ts\";\n```\n\n3. **Create feature files** - Import shared client:\n\n```typescript\n// backend/services/notion/pages.ts\nimport { client } from \"./index.ts\";\n\nexport async function getPage(id: string) {\n  try {\n    const result = await client.pages.get(id);\n    return { success: true, data: result, error: null };\n  } catch (err: any) {\n    return { success: false, data: null, error: err.message };\n  }\n}\n```\n\n### Service Rules\n\n- **Store API keys in environment**: `Deno.env.get('SERVICE_API_KEY')`\n- **Handle errors gracefully**: Return error objects, don't throw\n- **Add types to `shared/types.ts`** if data is used across layers\n- **Call service from controller**, never from routes\n- **One client instance**: Initialize once, reuse everywhere\n\n## File Organization\n\n### Naming Conventions\n\n- **Files**: camelCase (e.g., `notionService.ts`, `pageController.ts`)\n- **Functions**: camelCase, verb-first (e.g., `getNotionPage`, `updatePage`)\n- **Types/Interfaces**: PascalCase (e.g., `NotionWebhookPayload`, `PageResponse`)\n- **Routes**: kebab-case URLs (e.g., `/api/notion-tasks`, `/tasks/webhook-handler`)\n\n### File Placement\n\n- **Controllers**: Organize by purpose or context\n\n  - `healthController.ts` - System health checks (PUBLIC, default on frontend)\n  - `pageController.ts` - Generic Notion page operations (get, update, create)\n  - `webhookController.ts` - Webhook processing logic\n  - Note: Controllers should work with `pageId` generically, not task/project-specific\n  - Group related operations together (e.g., all page operations in one controller)\n\n- **Services**: Organize by external API\n\n  - For complex services, use directories:\n    - `notion/` - Notion API integration\n      - `index.ts` - Client initialization and re-exports\n      - `pages.ts` - Page operations\n      - `databases.ts` - Database operations\n  - For simple services, use single files:\n    - `firecrawlerService.ts` - Firecrawler integration\n    - `blobService.ts` - Val Town blob storage\n\n- **Utils**: Backend-only utility functions (`backend/utils/`)\n\n  - **IMPORTANT**: Pure utility functions with NO external dependencies and NO business logic\n  - Can use Deno APIs (unlike `shared/utils.ts` which must work in browser)\n  - Examples of what belongs here:\n    - `cryptoUtils.ts` - Hashing, encryption, JWT signing (using Deno's Web Crypto)\n    - `dateUtils.ts` - Date formatting, timezone conversions (backend-specific)\n    - `validationUtils.ts` - Input validation helpers (using Deno features)\n    - `logUtils.ts` - Logging formatters\n    - `envUtils.ts` - Environment variable parsers\n  - Examples of what does NOT belong here:\n    - ❌ External API calls (use `backend/services/`)\n    - ❌ Business logic (use `backend/controllers/`)\n    - ❌ Browser-compatible code (use `shared/utils.ts`)\n    - ❌ Database operations (use `backend/services/`)\n  - Export pure functions with clear, single responsibilities\n  - No side effects (no global state, no I/O unless explicitly for that purpose)\n\n- **Routes**: Organize by purpose\n\n  - `routes/api/` - RESTful API endpoints (`/api/tasks`, `/api/tasks/:id`)\n  - `routes/tasks/` - Webhook handlers (`/tasks/notion-webhook`)\n  - `routes/views/` - User-facing pages (`/views/dashboard`)\n\n- **Shared**: Cross-layer code\n  - `shared/types.ts` - TypeScript interfaces\n  - `shared/utils.ts` - Pure utility functions (work in browser AND Deno)\n\n## Error Handling Strategy\n\n**Services**: Return errors, don't throw\n\n```typescript\nreturn { success: false, data: null, error: \"API call failed\" };\n```\n\n**Controllers**: Add context to service errors\n\n```typescript\nif (!result.success) {\n  return {\n    success: false,\n    data: null,\n    error: \"Failed to update page\",\n    details: result.error,\n  };\n}\n```\n\n**Routes**: Map to HTTP status codes\n\n```typescript\nif (!result.success) {\n  return c.json({ error: result.error, details: result.details }, 400);\n}\n```\n\n**Add to main.http.tsx**: Hono error unwrapper for better stack traces\n\n```typescript\napp.onError((err, c) => {\n  throw err;\n});\n```\n\n## Authentication Rules\n\n- Authentication middleware lives in `routes/authCheck.ts`\n- Uses shared secret approach with `X-API-KEY` header\n- Applied globally in `main.http.tsx` using array-based protection\n- Protects `/api/*` and `/tasks/*` routes with exceptions for public endpoints\n\n**Array-based protection pattern in main.http.tsx:**\n\n```typescript\nimport { webhookAuth } from './backend/routes/authCheck.ts';\n\n// Define protected route prefixes and public exceptions\nconst protectedPrefixes = ['/api', '/tasks'];\nconst publicExceptions = ['/api/health'];\n\n// Apply middleware before mounting routes\napp.use('*', async (c, next) => {\n  const path = c.req.path;\n\n  // Check if path is a public exception (exact match)\n  if (publicExceptions.includes(path)) {\n    await next();\n    return;\n  }\n\n  // Check if path starts with any protected prefix\n  const isProtected = protectedPrefixes.some(prefix => path.startsWith(prefix));\n\n  if (isProtected) {\n    await webhookAuth(c, next);\n  } else {\n    await next();\n  }\n});\n```\n\n**Usage in webhook configuration:**\n- Header name: `X-API-KEY`\n- Header value: Value of `WEBHOOK_SECRET` environment variable\n\n**Development mode:**\n- If `WEBHOOK_SECRET` not set, authentication is bypassed with console warning\n\n## Frontend Integration\n\n### Structure\n\n- `frontend/index.html` - HTML shell\n- `frontend/index.tsx` - React entry point\n- `frontend/components/App.tsx` - Main component\n- `frontend/components/NotionBlock.tsx` - Notion block renderer\n- `frontend/components/NotionProperty.tsx` - Property display\n\n### React Rules\n\n**Configuration:** See AGENTS.md for React 18.2.0 setup with pinned dependencies and jsxImportSource\n\n**Data Fetching:**\n\n- Fetch from `/api/*` routes\n- Use shared types from `shared/types.ts`\n- Handle loading and error states\n\n## Frontend Styling\n\nThis val uses **Pico CSS** - a minimal CSS framework that automatically styles semantic HTML.\n\n### Why Pico CSS?\n\n- **No CSS classes needed** - Keeps HTML clean and maintainable (we use it in classless mode)\n- **Semantic HTML only** - Use proper HTML elements (``, ``, ``, etc.)\n- **Automatic styling** - Beautiful design out of the box\n- **CDN delivery** - Single `` tag, no build step\n- **Customizable** - Easy to add custom styles when needed\n\n### Rules\n\n❌ **NEVER use CSS class names** (no `className` attributes)\n❌ **NEVER use TailwindCSS, Bootstrap, or other class-based frameworks**\n✅ **ALWAYS use semantic HTML elements**\n✅ **Use inline styles sparingly** - Only for dynamic/conditional styling\n\n### Semantic HTML Elements\n\nUse these semantic elements - Pico styles them automatically:\n\n**Layout:**\n\n- `` - Main content container\n- `` - Self-contained content (cards, sections)\n- `` - Thematic grouping of content\n- ``, `` - Page/section headers and footers\n- `` - Sidebar content\n\n**Typography:**\n\n- `` through `
` - Headings\n- `` - Paragraphs\n- `` - Bold/important text\n- `` - Italic/emphasized text\n- `` - Fine print\n- `` - Highlighted text\n- `` - Inline code\n- `
` - Code blocks\n- `` - Keyboard input / tags\n\n**Lists:**\n\n- ``, ``, `` - Lists\n- ``, ``, `
` - Definition lists\n\n**Forms:**\n\n- ``, ``, `<select>` - Form inputs\n- `<button>` - Buttons\n- `<label>` - Form labels\n- Use `aria-busy` attribute for loading states on buttons\n\n**Links & Media:**\n\n- `<a>` - Links\n- `<time>` - Dates and times\n- `<figure>`, `<figcaption>` - Images with captions\n\n### Example Patterns\n\n**Card layout:**\n\n```tsx\n<article>\n  <h2>Card Title</h2>\n  <p>Card content goes here.</p>\n  <button>Action</button>\n</article>\n```\n\n**Form with loading state:**\n\n```tsx\n<div style={{ display: \"flex\", gap: \"1rem\" }}>\n  <input type=\"text\" placeholder=\"Enter value\" style={{ flex: 1 }} />\n  <button disabled={loading} aria-busy={loading}>\n    Submit\n  </button>\n</div>\n```\n\n**Error message:**\n\n```tsx\n{\n  error && <mark>{error}</mark>;\n}\n```\n\n**Tags/badges:**\n\n```tsx\n<kbd>Tag 1</kbd> <kbd>Tag 2</kbd>\n```\n\n**Conditional styling:**\n\n```tsx\n<span\n  style={checked ? { textDecoration: \"line-through\", opacity: 0.6 } : undefined}\n>\n  Task text\n</span>\n```\n\n### Loading Pico CSS\n\nAlready included in `frontend/index.html`:\n\n```html\n<!-- Pico CSS - CSS framework -->\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\"\n/>\n<style>\n  #root > div {\n    padding-block: var(--pico-block-spacing-vertical);\n  }\n</style>\n```\n\n**Note:** We use Pico's main stylesheet but apply it in a classless way (semantic HTML only). The custom style adds proper padding to the root React container.\n\n## Shared Code (`shared/`)\n\n**Types** (`shared/types.ts`):\n\n- All TypeScript interfaces shared between frontend/backend\n- Notion data structures\n- API request/response types\n- Common data models\n\n**Utils** (`shared/utils.ts`):\n\n- Pure functions that work in both Deno (backend) and browser (frontend)\n- ❌ NEVER use Deno APIs (won't work in browser)\n- ✅ Only use standard JavaScript/TypeScript\n- **Note**: For backend-only utilities that need Deno APIs, use `backend/utils/` instead\n\n## Environment Variables\n\nRequired environment variables for this val:\n\n- `NOTION_API_KEY` - Notion integration token\n- `WEBHOOK_SECRET` - Shared secret for API authentication\n- `RECENT_PAGES_LOOKBACK_HOURS` - Hours to look back for recent pages (optional, defaults to 24)\n- `FIRECRAWLER_API_KEY` - Firecrawler service (if used)\n- Additional service API keys as needed\n\n**Access via**: `Deno.env.get('VAR_NAME')` (see AGENTS.md for details)\n\n## Data Validation\n\nValidate request data in **controllers**, not routes:\n\n```typescript\nif (!pageId || typeof pageId !== \"string\") {\n  return {\n    success: false,\n    data: null,\n    error: \"Invalid pageId\",\n    details: \"pageId must be a non-empty string\",\n  };\n}\n```\n\n**Check:**\n\n- Required fields exist\n- Types are correct\n- Formats are valid\n- Values are within expected ranges\n\n**Return helpful error messages** with `details` field\n\n## Response Filtering\n\n**Filter sensitive data in controllers** before returning:\n\n- Remove button properties from Notion data\n- Don't expose internal IDs or tokens\n- Clean up API responses before sending to frontend\n- Strip unnecessary metadata\n\n**Example:**\n\n```typescript\n// Remove sensitive properties\nconst filtered = {\n  ...notionData,\n  properties: Object.entries(notionData.properties)\n    .filter(([key, value]) => value.type !== \"button\")\n    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),\n};\n```\n\n## Questions to Ask User\n\nWhen the user requests a new feature, clarify:\n\n1. **Is this a webhook handler or API endpoint?**\n\n   - Webhook → `routes/tasks/`\n   - API → `routes/api/`\n\n2. **What external service needs integration?**\n\n   - New service → create `backend/services/[name].ts`\n\n3. **What data needs to be saved back to Notion?**\n\n   - Update Notion → use/extend `notionService.ts`\n\n4. **Should this endpoint be public (no authentication)?**\n\n   - Yes → Add to `publicExceptions` array in `main.http.tsx`\n   - No → Authentication already applied to all `/api/*` and `/tasks/*` routes\n\n5. **Is this frontend-facing?**\n   - Yes → create React component in `frontend/components/`\n\n## Common Patterns Checklist\n\nBefore implementing, verify:\n\n- ✅ Following 3-layer architecture (Route → Controller → Service)\n- ✅ Routes only handle HTTP, no business logic\n- ✅ Controllers return standardized `{success, data, error}` structure\n- ✅ Services handle external API calls\n- ✅ Never skipping layers\n- ✅ TypeScript types defined in `shared/types.ts`\n- ✅ Environment variables used for secrets\n- ✅ Error handling at each layer\n- ✅ Validation in controllers\n- ✅ Sensitive data filtered before returning\n- ✅ **Top-level README updated** with new features (backend/frontend/shared)\n\n## Documentation Maintenance\n\n**CRITICAL:** When adding or modifying code, ALWAYS update the relevant top-level README.md file.\n\n### Update `/backend/README.md` when:\n- Adding new controller functions\n- Adding new service integrations\n- Adding new routes or middleware\n- Adding utility functions to `backend/utils/`\n- Adding cron handlers to `backend/crons/`\n- Adding email triggers or utilities to `backend/email/`\n- Changing error handling patterns\n- Modifying authentication\n\n### Update `/frontend/README.md` when:\n- Adding new React components\n- Changing styling patterns\n- Adding state management patterns\n- Modifying API integration\n- Adding new hooks or utilities\n\n### Update `/shared/README.md` when:\n- Adding new TypeScript interfaces to `types.ts`\n- Adding utility functions to `utils.ts`\n- Changing data structures\n- Adding common patterns\n\n### Update root `/README.md` when:\n- Changing overall architecture\n- Adding major features\n- Modifying environment variables\n- Changing deployment process\n\n**Remember:** Do NOT create README files in subdirectories. All documentation goes in top-level READMEs only.\n\n## Integration with AGENTS.md\n\n**IMPORTANT:** AGENTS.md is the authoritative source for Val Town platform patterns. Always reference it for platform-specific details.\n\n**Use AGENTS.md for:**\n\n- Val Town platform requirements (triggers, redirects, errors, etc.)\n- Deno-specific patterns and limitations\n- Standard library usage (blob, SQLite, email, etc.)\n- Val Town utility functions (serveFile, readFile, etc.)\n- React configuration (pinning, jsxImportSource)\n- Platform-specific import patterns\n- Common gotchas and solutions\n\n**Use CLAUDE.md (this file) for:**\n\n- This val's specific architecture (MVC 3-layer)\n- Controller/Service/Route patterns\n- Notion integration patterns\n- Authentication implementation\n- File organization beyond basic structure\n- Response formats and error handling strategy\n- Import pattern exceptions (npm: for backend performance)\n- Pico CSS styling (diverges from AGENTS.md Tailwind recommendation)\n\n## Entry Point\n\n`main.http.tsx` is the HTTP entry point:\n\n- Exports `app.fetch` for Val Town\n- Uses Hono for routing\n- Serves static frontend assets\n- Mounts API routes at `/api`\n- Includes error handler\n\n**Always mount new routes in main.http.tsx:**\n\n```typescript\nimport { taskRoutes } from \"./backend/routes/tasks/index.ts\";\n\napp.route(\"/tasks\", taskRoutes);\n```\n\n## Hono Framework Patterns\n\nThis val uses **Hono** as the web framework. Follow these patterns:\n\n### Importing Hono\n\n```typescript\nimport { Hono } from \"npm:hono@4\";\nimport { Context, Next } from \"npm:hono@4\";\n```\n\n**Note**: Use `npm:` specifier for backend-only packages (see Import Patterns section for rationale).\n\n### Creating Route Modules\n\nWhen creating route modules (e.g., `backend/routes/api/pages.ts`):\n\n```typescript\nimport { Hono } from \"npm:hono@4\";\nimport * as pageController from \"../../controllers/pageController.ts\";\n\nconst pages = new Hono();\n\n// GET /api/pages/:id\npages.get(\"/:id\", async (c) => {\n  const pageId = c.req.param(\"id\");\n  const result = await pageController.getPage(pageId);\n\n  if (!result.success) {\n    return c.json({ error: result.error, details: result.details }, 400);\n  }\n\n  return c.json(result.data);\n});\n\n// POST /api/pages/:id\npages.post(\"/:id\", async (c) => {\n  const pageId = c.req.param(\"id\");\n  const body = await c.req.json();\n\n  const result = await pageController.updatePage(pageId, body.properties);\n\n  if (!result.success) {\n    return c.json({ error: result.error, details: result.details }, 400);\n  }\n\n  return c.json(result.data);\n});\n\nexport default pages;\n```\n\n### Mounting Routes\n\nCreate an index file for each route directory (e.g., `backend/routes/api/index.ts`):\n\n```typescript\nimport { Hono } from \"npm:hono@4\";\nimport pages from \"./pages.ts\";\n\nconst api = new Hono();\n\napi.route(\"/pages\", pages);\n// Add more routes as needed\n\nexport default api;\n```\n\nThen mount in `main.http.tsx`:\n\n```typescript\nimport api from \"./backend/routes/api/index.ts\";\napp.route(\"/api\", api);\n```\n\n### Accessing Request Data\n\n```typescript\n// URL params\nconst id = c.req.param(\"id\");\n\n// Query params\nconst query = c.req.query(\"q\");\n\n// Headers\nconst apiKey = c.req.header(\"x-api-key\");\n\n// JSON body\nconst body = await c.req.json();\n\n// Form data\nconst formData = await c.req.formData();\n```\n\n### Returning Responses\n\n```typescript\n// JSON response\nreturn c.json({ data: \"value\" });\n\n// JSON with status code\nreturn c.json({ error: \"Not found\" }, 404);\n\n// HTML response\nreturn c.html(\"<h1>Hello</h1>\");\n\n// Plain text\nreturn c.text(\"Hello\");\n\n// Redirect - see AGENTS.md for Val Town redirect workaround\n```\n\n### Middleware\n\nAuthentication is applied globally in `main.http.tsx` (see Authentication Rules section).\n\nFor other middleware needs (logging, rate limiting, etc.), you can apply per-route:\n\n```typescript\n// Apply to single route\npages.post(\"/:id\", someMiddleware, async (c) => {\n  // Route logic\n});\n\n// Apply to all routes in this module\npages.use(\"*\", someMiddleware);\n```\n\n### Error Handler and Static File Serving\n\nAlready configured in `main.http.tsx` - see Step 2 and AGENTS.md for patterns.\n\n### Route Organization Example\n\n```\nbackend/routes/\n├── api/\n│   ├── index.ts          # Mounts all API routes\n│   ├── pages.ts          # /api/pages/* endpoints\n│   └── databases.ts      # /api/databases/* endpoints\n├── tasks/\n│   ├── index.ts          # Mounts all webhook routes\n│   └── notion.ts         # /tasks/notion webhook handler\n├── views/\n│   └── dashboard.ts      # /views/dashboard page\n└── authCheck.ts          # Auth middleware\n```\n",[],[485],{"_105":493,"_96":345,"_157":494,"_159":-5,"_160":142,"_161":176,"_163":22,"_107":495,"_101":213,"_165":179,"_167":496,"_168":22,"_169":-5,"_170":497,"_99":498},"63640008-ba88-11f0-9722-0224a6c84d84","347aa036-b343-11f0-be0d-0224a6c84d84",["D",1762375539404],"# Notion Webhook Integration Val\n\nA Val Town application for receiving Notion webhooks, processing data, and integrating with external services.\n\n## Project Structure\n\n```\n├── backend/\n│   ├── controllers/         # Business logic\n│   ├── routes/             # HTTP handlers\n│   │   ├── api/            # API endpoints\n│   │   ├── tasks/          # Webhook handlers\n│   │   ├── views/          # User-facing views\n│   │   └── authCheck.ts    # Auth middleware\n│   └── services/           # External API integrations\n├── frontend/               # React frontend\n│   ├── components/         # React components\n│   ├── index.html          # HTML shell\n│   └── index.tsx           # React entry point\n├── shared/                 # Shared types and utilities\n│   ├── types.ts            # TypeScript interfaces\n│   └── utils.ts            # Shared utility functions\n├── main.http.tsx               # Application entry point (Hono)\n├── CLAUDE.md              # Development guidelines\n├── AGENTS.md              # Val Town platform guidelines\n└── deno.json              # Deno configuration\n```\n\n## Architecture\n\nThis application follows a strict **3-layer MVC architecture**:\n\n```\nRequest → Route → Controller → Service → External API\n```\n\n- **Routes**: Handle HTTP only (extract params, format responses)\n- **Controllers**: Business logic and orchestration\n- **Services**: External API calls (Notion, Firecrawler, etc.)\n\n**Never skip layers!** See `CLAUDE.md` for detailed guidelines.\n\n## Environment Variables\n\nRequired environment variables (set in Val Town):\n\n- `NOTION_API_KEY` - Notion integration token (required)\n- `WEBHOOK_SECRET` - Shared secret for API and webhook authentication (required for production, optional for development)\n- `RECENT_PAGES_LOOKBACK_HOURS` - Hours to look back for recent pages (optional, defaults to 24)\n- Additional service API keys as needed (e.g., `FIRECRAWLER_API_KEY`)\n\n## Getting Started\n\n1. **Set environment variables** in Val Town settings\n\n2. **Add routes** in `backend/routes/`:\n   - API endpoints → `api/`\n   - Webhook handlers → `tasks/`\n   - Views → `views/`\n\n3. **Create controllers** in `backend/controllers/`:\n   - Use `pageController.ts` for generic Notion page operations\n   - Return standardized `{success, data, error, details?}` format\n\n4. **Integrate services** in `backend/services/`:\n   - Use `notionService.ts` for Notion API calls\n   - Create new service files for other integrations\n\n5. **Mount routes** in `main.http.tsx`:\n   ```typescript\n   import { apiRoutes } from './backend/routes/api/index.ts';\n   app.route('/api', apiRoutes);\n   ```\n\n## Development Guidelines\n\n- **For project-specific architecture**: See `CLAUDE.md`\n- **For Val Town platform guidelines**: See `AGENTS.md`\n\n## Key Patterns\n\n### Standard Response Format\nAll controllers return:\n```typescript\n{\n  success: boolean,\n  data: any | null,\n  error: string | null,\n  details?: string\n}\n```\n\n### Generic Page Operations\n- Work with `pageId`, not task/project-specific IDs\n- Routes can be domain-specific (e.g., `/api/tasks/:id`)\n- But they should call generic page controllers\n\n### Error Handling\n- Services: Return errors, don't throw\n- Controllers: Add context to errors\n- Routes: Map to HTTP status codes (400, 401, 500)\n\n## Tech Stack\n\n- **Runtime**: Deno on Val Town\n- **Framework**: Hono\n- **Frontend**: React 18.2.0 with Pico CSS (classless CSS framework)\n- **APIs**: Notion API (@notionhq/client)\n- **Storage**: Val Town blob storage (optional)\n\n## License\n\nMIT\n",[],[345],{"_105":500,"_96":501,"_157":502,"_159":-5,"_160":142,"_161":503,"_163":119,"_107":504,"_101":32,"_165":179,"_167":505,"_168":22,"_169":-5,"_170":506,"_99":507},"77440d94-ba91-11f0-8a6a-0224a6c84d84","SCAFFOLD.md","77440e70-ba91-11f0-8a6a-0224a6c84d84",77,["D",1762379438231],"# SCAFFOLD.md\n\nThis file provides step-by-step instructions for scaffolding a new Val Town application from scratch.\n\n**Note**: This is a **one-time setup guide**. After completing these steps, see `CLAUDE.md` for ongoing development guidelines and architectural patterns.\n\n## Project Identity\n\nThis is a **Notion webhook integration application** that:\n\n- Receives webhooks from Notion when pages/databases change\n- Processes Notion data and integrates with external services (Firecrawler, etc.)\n- Saves processed results back to Notion\n- Provides a React frontend for viewing and managing Notion data\n\n## Scaffolding Steps\n\nFollow these steps to scaffold the complete val structure:\n\n### 1. Create Directory Structure\n\n```bash\nmkdir -p backend/controllers backend/routes/api backend/routes/tasks backend/routes/views backend/services backend/utils backend/crons backend/email\nmkdir -p frontend/components frontend/hooks\nmkdir -p shared\n```\n\n**Directory Purpose:**\n- `backend/controllers/` - Business logic\n- `backend/routes/` - HTTP endpoints (webhook handlers, APIs, views)\n- `backend/services/` - External API integrations\n- `backend/utils/` - Backend-only utilities (pure functions, no external deps)\n- `backend/crons/` - Val Town cron trigger handlers (scheduled tasks)\n- `backend/email/` - Val Town email triggers & utilities (incoming/outgoing emails)\n- `frontend/components/` - React components\n- `frontend/hooks/` - Custom React hooks\n- `shared/` - Cross-platform code (types, utilities)\n\n### 2. Create main.http.tsx (Hono Entry Point)\n\nCreate `main.http.tsx` with:\n\n- **IMPORTANT**: Use `.http.tsx` extension (see AGENTS.md for Val Town trigger types)\n- Hono app initialization\n- Error unwrapper: `app.onError((err, c) => { throw err; })`\n- Static file serving using Val Town utils (see AGENTS.md for serveFile pattern)\n- Root route serving `frontend/index.html`\n- Authentication middleware (array-based protection pattern)\n- Commented route mounting examples\n- Export: `export default app.fetch`\n\n### 3. Create Backend Service Files\n\nOrganize services by external API. For Notion, create a directory structure:\n\n**backend/services/notion/index.ts**:\n\n- Import Notion client: `import { Client } from \"npm:@notionhq/client@2\"`\n- Initialize and export client: `export const notion = new Client({ auth: Deno.env.get(\"NOTION_API_KEY\") })`\n- Re-export all functions from submodules:\n  - `export * from \"./pages.ts\"`\n  - `export * from \"./databases.ts\"`\n\n**backend/services/notion/pages.ts**:\n\n- Import shared client: `import { notion } from \"./index.ts\"`\n- Export page-related functions:\n  - `getNotionPage(pageId)` - Fetch page by ID\n  - `updateNotionPage(pageId, properties)` - Update page properties\n  - `createNotionPage(databaseId, properties)` - Create new page\n  - `getPageBlocks(pageId)` - Get page content blocks\n\n**backend/services/notion/databases.ts**:\n\n- Import shared client: `import { notion } from \"./index.ts\"`\n- Export database-related functions:\n  - `queryNotionDatabase(databaseId, filter?, sorts?)` - Query database\n  - `getNotionDatabase(databaseId)` - Get database info\n\n**Service function rules:**\n\n- All functions return `{success, data, error}` format\n- Catch errors and return error objects (don't throw)\n- Use the shared `notion` client from index.ts\n\n### 4. Create Backend Controller Files\n\n**IMPORTANT:** Organize controllers by purpose or context. Each controller handles a specific domain or concern.\n\n**backend/controllers/healthController.ts**:\n\n- Export `getHealth()` function for system health checks\n- Returns system information in `data`:\n  - `timestamp` - Current ISO timestamp\n  - `project` - Val Town project info (from `backend/utils/valtown.ts`)\n  - `configuration` - Environment variable status (NOTION_API_KEY, WEBHOOK_SECRET)\n- Uses `backend/utils/valtown.ts` for project information\n- No service calls needed (checks environment variables and parses import.meta.url)\n- Returns standard `{success, data, error, details?}` format\n- Route returns just `data` (success indicated by HTTP 200)\n- PUBLIC - No authentication required\n- **Default baseline view**: Displayed on root `/` by `App.tsx`\n  - Shows project name in H1: `username/projectname`\n  - Shows endpoint path in H2: `/api/health`\n  - Displays full JSON response\n  - As you add more info to health endpoint, it automatically appears in UI\n\n**backend/controllers/pageController.ts**:\n\n- Import Notion service: `import * as notionService from '../services/notion/index.ts'`\n- Export controller functions:\n  - `getPage(pageId)` - Get page with validation\n  - `updatePage(pageId, properties)` - Update with validation\n  - `createPage(databaseId, properties)` - Create with validation\n  - `getPageContent(pageId)` - Get blocks with validation\n  - `getRecentPages(hours?)` - Get recently edited pages\n- All functions return `{success, data, error, details?}` format\n- Include `filterSensitiveProperties()` helper to remove button properties\n- Validate inputs before calling services\n\n**Controller Organization Pattern:**\n- Group related operations in one controller (e.g., all page operations in `pageController.ts`)\n- Separate concerns by domain (health, pages, webhooks, etc.)\n- Controllers can grow to include more functions as features are added\n- May call services (Notion, external APIs) or just check system state (health)\n\n### 5. Create Authentication Middleware\n\n**backend/routes/authCheck.ts**:\n\n- Import Hono types: `import { Context, Next } from \"npm:hono@4\"`\n- Export `webhookAuth(c, next)` function:\n  - Check for `X-API-KEY` header (case-insensitive)\n  - Compare with `Deno.env.get('WEBHOOK_SECRET')`\n  - If WEBHOOK_SECRET not configured, log warning and bypass auth (development mode)\n  - Return 401 if invalid or missing\n  - Call `await next()` if valid\n  - Log failed authentication attempts\n\n### 6. Create Shared Types\n\n**shared/types.ts**:\n\n- Define `ControllerResponse<T>` interface with `{success, data, error, details?}`\n- Define Notion types: `NotionPage`, `NotionDatabase`, `NotionWebhookPayload`\n- Define API types: `UpdatePageRequest`, `CreatePageRequest`, etc.\n- Use generic types that work in browser and Deno\n\n### 7. Create Shared Utils\n\n**shared/utils.ts**:\n\n- Export utility functions:\n  - `isValidPageId(pageId)` - Validate Notion ID format\n  - `normalizePageId(pageId)` - Remove hyphens\n  - `formatPageId(pageId)` - Add hyphens in 8-4-4-4-12 format\n  - `getPlainText(richText)` - Extract text from Notion rich text\n  - `getPropertyValue(properties, name)` - Get value by property type\n- ONLY use standard JavaScript (no Deno or browser-specific APIs)\n\n### 8. Create Backend Utils\n\n**backend/utils/** directory:\n\n- **IMPORTANT**: Only for pure utility functions with NO external dependencies and NO business logic\n- Can use Deno APIs (unlike shared/utils.ts which must be browser-compatible)\n\n**backend/utils/valtown.ts** (default utility):\n\n- Import Val Town standard library: `import { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\"`\n- Export functions:\n  - `getProjectInfo()` - Get Val Town project info (username, name, branch, links)\n  - `getProjectName()` - Get just the project/val name\n  - `getProjectUsername()` - Get the owner's username\n  - `getBlobKeyPrefix()` - Get namespaced blob key prefix (`username_projectname`)\n  - `getProjectUrl()` - Get the Val Town project URL\n- Used by `healthController.ts` to populate project info\n- Used by services for blob key namespacing\n\n**Additional utils (create as needed):**\n\n- `cryptoUtils.ts` - JWT signing, hashing with Web Crypto API\n- `validationUtils.ts` - Advanced validation using Deno features\n- `envUtils.ts` - Environment variable parsing helpers\n\n**Rules:**\n\n- Export pure functions only (no side effects)\n- Keep functions small and focused on single responsibilities\n- **Do NOT add**:\n  - External API calls (those go in `services/`)\n  - Business logic (that goes in `controllers/`)\n  - Browser-compatible code (that goes in `shared/utils.ts`)\n\n### 9. Create Val Town Triggers (Optional)\n\n**IMPORTANT**: These are Val Town-specific features for scheduled tasks and email handling.\n\n**Val Town Trigger Documentation:**\n- Cron triggers: https://docs.val.town/vals/cron/\n- Email triggers: https://docs.val.town/vals/email/\n- Email utilities: https://docs.val.town/reference/std/email/\n\n#### Cron Handlers (`backend/crons/`)\n\nCreate cron handlers for scheduled tasks:\n\n**When to create:**\n- ✅ Periodic data synchronization (hourly, daily, weekly)\n- ✅ Scheduled cleanup or maintenance tasks\n- ✅ Regular status checks or health monitoring\n- ✅ Batch processing at intervals\n- ✅ Scheduled reports or summaries\n\n**File naming:** `[taskName].cron.tsx`\n\n**Pattern:**\n```typescript\n// backend/crons/syncNotionData.cron.tsx\nimport * as pageController from '../controllers/pageController.ts';\n\nexport default async function syncNotionData(interval: Interval) {\n  console.log(`[Cron] Starting sync at ${new Date().toISOString()}`);\n\n  try {\n    const result = await pageController.syncAllPages();\n\n    if (!result.success) {\n      console.error(`[Cron] Sync failed: ${result.error}`);\n      return;\n    }\n\n    console.log(`[Cron] Sync completed`);\n  } catch (err) {\n    console.error(`[Cron] Error:`, err);\n  }\n}\n```\n\n**Rules:**\n- Use `.cron.tsx` extension\n- Export default async function accepting `interval: Interval`\n- Call controllers (same architecture as routes)\n- Execute and complete (no return value needed)\n- Add logging for monitoring\n- Configure schedule in Val Town UI\n\n#### Email Handlers (`backend/email/`)\n\nCreate email handlers for two purposes:\n\n**1. Email Triggers** - Handle incoming emails\n\n**When to create:**\n- ✅ Process incoming support/contact emails\n- ✅ Create Notion pages from email content\n- ✅ Auto-reply to specific patterns\n- ✅ Parse and route inbound messages\n\n**File naming:** `[handlerName].email.tsx`\n\n**Pattern:**\n```typescript\n// backend/email/processTicket.email.tsx\nimport { email } from \"https://esm.town/v/std/email\";\nimport * as ticketController from '../controllers/ticketController.ts';\n\nexport default async function processTicket(email: Email) {\n  console.log(`[Email] From: ${email.from}, Subject: ${email.subject}`);\n\n  try {\n    const result = await ticketController.createTicket({\n      from: email.from,\n      subject: email.subject,\n      body: email.text\n    });\n\n    if (!result.success) {\n      return await email.send({\n        to: email.from,\n        subject: \"Re: \" + email.subject,\n        text: \"Error processing your email.\"\n      });\n    }\n\n    return await email.send({\n      to: email.from,\n      subject: \"Re: \" + email.subject,\n      text: `Ticket created: ${result.data.ticketId}`\n    });\n  } catch (err) {\n    console.error(`[Email] Error:`, err);\n  }\n}\n```\n\n**2. Email Utilities** - Send emails from code\n\n**When to create:**\n- ✅ Send notifications from controllers\n- ✅ Email reports from crons\n- ✅ Send alerts or confirmations\n\n**File naming:** `[utilityName].ts`\n\n**Pattern:**\n```typescript\n// backend/email/notifications.ts\nimport { email } from \"https://esm.town/v/std/email\";\n\nexport async function sendNotification(to: string, subject: string, body: string) {\n  try {\n    await email.send({ to, subject, text: body });\n    return { success: true, data: null, error: null };\n  } catch (err: any) {\n    return { success: false, data: null, error: err.message };\n  }\n}\n```\n\n**Rules for email triggers:**\n- Use `.email.tsx` extension\n- Export default async function accepting `email: Email`\n- Call controllers for business logic\n- Return email response using `email.send()`\n- Configure email address in Val Town UI\n\n**Rules for email utilities:**\n- Use `.ts` extension (regular TypeScript)\n- Export functions that send emails\n- Return `{success, data, error}` format\n- Can be called by controllers, services, or crons\n\n#### Architecture with Triggers\n\nAll three trigger types follow the same architecture:\n\n```\nHTTP Route  ┐\nCron        ├──→  Controller → Service → External API\nEmail       ┘\n```\n\nControllers can also call email utilities:\n\n```\nController → Email Utility → email.send()\n```\n\n### 10. Create Frontend Files\n\n**frontend/index.html**:\n\n- Include Pico CSS: `<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\" />`\n- Add custom styles for root padding:\n  ```html\n  <style>\n    #root > div {\n      padding-block: var(--pico-block-spacing-vertical);\n    }\n  </style>\n  ```\n- Include error catching script (see AGENTS.md)\n- Root div: `<div id=\"root\"></div>`\n- Load React: `<script type=\"module\" src=\"/frontend/index.tsx\"></script>`\n\n**frontend/index.tsx**:\n\n- JSX import source and pinned React versions (see AGENTS.md for React configuration)\n- Import App component\n- Render `<App />` to root element\n\n**frontend/hooks/useHealth.ts**:\n\n- Custom React hook for fetching `/api/health` data\n- Returns `{ health, loading, error }`\n- Fetches on component mount (empty dependency array)\n- Handles HTTP errors gracefully\n\n**frontend/components/App.tsx**:\n\n- JSX import source and pinned React imports\n- **Default pattern**: Displays `/api/health` endpoint data\n  - H1: Shows `project.username/project.name` from health data\n  - H2: Clickable link to `/api/health` endpoint (opens in new tab)\n  - Displays full health JSON in `<pre>` tag\n  - Link to Val Town environment variables (constructed from `project.links.self.project + \"/environment-variables\"`)\n- Uses `useHealth()` custom hook for data fetching\n- Handles loading and error states\n- **This is the baseline default view** - as `/api/health` grows with more system info, it automatically appears here\n\n**frontend/components/NotionBlock.tsx**:\n\n- Render different Notion block types (paragraph, heading, lists, code, etc.)\n- Use semantic HTML (Pico CSS provides automatic styling)\n\n**frontend/components/NotionProperty.tsx**:\n\n- Import `getPropertyValue` from shared/utils\n- Render different property types (title, select, date, checkbox, etc.)\n- Use semantic HTML (Pico CSS provides automatic styling)\n\n### 11. Create README Files\n\n**IMPORTANT Documentation Pattern:** Use top-level README.md files ONLY. Do NOT create README files in subdirectories.\n\n**Create README.md in these locations:**\n\n- **Project root (`/README.md`)** - Overview and architecture\n  - Project purpose and identity\n  - Quick start guide\n  - Architecture overview diagram\n  - Links to detailed documentation\n\n- **`backend/README.md`** - Complete backend documentation\n  - All 4 layers documented: Routes, Controllers, Services, Utils\n  - Directory structure visualization\n  - Example patterns for each layer\n  - Rules and best practices\n  - How to add new features (10-step checklist)\n  - Error handling strategy\n  - Authentication patterns\n  - Import patterns\n\n- **`frontend/README.md`** - Complete frontend documentation\n  - React component structure\n  - Styling guidelines (Pico CSS)\n  - State management patterns\n  - API integration patterns\n  - Component examples\n\n- **`shared/README.md`** - Complete shared code documentation\n  - `types.ts` guidelines and examples\n  - `utils.ts` guidelines and examples\n  - Browser/Deno compatibility rules\n  - When to use `shared/utils.ts` vs `backend/utils/`\n  - Testing compatibility guide\n  - Common use cases with examples\n\n**❌ DO NOT create README files in:**\n- `backend/controllers/`\n- `backend/routes/`\n- `backend/services/`\n- `backend/utils/` ← Document in `/backend/README.md` instead\n- `frontend/components/`\n- Any other subdirectories\n\n**Why Top-Level Only:**\n- Easier to maintain (fewer files to update)\n- Complete context in one place per layer\n- No duplication across multiple files\n- Simpler navigation for developers\n\n**When Adding Features:**\n\nWhen you add new functionality to the codebase, ALWAYS update the relevant top-level README:\n\n1. **Added controller/service/route/util?** → Update `/backend/README.md`\n2. **Added React component?** → Update `/frontend/README.md`\n3. **Added shared type/util?** → Update `/shared/README.md`\n4. **Changed architecture?** → Update root `/README.md` and `CLAUDE.md`\n\n**README Content Standards:**\n\nEach top-level README should include:\n- Directory structure visualization\n- Purpose and responsibilities of each file/subdirectory\n- Code examples for common patterns\n- Rules and guidelines (what goes where)\n- Best practices\n- How to add new features\n- Cross-references to other documentation\n\n### 12. Environment Variables\n\nDocument required environment variables:\n\n- `NOTION_API_KEY` - Notion integration token (required)\n- `WEBHOOK_SECRET` - Shared secret for API and webhook authentication (required for production, optional for development)\n- `RECENT_PAGES_LOOKBACK_HOURS` - Hours to look back for recent pages (optional, defaults to 24)\n- Add service-specific keys as needed (e.g., `FIRECRAWLER_API_KEY`)\n\n### 13. Verify Scaffold\n\nAfter scaffolding, verify:\n\n- ✅ All directories exist\n- ✅ main.http.tsx exports `app.fetch`\n- ✅ Service functions return `{success, data, error}`\n- ✅ Controller functions return `{success, data, error, details?}`\n- ✅ Frontend has JSX import source and pinned React versions\n- ✅ Shared code has no Deno/browser-specific APIs\n- ✅ README files explain each directory's purpose\n\n## Next Steps\n\n**Scaffolding complete!** Now see `CLAUDE.md` for:\n- MVC architecture patterns\n- Import patterns\n- Adding new features\n- Error handling strategy\n- Authentication rules\n- Integration with AGENTS.md\n\nFor Val Town platform patterns (redirects, React config, standard library usage), see `AGENTS.md`.\n",[],[501],{"_105":509,"_96":510,"_157":511,"_159":-5,"_160":142,"_161":512,"_163":119,"_107":513,"_101":32,"_165":179,"_167":514,"_168":22,"_169":-5,"_170":515,"_99":516},"343c3d6e-b343-11f0-833e-0224a6c84d84","deno.json","343c3e40-b343-11f0-833e-0224a6c84d84",18,["D",1761576166890],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": true,\n    \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"include\": [\"deno:/https/esm.town/**/*\"],\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}",[],[510],{"_105":518,"_96":519,"_157":520,"_159":-5,"_160":142,"_161":521,"_163":119,"_107":522,"_101":178,"_165":179,"_167":523,"_168":22,"_169":-5,"_170":524,"_99":525},"efda100a-b348-11f0-8dff-0224a6c84d84","guidelines.md","34316c36-b343-11f0-8749-0224a6c84d84",62,["D",1761578629143],"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nThis is a Val Town project. It's a full-stack application with a React frontend and a Hono-based API backend, designed to run on Val Town's Deno serverless platform.\n\n## Architecture\n\n## Project Structure\n\n```\n├── backend/\n│   ├── controllers/         # Business logic controllers\n│   ├── routes/             # Route definitions and HTTP handling\n│   │   ├── api/            # API endpoints\n│   │   ├── tasks/          # Task-related routes; commonly, Notion webhooks\n│   │   ├── views/          # User-facing views\n│   │   └── authCheck.ts    # Authentication middleware\n│   └── services/           # External service integrations\n├── frontend/               # React frontend assets\n│   ├── index.html        # HTML template for glimpse views\n│   ├── index.tsx         # React entry point\n│   ├── components/         # React components\n│   │   ├── App.tsx       # Main display component\n│   │   ├── NotionBlock.tsx # Notion block renderer\n│   │   └── NotionProperty.tsx # Property display component\n│   └── README.md\n├── shared/                 # Shared utilities and types\n│   ├── types.ts           # TypeScript interfaces for Notion data\n│   ├── utils.ts           # Shared utility functions\n│   └── README.md\n└── main.http.tsx               # Application entry point with static file serving\n```\n\n## Architecture\n\nThe application follows a clean MVC architecture with proper separation of concerns:\n\n### **Route Layer** (HTTP Handling)\n\n- Handles HTTP request/response formatting\n- Extracts parameters from requests\n- Applies authentication middleware\n- Calls controller functions and formats responses\n- Manages HTTP status codes and error responses\n\n### **Controller Layer** (Business Logic)\n\n- Contains business logic and orchestrates service calls\n- Returns plain data objects (not HTTP responses)\n- Handles data validation and transformation\n- Filters sensitive data (e.g., button properties)\n- Provides consistent success/error response structure\n\n### **Service Layer** (External Integrations)\n\n- Handles external API calls (Notion, Notion databases, Notion pages, Firecrawler, val.town's blob storage, etc)\n- Manages data persistence\n- Returns structured results with success/error information\n\n### Response Format\n\nAll controller functions return a consistent structure:\n\n```typescript\n{\n  success: boolean,\n  data: any | null,\n  error: string | null,\n  details?: string  // Additional error context\n}\n```\n\nRoutes then format these into appropriate HTTP responses.\n\n### Entry Point\n\n- `main.http.tsx` is the main HTTP entry point that exports `app.fetch` for Val Town\n- Uses Hono for routing and middleware\n- Serves static frontend assets and mounts API routes at `/api`\n\n### Backend (`/backend`)\n\n### Frontend (`/frontend`)\n\n- React 18.2.0 single-page application\n- **`index.html`**: Minimal HTML shell that loads the React app\n- **`index.tsx`**: React app entry point\n- **`components/App.tsx`**: Main app component with state management for email processing\n\nAll React components use `/** @jsxImportSource https://esm.sh/react@18.2.0 */` and pin React dependencies to version 18.2.0.\n\n## Development Commands\n\n### Running the Application\n\nSince this is a Val Town project, there are no local build commands. The application runs directly on Val Town when deployed.\n\n## Environment Variables\n\nRequired environment variables are set in Val Town.\n\nTODO: add note about how to access env vars\n\n## Val Town Specific Patterns\n\n### File Serving\n\nUses Val Town's standard utilities for serving project files:\n\n```ts\nimport {\n  readFile,\n  serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Static Assets\n\nFrontend files are served through Hono:\n\n- `/frontend/*` routes serve frontend assets with proper content types\n- `/` route serves the main `index.html`\n\n### React Configuration\n\nAll React files must:\n\n1. Include `/** @jsxImportSource https://esm.sh/react@18.2.0 */` at the top\n2. Import React dependencies with pinned version: `?deps=react@18.2.0`\n3. Use React 18.2.0 consistently across all dependencies\n\n### Error Handling\n\nThe API routes use try-catch blocks and return appropriate HTTP status codes (400 for validation errors, 500 for server errors). Consider adding a Hono error handler to unwrap and re-throw errors for better stack traces.\n\n## Key Integration Points\n\n## Configuration Files\n\n- **`deno.json`**: Deno configuration with Val Town types, compiler options, and experimental features\n  - Disables strict TypeScript checking\n  - Includes Val Town type definitions\n  - Enables Deno unstable features (node globals, temporal, worker options, sloppy imports)\n- **`AGENTS.md`**: Comprehensive Val Town development guidelines (keep this file as reference for Val Town best practices)\n",[],[519],{"_105":527,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":176,"_163":119,"_107":528,"_101":195,"_165":529,"_167":530,"_168":22,"_169":97,"_170":531,"_99":532},"63643f00-ba88-11f0-9722-0224a6c84d84",["D",1762375539404],"http","import { Hono } from \"npm:hono@4\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { webhookAuth } from './backend/routes/authCheck.ts';\nimport api from './backend/routes/api/index.ts';\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n  throw err;\n});\n\n// Serve static frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main HTML page\napp.get(\"/\", async c => {\n  let html = await readFile(\"/frontend/index.html\", import.meta.url);\n  return c.html(html);\n});\n\n// Authentication middleware - Apply BEFORE mounting routes\n// Protects /api/* and /tasks/* with exceptions for public endpoints\nconst protectedPrefixes = ['/api', '/tasks'];\nconst publicExceptions = ['/api/health'];\n\napp.use('*', async (c, next) => {\n  const path = c.req.path;\n\n  // Check if path is a public exception (exact match)\n  if (publicExceptions.includes(path)) {\n    await next();\n    return;\n  }\n\n  // Check if path starts with any protected prefix\n  const isProtected = protectedPrefixes.some(prefix => path.startsWith(prefix));\n\n  if (isProtected) {\n    // Delegate to authentication middleware\n    await webhookAuth(c, next);\n  } else {\n    // Not protected, continue\n    await next();\n  }\n});\n\n// Mount API routes\napp.route('/api', api);\n\n// Mount webhook routes (to be added)\n// Example:\n// import { taskRoutes } from './backend/routes/tasks/index.ts';\n// app.route('/tasks', taskRoutes);\n\n// Mount view routes (to be added)\n// Example:\n// import { viewRoutes } from './backend/routes/views/index.ts';\n// app.route('/views', viewRoutes);\n\n// This is the entry point for Val Town HTTP vals\nexport default app.fetch;\n",[],[100],{"_105":534,"_96":535,"_157":536,"_159":-5,"_160":142,"_161":176,"_163":119,"_107":537,"_101":32,"_165":179,"_167":538,"_168":22,"_169":-5,"_170":539,"_99":540},"6363a8ba-ba88-11f0-9722-0224a6c84d84","webhook-auth-notes.md","6363a950-ba88-11f0-9722-0224a6c84d84",["D",1762375539404],"⏺ Authentication Strategy for Protecting API and\nWebhook Endpoints\n\nOverview\n\nThis authentication approach protects all /api/_\nand /tasks/_ endpoints from unauthorized access\nwhile keeping specific endpoints (like\n/api/health) public. It uses a simple shared\nsecret passed via HTTP header, with graceful\ndegradation for development mode.\n\nComponents Required\n\n1. Environment Variable\n\n- Name: WEBHOOK_SECRET\n- Purpose: Shared secret for authenticating\n  webhook and API requests\n- Storage: Val Town environment variables (or\n  your platform's env var system)\n- Value: Any secure random string (32+\n  characters recommended)\n- Behavior: If not set, authentication is\n  bypassed (development mode with console warning)\n\n2. Authentication Middleware File\n\n- Location: backend/routes/authCheck.ts\n- Exports: webhookAuth function\n- Framework: Hono middleware pattern (Context,\n  Next)\n\n3. Middleware Function Logic\n   The webhookAuth function should:\n\n- Accept Hono Context and Next parameters\n- Extract X-API-KEY header from request\n  (case-insensitive: x-api-key)\n- Read WEBHOOK_SECRET from environment variables\n- If WEBHOOK_SECRET not configured:\n  - Log warning to console\n  - Call await next() to continue (bypass auth)\n  - Return\n- If X-API-KEY header missing or doesn't match\n  secret:\n  - Return 401 JSON response with error message\n  - Do NOT call next()\n- If authentication succeeds:\n  - Call await next() to continue to route\n    handler\n\n4. Application in Main Entry Point\n\n- Location: main.http.tsx\n- Pattern: Array-based route protection with\n  exceptions\n\nImplementation approach:\n\n1. Define protected route prefixes in array:\n   ['/tasks', '/api']\n2. Define public exceptions in array:\n   ['/api/health']\n3. Create single app.use('\\*', ...) middleware\n   that:\n\n   - Extracts request path from context\n   - Checks if path is in public exceptions\n\n(exact match) - If public, call await next() and return - Checks if path starts with any protected\nprefix - If protected, call webhookAuth(c, next)\n(delegates to auth middleware) - If not protected, call await next()\n\n5. Route Mounting Order\n   Important: Apply authentication middleware\n   BEFORE mounting routes\n1. Hono app initialization\n1. Error handler\n1. Static file serving (if needed)\n1. Authentication middleware (app.use)\n1. Route mounting (app.route)\n\nUsage Patterns\n\nFor Webhook Callers (Notion buttons, external\nservices):\n\n- Add custom HTTP header to webhook\n  configuration\n- Header name: X-API-KEY\n- Header value: The value of WEBHOOK_SECRET env\n  var\n- Example in Notion: Custom headers → Add →\n  X-API-KEY = your-secret-value\n\nFor API Requests (curl, fetch, etc.):\nInclude header: X-API-KEY: your-secret-value\n\nFor Internal Endpoint Calls:\n\n- When one route needs to call another protected\n  route internally\n- Fetch the WEBHOOK_SECRET from environment:\n  Deno.env.get('WEBHOOK_SECRET')\n- Include in headers: { 'X-API-KEY':\n  webhookSecret }\n- Example: Background job triggers another\n  endpoint\n\nKey Design Decisions\n\nWhy array-based approach:\n\n- Single middleware application point\n- Easy to add/remove protected routes\n- Easy to add/remove public exceptions\n- Self-documenting (arrays clearly show what's\n  protected)\n- No need for multiple app.use() calls\n\nWhy shared secret vs. individual keys:\n\n- Simpler for single-user/single-team apps\n- No key management complexity\n- Sufficient for webhook protection use case\n- Can be upgraded to JWT/OAuth later if needed\n\nWhy graceful degradation:\n\n- Allows development without auth setup\n- Console warning alerts developer\n- Production should always set the secret\n\nWhy /api/health is public:\n\n- Needed for frontend dashboard to load without\n  auth\n- Doesn't expose sensitive write operations\n- Shows configuration status (helpful for setup)\n- Can be monitored externally without\n  credentials\n\nSecurity Considerations\n\nWhat this protects:\n\n- Prevents unauthorized webhook triggers\n- Prevents unauthorized API data access\n- Prevents page ID enumeration attacks\n- Prevents write operations from bad actors\n\nWhat this doesn't protect:\n\n- Secret itself (must be transmitted securely)\n- Doesn't prevent secret leakage if exposed in\n  logs/errors\n- Doesn't rate limit (consider adding\n  separately)\n- Doesn't expire (consider rotating secrets\n  manually)\n\nRecommendations:\n\n- Never commit secrets to git\n- Use environment variables only\n- Log failed auth attempts for monitoring\n\nTesting the Implementation\n\nTest 1: Public endpoint works without auth\n\n- Request /api/health with no headers\n- Should return 200 with data\n\nTest 2: Protected endpoint blocks without auth\n\n- Request /api/pages/recent with no headers\n- Should return 401 with error message\n\nTest 3: Protected endpoint allows with valid\nauth\n\n- Request /api/pages/recent with X-API-KEY:\n  correct-secret\n- Should return 200 with data\n\nTest 4: Protected endpoint blocks with invalid\nauth\n\n- Request /api/pages/recent with X-API-KEY:\n  wrong-secret\n- Should return 401 with error message\n\nTest 5: Development mode warning\n\n- Remove WEBHOOK_SECRET from environment\n- Make any request\n- Should see console warning and allow all\n  requests\n\nDocumentation to Include\n\nIn README/Setup docs:\n\n- List WEBHOOK_SECRET as required environment\n  variable\n- Explain what it protects and why it's\n  important\n- Show example of setting it\n- Show example of using it in webhook\n  configuration\n- Explain security implications of not setting\n  it\n\nIn code comments:\n\n- Document which routes are protected\n- Document which routes are exceptions\n- Explain why each route is protected or public\n- Include example header usage in comments\n\nMigration Notes\n\nIf adapting to another framework:\n\n- Middleware signature will differ (Express,\n  Fastify, etc.)\n- Header extraction method may differ\n- Response format may differ\n- Core logic remains the same\n\nIf adapting to different auth method:\n\n- Keep array-based route protection pattern\n- Replace shared secret check with JWT/OAuth\n  validation\n- Keep graceful degradation for development\n- Keep public exceptions pattern\n\nThis approach is simple, secure enough for\nwebhook protection, and easy to understand and\nmaintain. It's appropriate for single-user or\nsmall-team applications where shared secrets are\nacceptable.\n",[],[535],"files",[154,172,184,191,198,208,218,225,232,239,246,254,263,271,279,288,295,302,311,319,328,334,343,352,358,365,373,382,392,398,407,414,422,432,439,446,455,465,474,483,492,499,508,517,526,533],"counts",{"_545":32,"_546":178,"_547":32,"_548":549},"pulls","branches","forks","envVars",{"_550":32,"_551":32},"count","emptyCount","contents",[],{"_105":527,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":176,"_163":119,"_107":555,"_101":195,"_165":529,"_167":530,"_168":22,"_169":97,"_99":556},["D",1762375539404],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":565,"_152":570,"_541":709,"_179":710,"_552":712,"_713":-5,"_714":-5,"_715":-5,"_716":-5,"_717":718},{"_105":106,"_96":97,"_107":566,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":567,"_136":568,"_139":569,"_151":22},["D",1761570769002],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[571,577,640,670,682,685,688,691,694,697,700,703,706],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":572,"_99":576},[573],{"_105":173,"_96":174,"_157":175,"_159":158,"_160":142,"_161":176,"_163":119,"_107":177,"_101":178,"_165":179,"_167":180,"_168":22,"_169":-5,"_170":574,"_99":575},[],[156,174],[156],{"_105":185,"_96":186,"_157":187,"_159":-5,"_160":142,"_161":188,"_163":119,"_107":189,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":578,"_99":639},[579,588,591,594,615,630,636],{"_105":192,"_96":193,"_157":194,"_159":187,"_160":142,"_161":195,"_163":119,"_107":196,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":580,"_99":587},[581,584],{"_105":199,"_96":200,"_157":201,"_159":194,"_160":142,"_161":202,"_163":119,"_107":203,"_101":178,"_165":204,"_167":205,"_168":22,"_169":-5,"_170":582,"_99":583},[],[186,193,200],{"_105":209,"_96":210,"_157":211,"_159":194,"_160":142,"_161":176,"_163":119,"_107":212,"_101":213,"_165":204,"_167":214,"_168":22,"_169":-5,"_170":585,"_99":586},[],[186,193,210],[186,193],{"_105":219,"_96":220,"_157":221,"_159":187,"_160":142,"_161":176,"_163":119,"_107":222,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":589,"_99":590},[],[186,220],{"_105":226,"_96":227,"_157":228,"_159":187,"_160":142,"_161":176,"_163":119,"_107":229,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":592,"_99":593},[],[186,227],{"_105":233,"_96":234,"_157":235,"_159":187,"_160":142,"_161":236,"_163":119,"_107":237,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":595,"_99":614},[596,605,608,611],{"_105":240,"_96":241,"_157":242,"_159":235,"_160":142,"_161":243,"_163":119,"_107":244,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":597,"_99":604},[598,601],{"_105":247,"_96":248,"_157":249,"_159":242,"_160":142,"_161":176,"_163":119,"_107":250,"_101":178,"_165":204,"_167":251,"_168":22,"_169":-5,"_170":599,"_99":600},[],[186,234,241,248],{"_105":255,"_96":256,"_157":257,"_159":242,"_160":142,"_161":176,"_163":119,"_107":258,"_101":178,"_165":204,"_167":259,"_168":22,"_169":-5,"_170":602,"_99":603},[],[186,234,241,256],[186,234,241],{"_105":264,"_96":265,"_157":266,"_159":235,"_160":142,"_161":267,"_163":119,"_107":268,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":606,"_99":607},[],[186,234,265],{"_105":272,"_96":273,"_157":274,"_159":235,"_160":142,"_161":275,"_163":119,"_107":276,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":609,"_99":610},[],[186,234,273],{"_105":280,"_96":281,"_157":282,"_159":235,"_160":142,"_161":176,"_163":119,"_107":283,"_101":213,"_165":204,"_167":284,"_168":22,"_169":-5,"_170":612,"_99":613},[],[186,234,281],[186,234],{"_105":289,"_96":290,"_157":291,"_159":187,"_160":142,"_161":292,"_163":119,"_107":293,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":616,"_99":629},[617],{"_105":296,"_96":297,"_157":298,"_159":291,"_160":142,"_161":299,"_163":119,"_107":300,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":618,"_99":628},[619,622,625],{"_105":303,"_96":304,"_157":305,"_159":298,"_160":142,"_161":306,"_163":119,"_107":307,"_101":32,"_165":204,"_167":308,"_168":22,"_169":-5,"_170":620,"_99":621},[],[186,290,297,304],{"_105":312,"_96":248,"_157":313,"_159":298,"_160":142,"_161":314,"_163":119,"_107":315,"_101":32,"_165":204,"_167":316,"_168":22,"_169":-5,"_170":623,"_99":624},[],[186,290,297,248],{"_105":320,"_96":256,"_157":321,"_159":298,"_160":142,"_161":176,"_163":119,"_107":322,"_101":178,"_165":204,"_167":323,"_168":22,"_169":-5,"_170":626,"_99":627},[],[186,290,297,256],[186,290,297],[186,290],{"_105":329,"_96":330,"_157":331,"_159":187,"_160":142,"_161":176,"_163":119,"_107":332,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":631,"_99":635},[632],{"_105":335,"_96":336,"_157":337,"_159":331,"_160":142,"_161":176,"_163":119,"_107":338,"_101":32,"_165":204,"_167":339,"_168":22,"_169":-5,"_170":633,"_99":634},[],[186,330,336],[186,330],{"_105":344,"_96":345,"_157":346,"_159":187,"_160":142,"_161":202,"_163":119,"_107":347,"_101":188,"_165":179,"_167":348,"_168":22,"_169":-5,"_170":637,"_99":638},[],[186,345],[186],{"_105":353,"_96":354,"_157":355,"_159":-5,"_160":142,"_161":213,"_163":119,"_107":356,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":641,"_99":669},[642,654,660,663,666],{"_105":359,"_96":360,"_157":361,"_159":355,"_160":142,"_161":362,"_163":119,"_107":363,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":643,"_99":653},[644,647,650],{"_105":366,"_96":367,"_157":368,"_159":361,"_160":142,"_161":176,"_163":119,"_107":369,"_101":213,"_165":204,"_167":370,"_168":22,"_169":-5,"_170":645,"_99":646},[],[354,360,367],{"_105":374,"_96":375,"_157":376,"_159":361,"_160":142,"_161":377,"_163":119,"_107":378,"_101":32,"_165":204,"_167":379,"_168":22,"_169":-5,"_170":648,"_99":649},[],[354,360,375],{"_105":383,"_96":384,"_157":385,"_159":361,"_160":142,"_161":386,"_163":119,"_107":387,"_101":32,"_165":204,"_167":388,"_168":22,"_169":-5,"_170":651,"_99":652},[],[354,360,384],[354,360],{"_105":393,"_96":394,"_157":395,"_159":355,"_160":142,"_161":176,"_163":119,"_107":396,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":655,"_99":659},[656],{"_105":399,"_96":400,"_157":401,"_159":395,"_160":142,"_161":202,"_163":119,"_107":402,"_101":178,"_165":204,"_167":403,"_168":22,"_169":-5,"_170":657,"_99":658},[],[354,394,400],[354,394],{"_105":408,"_96":345,"_157":409,"_159":355,"_160":142,"_161":176,"_163":119,"_107":410,"_101":213,"_165":179,"_167":411,"_168":22,"_169":-5,"_170":661,"_99":662},[],[354,345],{"_105":415,"_96":416,"_157":417,"_159":355,"_160":142,"_161":176,"_163":119,"_107":418,"_101":188,"_165":179,"_167":419,"_168":22,"_169":-5,"_170":664,"_99":665},[],[354,416],{"_105":423,"_96":424,"_157":425,"_159":355,"_160":142,"_161":426,"_163":119,"_107":427,"_101":32,"_165":204,"_167":428,"_168":22,"_169":-5,"_170":667,"_99":668},[],[354,424],[354],{"_105":433,"_96":434,"_157":435,"_159":-5,"_160":142,"_161":436,"_163":119,"_107":437,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":671,"_99":681},[672,675,678],{"_105":440,"_96":345,"_157":441,"_159":435,"_160":142,"_161":176,"_163":119,"_107":442,"_101":178,"_165":179,"_167":443,"_168":22,"_169":-5,"_170":673,"_99":674},[],[434,345],{"_105":447,"_96":448,"_157":449,"_159":435,"_160":142,"_161":450,"_163":119,"_107":451,"_101":32,"_165":204,"_167":452,"_168":22,"_169":-5,"_170":676,"_99":677},[],[434,448],{"_105":456,"_96":457,"_157":458,"_159":435,"_160":142,"_161":459,"_163":119,"_107":460,"_101":32,"_165":204,"_167":461,"_168":22,"_169":-5,"_170":679,"_99":680},[],[434,457],[434],{"_105":466,"_96":467,"_157":468,"_159":-5,"_160":142,"_161":469,"_163":119,"_107":470,"_101":178,"_165":179,"_167":471,"_168":22,"_169":-5,"_170":683,"_99":684},[],[467],{"_105":475,"_96":476,"_157":477,"_159":-5,"_160":142,"_161":478,"_163":119,"_107":479,"_101":32,"_165":179,"_167":480,"_168":22,"_169":-5,"_170":686,"_99":687},[],[476],{"_105":484,"_96":485,"_157":486,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":487,"_101":488,"_165":179,"_167":489,"_168":22,"_169":-5,"_170":689,"_99":690},[],[485],{"_105":493,"_96":345,"_157":494,"_159":-5,"_160":142,"_161":176,"_163":22,"_107":495,"_101":213,"_165":179,"_167":496,"_168":22,"_169":-5,"_170":692,"_99":693},[],[345],{"_105":500,"_96":501,"_157":502,"_159":-5,"_160":142,"_161":503,"_163":119,"_107":504,"_101":32,"_165":179,"_167":505,"_168":22,"_169":-5,"_170":695,"_99":696},[],[501],{"_105":509,"_96":510,"_157":511,"_159":-5,"_160":142,"_161":512,"_163":119,"_107":513,"_101":32,"_165":179,"_167":514,"_168":22,"_169":-5,"_170":698,"_99":699},[],[510],{"_105":518,"_96":519,"_157":520,"_159":-5,"_160":142,"_161":521,"_163":119,"_107":522,"_101":178,"_165":179,"_167":523,"_168":22,"_169":-5,"_170":701,"_99":702},[],[519],{"_105":527,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":176,"_163":119,"_107":528,"_101":195,"_165":529,"_167":530,"_168":22,"_169":97,"_170":704,"_99":705},[],[100],{"_105":534,"_96":535,"_157":536,"_159":-5,"_160":142,"_161":176,"_163":119,"_107":537,"_101":32,"_165":179,"_167":538,"_168":22,"_169":-5,"_170":707,"_99":708},[],[535],[571,573,577,579,581,584,588,591,594,596,598,601,605,608,611,615,617,619,622,625,630,632,636,640,642,644,647,650,654,656,660,663,666,670,672,675,678,682,685,688,691,694,697,700,703,706],{"_105":527,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":176,"_163":119,"_107":555,"_101":195,"_165":529,"_167":530,"_168":22,"_169":97,"_99":711},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]
</article></body></html>

\n {health\n ? `${health.project.username}/${health.project.name}`\n : \"Loading...\"}\n

\n \n /api/health\n \n

\n {block.heading_1?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

\n {block.heading_2?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

\n {block.heading_3?.rich_text?.map((text: any, i: number) => (\n {text.plain_text}\n ))}\n

Hi

lightweight

scaffold