create-surf-app 0.1.13 → 0.1.15

package/dist/{chunk-DJ2JRBGI.js → chunk-53EUQV7R.js}

@@ -8,6 +8,7 @@ var DEFAULT_BACKEND_PORT = "3001";
 var DEFAULT_TEMPLATE = "default";
 async function createSurfApp({
   projectName = ".",
+  templateName = DEFAULT_TEMPLATE,
   frontendPort = process.env.VITE_PORT || DEFAULT_FRONTEND_PORT,
   backendPort = process.env.VITE_BACKEND_PORT || DEFAULT_BACKEND_PORT,
   previewBase = process.env.VITE_BASE,
@@ -17,9 +18,9 @@ async function createSurfApp({
   const name = path.basename(root);
   const validatedFrontendPort = validatePort("frontend", frontendPort);
   const validatedBackendPort = validatePort("backend", backendPort);
-  const templateDir = resolveTemplateDir(DEFAULT_TEMPLATE);
+  const templateDir = resolveTemplateDir(templateName);
   logger(`
-  Creating Surf app in ${root}
+  Creating Surf app in ${root} (${templateName})
 `);
   fs.mkdirSync(root, { recursive: true });
   copyDir(templateDir, root, root, logger);

package/dist/cli.js

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
 import {
   createSurfApp
-} from "./chunk-DJ2JRBGI.js";
+} from "./chunk-53EUQV7R.js";
 
 // src/cli.ts
 var VALUE_FLAGS = /* @__PURE__ */ new Set([
+  "--template",
   "--frontend-port",
   "--backend-port",
   "--preview-base"
@@ -34,6 +35,7 @@ function parseCliArgs(args) {
   }
   return {
     projectName: positionalArgs[0] || ".",
+    templateName: getFlag(args, "--template"),
     frontendPort: getFlag(args, "--frontend-port"),
     backendPort: getFlag(args, "--backend-port"),
     previewBase: getFlag(args, "--preview-base")

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   createSurfApp
-} from "./chunk-DJ2JRBGI.js";
+} from "./chunk-53EUQV7R.js";
 export {
   createSurfApp
 };

package/dist/templates/default/backend/db/schema.js

@@ -1,20 +1,8 @@
-/**
- * Drizzle ORM schema definitions.
- *
- * Define your tables here using Drizzle's pgTable builder.
- * This file is the single source of truth for your database schema.
- *
- * Example:
- *   const { pgTable, serial, text, boolean, timestamp } = require('drizzle-orm/pg-core');
- *
- *   const todos = pgTable('todos', {
- *     id: serial('id').primaryKey(),
- *     title: text('title').notNull(),
- *     completed: boolean('completed').default(false),
- *     createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),
- *   });
- *
- *   module.exports = { todos };
- */
-
-// Add your table definitions here.
+// Define your Drizzle ORM tables here.
+// Example:
+//   const { pgTable, serial, text, timestamp } = require('drizzle-orm/pg-core')
+//   exports.users = pgTable('users', {
+//     id: serial('id').primaryKey(),
+//     name: text('name').notNull(),
+//     created_at: timestamp('created_at').defaultNow(),
+//   })

package/dist/templates/default/backend/eslint.config.mjs

@@ -2,7 +2,7 @@ import js from '@eslint/js';
 import globals from 'globals';
 
 export default [
-  { ignores: ['node_modules', 'lib/api*.js'] },
+  { ignores: ['node_modules'] },
   {
     files: ['**/*.js'],
     ...js.configs.recommended,

package/dist/templates/default/backend/package.json

@@ -1,26 +1,12 @@
 {
   "name": "backend",
   "private": true,
-  "version": "0.0.0",
   "scripts": {
-    "check": "node --check server.js && find routes lib db -type f -name '*.js' -print0 | xargs -0 -n1 node --check",
-    "lint": "eslint .",
     "start": "node server.js",
-    "dev": "node --watch --watch-path=./routes --watch-path=./lib --watch-path=./server.js server.js",
-    "verify": "npm run lint && npm run check"
+    "dev": "node --watch server.js"
   },
   "dependencies": {
     "@surf-ai/sdk": "0.1.4-beta",
-    "express": "4.22.1",
-    "cors": "2.8.6",
-    "http-proxy-middleware": "3.0.5",
-    "drizzle-orm": "0.44.7",
-    "drizzle-kit": "0.30.6",
-    "croner": "9.1.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "9.39.4",
-    "eslint": "9.39.4",
-    "globals": "16.5.0"
+    "express": "4.22.1"
   }
 }

package/dist/templates/default/backend/routes/.gitkeep

@@ -0,0 +1 @@
+

package/dist/templates/default/backend/server.js

@@ -1,444 +1,2 @@
-const express = require('express');
-const cors = require('cors');
-const { Cron } = require('croner');
-const fs = require('fs');
-const path = require('path');
-const { setupProxyRoutes } = require('./routes/proxy');
-
-if (!process.env.PORT) {
-  const envPath = path.join(__dirname, '.env');
-  if (fs.existsSync(envPath)) {
-    for (const line of fs.readFileSync(envPath, 'utf8').split(/\r?\n/)) {
-      const trimmed = line.trim();
-      if (!trimmed || trimmed.startsWith('#')) continue;
-      const idx = trimmed.indexOf('=');
-      if (idx === -1) continue;
-      const key = trimmed.slice(0, idx).trim();
-      const value = trimmed.slice(idx + 1).trim();
-      if (key && !(key in process.env)) {
-        process.env[key] = value;
-      }
-    }
-  }
-}
-
-const app = express();
-const PORT = Number.parseInt(process.env.PORT || '', 10);
-if (!Number.isInteger(PORT)) {
-  throw new Error('PORT env var is required');
-}
-
-// CORS: allow any origin (external frontends can connect)
-app.use(cors());
-
-// Forward /proxy/* → OutboundProxy (API key injection)
-// NOTE: Must be registered BEFORE express.json() so that the raw request body
-// stream is preserved for http-proxy-middleware to forward POST requests.
-setupProxyRoutes(app);
-
-// Parse JSON bodies (after proxy routes to avoid consuming body stream)
-app.use(express.json());
-
-// Health check
-app.get('/api/health', (_req, res) => {
-  res.json({ status: 'ok' });
-});
-
-// ── Auto-register API routes ─────────────────────────────────────────────
-// Every .js file in routes/ (except proxy.js) is auto-mounted at /api/{name}.
-// e.g. routes/todos.js → /api/todos, routes/auth.js → /api/auth
-const routesDir = path.join(__dirname, 'routes');
-for (const file of fs.readdirSync(routesDir)) {
-  if (file === 'proxy.js' || !file.endsWith('.js')) continue;
-  const name = file.replace('.js', '');
-  try {
-    app.use(`/api/${name}`, require(`./routes/${file}`));
-    console.log(`Route registered: /api/${name}`);
-  } catch (err) {
-    console.error(`Failed to load route ${file}: ${err.message}`);
-  }
-}
-
-// ── Auto-create DB tables from schema.js ─────────────────────────────────
-// The agent writes db/schema.js AFTER the server starts, so we need two
-// trigger paths: (1) POST /api/__sync-schema for explicit agent calls,
-// (2) fs.watchFile as a fallback in case the agent doesn't call the endpoint.
-//
-// Both paths funnel into doSyncSchema() which has:
-// - Concurrency lock (syncing flag) to prevent overlapping DDL
-// - SyntaxError guard for half-written files
-// - Retry with backoff for Neon cold-start errors
-let schemaReady = false;
-let syncing = false;
-
-async function doSyncSchema() {
-  if (syncing) return;
-  syncing = true;
-  try {
-    // Clear require cache so we pick up the latest schema.js
-    try { delete require.cache[require.resolve('./db/schema')]; } catch (_e) { /* not cached — ignore */ }
-
-    // Try to load schema — SyntaxError means the file is half-written
-    let schema;
-    try {
-      schema = require('./db/schema');
-    } catch (err) {
-      if (err instanceof SyntaxError) {
-        console.log('DB: schema.js has syntax error, waiting for next change...');
-        return;
-      }
-      if (err.message.includes('Cannot find module') || err.message.includes('is not a function')) {
-        return; // No schema or no drizzle-orm — skip silently
-      }
-      throw err;
-    }
-
-    const { getTableConfig } = require('drizzle-orm/pg-core');
-    const tables = Object.values(schema).filter(t =>
-      t && typeof t === 'object' && Symbol.for('drizzle:Name') in t
-    );
-    if (tables.length === 0) return;
-
-    const { dbTables, dbProvision, dbQuery, dbTableSchema } = require('./lib/db');
-    await dbProvision('auto-sync schema tables');
-
-    const existing = (await dbTables()).map(t => t.name);
-    const missing = tables.filter(t => !existing.includes(getTableConfig(t).name));
-
-    if (missing.length > 0) {
-      // Use drizzle-kit to generate correct DDL (handles UNIQUE, FK, defaults, etc.)
-      const { generateDrizzleJson, generateMigration } = require('drizzle-kit/api');
-      const missingSchema = {};
-      for (const t of missing) missingSchema[getTableConfig(t).name] = t;
-      const sqls = await generateMigration(generateDrizzleJson({}), generateDrizzleJson(missingSchema));
-
-      for (const sql of sqls) {
-        for (let attempt = 0; attempt < 2; attempt++) {
-          try {
-            await dbQuery(sql, []);
-            console.log(`DB: Executed: ${sql.slice(0, 80)}...`);
-            break;
-          } catch (err) {
-            if (attempt === 0) {
-              console.warn(`DB: Retrying after: ${err.message}`);
-              await new Promise(r => setTimeout(r, 1500));
-            } else {
-              console.error(`DB: Failed: ${sql.slice(0, 80)}... — ${err.message}`);
-            }
-          }
-        }
-      }
-    }
-
-    // Check existing tables for missing columns (runs even when new tables were also created)
-    const existingTables = tables.filter(t => existing.includes(getTableConfig(t).name));
-    for (const t of existingTables) {
-      const cfg = getTableConfig(t);
-      try {
-        const live = await dbTableSchema(cfg.name);
-        const liveCols = new Set(live.columns.map(c => c.name));
-        for (const col of cfg.columns) {
-          if (!liveCols.has(col.name)) {
-            const colType = col.getSQLType();
-            const ddl = 'ALTER TABLE "' + cfg.name + '" ADD COLUMN IF NOT EXISTS "' + col.name + '" ' + colType;
-            try {
-              await dbQuery(ddl, []);
-              console.log('DB: Added column ' + col.name + ' to ' + cfg.name);
-            } catch (err) {
-              console.warn('DB: Failed to add column ' + col.name + ' to ' + cfg.name + ': ' + err.message);
-            }
-          }
-        }
-      } catch (err) {
-        console.warn('DB: Column check failed for ' + cfg.name + ': ' + err.message);
-      }
-    }
-  } finally {
-    syncing = false;
-  }
-}
-
-// Retry wrapper for Neon cold-start transient errors.
-async function syncSchemaWithRetry(retries = 3, delay = 2000) {
-  for (let i = 0; i < retries; i++) {
-    try {
-      await doSyncSchema();
-      return;
-    } catch (err) {
-      console.error(`DB schema sync attempt ${i + 1}/${retries} failed: ${err.message}`);
-      if (i < retries - 1) await new Promise(r => setTimeout(r, delay * (i + 1)));
-    }
-  }
-  console.error('DB schema sync failed after all retries');
-}
-
-// Explicit sync endpoint — agent calls this after writing schema.js.
-app.post('/api/__sync-schema', async (_req, res) => {
-  try {
-    await syncSchemaWithRetry(2, 1500);
-    res.json({ ok: true });
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// ── Cron job system ──────────────────────────────────────────────────────
-// Reads backend/cron.json, schedules tasks with croner, exposes CRUD API.
-const _cronInstances = new Map();   // id -> Cron instance
-const _cronState = new Map();       // id -> { lastRunAt, lastStatus, lastError }
-
-function _loadCronJobs() {
-  // Stop all existing cron jobs
-  for (const [, job] of _cronInstances) {
-    try { job.stop(); } catch (_e) { /* already stopped — ignore */ }
-  }
-  _cronInstances.clear();
-
-  const cronPath = path.join(__dirname, 'cron.json');
-  if (!fs.existsSync(cronPath)) return;
-
-  let tasks;
-  try {
-    tasks = JSON.parse(fs.readFileSync(cronPath, 'utf8'));
-  } catch (err) {
-    console.error('Cron: failed to parse cron.json:', err.message);
-    return;
-  }
-
-  if (!Array.isArray(tasks)) {
-    console.error('Cron: cron.json must be a JSON array');
-    return;
-  }
-
-  for (const task of tasks) {
-    if (!task.enabled) continue;
-    if (!task.id || !task.schedule || !task.handler) {
-      console.warn('Cron: skipping task with missing fields:', JSON.stringify(task));
-      continue;
-    }
-
-    let handlerMod;
-    try {
-      const handlerPath = path.resolve(__dirname, task.handler);
-      delete require.cache[handlerPath];
-      handlerMod = require(handlerPath);
-    } catch (err) {
-      console.error(`Cron: failed to load handler ${task.handler}: ${err.message}`);
-      continue;
-    }
-
-    if (typeof handlerMod.handler !== 'function') {
-      console.warn(`Cron: handler ${task.handler} does not export a handler function`);
-      continue;
-    }
-
-    const timeoutMs = (task.timeout || 300) * 1000;
-
-    // Initialize runtime state if not present
-    if (!_cronState.has(task.id)) {
-      _cronState.set(task.id, { lastRunAt: null, lastStatus: null, lastError: null });
-    }
-
-    const runHandler = async () => {
-      const state = _cronState.get(task.id);
-      state.lastRunAt = new Date().toISOString();
-      try {
-        await Promise.race([
-          handlerMod.handler(),
-          new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeoutMs)),
-        ]);
-        state.lastStatus = 'success';
-        state.lastError = null;
-        console.log(`Cron: task ${task.id} completed successfully`);
-      } catch (err) {
-        state.lastStatus = 'error';
-        state.lastError = err.message;
-        console.error(`Cron: task ${task.id} failed: ${err.message}`);
-      }
-    };
-
-    try {
-      const job = new Cron(task.schedule, runHandler);
-      _cronInstances.set(task.id, job);
-      console.log(`Cron: scheduled ${task.id} (${task.name || task.id}) with schedule "${task.schedule}"`);
-    } catch (err) {
-      console.error(`Cron: invalid schedule for ${task.id}: ${err.message}`);
-    }
-  }
-}
-
-// ── Cron CRUD API routes (before schema readiness guard) ─────────────────
-// Auth middleware for /api/cron routes
-app.use('/api/cron', (req, res, next) => {
-  const appToken = process.env.APP_TOKEN;
-  if (!appToken) return next(); // dev mode: skip auth
-  const auth = req.headers.authorization;
-  if (!auth || auth !== `Bearer ${appToken}`) {
-    return res.status(401).json({ error: 'Unauthorized' });
-  }
-  next();
-});
-
-app.get('/api/cron', (_req, res) => {
-  const cronPath = path.join(__dirname, 'cron.json');
-  let tasks = [];
-  try {
-    if (fs.existsSync(cronPath)) {
-      tasks = JSON.parse(fs.readFileSync(cronPath, 'utf8'));
-    }
-  } catch { tasks = []; }
-
-  const result = tasks.map(t => {
-    const state = _cronState.get(t.id) || { lastRunAt: null, lastStatus: null, lastError: null };
-    const job = _cronInstances.get(t.id);
-    return {
-      ...t,
-      lastRunAt: state.lastRunAt,
-      lastStatus: state.lastStatus,
-      lastError: state.lastError,
-      nextRun: job ? job.nextRun()?.toISOString() || null : null,
-    };
-  });
-  res.json(result);
-});
-
-app.post('/api/cron', (req, res) => {
-  const { id, name, schedule, handler, enabled = true, timeout = 300 } = req.body || {};
-  if (!id || !name || !schedule || !handler) {
-    return res.status(400).json({ error: 'Missing required fields: id, name, schedule, handler' });
-  }
-
-  // Validate cron expression and minimum interval (>= 1 minute)
-  try {
-    const testJob = new Cron(schedule);
-    const next1 = testJob.nextRun();
-    const next2 = testJob.nextRun(next1);
-    testJob.stop();
-    if (next1 && next2 && (next2.getTime() - next1.getTime()) < 60000) {
-      return res.status(400).json({ error: 'Minimum interval between runs must be at least 1 minute' });
-    }
-  } catch (err) {
-    return res.status(400).json({ error: `Invalid cron expression: ${err.message}` });
-  }
-
-  const cronPath = path.join(__dirname, 'cron.json');
-  let tasks = [];
-  try {
-    if (fs.existsSync(cronPath)) tasks = JSON.parse(fs.readFileSync(cronPath, 'utf8'));
-  } catch { tasks = []; }
-
-  if (tasks.some(t => t.id === id)) {
-    return res.status(409).json({ error: `Task with id "${id}" already exists` });
-  }
-
-  const newTask = { id, name, schedule, handler, enabled, timeout };
-  tasks.push(newTask);
-  fs.writeFileSync(cronPath, JSON.stringify(tasks, null, 2));
-  _loadCronJobs();
-  res.status(201).json(newTask);
-});
-
-app.patch('/api/cron/:id', (req, res) => {
-  const cronPath = path.join(__dirname, 'cron.json');
-  let tasks = [];
-  try {
-    if (fs.existsSync(cronPath)) tasks = JSON.parse(fs.readFileSync(cronPath, 'utf8'));
-  } catch { tasks = []; }
-
-  const idx = tasks.findIndex(t => t.id === req.params.id);
-  if (idx === -1) return res.status(404).json({ error: 'Task not found' });
-
-  const updates = req.body || {};
-
-  // If schedule is being updated, validate it
-  if (updates.schedule) {
-    try {
-      const testJob = new Cron(updates.schedule);
-      const next1 = testJob.nextRun();
-      const next2 = testJob.nextRun(next1);
-      testJob.stop();
-      if (next1 && next2 && (next2.getTime() - next1.getTime()) < 60000) {
-        return res.status(400).json({ error: 'Minimum interval between runs must be at least 1 minute' });
-      }
-    } catch (err) {
-      return res.status(400).json({ error: `Invalid cron expression: ${err.message}` });
-    }
-  }
-
-  tasks[idx] = { ...tasks[idx], ...updates, id: req.params.id };
-  fs.writeFileSync(cronPath, JSON.stringify(tasks, null, 2));
-  _loadCronJobs();
-  res.json(tasks[idx]);
-});
-
-app.delete('/api/cron/:id', (req, res) => {
-  const cronPath = path.join(__dirname, 'cron.json');
-  let tasks = [];
-  try {
-    if (fs.existsSync(cronPath)) tasks = JSON.parse(fs.readFileSync(cronPath, 'utf8'));
-  } catch { tasks = []; }
-
-  const idx = tasks.findIndex(t => t.id === req.params.id);
-  if (idx === -1) return res.status(404).json({ error: 'Task not found' });
-
-  tasks.splice(idx, 1);
-  fs.writeFileSync(cronPath, JSON.stringify(tasks, null, 2));
-  _cronState.delete(req.params.id);
-  _loadCronJobs();
-  res.json({ ok: true });
-});
-
-app.post('/api/cron/:id/run', async (req, res) => {
-  const job = _cronInstances.get(req.params.id);
-  if (!job) return res.status(404).json({ error: 'Task not found or not enabled' });
-  try {
-    job.trigger();
-    res.json({ ok: true, message: `Task ${req.params.id} triggered` });
-  } catch (err) {
-    res.status(500).json({ error: err.message });
-  }
-});
-
-// Block /api/* (except health + sync + cron) until initial schema sync completes.
-app.use('/api', (req, res, next) => {
-  if (schemaReady || req.path === '/health' || req.path === '/__sync-schema' || req.path.startsWith('/cron')) return next();
-  res.status(503).json({ error: 'Database schema initializing...' });
-});
-
-function startServer(retries = 10, delay = 1000) {
-  const server = app.listen(PORT, '0.0.0.0', async () => {
-    console.log(`Backend listening on port ${PORT}`);
-    await syncSchemaWithRetry();
-    schemaReady = true;
-    console.log('Schema sync complete, API ready');
-
-    // Load cron jobs after DB is ready
-    _loadCronJobs();
-
-    // Fallback: watch schema.js for changes in case agent doesn't call __sync-schema.
-    const schemaPath = path.join(__dirname, 'db', 'schema.js');
-    let syncDebounce = null;
-    fs.watchFile(schemaPath, { interval: 2000 }, () => {
-      if (syncDebounce) clearTimeout(syncDebounce);
-      syncDebounce = setTimeout(async () => {
-        console.log('DB: schema.js changed, re-syncing tables...');
-        try {
-          await syncSchemaWithRetry(2, 1500);
-          console.log('DB: schema re-sync complete');
-        } catch (err) {
-          console.error(`DB: schema re-sync failed: ${err.message}`);
-        }
-      }, 1000);
-    });
-  });
-  server.on('error', (err) => {
-    if (err.code === 'EADDRINUSE' && retries > 0) {
-      console.log(`Port ${PORT} in use, retrying in ${delay}ms... (${retries} left)`);
-      setTimeout(() => startServer(retries - 1, delay), delay);
-    } else {
-      console.error(`Failed to start server: ${err.message}`);
-      process.exit(1);
-    }
-  });
-}
-startServer();
+const { createServer } = require('@surf-ai/sdk/server')
+createServer().start()

package/dist/templates/mini-surf/CLAUDE.md

@@ -0,0 +1,88 @@
+# Project
+
+Built with [Surf SDK](https://github.com/cyberconnecthq/urania/tree/main/packages/sdk).
+
+## Imports from @surf-ai/sdk
+
+Everything comes from `@surf-ai/sdk`. Do NOT create local utility files for these.
+
+**Frontend (`@surf-ai/sdk/react`):**
+```tsx
+import { useMarketPrice, useTokenHolders } from '@surf-ai/sdk/react'  // data hooks
+import { cn } from '@surf-ai/sdk/react'                                // Tailwind class merge
+import { useToast, toast } from '@surf-ai/sdk/react'                   // toast notifications
+```
+
+**Backend (`@surf-ai/sdk/server`):**
+```js
+const { dataApi } = require('@surf-ai/sdk/server')
+const data = await dataApi.market.price({ symbol: 'BTC' })
+const holders = await dataApi.token.holders({ address: '0x...', chain: 'ethereum' })
+// Escape hatch for new endpoints:
+const raw = await dataApi.get('newcategory/endpoint', { foo: 'bar' })
+```
+
+## Structure
+
+```
+frontend/src/App.tsx       - build your UI here
+frontend/src/components/   - add components
+frontend/src/db/schema.ts  - frontend DB schema mirror
+backend/routes/*.js        - add API routes (auto-mounted at /api/{name})
+backend/db/schema.js       - define database tables
+```
+
+## Built-in Endpoints (from @surf-ai/sdk/server)
+
+`createServer()` provides these automatically — do NOT create routes for them:
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| `/api/health` | GET | Health check — `{ status: 'ok' }` |
+| `/api/__sync-schema` | POST | Sync `backend/db/schema.js` tables to database |
+| `/api/cron` | GET | List cron jobs with status and next run time |
+| `/api/cron` | POST | Create a new cron task |
+| `/api/cron/:id` | PATCH | Update a cron task (schedule, enabled, etc.) |
+| `/api/cron/:id` | DELETE | Delete a cron task |
+| `/api/cron/:id/run` | POST | Manually trigger a cron task |
+| `/proxy/*` | ANY | Data API passthrough — `/proxy/market/price` → hermod |
+
+Auto-registered from `backend/routes/*.js`:
+| File | Endpoint |
+|------|----------|
+| `routes/btc.js` | `/api/btc` |
+| `routes/portfolio.js` | `/api/portfolio` |
+
+## Database
+
+Define tables in `backend/db/schema.js` using Drizzle ORM:
+```js
+const { pgTable, serial, text, timestamp } = require('drizzle-orm/pg-core')
+exports.users = pgTable('users', {
+  id: serial('id').primaryKey(),
+  name: text('name').notNull(),
+  created_at: timestamp('created_at').defaultNow(),
+})
+```
+
+Tables are auto-created on startup and when `schema.js` changes (file watcher).
+The agent can also call `POST /api/__sync-schema` explicitly after editing.
+
+## Do NOT modify
+
+- `vite.config.ts` — proxy and build config
+- `backend/server.js` — uses @surf-ai/sdk/server
+- `entry-client.tsx` — app bootstrap with SSR hydration
+- `entry-server.tsx` — SSR render for deploy
+- `index.html` — cold-start guard and Surf badge
+- `eslint.config.*` — lint rules
+- `index.css` — only imports, do not add styles here (use Tailwind classes)
+
+## Rules
+
+- Use `@surf-ai/sdk/react` hooks in frontend, `@surf-ai/sdk/server` dataApi in backend
+- Use Tailwind CSS classes for styling (Surf Design System theme via `@surf-ai/theme`)
+- Use shadcn/ui components — install with `bunx shadcn@latest add button`
+- Use `cn()` from `@surf-ai/sdk/react` to merge Tailwind classes
+- Frontend packages are pre-installed — check `package.json` before installing
+- Dark theme is the default (configured in entry-client.tsx)

package/dist/templates/mini-surf/backend/db/schema.js

@@ -0,0 +1,8 @@
+// Define your Drizzle ORM tables here.
+// Example:
+//   const { pgTable, serial, text, timestamp } = require('drizzle-orm/pg-core')
+//   exports.users = pgTable('users', {
+//     id: serial('id').primaryKey(),
+//     name: text('name').notNull(),
+//     created_at: timestamp('created_at').defaultNow(),
+//   })

package/dist/templates/mini-surf/backend/eslint.config.mjs

@@ -0,0 +1,21 @@
+import js from '@eslint/js';
+import globals from 'globals';
+
+export default [
+  { ignores: ['node_modules'] },
+  {
+    files: ['**/*.js'],
+    ...js.configs.recommended,
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'commonjs',
+      globals: globals.node,
+    },
+    rules: {
+      'no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      'no-empty': 'warn',
+      'eqeqeq': 'warn',
+      'no-fallthrough': 'warn',
+    },
+  },
+];

package/dist/templates/mini-surf/backend/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "backend",
+  "private": true,
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node --watch server.js"
+  },
+  "dependencies": {
+    "@surf-ai/sdk": "latest",
+    "express": "^4.22.0"
+  }
+}

package/dist/templates/mini-surf/backend/server.js

@@ -0,0 +1,2 @@
+const { createServer } = require('@surf-ai/sdk/server')
+createServer().start()

package/dist/templates/mini-surf/frontend/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@surf-ai/sdk/react",
+    "hooks": "@/hooks"
+  }
+}

package/dist/templates/mini-surf/frontend/eslint.config.js

@@ -0,0 +1,42 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/no-unused-expressions': 'warn',
+      '@typescript-eslint/no-unsafe-function-type': 'warn',
+    },
+  },
+)

package/dist/templates/mini-surf/frontend/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>App</title>
+  </head>
+  <body>
+    <div id="root"><!--ssr-outlet--></div>
+    <script type="module" src="./src/entry-client.tsx"></script>
+    <script>
+      // Fallback: if React fails to render (e.g. Vite dep stubs during cold
+      // start), auto-reload until deps are ready.  This fires OUTSIDE React
+      // so it works even when React itself is null/undefined.
+      (function(){
+        var K='__boot_reload', W=30000, M=8;
+        function st(){try{return JSON.parse(sessionStorage.getItem(K))||{c:0,t:0}}catch(e){return{c:0,t:0}}}
+        setTimeout(function(){
+          if(window.__reactOk)return;
+          var s=st(),c=(Date.now()-s.t>W)?0:s.c;
+          if(c<M){sessionStorage.setItem(K,JSON.stringify({c:c+1,t:Date.now()}));location.reload()}
+        },3000);
+      })();
+    </script>
+    <!-- Made by Surf badge -->
+    <style>
+    #surf-badge{position:fixed;bottom:16px;right:16px;z-index:2147483647;display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-family:"Lato",system-ui,sans-serif;font-size:12px;font-weight:500;line-height:16px;text-decoration:none;box-shadow:0 1px 1px rgba(51,51,51,.08),0 6px 12px rgba(51,51,51,.08);opacity:.9;transition:opacity .2s}
+    #surf-badge:hover{opacity:1}
+    @media print{#surf-badge{display:none}}
+    </style>
+    <a id="surf-badge" href="https://asksurf.ai" target="_blank" rel="noopener noreferrer" aria-label="Made by Surf" style="background:var(--bg-menu,#fff);color:var(--fg-base,#212121)">
+      <span>Made by</span>
+      <svg width="40" height="13" viewBox="0 0 63 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.583 13.333C15.9931 13.3331 16.3814 13.5196 16.6377 13.8398L18.7666 16.5019C18.7956 16.5382 18.8261 16.5719 18.8574 16.6035C19.2049 16.954 19.6484 17.3405 19.6484 17.834C19.6484 18.3399 19.2383 18.75 18.7324 18.75H18.4668C18.1079 18.75 17.7682 18.5868 17.5439 18.3066L16.3633 16.831C15.6565 15.9476 14.2315 16.4477 14.2314 17.5791V18.6494C14.2314 18.7061 14.1827 18.7499 14.126 18.75H12.2529C11.6074 18.75 10.997 18.4562 10.5938 17.9521L9.69629 16.831C8.98948 15.9478 7.56544 16.4478 7.56543 17.5791V18.6494C7.56542 18.7062 7.51669 18.7499 7.45996 18.75H5.58594C4.94038 18.7499 4.32999 18.4563 3.92676 17.9521L3.03027 16.831C2.67436 16.3862 2.14844 15.9311 2.14844 15.3613V13.4385C2.14851 13.3817 2.19228 13.333 2.24902 13.333C2.65919 13.333 3.04737 13.5197 3.30371 13.8398L5.43359 16.5019C6.14031 17.3853 7.56521 16.8861 7.56543 15.7549V14.6846C7.56543 13.9385 8.16998 13.333 8.91602 13.333C9.32621 13.333 9.71437 13.5196 9.9707 13.8398L12.1006 16.5019C12.8052 17.3827 14.2227 16.8887 14.2314 15.7646V14.6846C14.2314 13.9385 14.837 13.333 15.583 13.333ZM15.583 6.66698C15.9932 6.66711 16.3814 6.8535 16.6377 7.17382L18.7666 9.83593C19.1224 10.2806 19.6484 10.7352 19.6484 11.3047V13.2266C19.6483 13.2833 19.6046 13.333 19.5479 13.333C19.1375 13.333 18.7495 13.1466 18.4932 12.8262L16.3633 10.1641C15.6565 9.28087 14.2315 9.78081 14.2314 10.9121V11.9824C14.2314 12.7284 13.6269 13.333 12.8809 13.333C12.4706 13.3329 12.0825 13.1465 11.8262 12.8262L9.69629 10.1641C8.98942 9.28109 7.56544 9.78088 7.56543 10.9121V11.9824C7.56543 12.7282 6.96062 13.3327 6.21484 13.333C5.80451 13.333 5.41551 13.1466 5.15918 12.8262L3.03027 10.1641C2.67435 9.71918 2.14844 9.26406 2.14844 8.69433V6.77245C2.14851 6.71573 2.19228 6.66699 2.24902 6.66698C2.65936 6.66698 3.04738 6.8534 3.30371 7.17382L5.43359 9.83593C6.14042 10.7191 7.56543 10.2192 7.56543 9.08788V8.01757C7.56543 7.27154 8.16998 6.66698 8.91602 6.66698C9.32634 6.66701 9.71437 6.85341 9.9707 7.17382L12.1006 9.83593C12.8052 10.7162 14.2225 10.2223 14.2314 9.09863V8.01757C14.2314 7.27154 14.837 6.66698 15.583 6.66698ZM3.33008 1.24999C3.68899 1.24999 4.02863 1.41318 4.25293 1.69335L5.43359 3.16894C6.14036 4.0524 7.56543 3.55227 7.56543 2.42089V1.35058C7.56544 1.29384 7.61417 1.25007 7.6709 1.24999H9.54395C10.1895 1.24999 10.7999 1.54378 11.2031 2.04784L12.1006 3.16894C12.8052 4.04953 14.2227 3.5556 14.2314 2.43163V1.35058C14.2315 1.29384 14.2802 1.25007 14.3369 1.24999H16.2109C16.8565 1.25014 17.4669 1.54375 17.8701 2.04784L18.7666 3.16894C19.1223 3.61354 19.6481 4.06741 19.6484 4.63671V6.56054C19.6483 6.61728 19.6046 6.66698 19.5479 6.66698C19.1377 6.66698 18.7495 6.48034 18.4932 6.16015L16.3633 3.49804C15.6566 2.61465 14.2317 3.11391 14.2314 4.24511V5.3164C14.2312 6.06217 13.6267 6.66698 12.8809 6.66698C12.4707 6.66693 12.0825 6.48039 11.8262 6.16015L9.69629 3.49804C8.98957 2.61465 7.56565 3.11391 7.56543 4.24511V5.3164C7.56518 6.06202 6.96046 6.66673 6.21484 6.66698C5.80453 6.66698 5.41551 6.48054 5.15918 6.16015L3.03027 3.49804C3.00109 3.46156 2.97093 3.42724 2.93945 3.3955C2.59217 3.04543 2.14867 2.65906 2.14844 2.16601C2.14844 1.66032 2.55877 1.24999 3.06445 1.24999H3.33008Z"/>
+        <path d="M35.1083 6.97044C34.7154 6.97044 34.5223 6.77734 34.3692 6.39782C33.9963 5.49228 33.0042 4.97958 31.6925 4.97958C30.0146 4.97958 28.9559 5.83851 28.9559 6.99707C28.9493 8.30211 30.3675 8.80149 31.4328 9.07449L32.7645 9.42072C34.4957 9.84686 36.6863 10.799 36.6863 13.2559C36.6863 15.5664 34.8419 17.251 31.6392 17.251C28.8827 17.251 27.0649 16.0125 26.6321 13.9617C26.5389 13.5156 26.7986 13.2559 27.2514 13.2559H27.9971C28.3966 13.2559 28.5897 13.4557 28.7229 13.8485C29.1024 14.9272 30.2676 15.4466 31.6259 15.4466C33.3771 15.4466 34.6488 14.5676 34.6488 13.236C34.6488 12.0241 33.5236 11.5447 32.0654 11.1586L30.454 10.7191C28.2634 10.1265 26.9051 9.01456 26.9051 7.11692C26.9051 4.76651 29.0025 3.20179 31.7391 3.20179C34.2027 3.20179 36.0005 4.45357 36.4133 6.27131C36.5132 6.71076 36.2335 6.97044 35.7874 6.97044H35.1083Z"/>
+        <path d="M45.0887 7.46316C45.0887 7.03036 45.3217 6.79732 45.7545 6.79732H46.4204C46.8532 6.79732 47.0862 7.03036 47.0862 7.46316V16.3588C47.0862 16.7915 46.8532 17.0246 46.4204 17.0246H45.7945C45.3617 17.0246 45.1286 16.7915 45.1286 16.3588V15.2535H45.0221C44.5494 16.3454 43.504 17.1578 41.9659 17.1578C40.0017 17.1578 38.6101 15.8394 38.6101 13.3026V7.46316C38.6101 7.03036 38.8431 6.79732 39.2759 6.79732H39.9351C40.3679 6.79732 40.601 7.03036 40.601 7.46316V13.0629C40.601 14.4545 41.4532 15.3467 42.685 15.3467C43.8036 15.3467 45.0954 14.521 45.0887 12.7832V7.46316Z"/>
+        <path d="M49.3862 7.46316C49.3862 7.03036 49.6193 6.79732 50.0521 6.79732H50.6447C51.0774 6.79732 51.3105 7.03036 51.3105 7.46316V8.42196H51.417C51.7899 7.32333 52.8153 6.64418 54.0138 6.64418C54.0737 6.64418 54.147 6.64418 54.2202 6.65084C54.6397 6.65749 54.8594 6.91717 54.8594 7.33665V7.88264C54.8594 8.33541 54.673 8.54182 54.3467 8.50852C54.1803 8.48855 53.9938 8.47523 53.8207 8.47523C52.4091 8.47523 51.3771 9.4407 51.3771 10.779V16.3588C51.3771 16.7915 51.144 17.0246 50.7112 17.0246H50.0521C49.6193 17.0246 49.3862 16.7915 49.3862 16.3588V7.46316Z"/>
+        <path d="M61.6788 7.72949C61.6788 8.16229 61.4457 8.39533 61.013 8.39533H59.4749V16.3588C59.4749 16.7915 59.2418 17.0246 58.809 17.0246H58.1432C57.7104 17.0246 57.4774 16.7915 57.4774 16.3588V8.39533H56.5652C56.1324 8.39533 55.8993 8.16229 55.8993 7.72949V7.46316C55.8993 7.03036 56.1324 6.79732 56.5652 6.79732H57.4774V5.61213C57.4774 3.69451 58.8956 2.74902 60.5136 2.74902C60.9131 2.74902 61.2593 2.78897 61.539 2.84224C61.9651 2.9288 62.1116 3.2484 61.9917 3.66122L61.8919 4.01412C61.7787 4.42028 61.5656 4.57342 61.2726 4.52015C61.1395 4.49352 60.993 4.4802 60.8199 4.4802C59.8477 4.4802 59.4749 4.97292 59.4749 5.87846V6.79732H61.013C61.4457 6.79732 61.6788 7.03036 61.6788 7.46316V7.72949Z"/>
+      </svg>
+    </a>
+  </body>
+</html>

package/dist/templates/mini-surf/frontend/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "frontend",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5173",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@surf-ai/sdk": "latest",
+    "@surf-ai/theme": "latest",
+    "@radix-ui/react-accordion": "1.2.12",
+    "@radix-ui/react-aspect-ratio": "1.1.8",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-context-menu": "2.2.16",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-hover-card": "1.1.15",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-menubar": "1.1.16",
+    "@radix-ui/react-navigation-menu": "1.2.14",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-scroll-area": "1.2.10",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toast": "1.2.15",
+    "@radix-ui/react-toggle": "1.1.10",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@tanstack/react-query": "5.94.5",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "echarts": "5.6.0",
+    "echarts-for-react": "3.0.6",
+    "embla-carousel-react": "8.6.0",
+    "lucide-react": "0.454.0",
+    "next-themes": "0.4.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "sonner": "1.7.4",
+    "tailwind-merge": "2.6.1",
+    "vaul": "1.1.2",
+    "zod": "3.25.76"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.4",
+    "@tailwindcss/vite": "4.2.2",
+    "@types/node": "22.19.15",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "4.7.0",
+    "eslint": "9.39.4",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-refresh": "0.4.26",
+    "globals": "16.5.0",
+    "tailwindcss": "4.2.2",
+    "tw-animate-css": "1.4.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
+    "vite": "6.4.1"
+  }
+}

package/dist/templates/mini-surf/frontend/src/App.tsx

@@ -0,0 +1,18 @@
+import { useMarketPrice } from '@surf-ai/sdk/react'
+
+export default function App() {
+  const { data, isLoading, error } = useMarketPrice({ symbol: 'BTC', time_range: '1d' })
+
+  return (
+    <div className="min-h-screen bg-background text-foreground p-10">
+      <h1 className="text-3xl font-bold mb-4">Surf App</h1>
+      {isLoading && <p className="text-muted-foreground">Loading BTC price...</p>}
+      {error && <p className="text-destructive">Error: {(error as Error).message}</p>}
+      {data?.data?.[0] && (
+        <p className="text-4xl font-bold">
+          BTC: <span className="text-primary">${data.data[0].value?.toLocaleString()}</span>
+        </p>
+      )}
+    </div>
+  )
+}

package/dist/templates/mini-surf/frontend/src/db/schema.ts

@@ -0,0 +1,10 @@
+// Database schema definition — keep in sync with backend/db/schema.js.
+// This file mirrors the backend schema for TypeScript type safety in the frontend.
+//
+// Example:
+//   import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core'
+//   export const users = pgTable('users', {
+//     id: serial('id').primaryKey(),
+//     name: text('name').notNull(),
+//     created_at: timestamp('created_at').defaultNow(),
+//   })

package/dist/templates/mini-surf/frontend/src/entry-client.tsx

@@ -0,0 +1,109 @@
+import './index.css'
+
+// ---------------------------------------------------------------------------
+// Cold-start guard: verify React is real BEFORE rendering.
+//
+// During Vite dep-optimization (cold start or after `npm install <pkg>`),
+// Vite may serve placeholder "stub" modules where all React exports are
+// undefined.  Rendering with stub hooks causes "Cannot read properties of
+// null (reading 'useState')".
+//
+// Strategy:
+//   1. Dynamic-import React and check if useState is a function.
+//   2. If stub  → show a loading banner, schedule a reload with increasing
+//      delay, and do NOT mount any React tree (avoids the error entirely).
+//   3. If real  → dynamic-import App/ErrorBoundary and render normally.
+//   4. Use createElement (not JSX) in this file so Vite doesn't inject a
+//      static `import { jsx } from 'react/jsx-dev-runtime'` which would
+//      itself be a stub and crash before our guard runs.
+// ---------------------------------------------------------------------------
+
+const RELOAD_KEY = '__dep_reload'
+const MAX_RELOADS = 6
+const RELOAD_WINDOW = 60_000 // 1 minute
+
+function getReloads(): { c: number; t: number } {
+  try {
+    return JSON.parse(sessionStorage.getItem(RELOAD_KEY) || '{}') as { c: number; t: number }
+  } catch { return { c: 0, t: 0 } }
+}
+
+async function boot() {
+  const root = document.getElementById('root')!
+
+  try {
+    const React = await import('react')
+
+    // If useState is not a function, React is a dep-optimization stub
+    if (typeof React.useState !== 'function') throw new Error('dep-stub')
+
+    const { createElement } = React
+    const { createRoot, hydrateRoot } = await import('react-dom/client')
+    const { QueryClient, QueryClientProvider } = await import('@tanstack/react-query')
+    const { default: App } = await import('./App')
+
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: {
+        refetchOnWindowFocus: false,
+        retry: 3,
+        retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 10000),
+        staleTime: 30_000,
+      } },
+    })
+
+    const children = createElement(QueryClientProvider, { client: queryClient },
+      createElement(App)
+    )
+
+    // Use hydrateRoot only when SSR rendered real app content. The scaffold's
+    // server entry intentionally returns a lightweight placeholder shell so
+    // SSR-incompatible libraries (for example echarts-for-react) cannot crash
+    // deploy-time render. Placeholder markup must be client-rendered, not hydrated.
+    const hasPlaceholder = !!root.querySelector('[data-surf-placeholder]')
+    if (root.childNodes.length > 0 && root.innerHTML !== '<!--ssr-outlet-->' && !hasPlaceholder) {
+      hydrateRoot(root, children)
+    } else {
+      root.innerHTML = ''
+      createRoot(root).render(children)
+    }
+
+    // React rendered successfully — signal to index.html fallback & reset counter
+    ;(window as any).__reactOk = true
+    sessionStorage.removeItem(RELOAD_KEY)
+
+    // Notify parent frame when real app content renders (not the placeholder).
+    // DO NOT REMOVE — the hosting app uses this to dismiss the loading overlay.
+    function notifyParentReady() {
+      if (!document.querySelector('[data-surf-placeholder]')) {
+        try { window.parent.postMessage({ type: 'surf-app-ready' }, '*') } catch { /* cross-origin — ignore */ }
+      }
+    }
+    notifyParentReady()
+    new MutationObserver(notifyParentReady).observe(root, { childList: true, subtree: true })
+  } catch {
+    // React is not ready — show loading banner and schedule reload
+    const prev = getReloads()
+    const count = (Date.now() - prev.t > RELOAD_WINDOW) ? 0 : prev.c
+
+    if (count < MAX_RELOADS) {
+      root.innerHTML = [
+        '<div style=\"padding:24px;text-align:center;font-family:system-ui,sans-serif\">',
+        '<p style=\"color:#3b82f6;font-weight:600;margin:0 0 4px\">Loading dependencies...</p>',
+        '<p style=\"color:#3b82f6;opacity:0.7;font-size:12px;margin:0\">Reloading automatically</p>',
+        '</div>',
+      ].join('')
+      sessionStorage.setItem(RELOAD_KEY, JSON.stringify({ c: count + 1, t: Date.now() }))
+      // Increasing delay: 3s, 4s, 5s, ... gives Vite more time to finish
+      setTimeout(() => location.reload(), 3000 + count * 1000)
+    } else {
+      root.innerHTML = [
+        '<div style=\"padding:24px;text-align:center;font-family:system-ui,sans-serif\">',
+        '<p style=\"color:#c0392b;font-weight:600;margin:0 0 4px\">Failed to load dependencies</p>',
+        '<p style=\"color:#c0392b;opacity:0.8;font-size:12px;margin:0\">Please refresh the page</p>',
+        '</div>',
+      ].join('')
+    }
+  }
+}
+
+boot()

package/dist/templates/mini-surf/frontend/src/entry-server.tsx

@@ -0,0 +1,13 @@
+import { renderToString } from 'react-dom/server'
+
+export function render() {
+  return renderToString(
+    <div
+      data-surf-placeholder
+      style={{
+        minHeight: '100vh',
+        background: '#ffffff',
+      }}
+    />
+  )
+}

package/dist/templates/mini-surf/frontend/src/index.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&family=Roboto+Mono:wght@400;500&display=swap');
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@surf-ai/theme";

package/dist/templates/mini-surf/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/templates/mini-surf/frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

package/dist/templates/mini-surf/frontend/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+const env = loadEnv('', process.cwd(), '')
+const FRONTEND_PORT = parseInt(env.VITE_PORT || '5173', 10)
+const BACKEND_PORT = parseInt(env.VITE_BACKEND_PORT || '3001', 10)
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: FRONTEND_PORT,
+    host: '0.0.0.0',
+    proxy: {
+      '/proxy': { target: `http://127.0.0.1:${BACKEND_PORT}`, changeOrigin: true },
+      '/api': { target: `http://127.0.0.1:${BACKEND_PORT}`, changeOrigin: true },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-surf-app",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Scaffold a Surf app — Vite + React + Express + @surf-ai/sdk",
   "type": "module",
   "bin": {

package/dist/templates/default/backend/db/index.js

@@ -1,23 +0,0 @@
-/**
- * Drizzle ORM client (pg-proxy driver).
- *
- * Routes all SQL through hermod's DB proxy — works identically in
- * sandbox (OutboundProxy) and deployed mode (hermod gateway).
- *
- * Usage:
- *   const { db } = require('./db');
- *   const { todos } = require('./db/schema');
- *   const rows = await db.select().from(todos);
- */
-
-const { drizzle } = require('drizzle-orm/pg-proxy');
-const { dbQuery } = require('../lib/db');
-
-const db = drizzle(async (sql, params, method) => {
-  const result = await dbQuery(sql, params, { arrayMode: true });
-  // pg-proxy expects rows as positional arrays — arrayMode makes hermod
-  // return [[val1, val2, ...], ...] instead of [{col: val}, ...].
-  return { rows: result.rows || [] };
-});
-
-module.exports = { db };

package/dist/templates/default/backend/lib/db.js

@@ -1,67 +0,0 @@
-/**
- * Server-side database helpers.
- *
- * All SQL execution happens here in the backend — NEVER in frontend code.
- * Calls /proxy/db/* via loopback through the Express proxy middleware,
- * which handles both sandbox mode (OutboundProxy) and deployed mode (hermod).
- */
-
-const PORT = Number.parseInt(process.env.PORT || '', 10);
-if (!Number.isInteger(PORT)) {
-  throw new Error('PORT env var is required');
-}
-const BASE = `http://127.0.0.1:${PORT}/proxy/db`;
-
-async function request(path, options = {}) {
-  const res = await fetch(`${BASE}${path}`, options);
-  if (!res.ok) {
-    const body = await res.json().catch(() => ({ message: res.statusText }));
-    const err = new Error(body.detail || body.error || body.message || `DB request failed: ${res.status}`);
-    err.status = res.status;
-    throw err;
-  }
-  return res.json();
-}
-
-/** Provision a database for the current user (idempotent). */
-async function dbProvision(reason) {
-  return request('/provision', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ reason: reason || '' }),
-  });
-}
-
-/**
- * Execute a parameterized SQL query.
- * ALWAYS use $1, $2, ... placeholders — NEVER concatenate user input.
- * @param {string} sql
- * @param {any[]} params
- * @param {{ arrayMode?: boolean }} [options] - Pass { arrayMode: true } for Drizzle pg-proxy
- */
-async function dbQuery(sql, params = [], options = {}) {
-  return request('/query', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ sql, params, ...options }),
-  });
-}
-
-/** List all tables with approximate row counts. */
-async function dbTables() {
-  const data = await request('/tables');
-  return data.tables;
-}
-
-/** Get column definitions for a table. */
-async function dbTableSchema(name) {
-  const data = await request(`/tables/${encodeURIComponent(name)}/schema`);
-  return data.columns;
-}
-
-/** Check database connection status and usage. */
-async function dbStatus() {
-  return request('/status');
-}
-
-module.exports = { dbProvision, dbQuery, dbTables, dbTableSchema, dbStatus };

package/dist/templates/default/backend/routes/proxy.js

@@ -1,66 +0,0 @@
-/**
- * Catch-all proxy to data APIs.
- *
- * Sandbox mode: forwards /proxy/* to OutboundProxy at 127.0.0.1:9999
- * Deployed mode: transparent pass-through /proxy/{path} -> hermod /gateway/v1/{path}
- *
- * IMPORTANT: All proxy middlewares use selfHandleResponse + responseInterceptor
- * to buffer the full upstream response before sending. This forces Express to
- * respond with Content-Length instead of Transfer-Encoding: chunked, which is
- * required for compatibility with the KEDA HTTP interceptor (it drops chunked
- * response bodies when the upstream sends Connection: close).
- */
-
-const { createProxyMiddleware, responseInterceptor } = require('http-proxy-middleware');
-
-const GATEWAY_URL = process.env.GATEWAY_URL;
-const APP_TOKEN = process.env.APP_TOKEN;
-const IS_DEPLOYED = Boolean(GATEWAY_URL && APP_TOKEN);
-
-// Shared response interceptor: buffer full response so Express sends Content-Length
-// instead of Transfer-Encoding: chunked (fixes KEDA HTTP interceptor body-drop bug).
-const bufferResponse = responseInterceptor(async (responseBuffer, _proxyRes, _req, _res) => {
-  return responseBuffer;
-});
-
-function setupProxyRoutes(app) {
-  if (IS_DEPLOYED) {
-    // Transparent pass-through: /proxy/{path} -> hermod /gateway/v1/{path}
-    // pathRewrite strips /proxy prefix and prepends /gateway/v1
-    app.use('/proxy', createProxyMiddleware({
-      target: GATEWAY_URL,
-      changeOrigin: true,
-      selfHandleResponse: true,
-      pathRewrite: (p) => '/gateway/v1' + p,
-      headers: { Authorization: `Bearer ${APP_TOKEN}`, 'Accept-Encoding': 'identity' },
-      on: { proxyRes: bufferResponse },
-    }));
-  } else {
-    // Sandbox: forward to OutboundProxy (handles all routing internally)
-    app.use(
-      createProxyMiddleware({
-        target: process.env.DATA_PROXY_BASE ? process.env.DATA_PROXY_BASE.replace(/\/proxy$/, '') : 'http://127.0.0.1:9999',
-        changeOrigin: true,
-        selfHandleResponse: true,
-        pathFilter: '/proxy',
-        on: {
-          proxyReq: (proxyReq, req) => {
-            console.log(`[proxy] >> ${req.method} ${req.originalUrl}`);
-          },
-          proxyRes: responseInterceptor(async (responseBuffer, proxyRes, req, _res) => {
-            const status = proxyRes.statusCode;
-            const tag = status >= 400 ? 'ERR' : 'OK';
-            console.log(`[proxy] << ${status} ${tag} ${req.method} ${req.originalUrl} bytes=${responseBuffer.length}`);
-            return responseBuffer;
-          }),
-          error: (err, req, res) => {
-            console.error(`[proxy] !! ${req.method} ${req.originalUrl} error: ${err.message}`);
-            if (!res.headersSent) res.status(502).json({ error: err.message });
-          },
-        },
-      })
-    );
-  }
-}
-
-module.exports = { setupProxyRoutes };