create-surf-app 0.1.4 → 0.1.6

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

@@ -0,0 +1,66 @@
+/**
+ * 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 };

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

@@ -0,0 +1,444 @@
+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();

package/dist/templates/default/frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/{templates → dist/templates/default}/frontend/eslint.config.js

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist', 'node_modules'] },
+  { ignores: ['dist', 'node_modules', 'src/api/**', 'src/lib/api*.ts', 'src/lib/types-*.ts'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{js,jsx,ts,tsx}'],

package/dist/templates/default/frontend/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit --incremental"
+  },
+  "dependencies": {
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "tailwind-merge": "2.6.1",
+    "lucide-react": "0.454.0",
+    "next-themes": "0.4.6",
+    "echarts": "5.6.0",
+    "echarts-for-react": "3.0.6",
+    "@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",
+    "sonner": "1.7.4",
+    "cmdk": "1.1.1",
+    "vaul": "1.1.2",
+    "embla-carousel-react": "8.6.0",
+    "react-day-picker": "9.14.0",
+    "react-resizable-panels": "4.7.6",
+    "react-hook-form": "7.72.0",
+    "@hookform/resolvers": "5.2.2",
+    "date-fns": "4.1.0",
+    "zod": "3.25.76",
+    "@tanstack/react-query": "5.94.5",
+    "@tanstack/query-core": "5.94.5",
+    "scheduler": "0.27.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@types/node": "22.19.15",
+    "@eslint/js": "9.39.4",
+    "@vitejs/plugin-react": "4.7.0",
+    "@tailwindcss/vite": "4.2.2",
+    "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-eslint": "8.57.1",
+    "typescript": "5.9.3",
+    "vite": "6.4.1"
+  }
+}

package/dist/templates/default/frontend/src/App.tsx

@@ -0,0 +1,23 @@
+const SURF_LOGO_PATH = "M14.6875 13.333C15.0977 13.333 15.4859 13.5196 15.7422 13.8398L17.8721 16.502C17.9009 16.538 17.9308 16.5721 17.9619 16.6035C18.3091 16.9542 18.7529 17.3405 18.7529 17.834C18.7528 18.3399 18.3428 18.75 17.8369 18.75H17.5713C17.2123 18.75 16.8727 18.5869 16.6484 18.3066L15.4678 16.8311C14.761 15.9479 13.3369 16.4478 13.3369 17.5791V18.6494C13.3369 18.7062 13.2882 18.75 13.2314 18.75H11.3584C10.7127 18.75 10.1016 18.4564 9.69824 17.9521L8.80176 16.8311C8.09497 15.9477 6.66993 16.4478 6.66992 17.5791V18.6494C6.66991 18.7062 6.62124 18.75 6.56445 18.75H4.69141C4.04589 18.75 3.43548 18.4562 3.03223 17.9521L2.13477 16.8311C1.77885 16.3862 1.25293 15.931 1.25293 15.3613V13.4395C1.253 13.3822 1.29729 13.3331 1.35449 13.333C1.7646 13.3332 2.15295 13.5196 2.40918 13.8398L4.53809 16.502C5.24478 17.3853 6.66962 16.886 6.66992 15.7549V14.6836C6.67018 13.9379 7.27483 13.3332 8.02051 13.333C8.43065 13.333 8.81884 13.5197 9.0752 13.8398L11.2051 16.502C11.9097 17.3827 13.3282 16.8887 13.3369 15.7646V14.6836C13.3372 13.9378 13.9417 13.3331 14.6875 13.333ZM14.6875 6.66699C15.0978 6.66702 15.4859 6.85347 15.7422 7.17383L17.8721 9.83594C18.2276 10.2801 18.7526 10.7339 18.7529 11.3027V13.2266C18.7528 13.2833 18.7091 13.333 18.6523 13.333C18.2421 13.3329 17.8539 13.1465 17.5977 12.8262L15.4678 10.1641C14.7609 9.28113 13.3369 9.78089 13.3369 10.9121V11.9824C13.3369 12.7282 12.7321 13.3328 11.9863 13.333C11.5761 13.3329 11.187 13.1465 10.9307 12.8262L8.80176 10.1641C8.09497 9.28072 6.66993 9.78076 6.66992 10.9121V11.9824C6.66992 12.7284 6.06525 13.3329 5.31934 13.333C4.90908 13.3329 4.52094 13.1465 4.26465 12.8262L2.13477 10.1641C1.7788 9.71925 1.25293 9.26403 1.25293 8.69434V6.77344C1.253 6.71621 1.29728 6.6671 1.35449 6.66699C1.76461 6.66714 2.15295 6.85359 2.40918 7.17383L4.53809 9.83594C5.24487 10.7193 6.66989 10.2192 6.66992 9.08789V8.01758C6.66992 7.27168 7.27467 6.66722 8.02051 6.66699C8.43082 6.66699 8.81885 6.85345 9.0752 7.17383L11.2051 9.83594C11.9097 10.7163 13.3279 10.2223 13.3369 9.09863V8.01758C13.3369 7.27161 13.9416 6.6671 14.6875 6.66699ZM2.43555 1.25C2.79488 1.25 3.13499 1.41367 3.35938 1.69434L4.53809 3.16895C5.24485 4.05241 6.66991 3.55228 6.66992 2.4209V1.35059C6.66993 1.29391 6.71874 1.25017 6.77539 1.25H8.64844C9.29394 1.25 9.90438 1.5438 10.3076 2.04785L11.2051 3.16895C11.9097 4.04967 13.3282 3.55564 13.3369 2.43164V1.35059C13.3369 1.29391 13.3857 1.25017 13.4424 1.25H15.3154C15.9609 1.25 16.5714 1.5438 16.9746 2.04785L17.8721 3.16895C18.2275 3.61314 18.7526 4.06689 18.7529 4.63574V6.56055C18.7528 6.61728 18.7091 6.66699 18.6523 6.66699C18.2421 6.66688 17.8539 6.4795 17.5977 6.15918L15.4678 3.49805C14.761 2.61474 13.3371 3.11388 13.3369 4.24512V5.31543C13.3369 6.06126 12.7321 6.66673 11.9863 6.66699C11.5761 6.66693 11.187 6.47955 10.9307 6.15918L8.80176 3.49805C8.095 2.61474 6.67006 3.11388 6.66992 4.24512V5.31543C6.66992 6.06137 6.06525 6.66691 5.31934 6.66699C4.90908 6.66693 4.52094 6.47955 4.26465 6.15918L2.13477 3.49805C2.10558 3.46158 2.07543 3.42725 2.04395 3.39551C1.6966 3.04528 1.25293 2.6583 1.25293 2.16504C1.25317 1.65963 1.66348 1.25 2.16895 1.25H2.43555Z"
+
+function SurfLogo() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d={SURF_LOGO_PATH} fill="var(--fg-base, #212121)" />
+    </svg>
+  )
+}
+
+export default function App() {
+  return (
+    <div data-surf-placeholder className="min-h-screen flex flex-col items-center justify-center gap-4 rounded-[14px]" style={{ background: 'var(--bg-chat-nav, #f4f4f4)', border: '1px solid var(--border-strong, rgba(42,42,42,0.08))' }}>
+      <SurfLogo />
+      <h1 className="font-black text-[36px] leading-[44px] text-[var(--fg-base,#212121)]">
+        GM, Builder<span style={{ color: 'var(--brand-100, #ff2882)' }}>.</span>
+      </h1>
+      <p className="text-xl leading-7 text-[var(--fg-subtle,#7a7a7a)]">
+        Start your crypto project here!
+      </p>
+    </div>
+  )
+}