@mohanscodex/spectra-code 0.4.8 → 0.5.0

package/skills/cloudflare-deploy/references/pages/gotchas.md

@@ -0,0 +1,203 @@
+# Gotchas
+
+## Functions Not Running
+
+**Problem**: Function endpoints return 404 or don't execute  
+**Causes**: `_routes.json` excludes path; wrong file extension (`.jsx`/`.tsx`); Functions dir not at output root  
+**Solution**: Check `_routes.json`, rename to `.ts`/`.js`, verify build output structure
+
+## 404 on Static Assets
+
+**Problem**: Static files not serving  
+**Causes**: Build output dir misconfigured; Functions catching requests; Advanced mode missing `env.ASSETS.fetch()`  
+**Solution**: Verify output dir, add exclusions to `_routes.json`, call `env.ASSETS.fetch()` in `_worker.js`
+
+## Bindings Not Working
+
+**Problem**: `env.BINDING` undefined or errors  
+**Causes**: wrangler.jsonc syntax error; wrong binding IDs; missing `.dev.vars`; out-of-sync types  
+**Solution**: Validate config, verify IDs, create `.dev.vars`, run `npx wrangler types`
+
+## Build Failures
+
+**Problem**: Deployment fails during build  
+**Causes**: Wrong build command/output dir; Node version incompatibility; missing env vars; 20min timeout; OOM  
+**Solution**: Check Dashboard → Deployments → Build log; verify settings; add `.nvmrc`; optimize build
+
+## Middleware Not Running
+
+**Problem**: Middleware doesn't execute  
+**Causes**: Wrong filename (not `_middleware.ts`); missing `onRequest` export; didn't call `next()`  
+**Solution**: Rename file with underscore prefix; export handler; call `next()` or return Response
+
+## Headers/Redirects Not Working
+
+**Problem**: `_headers` or `_redirects` not applying  
+**Causes**: Only work for static assets; Functions override; syntax errors; exceeded limits  
+**Solution**: Set headers in Response object for Functions; verify syntax; check limits (100 headers, 2,100 redirects)
+
+## TypeScript Errors
+
+**Problem**: Type errors in Functions code  
+**Causes**: Types not generated; Env interface doesn't match wrangler.jsonc  
+**Solution**: Run `npx wrangler types --path='./functions/types.d.ts'`; update Env interface
+
+## Local Dev Issues
+
+**Problem**: Dev server errors or bindings don't work  
+**Causes**: Port conflict; bindings not passed; local vs HTTPS differences  
+**Solution**: Use `--port=3000`; pass bindings via CLI or wrangler.jsonc; account for HTTP/HTTPS differences
+
+## Performance Issues
+
+**Problem**: Slow responses or CPU limit errors  
+**Causes**: Functions invoked for static assets; cold starts; 10ms CPU limit; large bundle  
+**Solution**: Exclude static via `_routes.json`; optimize hot paths; keep bundle < 1MB
+
+## Framework-Specific
+
+### ⚠️ Deprecated Frameworks
+
+**Next.js**: Official adapter (`@cloudflare/next-on-pages`) **deprecated** and unmaintained.
+- **Problem**: No updates since 2024; incompatible with Next.js 15+; missing App Router features
+- **Cause**: Cloudflare discontinued official support; community fork exists but limited
+- **Solutions**:
+  1. **Recommended**: Use Vercel (official Next.js host)
+  2. **Advanced**: Self-host on Workers using custom adapter (complex, unsupported)
+  3. **Migration**: Switch to SvelteKit/Nuxt (similar DX, full Pages support)
+
+**Remix**: Official adapter (`@remix-run/cloudflare-pages`) **deprecated**.
+- **Problem**: No maintenance from Remix team; compatibility issues with Remix v2+
+- **Cause**: Remix team deprecated all framework adapters
+- **Solutions**:
+  1. **Recommended**: Migrate to SvelteKit (similar file-based routing, better DX)
+  2. **Alternative**: Use Astro (static-first with optional SSR)
+  3. **Workaround**: Continue using deprecated adapter (no future support)
+
+### ✅ Supported Frameworks
+
+**SvelteKit**:
+- Use `@sveltejs/adapter-cloudflare`
+- Access bindings via `platform.env` in server load functions
+- Set `platform: 'cloudflare'` in `svelte.config.js`
+
+**Astro**:
+- Built-in Cloudflare adapter
+- Access bindings via `Astro.locals.runtime.env`
+
+**Nuxt**:
+- Set `nitro.preset: 'cloudflare-pages'` in `nuxt.config.ts`
+- Access bindings via `event.context.cloudflare.env`
+
+**Qwik, Solid Start**:
+- Built-in or official Cloudflare adapters available
+- Check respective framework docs for binding access
+
+## Debugging
+
+```typescript
+// Log request details
+console.log('Request:', { method: request.method, url: request.url });
+console.log('Env:', Object.keys(env));
+console.log('Params:', params);
+```
+
+**View logs**: `npx wrangler pages deployment tail --project-name=my-project`
+
+## Smart Placement Issues
+
+### Increased Cold Start Latency
+
+**Problem**: First requests slower after enabling Smart Placement  
+**Cause**: Initial optimization period while system learns traffic patterns  
+**Solution**: Expected behavior during first 24-48 hours; monitor latency trends over time
+
+### Inconsistent Response Times
+
+**Problem**: Latency varies significantly across requests during initial deployment  
+**Cause**: Smart Placement testing different execution locations to find optimal placement  
+**Solution**: Normal during learning phase; stabilizes after traffic patterns emerge (1-2 days)
+
+### No Performance Improvement
+
+**Problem**: Smart Placement enabled but no latency reduction observed  
+**Cause**: Traffic evenly distributed globally, or no data locality constraints  
+**Solution**: Smart Placement most effective with centralized data (D1/DO) or regional traffic; disable if no benefit
+
+## Remote Bindings Issues
+
+### Accidentally Modified Production Data
+
+**Problem**: Local dev with `--remote` altered production database/KV  
+**Cause**: Remote bindings connect directly to production resources; writes are real  
+**Solution**: 
+- Use `--remote` only for read-heavy debugging
+- Create separate preview environments for testing
+- Never use `--remote` for write operations during development
+
+### Remote Binding Auth Errors
+
+**Problem**: `npx wrangler pages dev --remote` fails with "Unauthorized" or auth error  
+**Cause**: Not logged in, session expired, or insufficient account permissions  
+**Solution**: 
+1. Run `npx wrangler login` to re-authenticate
+2. Verify account has access to project and bindings
+3. Check binding IDs match production configuration
+
+### Slow Local Dev with Remote Bindings
+
+**Problem**: Local dev server slow when using `--remote`  
+**Cause**: Every request makes network calls to production bindings  
+**Solution**: Use local bindings for development; reserve `--remote` for final validation
+
+## Common Errors
+
+### "Module not found"
+**Cause**: Dependencies not bundled or build output incorrect  
+**Solution**: Check build output directory, ensure dependencies bundled
+
+### "Binding not found"
+**Cause**: Binding not configured or types out of sync  
+**Solution**: Verify wrangler.jsonc, run `npx wrangler types`
+
+### "Request exceeded CPU limit"
+**Cause**: Code execution too slow or heavy compute  
+**Solution**: Optimize hot paths, upgrade to Workers Paid
+
+### "Script too large"
+**Cause**: Bundle size exceeds limit  
+**Solution**: Tree-shake, use dynamic imports, code-split
+
+### "Too many subrequests"
+**Cause**: Exceeded 50 subrequest limit  
+**Solution**: Batch or reduce fetch calls
+
+### "KV key not found"
+**Cause**: Key doesn't exist or wrong namespace  
+**Solution**: Check namespace matches environment
+
+### "D1 error"
+**Cause**: Wrong database_id or missing migrations  
+**Solution**: Verify config, run `wrangler d1 migrations list`
+
+## Limits Reference (Jan 2026)
+
+| Resource | Free | Paid |
+|----------|------|------|
+| Functions Requests | 100k/day | Unlimited |
+| CPU Time | 10ms/req | 30ms/req |
+| Memory | 128MB | 128MB |
+| Script Size | 1MB | 10MB |
+| Subrequests | 50/req | 1,000/req |
+| Deployments | 500/month | 5,000/month |
+
+**Tip**: Hitting CPU limit? Optimize hot paths or upgrade to Workers Paid plan.
+
+[Full limits](https://developers.cloudflare.com/pages/platform/limits/)
+
+## Getting Help
+
+1. Check [Pages Docs](https://developers.cloudflare.com/pages/)
+2. Search [Discord #functions](https://discord.com/channels/595317990191398933/910978223968518144)
+3. Review [Workers Examples](https://developers.cloudflare.com/workers/examples/)
+4. Check framework-specific docs/adapters

package/skills/cloudflare-deploy/references/pages/patterns.md

@@ -0,0 +1,204 @@
+# Patterns
+
+## API Routes
+
+```typescript
+// functions/api/todos/[id].ts
+export const onRequestGet: PagesFunction<Env> = async ({ env, params }) => {
+  const todo = await env.DB.prepare('SELECT * FROM todos WHERE id = ?').bind(params.id).first();
+  if (!todo) return new Response('Not found', { status: 404 });
+  return Response.json(todo);
+};
+
+export const onRequestPut: PagesFunction<Env> = async ({ env, params, request }) => {
+  const body = await request.json();
+  await env.DB.prepare('UPDATE todos SET title = ?, completed = ? WHERE id = ?')
+    .bind(body.title, body.completed, params.id).run();
+  return Response.json({ success: true });
+};
+// Also: onRequestDelete, onRequestPost
+```
+
+## Auth Middleware
+
+```typescript
+// functions/_middleware.ts
+const auth: PagesFunction<Env> = async (context) => {
+  if (context.request.url.includes('/public/')) return context.next();
+  const authHeader = context.request.headers.get('Authorization');
+  if (!authHeader?.startsWith('Bearer ')) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+  
+  try {
+    const payload = await verifyJWT(authHeader.substring(7), context.env.JWT_SECRET);
+    context.data.user = payload;
+    return context.next();
+  } catch (err) {
+    return new Response('Invalid token', { status: 401 });
+  }
+};
+export const onRequest = [auth];
+```
+
+## CORS
+
+```typescript
+// functions/api/_middleware.ts
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+};
+
+export const onRequest: PagesFunction = async (context) => {
+  if (context.request.method === 'OPTIONS') {
+    return new Response(null, {headers: corsHeaders});
+  }
+  const response = await context.next();
+  Object.entries(corsHeaders).forEach(([k, v]) => response.headers.set(k, v));
+  return response;
+};
+```
+
+## Form Handling
+
+```typescript
+// functions/api/contact.ts
+export const onRequestPost: PagesFunction<Env> = async ({ request, env }) => {
+  const formData = await request.formData();
+  await env.QUEUE.send({name: formData.get('name'), email: formData.get('email')});
+  return new Response('<h1>Thanks!</h1>', { headers: { 'Content-Type': 'text/html' } });
+};
+```
+
+## Background Tasks
+
+```typescript
+export const onRequestPost: PagesFunction = async ({ request, waitUntil }) => {
+  const data = await request.json();
+  waitUntil(fetch('https://api.example.com/webhook', {
+    method: 'POST', body: JSON.stringify(data)
+  }));
+  return Response.json({ queued: true });
+};
+```
+
+## Error Handling
+
+```typescript
+// functions/_middleware.ts
+const errorHandler: PagesFunction = async (context) => {
+  try {
+    return await context.next();
+  } catch (error) {
+    console.error('Error:', error);
+    if (context.request.url.includes('/api/')) {
+      return Response.json({ error: error.message }, { status: 500 });
+    }
+    return new Response(`<h1>Error</h1><p>${error.message}</p>`, { 
+      status: 500, headers: { 'Content-Type': 'text/html' } 
+    });
+  }
+};
+export const onRequest = [errorHandler];
+```
+
+## Caching
+
+```typescript
+// functions/api/data.ts
+export const onRequestGet: PagesFunction<Env> = async ({ env, request }) => {
+  const cacheKey = `data:${new URL(request.url).pathname}`;
+  const cached = await env.KV.get(cacheKey, 'json');
+  if (cached) return Response.json(cached, { headers: { 'X-Cache': 'HIT' } });
+  
+  const data = await env.DB.prepare('SELECT * FROM data').first();
+  await env.KV.put(cacheKey, JSON.stringify(data), {expirationTtl: 3600});
+  return Response.json(data, {headers: {'X-Cache': 'MISS'}});
+};
+```
+
+## Smart Placement for Database Apps
+
+Enable Smart Placement for apps with D1 or centralized data sources:
+
+```jsonc
+// wrangler.jsonc
+{
+  "name": "global-app",
+  "placement": {
+    "mode": "smart"
+  },
+  "d1_databases": [{
+    "binding": "DB",
+    "database_id": "your-db-id"
+  }]
+}
+```
+
+```typescript
+// functions/api/data.ts
+export const onRequestGet: PagesFunction<Env> = async ({ env }) => {
+  // Smart Placement optimizes execution location over time
+  // Balances user location vs database location
+  const data = await env.DB.prepare('SELECT * FROM products LIMIT 10').all();
+  return Response.json(data);
+};
+```
+
+**Best for**: Read-heavy apps with D1/Durable Objects in specific regions.  
+**Not needed**: Apps without data locality constraints or with evenly distributed traffic.
+
+## Framework Integration
+
+**Supported** (2026): SvelteKit, Astro, Nuxt, Qwik, Solid Start
+
+```bash
+npm create cloudflare@latest my-app -- --framework=svelte
+```
+
+### SvelteKit
+```typescript
+// src/routes/+page.server.ts
+export const load = async ({ platform }) => {
+  const todos = await platform.env.DB.prepare('SELECT * FROM todos').all();
+  return { todos: todos.results };
+};
+```
+
+### Astro
+```astro
+---
+const { DB } = Astro.locals.runtime.env;
+const todos = await DB.prepare('SELECT * FROM todos').all();
+---
+<ul>{todos.results.map(t => <li>{t.title}</li>)}</ul>
+```
+
+### Nuxt
+```typescript
+// server/api/todos.get.ts
+export default defineEventHandler(async (event) => {
+  const { DB } = event.context.cloudflare.env;
+  return await DB.prepare('SELECT * FROM todos').all();
+});
+```
+
+**⚠️ Framework Status** (2026):
+- ✅ **Supported**: SvelteKit, Astro, Nuxt, Qwik, Solid Start
+- ❌ **Deprecated**: Next.js (`@cloudflare/next-on-pages`), Remix (`@remix-run/cloudflare-pages`)
+
+For deprecated frameworks, see [gotchas.md](./gotchas.md#framework-specific) for migration options.
+
+[Framework Guides](https://developers.cloudflare.com/pages/framework-guides/)
+
+## Monorepo
+
+Dashboard → Settings → Build → Root directory. Set to subproject (e.g., `apps/web`).
+
+## Best Practices
+
+**Performance**: Exclude static via `_routes.json`; cache with KV; keep bundle < 1MB  
+**Security**: Use secrets (not vars); validate inputs; rate limit with KV/DO  
+**Workflow**: Preview per branch; local dev with `wrangler pages dev`; instant rollbacks in Dashboard

package/skills/cloudflare-deploy/references/pages-functions/README.md

@@ -0,0 +1,98 @@
+# Cloudflare Pages Functions
+
+Serverless functions on Cloudflare Pages using Workers runtime. Full-stack dev with file-based routing.
+
+## Quick Navigation
+
+**Need to...**
+| Task | Go to |
+|------|-------|
+| Set up TypeScript types | [configuration.md](./configuration.md) - TypeScript Setup |
+| Configure bindings (KV, D1, R2) | [configuration.md](./configuration.md) - wrangler.jsonc |
+| Access request/env/params | [api.md](./api.md) - EventContext |
+| Add middleware or auth | [patterns.md](./patterns.md) - Middleware, Auth |
+| Background tasks (waitUntil) | [patterns.md](./patterns.md) - Background Tasks |
+| Debug errors or check limits | [gotchas.md](./gotchas.md) - Common Errors, Limits |
+
+## Decision Tree: Is This Pages Functions?
+
+```
+Need serverless backend? 
+├─ Yes, for a static site → Pages Functions
+├─ Yes, standalone API → Workers
+└─ Just static hosting → Pages (no functions)
+
+Have existing Worker?
+├─ Complex routing logic → Use _worker.js (Advanced Mode)
+└─ Simple routes → Migrate to /functions (File-Based)
+
+Framework-based?
+├─ Next.js/SvelteKit/Remix → Uses _worker.js automatically
+└─ Vanilla/HTML/React SPA → Use /functions
+```
+
+## File-Based Routing
+
+```
+/functions
+  ├── index.js              → /
+  ├── api.js                → /api
+  ├── users/
+  │   ├── index.js          → /users/
+  │   ├── [user].js         → /users/:user
+  │   └── [[catchall]].js   → /users/*
+  └── _middleware.js        → runs on all routes
+```
+
+**Rules:**
+- `index.js` → directory root
+- Trailing slash optional
+- Specific routes precede catch-alls
+- Falls back to static if no match
+
+## Dynamic Routes
+
+**Single segment** `[param]` → string:
+```js
+// /functions/users/[user].js
+export function onRequest(context) {
+  return new Response(`Hello ${context.params.user}`);
+}
+// Matches: /users/nevi
+```
+
+**Multi-segment** `[[param]]` → array:
+```js
+// /functions/users/[[catchall]].js
+export function onRequest(context) {
+  return new Response(JSON.stringify(context.params.catchall));
+}
+// Matches: /users/nevi/foobar → ["nevi", "foobar"]
+```
+
+## Key Features
+
+- **Method handlers:** `onRequestGet`, `onRequestPost`, etc.
+- **Middleware:** `_middleware.js` for cross-cutting concerns
+- **Bindings:** KV, D1, R2, Durable Objects, Workers AI, Service bindings
+- **TypeScript:** Full type support via `wrangler types` command
+- **Advanced mode:** Use `_worker.js` for custom routing logic
+
+## Reading Order
+
+**New to Pages Functions?** Start here:
+1. [README.md](./README.md) - Overview, routing, decision tree (you are here)
+2. [configuration.md](./configuration.md) - TypeScript setup, wrangler.jsonc, bindings
+3. [api.md](./api.md) - EventContext, handlers, bindings reference
+4. [patterns.md](./patterns.md) - Middleware, auth, CORS, rate limiting, caching
+5. [gotchas.md](./gotchas.md) - Common errors, debugging, limits
+
+**Quick reference lookup:**
+- Bindings table → [api.md](./api.md)
+- Error diagnosis → [gotchas.md](./gotchas.md)
+- TypeScript setup → [configuration.md](./configuration.md)
+
+## See Also
+- [pages](../pages/) - Pages platform overview and static site deployment
+- [workers](../workers/) - Workers runtime API reference
+- [d1](../d1/) - D1 database integration with Pages Functions

package/skills/cloudflare-deploy/references/pages-functions/api.md

@@ -0,0 +1,143 @@
+# Function API
+
+## EventContext
+
+```typescript
+interface EventContext<Env = any> {
+  request: Request;              // Incoming request
+  functionPath: string;          // Request path
+  waitUntil(promise: Promise<any>): void;  // Background tasks (non-blocking)
+  passThroughOnException(): void;          // Fallback to static on error
+  next(input?: Request | string, init?: RequestInit): Promise<Response>;
+  env: Env;                      // Bindings, vars, secrets
+  params: Record<string, string | string[]>;  // Route params ([user] or [[catchall]])
+  data: any;                     // Middleware shared state
+}
+```
+
+**TypeScript:** See [configuration.md](./configuration.md) for `wrangler types` setup
+
+## Handlers
+
+```typescript
+// Generic (fallback for any method)
+export async function onRequest(ctx: EventContext): Promise<Response> {
+  return new Response('Any method');
+}
+
+// Method-specific (takes precedence over generic)
+export async function onRequestGet(ctx: EventContext): Promise<Response> {
+  return Response.json({ message: 'GET' });
+}
+
+export async function onRequestPost(ctx: EventContext): Promise<Response> {
+  const body = await ctx.request.json();
+  return Response.json({ received: body });
+}
+// Also: onRequestPut, onRequestPatch, onRequestDelete, onRequestHead, onRequestOptions
+```
+
+## Bindings Reference
+
+| Binding Type | Interface | Config Key | Use Case |
+|--------------|-----------|------------|----------|
+| KV | `KVNamespace` | `kv_namespaces` | Key-value cache, sessions, config |
+| D1 | `D1Database` | `d1_databases` | Relational data, SQL queries |
+| R2 | `R2Bucket` | `r2_buckets` | Large files, user uploads, assets |
+| Durable Objects | `DurableObjectNamespace` | `durable_objects.bindings` | Stateful coordination, websockets |
+| Workers AI | `Ai` | `ai.binding` | LLM inference, embeddings |
+| Vectorize | `VectorizeIndex` | `vectorize` | Vector search, embeddings |
+| Service Binding | `Fetcher` | `services` | Worker-to-worker RPC |
+| Analytics Engine | `AnalyticsEngineDataset` | `analytics_engine_datasets` | Event logging, metrics |
+| Environment Vars | `string` | `vars` | Non-sensitive config |
+
+See [configuration.md](./configuration.md) for wrangler.jsonc examples.
+
+## Bindings
+
+### KV
+
+```typescript
+interface Env { KV: KVNamespace; }
+export const onRequest: PagesFunction<Env> = async (ctx) => {
+  await ctx.env.KV.put('key', 'value', { expirationTtl: 3600 });
+  const val = await ctx.env.KV.get('key', { type: 'json' });
+  const keys = await ctx.env.KV.list({ prefix: 'user:' });
+  return Response.json({ val });
+};
+```
+
+### D1
+
+```typescript
+interface Env { DB: D1Database; }
+export const onRequest: PagesFunction<Env> = async (ctx) => {
+  const user = await ctx.env.DB.prepare('SELECT * FROM users WHERE id = ?').bind(123).first();
+  return Response.json(user);
+};
+```
+
+### R2
+
+```typescript
+interface Env { BUCKET: R2Bucket; }
+export const onRequest: PagesFunction<Env> = async (ctx) => {
+  const obj = await ctx.env.BUCKET.get('file.txt');
+  if (!obj) return new Response('Not found', { status: 404 });
+  await ctx.env.BUCKET.put('file.txt', ctx.request.body);
+  return new Response(obj.body);
+};
+```
+
+### Durable Objects
+
+```typescript
+interface Env { COUNTER: DurableObjectNamespace; }
+export const onRequest: PagesFunction<Env> = async (ctx) => {
+  const stub = ctx.env.COUNTER.get(ctx.env.COUNTER.idFromName('global'));
+  return stub.fetch(ctx.request);
+};
+```
+
+### Workers AI
+
+```typescript
+interface Env { AI: Ai; }
+export const onRequest: PagesFunction<Env> = async (ctx) => {
+  const resp = await ctx.env.AI.run('@cf/meta/llama-3.1-8b-instruct', { prompt: 'Hello' });
+  return Response.json(resp);
+};
+```
+
+### Service Bindings & Env Vars
+
+```typescript
+interface Env { AUTH: Fetcher; API_KEY: string; }
+export const onRequest: PagesFunction<Env> = async (ctx) => {
+  // Service binding: forward to another Worker
+  return ctx.env.AUTH.fetch(ctx.request);
+  
+  // Environment variable
+  return Response.json({ key: ctx.env.API_KEY });
+};
+```
+
+## Advanced Mode (env.ASSETS)
+
+When using `_worker.js`, access static assets via `env.ASSETS.fetch()`:
+
+```typescript
+interface Env { ASSETS: Fetcher; KV: KVNamespace; }
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    if (url.pathname.startsWith('/api/')) {
+      return Response.json({ data: await env.KV.get('key') });
+    }
+    return env.ASSETS.fetch(request); // Fallback to static
+  }
+} satisfies ExportedHandler<Env>;
+```
+
+**See also:** [configuration.md](./configuration.md) for TypeScript setup and wrangler.jsonc | [patterns.md](./patterns.md) for middleware and auth patterns