@thinksoftai/cli 1.4.0 → 1.5.0

package/dist/commands/frontend.js

@@ -0,0 +1,1038 @@
+"use strict";
+/**
+ * Frontend command - Scaffold frontend projects for external AI tools
+ *
+ * Usage:
+ *   thinksoft frontend --init          # Scaffold new frontend
+ *   thinksoft frontend --init --app ID # Scaffold for specific app
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.frontend = frontend;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const chalk_1 = __importDefault(require("chalk"));
+const ora_1 = __importDefault(require("ora"));
+const inquirer_1 = __importDefault(require("inquirer"));
+const config = __importStar(require("../utils/config"));
+const api = __importStar(require("../utils/api"));
+async function frontend(options) {
+    if (!options.init) {
+        console.log(chalk_1.default.yellow('\nUsage: thinksoft frontend --init [--app <appId>]'));
+        console.log(chalk_1.default.gray('  Scaffold a new frontend project\n'));
+        return;
+    }
+    if (!config.isLoggedIn()) {
+        console.log(chalk_1.default.red('\n✗ Not logged in'));
+        console.log(chalk_1.default.gray('  Run: thinksoft login\n'));
+        return;
+    }
+    let appId = options.app;
+    // If no app specified, let user select
+    if (!appId) {
+        const appsResult = await api.listApps();
+        if (appsResult.error || !appsResult.apps?.length) {
+            console.log(chalk_1.default.red('\n✗ No apps found'));
+            console.log(chalk_1.default.gray('  Run: thinksoft create "Your app description"\n'));
+            return;
+        }
+        const { selectedApp } = await inquirer_1.default.prompt([{
+                type: 'list',
+                name: 'selectedApp',
+                message: 'Select an app:',
+                choices: appsResult.apps.map((a) => ({
+                    name: `${a.name} (${a.short_id})`,
+                    value: a.short_id
+                }))
+            }]);
+        appId = selectedApp;
+    }
+    console.log();
+    console.log(chalk_1.default.cyan('┌─────────────────────────────────────────────────────────────┐'));
+    console.log(chalk_1.default.cyan('│') + chalk_1.default.white.bold(' ThinkSoft Frontend                                           ') + chalk_1.default.cyan('│'));
+    console.log(chalk_1.default.cyan('│') + chalk_1.default.gray(` App: ${appId}`.padEnd(61)) + chalk_1.default.cyan('│'));
+    console.log(chalk_1.default.cyan('└─────────────────────────────────────────────────────────────┘'));
+    console.log();
+    // Fetch app info and schema
+    const spinner = (0, ora_1.default)('Fetching app schema...').start();
+    const appInfo = await fetchAppInfo(appId);
+    if (!appInfo) {
+        spinner.fail('Failed to fetch app info');
+        return;
+    }
+    spinner.succeed(`Found ${appInfo.tables.length} tables`);
+    console.log();
+    // Ask for project name
+    const { projectName } = await inquirer_1.default.prompt([{
+            type: 'input',
+            name: 'projectName',
+            message: 'Project folder name:',
+            default: `${appInfo.name.toLowerCase().replace(/\s+/g, '-')}-frontend`
+        }]);
+    // Scaffold the project
+    console.log();
+    await scaffoldFrontend(appId, appInfo, projectName);
+    // Show next steps
+    showNextSteps(projectName);
+}
+async function fetchAppInfo(appId) {
+    try {
+        // Get app details
+        const appResult = await api.getApp(appId);
+        if (appResult.error)
+            return null;
+        // Get tables/schema
+        const tablesResult = await api.getTables(appId);
+        const tables = [];
+        if (tablesResult.tables) {
+            for (const table of tablesResult.tables) {
+                const columns = (table.columns || []).map((col) => ({
+                    name: col.name,
+                    type: col.type || 'text',
+                    required: col.required || false
+                }));
+                tables.push({ name: table.name, columns });
+            }
+        }
+        return {
+            name: appResult.app?.name || appId,
+            short_id: appId,
+            description: appResult.app?.description || appResult.app?.prompt || undefined,
+            tables
+        };
+    }
+    catch {
+        return null;
+    }
+}
+async function scaffoldFrontend(appId, appInfo, projectName) {
+    const projectDir = path.join(process.cwd(), projectName);
+    console.log(chalk_1.default.cyan(`📦 Scaffolding: ${chalk_1.default.white.bold(projectName)}/`));
+    console.log();
+    // Create project directory
+    if (!fs.existsSync(projectDir)) {
+        fs.mkdirSync(projectDir, { recursive: true });
+    }
+    // Create package.json
+    const packageJson = {
+        name: projectName,
+        version: '0.1.0',
+        private: true,
+        type: 'module',
+        scripts: {
+            dev: 'vite',
+            build: 'tsc && vite build',
+            preview: 'vite preview',
+            deploy: `thinksoft deploy --app ${appId}`
+        },
+        dependencies: {
+            '@thinksoftai/sdk': '^1.0.0',
+            'react': '^18.2.0',
+            'react-dom': '^18.2.0',
+            'react-router-dom': '^6.20.0',
+            'lucide-react': '^0.294.0'
+        },
+        devDependencies: {
+            '@types/react': '^18.2.0',
+            '@types/react-dom': '^18.2.0',
+            '@vitejs/plugin-react': '^4.2.0',
+            'autoprefixer': '^10.4.16',
+            'postcss': '^8.4.32',
+            'tailwindcss': '^3.3.6',
+            'typescript': '^5.3.0',
+            'vite': '^5.0.0'
+        }
+    };
+    writeFile(projectDir, 'package.json', JSON.stringify(packageJson, null, 2));
+    // Create thinksoft.json
+    const thinksoftJson = {
+        appId,
+        name: appInfo.name,
+        framework: 'react',
+        outputDir: 'dist'
+    };
+    writeFile(projectDir, 'thinksoft.json', JSON.stringify(thinksoftJson, null, 2));
+    // Create vite.config.ts
+    writeFile(projectDir, 'vite.config.ts', `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})
+`);
+    // Create tsconfig.json
+    const tsConfig = {
+        compilerOptions: {
+            target: 'ES2020',
+            useDefineForClassFields: true,
+            lib: ['ES2020', 'DOM', 'DOM.Iterable'],
+            module: 'ESNext',
+            skipLibCheck: true,
+            moduleResolution: 'bundler',
+            allowImportingTsExtensions: true,
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: 'react-jsx',
+            strict: true,
+            noUnusedLocals: true,
+            noUnusedParameters: true,
+            noFallthroughCasesInSwitch: true,
+            baseUrl: '.',
+            paths: { '@/*': ['./src/*'] }
+        },
+        include: ['src'],
+        references: [{ path: './tsconfig.node.json' }]
+    };
+    writeFile(projectDir, 'tsconfig.json', JSON.stringify(tsConfig, null, 2));
+    // Create tsconfig.node.json
+    writeFile(projectDir, 'tsconfig.node.json', JSON.stringify({
+        compilerOptions: {
+            composite: true,
+            skipLibCheck: true,
+            module: 'ESNext',
+            moduleResolution: 'bundler',
+            allowSyntheticDefaultImports: true
+        },
+        include: ['vite.config.ts']
+    }, null, 2));
+    // Create tailwind.config.js
+    writeFile(projectDir, 'tailwind.config.js', `/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: { extend: {} },
+  plugins: [],
+}
+`);
+    // Create postcss.config.js
+    writeFile(projectDir, 'postcss.config.js', `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`);
+    // Create index.html
+    writeFile(projectDir, 'index.html', `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${appInfo.name}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`);
+    // Create src directory structure
+    const srcDir = path.join(projectDir, 'src');
+    const libDir = path.join(srcDir, 'lib');
+    const contextDir = path.join(srcDir, 'context');
+    const componentsDir = path.join(srcDir, 'components');
+    const pagesDir = path.join(srcDir, 'pages');
+    fs.mkdirSync(libDir, { recursive: true });
+    fs.mkdirSync(contextDir, { recursive: true });
+    fs.mkdirSync(componentsDir, { recursive: true });
+    fs.mkdirSync(pagesDir, { recursive: true });
+    // Create src/main.tsx
+    writeFile(srcDir, 'main.tsx', `import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)
+`);
+    // Create src/index.css
+    writeFile(srcDir, 'index.css', `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`);
+    // Create src/lib/client.ts
+    writeFile(libDir, 'client.ts', `import { ThinkSoft } from '@thinksoftai/sdk'
+
+export const client = new ThinkSoft({ appId: '${appId}' })
+`);
+    // Create src/context/AuthContext.tsx
+    writeFile(contextDir, 'AuthContext.tsx', `import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { client } from '../lib/client'
+
+type AuthContextType = {
+  isAuthenticated: boolean
+  user: { email: string } | null
+  login: (email: string, otp: string) => Promise<boolean>
+  sendOTP: (email: string) => Promise<boolean>
+  logout: () => void
+  showLoginModal: boolean
+  setShowLoginModal: (show: boolean) => void
+  requireAuth: (callback: () => void) => void
+}
+
+const AuthContext = createContext<AuthContextType | null>(null)
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [user, setUser] = useState<{ email: string } | null>(null)
+  const [showLoginModal, setShowLoginModal] = useState(false)
+  const [pendingAction, setPendingAction] = useState<(() => void) | null>(null)
+
+  useEffect(() => {
+    const authed = client.auth.isAuthenticated()
+    setIsAuthenticated(authed)
+    if (authed) {
+      setUser({ email: localStorage.getItem('ts_user_email') || '' })
+    }
+  }, [])
+
+  const sendOTP = async (email: string): Promise<boolean> => {
+    try {
+      await client.auth.sendOTP(email)
+      localStorage.setItem('ts_user_email', email)
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  const login = async (email: string, otp: string): Promise<boolean> => {
+    try {
+      await client.auth.verifyOTP(email, otp)
+      setIsAuthenticated(true)
+      setUser({ email })
+      setShowLoginModal(false)
+      if (pendingAction) {
+        pendingAction()
+        setPendingAction(null)
+      }
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  const logout = () => {
+    client.auth.logout()
+    setIsAuthenticated(false)
+    setUser(null)
+    localStorage.removeItem('ts_user_email')
+  }
+
+  const requireAuth = (callback: () => void) => {
+    if (isAuthenticated) {
+      callback()
+    } else {
+      setPendingAction(() => callback)
+      setShowLoginModal(true)
+    }
+  }
+
+  return (
+    <AuthContext.Provider value={{
+      isAuthenticated, user, login, sendOTP, logout,
+      showLoginModal, setShowLoginModal, requireAuth
+    }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
+  return ctx
+}
+`);
+    // Create src/components/LoginModal.tsx
+    writeFile(componentsDir, 'LoginModal.tsx', `import React, { useState } from 'react'
+import { useAuth } from '../context/AuthContext'
+import { X } from 'lucide-react'
+
+const LoginModal: React.FC = () => {
+  const { sendOTP, login, showLoginModal, setShowLoginModal } = useAuth()
+  const [email, setEmail] = useState('')
+  const [otp, setOtp] = useState('')
+  const [step, setStep] = useState<'email' | 'otp'>('email')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  if (!showLoginModal) return null
+
+  const handleSendOTP = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    const ok = await sendOTP(email)
+    setLoading(false)
+    if (ok) setStep('otp')
+    else setError('Failed to send OTP')
+  }
+
+  const handleVerify = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    const ok = await login(email, otp)
+    setLoading(false)
+    if (!ok) setError('Invalid OTP')
+  }
+
+  const handleClose = () => {
+    setShowLoginModal(false)
+    setStep('email')
+    setError('')
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-full max-w-md relative">
+        <button onClick={handleClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
+          <X size={20} />
+        </button>
+        <h2 className="text-xl font-bold mb-4">Login Required</h2>
+        <p className="text-sm text-gray-600 mb-4">Please login to perform this action.</p>
+        {error && <p className="text-red-500 text-sm mb-4">{error}</p>}
+        {step === 'email' ? (
+          <form onSubmit={handleSendOTP}>
+            <input
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="Email"
+              className="w-full p-3 border rounded mb-4"
+              required
+            />
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700 disabled:opacity-50"
+            >
+              {loading ? 'Sending...' : 'Send OTP'}
+            </button>
+          </form>
+        ) : (
+          <form onSubmit={handleVerify}>
+            <p className="text-sm text-gray-600 mb-4">OTP sent to {email}</p>
+            <input
+              type="text"
+              value={otp}
+              onChange={e => setOtp(e.target.value)}
+              placeholder="Enter OTP"
+              className="w-full p-3 border rounded mb-4"
+              required
+            />
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700 disabled:opacity-50"
+            >
+              {loading ? 'Verifying...' : 'Verify'}
+            </button>
+            <button
+              type="button"
+              onClick={() => setStep('email')}
+              className="w-full mt-2 text-gray-600 text-sm"
+            >
+              Back
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default LoginModal
+`);
+    // Create src/App.tsx (minimal shell)
+    writeFile(srcDir, 'App.tsx', `import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import { AuthProvider } from './context/AuthContext'
+import LoginModal from './components/LoginModal'
+
+const App: React.FC = () => {
+  return (
+    <AuthProvider>
+      <div className="min-h-screen bg-gray-50">
+        <main className="p-6">
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            {/* Add your routes here */}
+          </Routes>
+        </main>
+        <LoginModal />
+      </div>
+    </AuthProvider>
+  )
+}
+
+// Placeholder home page - replace with your own
+const HomePage: React.FC = () => {
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold text-gray-900 mb-4">${appInfo.name}</h1>
+      <p className="text-gray-600 mb-8">Your frontend is ready. Start building!</p>
+
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h2 className="text-lg font-semibold mb-4">Getting Started</h2>
+        <ol className="list-decimal list-inside space-y-2 text-gray-700">
+          <li>Read <code className="bg-gray-100 px-2 py-1 rounded text-sm">CONTEXT.md</code> for backend schema</li>
+          <li>Create pages in <code className="bg-gray-100 px-2 py-1 rounded text-sm">src/pages/</code></li>
+          <li>Add routes to <code className="bg-gray-100 px-2 py-1 rounded text-sm">src/App.tsx</code></li>
+          <li>Use Cursor or Claude to VIBE CODE your pages</li>
+        </ol>
+      </div>
+    </div>
+  )
+}
+
+export default App
+`);
+    // Create .gitignore
+    writeFile(projectDir, '.gitignore', `node_modules
+dist
+.env
+.env.local
+*.log
+`);
+    // Create CONTEXT.md for AI tools
+    const contextMd = generateContextMd(appId, appInfo);
+    writeFile(projectDir, 'CONTEXT.md', contextMd);
+    // Create .cursorrules
+    const cursorrules = generateCursorrules(appId, appInfo);
+    writeFile(projectDir, '.cursorrules', cursorrules);
+    console.log();
+    console.log(chalk_1.default.green('✅ Frontend scaffolded successfully!'));
+}
+function writeFile(dir, filename, content) {
+    const filePath = path.join(dir, filename);
+    fs.writeFileSync(filePath, content);
+    console.log(chalk_1.default.gray(`  ${filename}`));
+}
+function generateContextMd(appId, appInfo) {
+    // Generate table schema section
+    const tablesSection = appInfo.tables.length > 0
+        ? appInfo.tables.map(table => {
+            const columnsTable = table.columns.length > 0
+                ? table.columns.map(col => `| ${col.name} | ${col.type} | ${col.required ? 'Yes' : 'No'} |`).join('\n')
+                : '| (no columns defined) | - | - |';
+            return `### \`${table.name}\`
+
+| Column | Type | Required |
+|--------|------|----------|
+${columnsTable}`;
+        }).join('\n\n')
+        : '*No tables defined yet. Create tables in the ThinkSoft dashboard.*';
+    // Generate SDK examples with actual table names
+    const exampleTable = appInfo.tables[0]?.name || 'items';
+    const exampleColumns = appInfo.tables[0]?.columns || [];
+    const exampleField = exampleColumns[0]?.name || 'name';
+    // Build app info table with optional description
+    const appInfoRows = [
+        `| App ID | \`${appId}\` |`,
+        `| App Name | ${appInfo.name} |`
+    ];
+    if (appInfo.description) {
+        appInfoRows.push(`| Description | ${appInfo.description} |`);
+    }
+    appInfoRows.push(`| Tables | ${appInfo.tables.length} |`);
+    return `# ${appInfo.name} - ThinkSoft Backend Context
+
+> This file provides context for AI-assisted development (Cursor, Claude, Copilot, etc.)
+> Read this to understand the backend schema and SDK usage.
+
+## App Information
+
+| Property | Value |
+|----------|-------|
+${appInfoRows.join('\n')}
+
+---
+
+## Database Schema
+
+${tablesSection}
+
+---
+
+## ThinkSoft SDK Reference
+
+The SDK client is pre-configured in \`src/lib/client.ts\`.
+
+### Import
+
+\`\`\`typescript
+import { client } from '../lib/client'
+\`\`\`
+
+### List Records
+
+\`\`\`typescript
+// Get all records
+const { data } = await client.${exampleTable}.list()
+
+// With filtering
+const { data } = await client.${exampleTable}.list({
+  filter: { status: 'active' }
+})
+
+// With sorting (field:asc or field:desc)
+const { data } = await client.${exampleTable}.list({
+  sort: 'created_at:desc'
+})
+
+// With pagination
+const { data } = await client.${exampleTable}.list({
+  limit: 10,
+  offset: 0
+})
+
+// Combined
+const { data } = await client.${exampleTable}.list({
+  filter: { status: 'active' },
+  sort: 'created_at:desc',
+  limit: 20
+})
+\`\`\`
+
+### Get Single Record
+
+\`\`\`typescript
+const record = await client.${exampleTable}.get('record-id')
+\`\`\`
+
+### Create Record
+
+\`\`\`typescript
+const newRecord = await client.${exampleTable}.create({
+  ${exampleField}: 'value'
+  // add other fields...
+})
+\`\`\`
+
+### Update Record
+
+\`\`\`typescript
+await client.${exampleTable}.update('record-id', {
+  ${exampleField}: 'new value'
+})
+\`\`\`
+
+### Delete Record
+
+\`\`\`typescript
+await client.${exampleTable}.delete('record-id')
+\`\`\`
+
+---
+
+## Schema Management (Create Tables & Columns)
+
+The SDK can create and modify tables/columns programmatically.
+
+### Create a New Table
+
+\`\`\`typescript
+await client.schema.createTable({
+  name: 'Reviews',
+  icon: '⭐',
+  columns: [
+    { name: 'rating', type: 'number', required: true },
+    { name: 'comment', type: 'textarea' },
+    { name: 'author', type: 'text' }
+  ]
+})
+\`\`\`
+
+### Add Column to Existing Table
+
+\`\`\`typescript
+await client.schema.addColumn('${exampleTable}', {
+  name: 'priority',
+  type: 'select',
+  options: ['low', 'medium', 'high']
+})
+\`\`\`
+
+### Update Column
+
+\`\`\`typescript
+await client.schema.updateColumn('${exampleTable}', 'priority', {
+  options: ['low', 'medium', 'high', 'urgent']
+})
+\`\`\`
+
+### Delete Column
+
+\`\`\`typescript
+await client.schema.deleteColumn('${exampleTable}', 'old_field')
+\`\`\`
+
+### Delete Table
+
+\`\`\`typescript
+await client.schema.deleteTable('old_table')
+\`\`\`
+
+### Column Types
+
+| Type | Description |
+|------|-------------|
+| text | Single line text |
+| email | Email address |
+| phone | Phone number |
+| number | Numeric value |
+| date | Date picker |
+| url | URL/link |
+| textarea | Multi-line text |
+| richtext | Rich text editor |
+| select | Single select dropdown |
+| multiselect | Multi-select |
+| radio | Radio buttons |
+| checkbox | Checkbox |
+| file | File upload |
+| reference | Link to another table |
+
+---
+
+## Authentication Pattern (Auth-on-Action)
+
+Users can **browse freely without login**. Authentication is only required for write operations (create, update, delete).
+
+### Using requireAuth()
+
+\`\`\`typescript
+import { useAuth } from '../context/AuthContext'
+import { client } from '../lib/client'
+
+const MyComponent = () => {
+  const { requireAuth, isAuthenticated, user } = useAuth()
+  const [items, setItems] = useState([])
+
+  // READ: No auth required
+  useEffect(() => {
+    client.${exampleTable}.list().then(({ data }) => setItems(data))
+  }, [])
+
+  // WRITE: Wrap with requireAuth - shows login modal if needed
+  const handleCreate = () => {
+    requireAuth(async () => {
+      await client.${exampleTable}.create({ ${exampleField}: 'New Item' })
+      // Refresh data after create
+      const { data } = await client.${exampleTable}.list()
+      setItems(data)
+    })
+  }
+
+  const handleUpdate = (id: string) => {
+    requireAuth(async () => {
+      await client.${exampleTable}.update(id, { ${exampleField}: 'Updated' })
+    })
+  }
+
+  const handleDelete = (id: string) => {
+    requireAuth(async () => {
+      await client.${exampleTable}.delete(id)
+      setItems(items.filter(item => item.id !== id))
+    })
+  }
+
+  return (
+    <div>
+      {isAuthenticated && <p>Logged in as {user?.email}</p>}
+      <button onClick={handleCreate}>Add Item</button>
+      {items.map(item => (
+        <div key={item.id}>
+          {item.${exampleField}}
+          <button onClick={() => handleDelete(item.id)}>Delete</button>
+        </div>
+      ))}
+    </div>
+  )
+}
+\`\`\`
+
+---
+
+## Project Structure
+
+\`\`\`
+src/
+├── lib/
+│   └── client.ts           # ThinkSoft SDK client (configured)
+├── context/
+│   └── AuthContext.tsx     # Auth state + requireAuth()
+├── components/
+│   └── LoginModal.tsx      # Login modal (implemented)
+├── pages/                   # Your pages go here
+│   └── (create your pages)
+├── App.tsx                  # Router setup
+├── main.tsx                 # Entry point
+└── index.css                # Tailwind CSS
+\`\`\`
+
+---
+
+## Tech Stack
+
+- **React 18** + TypeScript
+- **Vite** - Build tool
+- **Tailwind CSS** - Styling
+- **React Router v6** - Routing
+- **Lucide React** - Icons
+- **@thinksoftai/sdk** - Backend SDK
+
+---
+
+## Development Commands
+
+\`\`\`bash
+npm install     # Install dependencies
+npm run dev     # Start dev server (http://localhost:5173)
+npm run build   # Build for production
+npm run deploy  # Deploy to ThinkSoft
+\`\`\`
+
+---
+
+## Example: Complete Page
+
+\`\`\`typescript
+// src/pages/${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Page.tsx
+import React, { useEffect, useState } from 'react'
+import { client } from '../lib/client'
+import { useAuth } from '../context/AuthContext'
+import { Plus, Trash2 } from 'lucide-react'
+
+interface ${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Item {
+  id: string
+  ${exampleField}: string
+  created_at: string
+}
+
+const ${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Page: React.FC = () => {
+  const [items, setItems] = useState<${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Item[]>([])
+  const [loading, setLoading] = useState(true)
+  const { requireAuth } = useAuth()
+
+  useEffect(() => {
+    loadItems()
+  }, [])
+
+  const loadItems = async () => {
+    setLoading(true)
+    const { data } = await client.${exampleTable}.list({ sort: 'created_at:desc' })
+    setItems(data || [])
+    setLoading(false)
+  }
+
+  const handleAdd = () => {
+    requireAuth(async () => {
+      await client.${exampleTable}.create({ ${exampleField}: 'New Item' })
+      loadItems()
+    })
+  }
+
+  const handleDelete = (id: string) => {
+    requireAuth(async () => {
+      await client.${exampleTable}.delete(id)
+      setItems(items.filter(item => item.id !== id))
+    })
+  }
+
+  if (loading) {
+    return <div className="p-6">Loading...</div>
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}</h1>
+        <button
+          onClick={handleAdd}
+          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
+        >
+          <Plus size={20} />
+          Add New
+        </button>
+      </div>
+
+      <div className="bg-white rounded-xl border border-gray-200">
+        {items.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">
+            No items yet. Click "Add New" to create one.
+          </div>
+        ) : (
+          <ul className="divide-y divide-gray-200">
+            {items.map(item => (
+              <li key={item.id} className="flex items-center justify-between p-4">
+                <span>{item.${exampleField}}</span>
+                <button
+                  onClick={() => handleDelete(item.id)}
+                  className="text-red-500 hover:text-red-700"
+                >
+                  <Trash2 size={18} />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Page
+\`\`\`
+
+Then add to App.tsx:
+\`\`\`typescript
+import ${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Page from './pages/${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Page'
+
+// In Routes:
+<Route path="/${exampleTable}" element={<${exampleTable.charAt(0).toUpperCase() + exampleTable.slice(1)}Page />} />
+\`\`\`
+`;
+}
+function generateCursorrules(appId, appInfo) {
+    const tableNames = appInfo.tables.map(t => t.name).join(', ') || 'No tables yet';
+    const exampleTable = appInfo.tables[0]?.name || 'items';
+    return `# Cursor Rules for ${appInfo.name}
+
+You are building a React frontend for a ThinkSoft backend app.
+
+## App Context
+- App ID: \`${appId}\`
+- Tables: ${tableNames}
+- See CONTEXT.md for full schema details
+
+## Key Files (Already Configured)
+- \`src/lib/client.ts\` - SDK client
+- \`src/context/AuthContext.tsx\` - Auth with requireAuth()
+- \`src/components/LoginModal.tsx\` - Login modal
+
+## Code Patterns
+
+### SDK Usage
+\`\`\`typescript
+import { client } from '../lib/client'
+
+// CRUD operations
+const { data } = await client.${exampleTable}.list()
+const { data } = await client.${exampleTable}.list({ filter: { status: 'active' }, sort: 'created_at:desc' })
+const item = await client.${exampleTable}.get(id)
+await client.${exampleTable}.create({ ... })
+await client.${exampleTable}.update(id, { ... })
+await client.${exampleTable}.delete(id)
+
+// Schema management (create tables/columns)
+await client.schema.createTable({ name: 'Reviews', columns: [...] })
+await client.schema.addColumn('${exampleTable}', { name: 'priority', type: 'select', options: ['low', 'high'] })
+\`\`\`
+
+### Auth-on-Action Pattern
+\`\`\`typescript
+import { useAuth } from '../context/AuthContext'
+
+const { requireAuth, isAuthenticated, user } = useAuth()
+
+// Read = no auth needed
+const { data } = await client.${exampleTable}.list()
+
+// Write = wrap with requireAuth
+const handleSave = () => {
+  requireAuth(async () => {
+    await client.${exampleTable}.create({ ... })
+  })
+}
+\`\`\`
+
+## Rules
+
+1. Use TypeScript with proper types
+2. Use Tailwind CSS for all styling
+3. Use Lucide React for icons
+4. Use default exports for pages and components
+5. Import client from '../lib/client' (never create new ThinkSoft instance)
+6. Import useAuth from '../context/AuthContext'
+7. Wrap all create/update/delete with requireAuth()
+8. Read operations don't need auth
+
+## Do NOT
+- Create new ThinkSoft() instances
+- Add BrowserRouter (already in main.tsx)
+- Generate package.json or config files
+- Use inline styles
+- Block users from reading data
+- Use named exports for page components
+`;
+}
+function showNextSteps(projectName) {
+    console.log();
+    console.log(chalk_1.default.cyan('┌─────────────────────────────────────────────────────────────┐'));
+    console.log(chalk_1.default.cyan('│') + chalk_1.default.white.bold(' Next Steps                                                   ') + chalk_1.default.cyan('│'));
+    console.log(chalk_1.default.cyan('└─────────────────────────────────────────────────────────────┘'));
+    console.log();
+    console.log(chalk_1.default.white(`  1. cd ${projectName}`));
+    console.log(chalk_1.default.white('  2. npm install'));
+    console.log(chalk_1.default.white('  3. npm run dev'));
+    console.log();
+    console.log(chalk_1.default.gray('  Build pages with VIBE CODE:'));
+    console.log(chalk_1.default.white('  4. Open in Cursor or VS Code'));
+    console.log(chalk_1.default.white('  5. Read CONTEXT.md for thinksoft backend app'));
+    console.log(chalk_1.default.white('  6. VIBE CODE Frontend App'));
+    console.log();
+    console.log(chalk_1.default.gray('  Deploy:'));
+    console.log(chalk_1.default.white('  7. npm run build'));
+    console.log(chalk_1.default.white('  8. npm run deploy'));
+    console.log();
+}
+//# sourceMappingURL=frontend.js.map