`, `

`, ``, etc.)\n- **Automatic styling** - Beautiful design out of the box\n- **CDN delivery** - Single `` tag, no build step\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- `` - 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- `` 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- ``, ``, `` - Lists\n- ``, ``, ` ` - Definition lists\n\n**Forms:**\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- `<a>` - Links\n- `<time>` - Dates and times\n- `<figure>`, `<figcaption>` - Images with captions\n\n### Example Patterns\n\n**Card layout:**\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```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```tsx\n{error && <mark>{error}</mark>}\n```\n\n**Tags/badges:**\n```tsx\n<kbd>Tag 1</kbd> <kbd>Tag 2</kbd>\n```\n\n**Conditional styling:**\n```tsx\n<span style={checked ? { textDecoration: 'line-through', opacity: 0.6 } : undefined}>\n Task text\n</span>\n```\n\n### Loading Pico CSS\n\nAlready included in `frontend/index.html`:\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.classless.min.css\" rel=\"stylesheet\" />\n```\n\n## Shared Code (`shared/`)\n\n**Types** (`shared/types.ts`):\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- 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\n## Environment Variables\n\nRequired environment variables for this val:\n\n- `NOTION_API_KEY` - Notion integration token\n- `FIRECRAWLER_API_KEY` - Firecrawler service (if used)\n- Additional service API keys as needed\n\n**Access via**: `Deno.env.get('VAR_NAME')`\n\n**NEVER hardcode secrets** - always use environment variables\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- 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```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 - Webhook → `routes/tasks/`\n - API → `routes/api/`\n\n2. **What external service needs integration?**\n - New service → create `backend/services/[name].ts`\n\n3. **What data needs to be saved back to Notion?**\n - Update Notion → use/extend `notionService.ts`\n\n4. **Does this need authentication?**\n - Protected → apply `authCheck` middleware\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\n## Integration with AGENTS.md\n\n**Use AGENTS.md for:**\n- Val Town platform requirements\n- Deno-specific patterns\n- Standard library usage\n- React configuration\n- Import patterns (esm.sh)\n- Platform limitations\n\n**Use CLAUDE.md (this file) for:**\n- This val's architecture\n- MVC layer separation\n- Notion integration patterns\n- External service integration\n- File organization\n- Response formats\n\n## Entry Point\n\n`main.http.tsx` is the HTTP entry point:\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```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 (better performance, modern Deno way).\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 (use this pattern, not Response.redirect)\nreturn new Response(null, { status: 302, headers: { Location: '/new-url' }});\n```\n\n### Middleware\n\nApply middleware to routes:\n\n```typescript\nimport { authCheck } from '../authCheck.ts';\n\n// Apply to single route\npages.post('/:id', authCheck, async (c) => {\n // Protected route logic\n});\n\n// Apply to all routes in this module\npages.use('*', authCheck);\n```\n\n### Error Handler\n\nAlready configured in `main.http.tsx`:\n\n```typescript\napp.onError((err, c) => {\n throw err; // Re-throw to see full stack trace\n});\n```\n\n### Static File Serving\n\nAlready configured in `main.http.tsx`:\n\n```typescript\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\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### 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",[177],"1cb98422-b360-11f0-bc6f-0224a6c84d84","AGENTS.md","019a26dc-99bf-7269-a8f6-692ef14e0fe6",["D",1761588582800],"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: \"<h1>Hi</h1>\"\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: `<img src=\"https://maxm-imggenurl.web.val.run/the-description-of-your-image\" />`\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 `<script src=\"https://esm.town/v/std/catch\"></script>` 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 `<script src=\"https://cdn.twind.style\" crossorigin></script>` 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 = `<script>\n window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};\n </script>`;\n \n html = html.replace(\"</head>\", `${dataScript}</head>`);\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",[183],"1cb9830a-b360-11f0-bc6f-0224a6c84d84",".vtignore","019a26dc-99bf-7269-a8f6-6555ae856e94",["D",1761588582800],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\nvars.env",[189],"1cb981de-b360-11f0-bc6f-0224a6c84d84","shared","019a26dc-99bf-7269-a8f6-63c6fd1d84b1",["D",1761588582800],"directory",[195],"1cb9746e-b360-11f0-bc6f-0224a6c84d84","frontend","019a26dc-99bf-7269-a8f6-51875d2ac446",["D",1761588582800],[201],"1cb966d6-b360-11f0-bc6f-0224a6c84d84","backend","019a26dc-99bf-7269-a8f6-32bd7c2a6dc6",["D",1761588582800],[206],"1cb9476e-b360-11f0-bc6f-0224a6c84d84",".claude","019a26dc-99bf-7269-a8f5-f075c4855e23",["D",1761588582800],[211],"pulls","branches",2,"forks","envVars",{"_223":225,"_226":63},"connections",{"_223":63,"_224":63},"count","unfilledCount",15,"emptyCount",{"_44":210,"_32":211,"_30":212,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":485,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":486,"_27":487},{"_44":478,"_32":479,"_30":480,"_154":212,"_42":43,"_41":158,"_156":25,"_39":481,"_13":63,"_34":20,"_36":482,"_24":25,"_161":-5,"_267":483,"_27":484},{"_44":205,"_32":206,"_30":207,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":475,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":476,"_27":477},{"_44":471,"_32":462,"_30":457,"_154":207,"_42":43,"_41":158,"_156":59,"_39":472,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":473,"_27":474},{"_44":463,"_32":464,"_30":465,"_154":457,"_42":43,"_41":466,"_156":25,"_39":467,"_13":217,"_34":35,"_36":468,"_24":25,"_161":-5,"_267":469,"_27":470},{"_44":454,"_32":455,"_30":456,"_154":457,"_42":43,"_41":158,"_156":25,"_39":458,"_13":63,"_34":35,"_36":459,"_24":25,"_161":-5,"_267":460,"_27":461},{"_44":450,"_32":411,"_30":406,"_154":207,"_42":43,"_41":158,"_156":59,"_39":451,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":452,"_27":453},{"_44":446,"_32":439,"_30":434,"_154":406,"_42":43,"_41":158,"_156":59,"_39":447,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":448,"_27":449},{"_44":440,"_32":382,"_30":441,"_154":434,"_42":43,"_41":158,"_156":25,"_39":442,"_13":63,"_34":35,"_36":443,"_24":25,"_161":-5,"_267":444,"_27":445},{"_44":432,"_32":372,"_30":433,"_154":434,"_42":43,"_41":158,"_156":25,"_39":435,"_13":63,"_34":35,"_36":436,"_24":25,"_161":-5,"_267":437,"_27":438},{"_44":428,"_32":427,"_30":421,"_154":406,"_42":43,"_41":158,"_156":59,"_39":429,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":430,"_27":431},{"_44":418,"_32":419,"_30":420,"_154":421,"_42":43,"_41":422,"_156":25,"_39":423,"_13":158,"_34":35,"_36":424,"_24":25,"_161":-5,"_267":425,"_27":426},{"_44":412,"_32":413,"_30":414,"_154":406,"_42":43,"_41":158,"_156":59,"_39":415,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":416,"_27":417},{"_44":403,"_32":404,"_30":405,"_154":406,"_42":43,"_41":158,"_156":25,"_39":407,"_13":63,"_34":35,"_36":408,"_24":25,"_161":-5,"_267":409,"_27":410},{"_44":399,"_32":370,"_30":364,"_154":207,"_42":43,"_41":158,"_156":59,"_39":400,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":401,"_27":402},{"_44":395,"_32":380,"_30":374,"_154":364,"_42":43,"_41":158,"_156":59,"_39":396,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":397,"_27":398},{"_44":388,"_32":389,"_30":390,"_154":374,"_42":43,"_41":158,"_156":25,"_39":391,"_13":63,"_34":35,"_36":392,"_24":25,"_161":-5,"_267":393,"_27":394},{"_44":381,"_32":382,"_30":383,"_154":374,"_42":43,"_41":158,"_156":25,"_39":384,"_13":63,"_34":35,"_36":385,"_24":25,"_161":-5,"_267":386,"_27":387},{"_44":371,"_32":372,"_30":373,"_154":374,"_42":43,"_41":375,"_156":25,"_39":376,"_13":158,"_34":35,"_36":377,"_24":25,"_161":-5,"_267":378,"_27":379},{"_44":361,"_32":362,"_30":363,"_154":364,"_42":43,"_41":365,"_156":59,"_39":366,"_13":158,"_34":35,"_36":367,"_24":25,"_161":-5,"_267":368,"_27":369},{"_44":355,"_32":171,"_30":356,"_154":207,"_42":43,"_41":158,"_156":59,"_39":357,"_13":63,"_34":20,"_36":358,"_24":25,"_161":-5,"_267":359,"_27":360},{"_44":200,"_32":201,"_30":202,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":352,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":353,"_27":354},{"_44":348,"_32":333,"_30":328,"_154":202,"_42":43,"_41":158,"_156":59,"_39":349,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":350,"_27":351},{"_44":341,"_32":342,"_30":343,"_154":328,"_42":43,"_41":158,"_156":25,"_39":344,"_13":63,"_34":35,"_36":345,"_24":25,"_161":-5,"_267":346,"_27":347},{"_44":334,"_32":335,"_30":336,"_154":328,"_42":43,"_41":158,"_156":59,"_39":337,"_13":63,"_34":35,"_36":338,"_24":25,"_161":-5,"_267":339,"_27":340},{"_44":325,"_32":326,"_30":327,"_154":328,"_42":43,"_41":158,"_156":59,"_39":329,"_13":63,"_34":35,"_36":330,"_24":25,"_161":-5,"_267":331,"_27":332},{"_44":319,"_32":171,"_30":320,"_154":202,"_42":43,"_41":158,"_156":59,"_39":321,"_13":63,"_34":20,"_36":322,"_24":25,"_161":-5,"_267":323,"_27":324},{"_44":312,"_32":313,"_30":314,"_154":202,"_42":43,"_41":158,"_156":25,"_39":315,"_13":63,"_34":20,"_36":316,"_24":25,"_161":-5,"_267":317,"_27":318},{"_44":305,"_32":306,"_30":307,"_154":202,"_42":43,"_41":158,"_156":59,"_39":308,"_13":63,"_34":35,"_36":309,"_24":25,"_161":-5,"_267":310,"_27":311},{"_44":194,"_32":195,"_30":196,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":302,"_13":63,"_34":198,"_36":-5,"_24":25,"_161":-5,"_267":303,"_27":304},{"_44":296,"_32":171,"_30":297,"_154":196,"_42":43,"_41":158,"_156":59,"_39":298,"_13":63,"_34":20,"_36":299,"_24":25,"_161":-5,"_267":300,"_27":301},{"_44":292,"_32":33,"_30":31,"_154":196,"_42":43,"_41":14,"_156":25,"_39":293,"_13":217,"_34":35,"_36":38,"_24":25,"_161":-5,"_267":294,"_27":295},{"_44":285,"_32":286,"_30":287,"_154":196,"_42":43,"_41":158,"_156":25,"_39":288,"_13":63,"_34":35,"_36":289,"_24":25,"_161":-5,"_267":290,"_27":291},{"_44":188,"_32":189,"_30":190,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":282,"_13":63,"_34":20,"_36":192,"_24":25,"_161":-5,"_267":283,"_27":284},{"_44":182,"_32":183,"_30":184,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":279,"_13":63,"_34":20,"_36":186,"_24":25,"_161":-5,"_267":280,"_27":281},{"_44":176,"_32":177,"_30":178,"_154":-5,"_42":43,"_41":158,"_156":25,"_39":276,"_13":63,"_34":20,"_36":180,"_24":25,"_161":-5,"_267":277,"_27":278},{"_44":170,"_32":171,"_30":172,"_154":-5,"_42":43,"_41":158,"_156":25,"_39":273,"_13":63,"_34":20,"_36":174,"_24":25,"_161":-5,"_267":274,"_27":275},{"_44":164,"_32":165,"_30":166,"_154":-5,"_42":43,"_41":158,"_156":59,"_39":270,"_13":63,"_34":20,"_36":168,"_24":25,"_161":-5,"_267":271,"_27":272},{"_44":152,"_32":153,"_30":57,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":266,"_13":158,"_34":159,"_36":160,"_24":25,"_161":162,"_267":268,"_27":269},["D",1761589272209],"children",[],[153],["D",1761588582800],[],[165],["D",1761588582800],[],[171],["D",1761588582800],[],[177],["D",1761588582800],[],[183],["D",1761588582800],[],[189],"1cb97f04-b360-11f0-bc6f-0224a6c84d84","utils.ts","019a26dc-99bf-7269-a8f6-5e2af0c9fdd2",["D",1761588582800],"/**\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",[],[195,286],"68035706-b369-11f0-a167-0224a6c84d84",["D",1761592574631],[],[195,33],"1cb975e0-b360-11f0-bc6f-0224a6c84d84","019a26dc-99bf-7269-a8f6-57913e4eabdf",["D",1761588582800],"# Shared\n\nThis directory contains code shared between frontend (browser) and backend (Deno).\n\n## Files\n\n- **types.ts** - TypeScript interfaces and types\n - Controller response format\n - Notion data structures\n - API request/response types\n\n- **utils.ts** - Utility functions\n - Must work in both browser AND Deno\n - ❌ **NEVER use Deno APIs** (won't work in browser)\n - ✅ Only use standard JavaScript/TypeScript\n\n## Guidelines\n\n### Adding Types\n- Define interfaces for data shared between layers\n- Use clear, descriptive names (PascalCase)\n- Document complex types with comments\n\n### Adding Utils\n- Test that functions work in both environments\n- Avoid platform-specific APIs (Deno, Node, browser-only)\n- Use pure functions when possible\n\n## Example\n\n```typescript\n// ✅ Good - works everywhere\nexport function formatDate(date: string): string {\n return new Date(date).toLocaleDateString();\n}\n\n// ❌ Bad - Deno-specific\nexport function readConfig() {\n return Deno.env.get('CONFIG'); // Won't work in browser!\n}\n```\n",[],[195,171],["D",1761588582800],[257,258,259],[195],"1cb97342-b360-11f0-bc6f-0224a6c84d84","index.tsx","019a26dc-99bf-7269-a8f6-4e21b80e62ce",["D",1761588582800],"/** @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 <React.StrictMode>\n <App />\n </React.StrictMode>\n);\n",[],[201,306],"1cb9722a-b360-11f0-bc6f-0224a6c84d84","index.html","019a26dc-99bf-7269-a8f6-489546010958",["D",1761588582800],"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Notion Webhook Integration</title>\n\n \n <link\n href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.classless.min.css\"\n rel=\"stylesheet\"\n />\n\n \n <script src=\"https://esm.town/v/std/catch\"></script>\n </head>\n <body>\n <div id=\"root\"></div>\n\n \n <script type=\"module\" src=\"/frontend/index.tsx\"></script>\n </body>\n</html>\n",[],[201,313],"1cb97072-b360-11f0-bc6f-0224a6c84d84","019a26dc-99bf-7269-a8f6-463e83dc952c",["D",1761588582800],"# 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 (classless CSS framework loaded from CDN in index.html). Pico automatically styles semantic HTML elements without requiring CSS classes, keeping markup clean and maintainable.\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",[],[201,171],"1cb96d48-b360-11f0-bc6f-0224a6c84d84","NotionProperty.tsx","019a26dc-99bf-7269-a8f6-3d6be1b615e8","019a26dc-99bf-7269-a8f6-40d88c93ec73",["D",1761588582800],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { getPropertyValue } from \"../../shared/utils.ts\";\n\ninterface NotionPropertyProps {\n name: string;\n property: any;\n}\n\n/**\n * Component for rendering Notion page properties\n * Uses semantic HTML - Pico CSS provides automatic styling\n * Handles different property types\n */\nexport function NotionProperty({ name, property }: NotionPropertyProps) {\n if (!property) {\n return null;\n }\n\n const value = getPropertyValue({ [name]: property }, name);\n\n const renderValue = () => {\n switch (property.type) {\n case 'title':\n case 'rich_text':\n return <span>{value}</span>;\n\n case 'number':\n return <code>{value}</code>;\n\n case 'select':\n return <kbd>{value}</kbd>;\n\n case 'multi_select':\n return (\n <span>\n {Array.isArray(value) && value.map((item: string, i: number) => (\n <kbd key={i} style={{ marginRight: '0.5rem' }}>\n {item}\n </kbd>\n ))}\n </span>\n );\n\n case 'date':\n return (\n <time>\n {value ? new Date(value).toLocaleDateString() : '-'}\n </time>\n );\n\n case 'checkbox':\n return (\n <input\n type=\"checkbox\"\n checked={value}\n readOnly\n />\n );\n\n case 'url':\n return (\n <a\n href={value}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {value}\n </a>\n );\n\n case 'email':\n return (\n <a href={`mailto:${value}`}>\n {value}\n </a>\n );\n\n case 'phone_number':\n return (\n <a href={`tel:${value}`}>\n {value}\n </a>\n );\n\n case 'status':\n return <mark>{value}</mark>;\n\n default:\n return (\n <small>\n <em>Unsupported: {property.type}</em>\n </small>\n );\n }\n };\n\n return (\n <p>\n <strong>{name}:</strong> {renderValue()}\n </p>\n );\n}\n",[],[201,333,326],"components","1cb96a96-b360-11f0-bc6f-0224a6c84d84","NotionBlock.tsx","019a26dc-99bf-7269-a8f6-3ab802992fe4",["D",1761588582800],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface NotionBlockProps {\n block: any;\n}\n\n/**\n * Component for rendering Notion blocks\n * Uses semantic HTML - Pico CSS provides automatic styling\n * Extend this to support different block types as needed\n */\nexport function NotionBlock({ block }: NotionBlockProps) {\n if (!block || !block.type) {\n return null;\n }\n\n const renderBlockContent = () => {\n switch (block.type) {\n case 'paragraph':\n return (\n <p>\n {block.paragraph?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </p>\n );\n\n case 'heading_1':\n return (\n <h1>\n {block.heading_1?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </h1>\n );\n\n case 'heading_2':\n return (\n <h2>\n {block.heading_2?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </h2>\n );\n\n case 'heading_3':\n return (\n <h3>\n {block.heading_3?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </h3>\n );\n\n case 'bulleted_list_item':\n return (\n <li>\n {block.bulleted_list_item?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </li>\n );\n\n case 'numbered_list_item':\n return (\n <li>\n {block.numbered_list_item?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </li>\n );\n\n case 'to_do':\n return (\n <label>\n <input\n type=\"checkbox\"\n checked={block.to_do?.checked}\n readOnly\n />\n <span style={block.to_do?.checked ? { textDecoration: 'line-through', opacity: 0.6 } : undefined}>\n {block.to_do?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </span>\n </label>\n );\n\n case 'code':\n return (\n <pre>\n <code>\n {block.code?.rich_text?.map((text: any, i: number) => (\n <span key={i}>{text.plain_text}</span>\n ))}\n </code>\n </pre>\n );\n\n default:\n return (\n <small>\n <em>Unsupported block type: {block.type}</em>\n </small>\n );\n }\n };\n\n return <div>{renderBlockContent()}</div>;\n}\n",[],[201,333,335],"1cb9680c-b360-11f0-bc6f-0224a6c84d84","App.tsx","019a26dc-99bf-7269-a8f6-34ccac805b70",["D",1761588582800],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\nexport function App() {\n const [pageId, setPageId] = useState(\"\");\n const [pageData, setPageData] = useState<any>(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n const fetchPage = async () => {\n if (!pageId.trim()) {\n setError(\"Please enter a page ID\");\n return;\n }\n\n setLoading(true);\n setError(null);\n setPageData(null);\n\n try {\n const response = await fetch(`/api/pages/${pageId}`);\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to fetch page\");\n }\n\n setPageData(data);\n } catch (err: any) {\n setError(err.message || \"An error occurred\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\") {\n fetchPage();\n }\n };\n\n return (\n <main>\n <h1>Notion Webhook Integration</h1>\n\n <article>\n <h2>Fetch Notion Page</h2>\n\n <div>\n <input\n type=\"text\"\n placeholder=\"Enter Notion page ID\"\n value={pageId}\n onChange={(e) => setPageId(e.target.value)}\n onKeyDown={handleKeyDown}\n style={{ flex: 1 }}\n />\n <button onClick={fetchPage} disabled={loading} aria-busy={loading}>\n {loading ? \"Loading...\" : \"Fetch\"}\n </button>\n </div>\n\n {error && <mark>{error}</mark>}\n\n {pageData && (\n <section>\n <h3>Page Data:</h3>\n <pre>{JSON.stringify(pageData, null, 2)}</pre>\n </section>\n )}\n </article>\n\n <article>\n <h2>Getting Started</h2>\n <p>\n This is a scaffold for a Notion webhook integration. To get started:\n </p>\n <ol>\n <li>Set up your environment variables (NOTION_API_KEY)</li>\n <li>\n Create routes in <code>backend/routes/</code>\n </li>\n <li>\n Add controllers in <code>backend/controllers/</code>\n </li>\n <li>\n Integrate external services in <code>backend/services/</code>\n </li>\n <li>\n Follow the architecture guidelines in <code>CLAUDE.md</code>\n </li>\n </ol>\n </article>\n </main>\n );\n}\n",[],[201,333,342],"1cb96f5a-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[250,251,252],[201,333],["D",1761588582800],[249,253,254,255],[201],"1cb96514-b360-11f0-bc6f-0224a6c84d84","019a26dc-99bf-7269-a8f6-2fbd5953f9c6",["D",1761588582800],"# Backend\n\nThis directory contains the backend logic for the Notion webhook integration application.\n\n## Structure\n\n- **controllers/** - Business logic and orchestration\n - Contains functions that validate data, orchestrate service calls, and return standardized responses\n - All controllers return `{success, data, error, details?}` format\n - Controllers are HTTP-agnostic (don't create HTTP responses)\n\n- **routes/** - HTTP request/response handling\n - **api/** - RESTful API endpoints for data operations\n - **tasks/** - Notion webhook handlers\n - **views/** - User-facing HTML/React views\n - **authCheck.ts** - Authentication middleware\n\n- **services/** - External API integrations\n - Handle calls to external APIs (Notion, Firecrawler, blob storage, etc.)\n - Return structured results with `{success, data, error}` format\n - Manage API authentication and error handling\n\n## Architecture Flow\n\n```\nRequest → Route → Controller → Service → External API\n```\n\n**Never skip layers!**\n- Routes call controllers (not services directly)\n- Controllers call services (not external APIs directly)\n- Services handle external API calls\n\n## Adding New Features\n\n1. Create route in appropriate directory (`api/`, `tasks/`, or `views/`)\n2. Create controller function with business logic\n3. Create/use service functions for external API calls\n4. Mount route in `main.http.tsx`\n\nSee `CLAUDE.md` for detailed guidelines.\n",[],[206,171],"fa4ed9f6-b363-11f0-87a0-0224a6c84d84","faviconizerService.ts","b7748178-b361-11f0-b7fc-0224a6c84d84","019a26dc-99bf-7269-a8f6-2bcf04eec442",10,["D",1761590243094],"import type { FaviconizerResponse } from \"../../shared/types.ts\";\n\n/**\n * Get favicon URL for a domain using Faviconizer API\n */\nexport async function getFaviconForDomain(domain: string) {\n try {\n const response = await fetch(\"https://faviconizer.val.run/api/domain\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ domain }),\n });\n\n if (!response.ok) {\n return {\n success: false,\n data: null,\n error: `Faviconizer API returned status ${response.status}`,\n };\n }\n\n const data: FaviconizerResponse = await response.json();\n\n // Check if the API's success field is true\n if (!data.success) {\n return {\n success: false,\n data: null,\n error: \"Faviconizer API returned success: false\",\n };\n }\n\n return {\n success: true,\n data: data,\n error: null,\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || \"Failed to fetch favicon\",\n };\n }\n}\n",[],[206,370,362],"services","b780bd58-b361-11f0-bf8a-0224a6c84d84","pages.ts","019a26dc-99bf-7269-a8f6-23db6afe7f06","019a26dc-99bf-7269-a8f6-24515668c88f",5,["D",1761589272004],"import { notion } from \"./index.ts\";\n\n/**\n * Get a Notion page by ID\n */\nexport async function getNotionPage(pageId: string) {\n try {\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: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to fetch Notion page'\n };\n }\n}\n\n/**\n * Update a Notion page's properties\n */\nexport async function updateNotionPage(pageId: string, properties: any) {\n try {\n const page = await notion.pages.update({\n page_id: pageId,\n properties: properties\n });\n\n return {\n success: true,\n data: page,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to update Notion page'\n };\n }\n}\n\n/**\n * Create a new page in a database\n */\nexport async function createNotionPage(databaseId: string, properties: any) {\n try {\n const page = await notion.pages.create({\n parent: { database_id: databaseId },\n properties: properties\n });\n\n return {\n success: true,\n data: page,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to create Notion page'\n };\n }\n}\n\n/**\n * Get page blocks (content)\n */\nexport async function getPageBlocks(pageId: string) {\n try {\n const response = await notion.blocks.children.list({ block_id: pageId });\n\n return {\n success: true,\n data: response.results,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to fetch page blocks'\n };\n }\n}\n\n/**\n * Update a Notion page's icon with an external URL\n */\nexport async function updatePageIcon(pageId: string, iconUrl: string) {\n try {\n const page = await notion.pages.update({\n page_id: pageId,\n icon: {\n type: \"external\",\n external: {\n url: iconUrl\n }\n }\n });\n\n return {\n success: true,\n data: page,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to update page icon'\n };\n }\n}\n\n/**\n * Append a paragraph block to a page (for error notes)\n */\nexport async function appendBlockToPage(pageId: string, message: string) {\n try {\n const response = await notion.blocks.children.append({\n block_id: pageId,\n children: [\n {\n object: \"block\",\n type: \"paragraph\",\n paragraph: {\n rich_text: [\n {\n type: \"text\",\n text: {\n content: message\n }\n }\n ]\n }\n }\n ]\n });\n\n return {\n success: true,\n data: response,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to append block to page'\n };\n }\n}\n",[],[206,370,380,372],"notion","1cb960c8-b360-11f0-bc6f-0224a6c84d84","index.ts","019a26dc-99bf-7269-a8f6-1efef3029063",["D",1761588582800],"import { Client } from \"npm:@notionhq/client@2\";\n\n// Initialize Notion client - shared across all Notion service modules\nexport const notion = new Client({ auth: Deno.env.get(\"NOTION_API_KEY\") });\n\n// Export all page operations\nexport * from \"./pages.ts\";\n\n// Export all database operations\nexport * from \"./databases.ts\";\n",[],[206,370,380,382],"1cb95f74-b360-11f0-bc6f-0224a6c84d84","databases.ts","019a26dc-99bf-7269-a8f6-1887e096fe60",["D",1761588582800],"import { notion } from \"./index.ts\";\n\n/**\n * Query a Notion database\n */\nexport async function queryNotionDatabase(databaseId: string, filter?: any, sorts?: any) {\n try {\n const response = await notion.databases.query({\n database_id: databaseId,\n filter: filter,\n sorts: sorts\n });\n\n return {\n success: true,\n data: response.results,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to query Notion database'\n };\n }\n}\n\n/**\n * Get a database by ID\n */\nexport async function getNotionDatabase(databaseId: string) {\n try {\n const database = await notion.databases.retrieve({ database_id: databaseId });\n\n return {\n success: true,\n data: database,\n error: null\n };\n } catch (err: any) {\n return {\n success: false,\n data: null,\n error: err.message || 'Failed to fetch Notion database'\n };\n }\n}\n",[],[206,370,380,389],"1cb962ee-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[243,244,245],[206,370,380],"1cb96406-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[242,246],[206,370],"1cb957c2-b360-11f0-bc6f-0224a6c84d84","authCheck.ts","019a26dc-99bf-7269-a8f6-1140d0020917","019a26dc-99bf-7269-a8f6-14fb6878e1e4",["D",1761588582800],"import { Context, Next } from \"npm:hono@4\";\n\n/**\n * Authentication middleware for Hono routes\n *\n * This middleware checks for authentication credentials in requests.\n * Customize this based on your authentication strategy:\n * - API key in header\n * - Bearer token\n * - Notion webhook signature verification\n * - etc.\n */\nexport async function authCheck(c: Context, next: Next) {\n // Example: Check for API key in header\n const apiKey = c.req.header('x-api-key');\n const expectedKey = Deno.env.get('API_KEY');\n\n // If no API_KEY is configured, skip auth (development mode)\n if (!expectedKey) {\n console.warn('Warning: API_KEY not configured, skipping authentication');\n await next();\n return;\n }\n\n // Validate API key\n if (!apiKey || apiKey !== expectedKey) {\n return c.json({ error: 'Unauthorized', details: 'Invalid or missing API key' }, 401);\n }\n\n // Authentication successful, proceed\n await next();\n}\n\n/**\n * Notion webhook signature verification\n * Use this for routes that receive Notion webhooks\n *\n * Notion signs webhooks with a secret - verify the signature to ensure\n * the request actually came from Notion.\n */\nexport async function verifyNotionWebhook(c: Context, next: Next) {\n const signature = c.req.header('notion-signature');\n const webhookSecret = Deno.env.get('NOTION_WEBHOOK_SECRET');\n\n // If no webhook secret is configured, skip verification (development mode)\n if (!webhookSecret) {\n console.warn('Warning: NOTION_WEBHOOK_SECRET not configured, skipping webhook verification');\n await next();\n return;\n }\n\n if (!signature) {\n return c.json({ error: 'Unauthorized', details: 'Missing webhook signature' }, 401);\n }\n\n // TODO: Implement actual signature verification\n // This is a placeholder - implement according to Notion's webhook signature verification spec\n // Reference: https://developers.notion.com/reference/webhooks\n\n await next();\n}\n",[],[206,411,404],"routes","1cb956be-b360-11f0-bc6f-0224a6c84d84","views","019a26dc-99bf-7269-a8f6-0e71a3295bf6",["D",1761588582800],[],[206,411,413],"1fbab9aa-b362-11f0-94ce-0224a6c84d84","favicon.ts","b76fa216-b361-11f0-8f90-0224a6c84d84","019a26dc-99bf-7269-a8f6-0b691fa0aef1",8,["D",1761589446884],"import { Hono } from \"npm:hono@4\";\nimport * as faviconController from '../../controllers/faviconController.ts';\n\nconst favicon = new Hono();\n\n// POST /tasks/favicon - Handle Notion webhook for favicon updates\nfavicon.post('/', async (c) => {\n try {\n // Extract payload from request body\n const payload = await c.req.json();\n\n // Extract page_id from webhook payload - try multiple possible locations\n const pageId = payload?.page_id || // Direct property\n payload?.data?.id || // Notion webhook event format\n payload?.page?.id; // Alternative format\n\n if (!pageId) {\n console.error('Failed to extract page_id from payload:', JSON.stringify(payload));\n return c.json({\n error: \"Missing page_id in webhook payload\",\n receivedPayload: payload\n }, 400);\n }\n\n // Process favicon update (always return 200 to webhook)\n const result = await faviconController.processFaviconUpdate(pageId);\n\n // Always return 200 OK to Notion webhook (even on errors)\n // Errors are logged as notes in the page itself\n return c.json({\n success: result.success,\n iconUpdated: result.iconUpdated,\n errorNoteAdded: result.errorNoteAdded,\n message: result.success\n ? \"Favicon updated successfully\"\n : `Favicon update failed: ${result.error}`\n }, 200);\n\n } catch (err: any) {\n // Even on unexpected errors, return 200 to prevent webhook retries\n console.error('Unexpected error in favicon webhook:', err);\n return c.json({\n success: false,\n error: \"Internal server error\",\n details: err.message\n }, 200);\n }\n});\n\nexport default favicon;\n",[],[206,411,427,419],"tasks","1cb955b0-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[238],[206,411,427],"1cb95204-b360-11f0-bc6f-0224a6c84d84","019a26dc-99bf-7269-a8f6-01b5d543f467","019a26dc-99bf-7269-a8f6-0782b134ef20",["D",1761588582800],"import { Hono } from \"npm:hono@4\";\nimport * as pageController from '../../controllers/pageController.ts';\n\nconst pages = new Hono();\n\n// GET /api/pages/:id - Get a Notion page\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 - Update a Notion page\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\n// GET /api/pages/:id/content - Get page blocks\npages.get('/:id/content', async (c) => {\n const pageId = c.req.param('id');\n const result = await pageController.getPageContent(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\nexport default pages;\n",[],[206,411,439,372],"api","1cb950f6-b360-11f0-bc6f-0224a6c84d84","019a26dc-99bf-7269-a8f5-fdd1422bebc3",["D",1761588582800],"import { Hono } from \"npm:hono@4\";\nimport pages from './pages.ts';\n\nconst api = new Hono();\n\n// Mount page routes at /api/pages\napi.route('/pages', pages);\n\n// Add more routes here as needed\n// Example:\n// import databases from './databases.ts';\n// api.route('/databases', databases);\n\nexport default api;\n",[],[206,411,439,382],"1cb95484-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[235,236],[206,411,439],"1cb95e2a-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[234,237,239,240],[206,411],"1cb9494e-b360-11f0-bc6f-0224a6c84d84","pageController.ts","019a26dc-99bf-7269-a8f5-f4ae4994f9d7","019a26dc-99bf-7269-a8f5-f9aacbe46421",["D",1761588582800],"import * as notionService from '../services/notion/index.ts';\n\n/**\n * Get a Notion page by ID\n * Generic controller that works with any Notion page type\n */\nexport async function getPage(pageId: string) {\n // Validate input\n if (!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 // Call service\n const result = await notionService.getNotionPage(pageId);\n\n if (!result.success) {\n return {\n success: false,\n data: null,\n error: \"Failed to fetch page\",\n details: result.error\n };\n }\n\n // Filter sensitive data if needed\n // Example: Remove button properties\n const filteredData = filterSensitiveProperties(result.data);\n\n return {\n success: true,\n data: filteredData,\n error: null\n };\n}\n\n/**\n * Update a Notion page's properties\n * Generic controller that works with any Notion page type\n */\nexport async function updatePage(pageId: string, properties: any) {\n // Validate input\n if (!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 if (!properties || typeof properties !== 'object') {\n return {\n success: false,\n data: null,\n error: \"Invalid properties\",\n details: \"properties must be a non-empty object\"\n };\n }\n\n // Call service\n const result = await notionService.updateNotionPage(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 // Filter sensitive data if needed\n const filteredData = filterSensitiveProperties(result.data);\n\n return {\n success: true,\n data: filteredData,\n error: null\n };\n}\n\n/**\n * Create a new page in a database\n */\nexport async function createPage(databaseId: string, properties: any) {\n // Validate input\n if (!databaseId || typeof databaseId !== 'string') {\n return {\n success: false,\n data: null,\n error: \"Invalid databaseId\",\n details: \"databaseId must be a non-empty string\"\n };\n }\n\n if (!properties || typeof properties !== 'object') {\n return {\n success: false,\n data: null,\n error: \"Invalid properties\",\n details: \"properties must be a non-empty object\"\n };\n }\n\n // Call service\n const result = await notionService.createNotionPage(databaseId, properties);\n\n if (!result.success) {\n return {\n success: false,\n data: null,\n error: \"Failed to create page\",\n details: result.error\n };\n }\n\n // Filter sensitive data if needed\n const filteredData = filterSensitiveProperties(result.data);\n\n return {\n success: true,\n data: filteredData,\n error: null\n };\n}\n\n/**\n * Get page content (blocks)\n */\nexport async function getPageContent(pageId: string) {\n // Validate input\n if (!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 // Call service\n const result = await notionService.getPageBlocks(pageId);\n\n if (!result.success) {\n return {\n success: false,\n data: null,\n error: \"Failed to fetch page content\",\n details: result.error\n };\n }\n\n return {\n success: true,\n data: result.data,\n error: null\n };\n}\n\n/**\n * Filter sensitive properties from Notion data\n * Example: Remove button properties\n */\nfunction filterSensitiveProperties(data: any) {\n if (!data || !data.properties) {\n return data;\n }\n\n const filtered = {\n ...data,\n properties: Object.entries(data.properties)\n .filter(([_key, value]: [string, any]) => value.type !== 'button')\n .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})\n };\n\n return filtered;\n}\n",[],[206,462,455],"controllers","594acd66-b369-11f0-a8e1-0224a6c84d84","faviconController.ts","b7798a9c-b361-11f0-9afd-0224a6c84d84",12,["D",1761592549929],"import * as notionService from '../services/notion/index.ts';\nimport * as faviconizerService from '../services/faviconizerService.ts';\nimport type { FaviconUpdateResult } from '../../shared/types.ts';\n\n/**\n * Process favicon update for a Notion page\n * Orchestrates: Get page → Extract Domain → Fetch favicon → Update icon\n * On error: Append error note to page\n */\nexport async function processFaviconUpdate(pageId: string): Promise<FaviconUpdateResult> {\n // Validate input\n if (!pageId || typeof pageId !== 'string') {\n return {\n success: false,\n error: \"Invalid pageId\",\n details: \"pageId must be a non-empty string\"\n };\n }\n\n // Step 1: Get the Notion page\n const pageResult = await notionService.getNotionPage(pageId);\n\n if (!pageResult.success) {\n return {\n success: false,\n error: \"Failed to fetch Notion page\",\n details: pageResult.error\n };\n }\n\n // Step 2: Extract domain from Name property (title type)\n const domain = pageResult.data?.properties?.Name?.title?.[0]?.plain_text;\n\n if (!domain || typeof domain !== 'string' || domain.trim() === '') {\n const errorMessage = \"⚠️ Favicon update failed: Name property not found or empty\";\n\n // Append error note to page\n await notionService.appendBlockToPage(pageId, errorMessage);\n\n return {\n success: false,\n iconUpdated: false,\n errorNoteAdded: true,\n error: \"Name property not found or empty\"\n };\n }\n\n // Step 3: Fetch favicon from Faviconizer\n const faviconResult = await faviconizerService.getFaviconForDomain(domain);\n\n if (!faviconResult.success || !faviconResult.data?.faviconUrl) {\n const errorMessage = `⚠️ Favicon update failed: Could not fetch favicon for domain '${domain}'. Error: ${faviconResult.error}`;\n\n // Append error note to page\n await notionService.appendBlockToPage(pageId, errorMessage);\n\n return {\n success: false,\n iconUpdated: false,\n errorNoteAdded: true,\n error: \"Failed to fetch favicon\",\n details: faviconResult.error\n };\n }\n\n // Step 4: Update page icon\n const iconUpdateResult = await notionService.updatePageIcon(pageId, faviconResult.data.faviconUrl);\n\n if (!iconUpdateResult.success) {\n const errorMessage = `⚠️ Favicon update failed: Could not update page icon. Error: ${iconUpdateResult.error}`;\n\n // Append error note to page\n await notionService.appendBlockToPage(pageId, errorMessage);\n\n return {\n success: false,\n iconUpdated: false,\n errorNoteAdded: true,\n error: \"Failed to update page icon\",\n details: iconUpdateResult.error\n };\n }\n\n // Success! Append success note to page\n const successMessage = `✅ Favicon successfully updated for domain: ${domain}`;\n const appendResult = await notionService.appendBlockToPage(pageId, successMessage);\n\n return {\n success: true,\n iconUpdated: true,\n errorNoteAdded: false,\n successNoteAdded: appendResult.success\n };\n}\n",[],[206,462,464],"1cb94fca-b360-11f0-bc6f-0224a6c84d84",["D",1761588582800],[231,232],[206,462],["D",1761588582800],[230,233,241,247],[206],"1cb93d82-b360-11f0-bc6f-0224a6c84d84","settings.local.json","019a26dc-99bf-7269-a8f5-ec22817c2d0b",["D",1761588582800],"{\n \"permissions\": {\n \"allow\": [\n \"Bash(cat:*)\"\n ],\n \"deny\": [],\n \"ask\": []\n }\n}\n",[],[211,479],["D",1761588582800],[228],[211],["D",1761588582800],["D",1789527031073],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":55,"_108":109,"_110":25},{"_13":89,"_32":90,"_44":43,"_91":45,"_92":93,"_94":95,"_96":97,"_98":99,"_100":65,"_101":46,"_102":103},"ctx",{"_82":-5,"_132":526,"_527":528,"_529":530,"_531":25,"_532":25,"_533":25,"_534":59,"_535":-5,"_536":-7,"_537":-7,"_538":63,"_539":25,"_540":25,"_541":-5,"_542":25,"_543":25,"_544":25,"_545":-5},"ENV",{"_497":498,"_499":500,"_501":90,"_502":503,"_504":505,"_506":507,"_508":509,"_510":511,"_512":513,"_514":515,"_516":517,"_518":519,"_520":521,"_522":523,"_524":525},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"] </article></body></html>

Diff · v13