@codeyam/codeyam-cli 0.1.8 → 0.1.10

package/codeyam-cli/templates/nextjs-prisma-sqlite/seed-adapter.ts

@@ -0,0 +1,92 @@
+/**
+ * CodeYam Seed Adapter for Prisma + SQLite.
+ *
+ * Reads a JSON seed data file (path passed as CLI arg), wipes all tables,
+ * then inserts the seed data using Prisma.
+ *
+ * Usage: npx tsx .codeyam/seed-adapter.ts <path-to-seed-data.json>
+ *
+ * The JSON file has the format:
+ * {
+ *   "type": "application",
+ *   "seed": {
+ *     "tableName": [{ "column": "value", ... }, ...]
+ *   },
+ *   "externalApis": { ... }  // optional, not used by this adapter
+ * }
+ */
+
+import 'dotenv/config';
+import { PrismaClient } from '@prisma/client';
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+import * as fs from 'fs';
+
+const adapter = new PrismaBetterSqlite3({
+  url: process.env.DATABASE_URL || 'file:./dev.db',
+});
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  const seedDataPath = process.argv[2];
+  if (!seedDataPath) {
+    console.error('Usage: npx tsx .codeyam/seed-adapter.ts <seed-data.json>');
+    process.exit(1);
+  }
+
+  const raw = fs.readFileSync(seedDataPath, 'utf-8');
+  const data = JSON.parse(raw);
+  const seed = data.seed || data;
+
+  console.log(`Seeding tables: ${Object.keys(seed).join(', ')}`);
+
+  // Wipe all tables in reverse order (to respect foreign keys)
+  const tableNames = Object.keys(seed);
+  for (const table of [...tableNames].reverse()) {
+    try {
+      await (prisma as any)[table].deleteMany();
+      console.log(`  Cleared ${table}`);
+    } catch (err) {
+      console.warn(
+        `  Could not clear ${table}: ${err instanceof Error ? err.message : err}`,
+      );
+    }
+  }
+
+  // Reset auto-increment counters so IDs start from 1 after each re-seed.
+  // Without this, SQLite IDs keep climbing (1, 2, ... then 9, 10, ...)
+  // across scenario switches, causing hardcoded URLs like /drinks/1 to 404.
+  for (const table of tableNames) {
+    try {
+      // Prisma uses PascalCase model names; sqlite_sequence stores the actual table name.
+      // Try both the seed key (which matches the Prisma model) and common casings.
+      await prisma.$executeRawUnsafe(
+        `DELETE FROM sqlite_sequence WHERE name = '${table}' OR name = '${table.charAt(0).toUpperCase() + table.slice(1)}'`,
+      );
+    } catch {
+      // sqlite_sequence may not exist if no autoincrement columns — safe to ignore
+    }
+  }
+
+  // Insert seed data
+  for (const [table, rows] of Object.entries(seed)) {
+    if (!Array.isArray(rows) || rows.length === 0) continue;
+    try {
+      await (prisma as any)[table].createMany({ data: rows });
+      console.log(`  Seeded ${rows.length} rows into ${table}`);
+    } catch (err) {
+      console.error(
+        `  Failed to seed ${table}: ${err instanceof Error ? err.message : err}`,
+      );
+      process.exit(1);
+    }
+  }
+
+  console.log('Seed complete');
+}
+
+main()
+  .then(() => prisma.$disconnect())
+  .catch((e) => {
+    console.error('Seed adapter error:', e);
+    process.exit(1);
+  });

package/codeyam-cli/templates/nextjs-prisma-sqlite/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import path from 'path';
+
+export default defineConfig({
+  test: {
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '.'),
+    },
+  },
+});

package/codeyam-cli/templates/nextjs-prisma-supabase/README.md

@@ -0,0 +1,52 @@
+# Project Name
+
+Brief description of what this app does.
+
+## Setup
+
+Run the setup script to install dependencies, initialize the database, and seed it with demo data:
+
+```bash
+npm run setup
+```
+
+## Development
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## Using CodeYam Editor
+
+This project was built with [CodeYam](https://codeyam.com). To launch the editor:
+
+```bash
+codeyam editor
+```
+
+The editor provides a live preview alongside a Claude Code terminal for iterating on the app.
+
+## Database
+
+This project uses Supabase (PostgreSQL) via Prisma. Common commands:
+
+```bash
+npm run db:push    # Apply schema changes and generate Prisma client
+npm run db:seed    # Seed the database with demo data
+npm run db:reset   # Reset database (runs prisma migrate reset)
+```
+
+## Scripts
+
+| Script             | Description                                  |
+| ------------------ | -------------------------------------------- |
+| `npm run setup`    | One-line project setup (install + db + seed) |
+| `npm run dev`      | Start the development server                 |
+| `npm run build`    | Build for production                         |
+| `npm run db:push`  | Apply Prisma schema changes                  |
+| `npm run db:seed`  | Seed the database                            |
+| `npm run db:reset` | Reset the database                           |

package/codeyam-cli/templates/{nextjs-prisma-sqlite/PRISMA_SETUP.md → nextjs-prisma-supabase/SUPABASE_SETUP.md}

@@ -1,19 +1,17 @@
-# Prisma 7 + SQLite Setup
+# Supabase + Prisma 7 Setup
 
-This project uses Prisma 7 with SQLite via the `better-sqlite3` driver adapter.
+This project uses Prisma 7 with PostgreSQL via Supabase.
 
-## How it works
+## Quick start
 
-Prisma 7 requires a **driver adapter** — you cannot use `new PrismaClient()` alone.
-Every file that creates a PrismaClient must use this pattern:
+1. Create a Supabase project at https://supabase.com/dashboard
+2. Copy `.env` and fill in your credentials (see comments in the file)
+3. Run `npm run db:push` to create tables
+4. Run `npm run db:seed` to populate demo data
 
-```typescript
-import { PrismaClient } from '@prisma/client';
-import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+## How it works
 
-const adapter = new PrismaBetterSqlite3({ url: 'file:./dev.db' });
-const prisma = new PrismaClient({ adapter });
-```
+Prisma 7 requires a **driver adapter**. This project uses `@prisma/adapter-pg` with the `pg` package to connect to Supabase's PostgreSQL.
 
 The singleton in `app/lib/prisma.ts` is already configured. Import it in your code:
 
@@ -21,6 +19,12 @@ The singleton in `app/lib/prisma.ts` is already configured. Import it in your co
 import { prisma } from '@/app/lib/prisma';
 ```
 
+For Supabase-specific features (auth, realtime, storage), use the Supabase client:
+
+```typescript
+import { supabase } from '@/app/lib/supabase';
+```
+
 ## Important: do NOT change these settings
 
 - **Generator must be `prisma-client-js`** (not `prisma-client`). The `prisma-client`
@@ -29,14 +33,19 @@ import { prisma } from '@/app/lib/prisma';
   `node_modules/@prisma/client` works with standard imports everywhere.
 - **Do NOT add `url` to the datasource block** in `schema.prisma`. Prisma 7
   moved the URL to `prisma.config.ts`. Adding it to the schema causes a validation error.
-- **Keep `serverExternalPackages: ["better-sqlite3"]`** in `next.config.ts`.
-  Without it, Next.js tries to bundle the native module and fails.
 - **Keep `turbopack: { root: "." }`** in `next.config.ts`. Without it,
   Turbopack may infer a parent directory as root and break imports.
-- **Database file is at project root** (`./dev.db`), not in `prisma/`.
 - **Always run `npx prisma generate`** after `npx prisma db push` (or use
   `npm run db:push` which does both). Without this, the client module is missing.
 
+## Getting your Supabase credentials
+
+1. Go to https://supabase.com/dashboard and select your project
+2. **SUPABASE_URL** and **SUPABASE_ANON_KEY**: Project Settings → API
+3. **DATABASE_URL**: Project Settings → Database → Connection string (URI)
+   - For serverless (Vercel, etc.): use the "Transaction" pooler connection string (port 6543)
+   - For long-running servers: use the "Session" pooler connection string (port 5432)
+
 ## Common tasks
 
 ```bash
@@ -47,10 +56,9 @@ vim prisma/schema.prisma
 npm run db:push
 
 # Seed the database
-npx tsx prisma/seed.ts
-# or: npm run db:seed
+npm run db:seed
 
-# Reset the database (delete + recreate + seed)
+# Reset the database (drops all tables, re-creates, re-seeds)
 npm run db:reset
 
 # Open Prisma Studio (database browser)
@@ -82,3 +90,15 @@ export async function POST(request: Request) {
   return Response.json(todo);
 }
 ```
+
+## Deployment
+
+This template is ready to deploy to Vercel:
+
+1. Push your code to GitHub
+2. Import the repo in Vercel
+3. Add the same environment variables from `.env` to Vercel's project settings
+4. Deploy
+
+The DATABASE_URL should use Supabase's **Transaction** pooler connection string
+(port 6543) for serverless environments like Vercel.

package/codeyam-cli/templates/nextjs-prisma-supabase/app/api/todos/route.ts

@@ -0,0 +1,17 @@
+// Example API route using Prisma.
+// Import prisma from the singleton — do NOT create a new PrismaClient here.
+
+import { prisma } from '@/app/lib/prisma';
+
+export async function GET() {
+  const todos = await prisma.todo.findMany({
+    orderBy: { createdAt: 'desc' },
+  });
+  return Response.json(todos);
+}
+
+export async function POST(request: Request) {
+  const { title } = await request.json();
+  const todo = await prisma.todo.create({ data: { title } });
+  return Response.json(todo);
+}

package/codeyam-cli/templates/nextjs-prisma-supabase/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/codeyam-cli/templates/nextjs-prisma-supabase/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'CodeYam App',
+  description: 'Built with CodeYam Editor',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/codeyam-cli/templates/nextjs-prisma-supabase/app/lib/prisma.ts

@@ -0,0 +1,20 @@
+// Prisma 7 requires a driver adapter for database access.
+// This file uses the pg adapter for Supabase PostgreSQL.
+//
+// Usage in API routes and server components:
+//   import { prisma } from "@/app/lib/prisma";
+//   const items = await prisma.todo.findMany();
+
+import { PrismaClient } from '@prisma/client';
+import { PrismaPg } from '@prisma/adapter-pg';
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+const connectionString = process.env.DATABASE_URL!;
+const adapter = new PrismaPg({ connectionString });
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient({ adapter });
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+
+export default prisma;

package/codeyam-cli/templates/nextjs-prisma-supabase/app/lib/supabase.ts

@@ -0,0 +1,12 @@
+// Supabase client for auth, realtime, and storage.
+// For database queries, use Prisma instead (see prisma.ts).
+//
+// Usage:
+//   import { supabase } from "@/app/lib/supabase";
+
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);

package/codeyam-cli/templates/nextjs-prisma-supabase/app/page.tsx

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <main className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Welcome</h1>
+        <p className="text-gray-600">Your app is ready. Start building!</p>
+      </div>
+    </main>
+  );
+}

package/codeyam-cli/templates/nextjs-prisma-supabase/env

@@ -0,0 +1,9 @@
+# Supabase project credentials
+# Get these from: https://supabase.com/dashboard → Project Settings → API
+NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+
+# Database connection string (Supabase PostgreSQL)
+# Get this from: Supabase Dashboard → Project Settings → Database → Connection string (URI)
+# Use the "Transaction" connection string for serverless environments (Vercel, etc.)
+DATABASE_URL=postgresql://postgres.YOUR_PROJECT_ID:YOUR_PASSWORD@aws-0-us-east-1.pooler.supabase.com:6543/postgres

package/codeyam-cli/templates/nextjs-prisma-supabase/eslint.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+]);
+
+export default eslintConfig;

package/codeyam-cli/templates/nextjs-prisma-supabase/gitignore

@@ -0,0 +1,40 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (contains secrets)
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/codeyam-cli/templates/nextjs-prisma-supabase/next.config.ts

@@ -0,0 +1,11 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  turbopack: {
+    // Required: prevents Turbopack from inferring a parent directory as root
+    // when .codeyam/ exists above the project (which breaks import resolution)
+    root: '.',
+  },
+};
+
+export default nextConfig;

package/codeyam-cli/templates/nextjs-prisma-supabase/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "codeyam-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "setup": "npm install && npm run db:push && npm run db:seed",
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "db:push": "npx prisma db push && npx prisma generate",
+    "db:seed": "npx tsx prisma/seed.ts",
+    "db:reset": "npx prisma migrate reset --force"
+  },
+  "dependencies": {
+    "@prisma/adapter-pg": "^7.4.1",
+    "@prisma/client": "^7.4.1",
+    "@supabase/supabase-js": "^2.49.4",
+    "next": "^15.3.3",
+    "pg": "^8.16.0",
+    "prisma": "^7.4.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/pg": "^8",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "^15.3.3",
+    "tailwindcss": "^4",
+    "tsx": "^4.19.4",
+    "typescript": "^5"
+  }
+}

package/codeyam-cli/templates/nextjs-prisma-supabase/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/codeyam-cli/templates/nextjs-prisma-supabase/prisma/schema.prisma

@@ -0,0 +1,27 @@
+// Prisma 7 with PostgreSQL via Supabase.
+//
+// IMPORTANT: Use "prisma-client-js" (NOT "prisma-client").
+// The "prisma-client" generator requires a custom output path which
+// breaks Turbopack import resolution and seed script imports.
+// "prisma-client-js" outputs to node_modules/@prisma/client which
+// works everywhere with standard imports.
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+// ──────────────────────────────────────────────
+// Replace these placeholder models with your own.
+// After editing, run: npm run db:push
+// ──────────────────────────────────────────────
+
+model Todo {
+  id        Int      @id @default(autoincrement())
+  title     String
+  completed Boolean  @default(false)
+  createdAt DateTime @default(now())
+}

package/codeyam-cli/templates/nextjs-prisma-supabase/prisma/seed.ts

@@ -0,0 +1,39 @@
+// Seed script for populating the database with demo data.
+//
+// Run with: npx tsx prisma/seed.ts
+// Or:       npm run db:seed
+//
+// IMPORTANT: This file must use the same adapter pattern as app/lib/prisma.ts.
+// Do NOT use `new PrismaClient()` without the adapter — Prisma 7 requires it.
+
+import 'dotenv/config';
+import { PrismaClient } from '@prisma/client';
+import { PrismaPg } from '@prisma/adapter-pg';
+
+const connectionString = process.env.DATABASE_URL!;
+const adapter = new PrismaPg({ connectionString });
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  // Clear existing data
+  await prisma.todo.deleteMany();
+
+  // Seed with demo data
+  await prisma.todo.createMany({
+    data: [
+      { title: 'Set up the project', completed: true },
+      { title: 'Build the first feature' },
+      { title: 'Add more scenarios' },
+    ],
+  });
+
+  const count = await prisma.todo.count();
+  console.log(`Seeded ${count} todos`);
+}
+
+main()
+  .then(() => prisma.$disconnect())
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });

package/codeyam-cli/templates/nextjs-prisma-supabase/prisma.config.ts

@@ -0,0 +1,12 @@
+import 'dotenv/config';
+import { defineConfig } from 'prisma/config';
+
+export default defineConfig({
+  schema: 'prisma/schema.prisma',
+  migrations: {
+    path: 'prisma/migrations',
+  },
+  datasource: {
+    url: process.env['DATABASE_URL'],
+  },
+});

package/codeyam-cli/templates/nextjs-prisma-supabase/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/codeyam-cli/templates/skills/codeyam-dev-mode/SKILL.md

@@ -53,7 +53,7 @@ Then present a **concise** overview to the user:
 
 1. **Component Summary** — 2-3 sentences on what the component does and the current scenario being previewed.
 
-2. **Suggested Tests** — Compare the component's code paths (conditionals, edge cases, visual states) against the existing scenarios from the database. Recommend 2-4 specific ways to test the component that are **not yet covered** by saved scenarios. Focus on interesting visual states — e.g. "What does this look like with a very long title?", "What happens when the list is empty?", "How does the error state render?". Be specific to this component, not generic.
+2. **Suggested Tests** — Compare the component's code paths (conditionals, edge cases, visual states) against the existing scenarios from the database. Recommend 2-4 specific ways to test the component that are **not yet covered** by saved scenarios. Focus on interesting visual states — e.g. "What does this look like with a very long title?", "What happens when the list is empty?", "How does the error state render?". Also suggest ways to enrich the _existing_ scenario's data to better exercise the component (more realistic content, populated optional fields, diverse values). Be specific to this component, not generic.
 
 Keep it brief — no tables, no exhaustive attribute lists. The user can see the preview and wants actionable suggestions, not a data dump.
 
@@ -229,7 +229,7 @@ tail -50 <server log path from context file>
 ## Tips
 
 - **NEVER modify shimmed component files** (`*_Scenario.tsx`) to change rendering behavior — only edit `MockData_*.tsx` files to change what the component displays. Shimmed components are auto-generated; functional changes to them won't persist and can't be saved as scenarios.
-- Keep edits small and incremental so the user can see changes in the preview as you go
+- **Refresh the preview frequently** — the user is watching the preview panel as you work. Make small changes, then refresh so they see visual progress. Don't batch multiple edits into one big refresh at the end. Aim for a refresh after every meaningful edit (new data values, layout changes, style tweaks).
 - **Always add `[CY-DEBUG]` logging before refreshing** — never refresh without a way to verify the result
 - Mock data files are TypeScript (`.tsx`) — they export scenario-specific props/data
 - The database at `.codeyam/db.sqlite3` has entity and scenario metadata if you need deeper investigation