@tthr/cli 0.0.1 → 0.0.2

package/dist/index.js

@@ -9,6 +9,7 @@ import ora from "ora";
 import prompts from "prompts";
 import fs2 from "fs-extra";
 import path2 from "path";
+import { execSync } from "child_process";
 
 // src/utils/auth.ts
 import chalk from "chalk";
@@ -32,6 +33,14 @@ async function requireAuth() {
     console.log(chalk.dim("Run `tthr login` to authenticate\n"));
     process.exit(1);
   }
+  if (credentials.expiresAt) {
+    const expiresAt = new Date(credentials.expiresAt);
+    if (/* @__PURE__ */ new Date() > expiresAt) {
+      console.error(chalk.red("\n\u2717 Session expired\n"));
+      console.log(chalk.dim("Run `tthr login` to authenticate\n"));
+      process.exit(1);
+    }
+  }
   return credentials;
 }
 async function saveCredentials(credentials) {
@@ -84,14 +93,14 @@ async function initCommand(name, options) {
       name: "template",
       message: "Select a framework:",
       choices: [
-        { title: "Vue / Nuxt", value: "vue" },
-        { title: "Svelte / SvelteKit", value: "svelte" },
-        { title: "React / Next.js", value: "react" },
-        { title: "Vanilla JavaScript", value: "vanilla" }
+        { title: "Nuxt (Vue)", value: "nuxt", description: "Full-stack Vue framework with SSR" },
+        { title: "Next.js (React)", value: "next", description: "Full-stack React framework with SSR" },
+        { title: "SvelteKit (Svelte)", value: "sveltekit", description: "Full-stack Svelte framework with SSR" },
+        { title: "Vanilla TypeScript", value: "vanilla", description: "Minimal setup for scripts and APIs" }
       ],
       initial: 0
     });
-    template = response.template || "vue";
+    template = response.template || "nuxt";
   }
   const projectPath = path2.resolve(process.cwd(), projectName);
   if (await fs2.pathExists(projectPath)) {
@@ -126,14 +135,184 @@ async function initCommand(name, options) {
     const data = await response.json();
     projectId = data.project.id;
     apiKey = data.apiKey;
-    spinner.text = "Creating project structure...";
-    await fs2.ensureDir(projectPath);
-    await fs2.ensureDir(path2.join(projectPath, "tether"));
-    await fs2.ensureDir(path2.join(projectPath, "tether", "functions"));
-    await fs2.ensureDir(path2.join(projectPath, "_generated"));
-    await fs2.writeFile(
-      path2.join(projectPath, "tether.config.ts"),
-      `import { defineConfig } from '@tthr/cli';
+    spinner.text = `Scaffolding ${template} project...`;
+    if (template === "nuxt") {
+      await scaffoldNuxtProject(projectName, projectPath, spinner);
+    } else if (template === "next") {
+      await scaffoldNextProject(projectName, projectPath, spinner);
+    } else if (template === "sveltekit") {
+      await scaffoldSvelteKitProject(projectName, projectPath, spinner);
+    } else {
+      await scaffoldVanillaProject(projectName, projectPath, spinner);
+    }
+    spinner.text = "Adding Tether configuration...";
+    await addTetherFiles(projectPath, projectId, apiKey, template);
+    spinner.text = "Configuring framework integration...";
+    await configureFramework(projectPath, template);
+    spinner.text = "Installing Tether packages...";
+    await installTetherPackages(projectPath, template);
+    spinner.text = "Creating demo page...";
+    await createDemoPage(projectPath, template);
+    spinner.text = "Running initial migration...";
+    await runInitialMigration(projectPath, projectId, apiKey);
+    spinner.succeed("Project created successfully!");
+    console.log("\n" + chalk2.green("\u2713") + " Project created successfully!\n");
+    console.log("Next steps:\n");
+    console.log(chalk2.cyan(`  cd ${projectName}`));
+    if (template === "vanilla") {
+      console.log(chalk2.cyan("  npm install"));
+    }
+    console.log(chalk2.cyan("  npm run dev"));
+    console.log("\n" + chalk2.dim("For more information, visit https://tthr.io/docs\n"));
+  } catch (error) {
+    spinner.fail("Failed to create project");
+    console.error(chalk2.red(error instanceof Error ? error.message : "Unknown error"));
+    process.exit(1);
+  }
+}
+async function scaffoldNuxtProject(projectName, projectPath, spinner) {
+  const parentDir = path2.dirname(projectPath);
+  spinner.stop();
+  console.log(chalk2.dim("\nRunning nuxi init...\n"));
+  try {
+    execSync(`npx nuxi@latest init ${projectName} --packageManager npm --gitInit false`, {
+      cwd: parentDir,
+      stdio: "inherit"
+    });
+    if (!await fs2.pathExists(path2.join(projectPath, "package.json"))) {
+      throw new Error("Nuxt project was not created successfully - package.json missing");
+    }
+    spinner.start();
+  } catch (error) {
+    spinner.start();
+    if (error instanceof Error && error.message.includes("package.json missing")) {
+      throw error;
+    }
+    throw new Error("Failed to create Nuxt project. Make sure you have npx installed.");
+  }
+}
+async function scaffoldNextProject(projectName, projectPath, spinner) {
+  const parentDir = path2.dirname(projectPath);
+  spinner.stop();
+  console.log(chalk2.dim("\nRunning create-next-app...\n"));
+  try {
+    execSync(`npx create-next-app@latest ${projectName} --typescript --eslint --tailwind --src-dir --app --import-alias "@/*" --use-npm`, {
+      cwd: parentDir,
+      stdio: "inherit"
+    });
+    if (!await fs2.pathExists(path2.join(projectPath, "package.json"))) {
+      throw new Error("Next.js project was not created successfully - package.json missing");
+    }
+    spinner.start();
+  } catch (error) {
+    spinner.start();
+    if (error instanceof Error && error.message.includes("package.json missing")) {
+      throw error;
+    }
+    throw new Error("Failed to create Next.js project. Make sure you have npx installed.");
+  }
+}
+async function scaffoldSvelteKitProject(projectName, projectPath, spinner) {
+  const parentDir = path2.dirname(projectPath);
+  spinner.stop();
+  console.log(chalk2.dim("\nRunning sv create...\n"));
+  try {
+    execSync(`npx sv create ${projectName} --template minimal --types ts --no-add-ons --no-install`, {
+      cwd: parentDir,
+      stdio: "inherit"
+    });
+    if (!await fs2.pathExists(path2.join(projectPath, "package.json"))) {
+      throw new Error("SvelteKit project was not created successfully - package.json missing");
+    }
+    spinner.start();
+  } catch (error) {
+    spinner.start();
+    if (error instanceof Error && error.message.includes("package.json missing")) {
+      throw error;
+    }
+    throw new Error("Failed to create SvelteKit project. Make sure you have npx installed.");
+  }
+}
+async function scaffoldVanillaProject(projectName, projectPath, spinner) {
+  spinner.text = "Creating vanilla TypeScript project...";
+  await fs2.ensureDir(projectPath);
+  await fs2.ensureDir(path2.join(projectPath, "src"));
+  const packageJson = {
+    name: projectName,
+    version: "0.0.1",
+    private: true,
+    type: "module",
+    scripts: {
+      "dev": "tsx watch src/index.ts",
+      "build": "tsc",
+      "start": "node dist/index.js"
+    },
+    devDependencies: {
+      "typescript": "latest",
+      "tsx": "latest",
+      "@types/node": "latest"
+    }
+  };
+  await fs2.writeJSON(path2.join(projectPath, "package.json"), packageJson, { spaces: 2 });
+  await fs2.writeJSON(
+    path2.join(projectPath, "tsconfig.json"),
+    {
+      compilerOptions: {
+        target: "ES2022",
+        module: "ESNext",
+        moduleResolution: "bundler",
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        forceConsistentCasingInFileNames: true,
+        outDir: "./dist",
+        rootDir: "./src",
+        paths: {
+          "@/*": ["./src/*"]
+        }
+      },
+      include: ["src/**/*.ts"],
+      exclude: ["node_modules", "dist"]
+    },
+    { spaces: 2 }
+  );
+  await fs2.writeFile(
+    path2.join(projectPath, "src", "index.ts"),
+    `import { createClient } from '@tthr/client';
+
+const tether = createClient({
+  projectId: process.env.TETHER_PROJECT_ID!,
+  url: process.env.TETHER_URL || 'https://tthr.io',
+});
+
+async function main() {
+  console.log('Hello from Tether!');
+
+  // Example: List all posts
+  // const posts = await tether.query('posts.list', { limit: 10 });
+  // console.log(posts);
+}
+
+main().catch(console.error);
+`
+  );
+  await fs2.writeFile(
+    path2.join(projectPath, ".gitignore"),
+    `node_modules/
+dist/
+.env
+.env.local
+.DS_Store
+`
+  );
+}
+async function addTetherFiles(projectPath, projectId, apiKey, template) {
+  await fs2.ensureDir(path2.join(projectPath, "tether"));
+  await fs2.ensureDir(path2.join(projectPath, "tether", "functions"));
+  const configPackage = template === "nuxt" ? "@tthr/vue" : template === "next" ? "@tthr/react" : template === "sveltekit" ? "@tthr/svelte" : "@tthr/client";
+  await fs2.writeFile(
+    path2.join(projectPath, "tether.config.ts"),
+    `import { defineConfig } from '${configPackage}';
 
 export default defineConfig({
   // Project configuration
@@ -152,10 +331,10 @@ export default defineConfig({
   output: './_generated',
 });
 `
-    );
-    await fs2.writeFile(
-      path2.join(projectPath, "tether", "schema.ts"),
-      `import { defineSchema, text, integer, timestamp } from '@tthr/schema';
+  );
+  await fs2.writeFile(
+    path2.join(projectPath, "tether", "schema.ts"),
+    `import { defineSchema, text, integer, timestamp } from '@tthr/schema';
 
 export default defineSchema({
   // Example: posts table
@@ -178,18 +357,17 @@ export default defineSchema({
   },
 });
 `
-    );
-    await fs2.writeFile(
-      path2.join(projectPath, "tether", "functions", "posts.ts"),
-      `import { query, mutation, z } from '@tthr/server';
-import { db } from '../../_generated/db';
+  );
+  await fs2.writeFile(
+    path2.join(projectPath, "tether", "functions", "posts.ts"),
+    `import { query, mutation, z } from '@tthr/server';
 
 // List all posts
 export const list = query({
   args: z.object({
     limit: z.number().optional().default(20),
   }),
-  handler: async ({ args }) => {
+  handler: async ({ args, db }) => {
     return db.posts.findMany({
       orderBy: { createdAt: 'desc' },
       limit: args.limit,
@@ -202,7 +380,7 @@ export const get = query({
   args: z.object({
     id: z.string(),
   }),
-  handler: async ({ args }) => {
+  handler: async ({ args, db }) => {
     return db.posts.findUnique({
       where: { id: args.id },
     });
@@ -215,7 +393,7 @@ export const create = mutation({
     title: z.string().min(1),
     content: z.string().optional(),
   }),
-  handler: async ({ args, ctx }) => {
+  handler: async ({ args, ctx, db }) => {
     const id = crypto.randomUUID();
     const now = new Date().toISOString();
 
@@ -241,7 +419,7 @@ export const update = mutation({
     title: z.string().min(1).optional(),
     content: z.string().optional(),
   }),
-  handler: async ({ args }) => {
+  handler: async ({ args, db }) => {
     await db.posts.update({
       where: { id: args.id },
       data: {
@@ -258,170 +436,646 @@ export const remove = mutation({
   args: z.object({
     id: z.string(),
   }),
-  handler: async ({ args }) => {
+  handler: async ({ args, db }) => {
     await db.posts.delete({
       where: { id: args.id },
     });
   },
 });
 `
-    );
+  );
+  const envContent = `# Tether Configuration
+TETHER_PROJECT_ID=${projectId}
+TETHER_URL=${isDev ? "http://localhost:3001" : "https://tthr.io"}
+TETHER_API_KEY=${apiKey}
+`;
+  const envPath = path2.join(projectPath, ".env");
+  if (await fs2.pathExists(envPath)) {
+    const existing = await fs2.readFile(envPath, "utf-8");
+    await fs2.writeFile(envPath, existing + "\n" + envContent);
+  } else {
+    await fs2.writeFile(envPath, envContent);
+  }
+  const gitignorePath = path2.join(projectPath, ".gitignore");
+  const tetherGitignore = `
+# Tether
+_generated/
+.env
+.env.local
+`;
+  if (await fs2.pathExists(gitignorePath)) {
+    const existing = await fs2.readFile(gitignorePath, "utf-8");
+    if (!existing.includes("_generated/")) {
+      await fs2.writeFile(gitignorePath, existing + tetherGitignore);
+    }
+  } else {
+    await fs2.writeFile(gitignorePath, tetherGitignore.trim());
+  }
+}
+async function configureFramework(projectPath, template) {
+  if (template === "nuxt") {
+    await configureNuxt(projectPath);
+  } else if (template === "next") {
+    await configureNext(projectPath);
+  } else if (template === "sveltekit") {
+    await configureSvelteKit(projectPath);
+  }
+}
+async function configureNuxt(projectPath) {
+  const configPath = path2.join(projectPath, "nuxt.config.ts");
+  if (!await fs2.pathExists(configPath)) {
     await fs2.writeFile(
-      path2.join(projectPath, "tether", "seed.ts"),
-      `import { db } from '../_generated/db';
-
-export async function seed() {
-  console.log('Seeding database...');
-
-  // Add your seed data here
-  const now = new Date().toISOString();
-
-  await db.posts.create({
-    data: {
-      id: 'post-1',
-      title: 'Welcome to Tether',
-      content: 'This is your first post. Edit or delete it to get started!',
-      authorId: 'system',
-      createdAt: now,
-      updatedAt: now,
-    },
-  });
+      configPath,
+      `// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+
+  modules: ['@tthr/vue/nuxt'],
+
+  tether: {
+    projectId: process.env.TETHER_PROJECT_ID,
+    url: process.env.TETHER_URL || 'https://tthr.io',
+  },
+});
+`
+    );
+    return;
+  }
+  let config = await fs2.readFile(configPath, "utf-8");
+  if (config.includes("modules:")) {
+    config = config.replace(
+      /modules:\s*\[/,
+      "modules: ['@tthr/vue/nuxt', "
+    );
+  } else {
+    config = config.replace(
+      /defineNuxtConfig\(\{/,
+      `defineNuxtConfig({
+  modules: ['@tthr/vue/nuxt'],
+`
+    );
+  }
+  if (!config.includes("tether:")) {
+    config = config.replace(
+      /(\}|\]|'|"|true|false|\d)\s*\n(\s*}\);?\s*)$/,
+      `$1,
 
-  console.log('Seeding complete!');
+  tether: {
+    projectId: process.env.TETHER_PROJECT_ID,
+    url: process.env.TETHER_URL || 'https://tthr.io',
+  },
+});
+`
+    );
+  }
+  await fs2.writeFile(configPath, config);
+}
+async function configureNext(projectPath) {
+  const providersPath = path2.join(projectPath, "src", "app", "providers.tsx");
+  await fs2.writeFile(
+    providersPath,
+    `'use client';
+
+import { TetherProvider } from '@tthr/react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <TetherProvider
+      projectId={process.env.NEXT_PUBLIC_TETHER_PROJECT_ID!}
+      url={process.env.NEXT_PUBLIC_TETHER_URL || 'https://tthr.io'}
+    >
+      {children}
+    </TetherProvider>
+  );
 }
+`
+  );
+  const layoutPath = path2.join(projectPath, "src", "app", "layout.tsx");
+  if (await fs2.pathExists(layoutPath)) {
+    let layout = await fs2.readFile(layoutPath, "utf-8");
+    if (!layout.includes("import { Providers }")) {
+      layout = layout.replace(
+        /^(import.*\n)+/m,
+        (match) => match + "import { Providers } from './providers';\n"
+      );
+    }
+    if (!layout.includes("<Providers>")) {
+      layout = layout.replace(
+        /(<body[^>]*>)([\s\S]*?)(<\/body>)/,
+        "$1<Providers>$2</Providers>$3"
+      );
+    }
+    await fs2.writeFile(layoutPath, layout);
+  }
+  const envLocalPath = path2.join(projectPath, ".env.local");
+  const nextEnvContent = `# Tether Configuration (client-side)
+NEXT_PUBLIC_TETHER_PROJECT_ID=\${TETHER_PROJECT_ID}
+NEXT_PUBLIC_TETHER_URL=\${TETHER_URL}
+`;
+  if (await fs2.pathExists(envLocalPath)) {
+    const existing = await fs2.readFile(envLocalPath, "utf-8");
+    await fs2.writeFile(envLocalPath, existing + "\n" + nextEnvContent);
+  } else {
+    await fs2.writeFile(envLocalPath, nextEnvContent);
+  }
+}
+async function configureSvelteKit(projectPath) {
+  const libPath = path2.join(projectPath, "src", "lib");
+  await fs2.ensureDir(libPath);
+  await fs2.writeFile(
+    path2.join(libPath, "tether.ts"),
+    `import { createClient } from '@tthr/svelte';
+import { PUBLIC_TETHER_PROJECT_ID, PUBLIC_TETHER_URL } from '$env/static/public';
+
+export const tether = createClient({
+  projectId: PUBLIC_TETHER_PROJECT_ID,
+  url: PUBLIC_TETHER_URL || 'https://tthr.io',
+});
+`
+  );
+  const envPath = path2.join(projectPath, ".env");
+  const svelteEnvContent = `# Tether Configuration (public)
+PUBLIC_TETHER_PROJECT_ID=\${TETHER_PROJECT_ID}
+PUBLIC_TETHER_URL=\${TETHER_URL}
+`;
+  if (await fs2.pathExists(envPath)) {
+    const existing = await fs2.readFile(envPath, "utf-8");
+    if (!existing.includes("PUBLIC_TETHER_")) {
+      await fs2.writeFile(envPath, existing + "\n" + svelteEnvContent);
+    }
+  }
+}
+async function installTetherPackages(projectPath, template) {
+  const [
+    tthrClientVersion,
+    tthrSchemaVersion,
+    tthrServerVersion,
+    tthrCliVersion
+  ] = await Promise.all([
+    getLatestVersion("@tthr/client"),
+    getLatestVersion("@tthr/schema"),
+    getLatestVersion("@tthr/server"),
+    getLatestVersion("@tthr/cli")
+  ]);
+  const packages = [
+    `@tthr/client@${tthrClientVersion}`,
+    `@tthr/schema@${tthrSchemaVersion}`,
+    `@tthr/server@${tthrServerVersion}`
+  ];
+  const devPackages = [
+    `@tthr/cli@${tthrCliVersion}`
+  ];
+  if (template === "nuxt") {
+    const tthrVueVersion = await getLatestVersion("@tthr/vue");
+    packages.push(`@tthr/vue@${tthrVueVersion}`);
+  } else if (template === "next") {
+    const tthrReactVersion = await getLatestVersion("@tthr/react");
+    packages.push(`@tthr/react@${tthrReactVersion}`);
+  } else if (template === "sveltekit") {
+    const tthrSvelteVersion = await getLatestVersion("@tthr/svelte");
+    packages.push(`@tthr/svelte@${tthrSvelteVersion}`);
+  }
+  try {
+    execSync(`npm install ${packages.join(" ")}`, {
+      cwd: projectPath,
+      stdio: "pipe"
+    });
+    execSync(`npm install -D ${devPackages.join(" ")}`, {
+      cwd: projectPath,
+      stdio: "pipe"
+    });
+  } catch (error) {
+    console.warn(chalk2.yellow("\nNote: Some Tether packages may not be published yet."));
+  }
+}
+async function createDemoPage(projectPath, template) {
+  if (template === "nuxt") {
+    const nuxt4AppVuePath = path2.join(projectPath, "app", "app.vue");
+    const nuxt3AppVuePath = path2.join(projectPath, "app.vue");
+    const appVuePath = await fs2.pathExists(path2.join(projectPath, "app")) ? nuxt4AppVuePath : nuxt3AppVuePath;
+    await fs2.writeFile(
+      appVuePath,
+      `<template>
+  <TetherWelcome />
+</template>
 `
     );
+  } else if (template === "next") {
+    const pagePath = path2.join(projectPath, "src", "app", "page.tsx");
     await fs2.writeFile(
-      path2.join(projectPath, ".env"),
-      `# Tether Configuration
-TETHER_PROJECT_ID=${projectId}
-TETHER_URL=${isDev ? "http://localhost:3001" : "https://tthr.io"}
-TETHER_API_KEY=${apiKey}
+      pagePath,
+      `'use client';
+
+import { useState } from 'react';
+import { useQuery, useMutation } from '@tthr/react';
+
+interface Post {
+  id: string;
+  title: string;
+  createdAt: string;
+}
+
+export default function Home() {
+  const [newPostTitle, setNewPostTitle] = useState('');
+  const { data: posts, isLoading, refetch } = useQuery<Post[]>('posts.list');
+  const { mutate: createPost, isPending } = useMutation('posts.create');
+  const { mutate: deletePost } = useMutation('posts.remove');
+
+  const handleCreatePost = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newPostTitle.trim()) return;
+
+    await createPost({ title: newPostTitle.trim(), content: '' });
+    setNewPostTitle('');
+    refetch();
+  };
+
+  const handleDeletePost = async (id: string) => {
+    await deletePost({ id });
+    refetch();
+  };
+
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white p-8">
+      <div className="max-w-2xl mx-auto space-y-8">
+        <header className="text-center space-y-4">
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+            Welcome to Tether
+          </h1>
+          <p className="text-gray-400">Realtime SQLite for modern apps</p>
+        </header>
+
+        <section className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-4">
+          <h2 className="text-xl font-semibold">Try it out</h2>
+          <p className="text-gray-400 text-sm">Create posts in realtime. Open in multiple tabs to see live updates!</p>
+
+          <form onSubmit={handleCreatePost} className="flex gap-3">
+            <input
+              type="text"
+              value={newPostTitle}
+              onChange={(e) => setNewPostTitle(e.target.value)}
+              placeholder="Enter a post title..."
+              className="flex-1 px-4 py-2 bg-black/30 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500"
+              disabled={isPending}
+            />
+            <button
+              type="submit"
+              disabled={!newPostTitle.trim() || isPending}
+              className="px-6 py-2 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90 transition"
+            >
+              {isPending ? 'Creating...' : 'Create Post'}
+            </button>
+          </form>
+
+          <div className="space-y-2 min-h-[100px]">
+            {isLoading ? (
+              <p className="text-gray-500 text-center py-8">Loading posts...</p>
+            ) : posts?.length ? (
+              posts.map((post) => (
+                <div
+                  key={post.id}
+                  className="flex items-center justify-between p-3 bg-black/20 border border-white/5 rounded-lg hover:bg-black/30 transition"
+                >
+                  <div>
+                    <h3 className="font-medium">{post.title}</h3>
+                    <time className="text-xs text-gray-500">
+                      {new Date(post.createdAt).toLocaleDateString('en-GB', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                    </time>
+                  </div>
+                  <button
+                    onClick={() => handleDeletePost(post.id)}
+                    className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded transition"
+                  >
+                    <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                </div>
+              ))
+            ) : (
+              <p className="text-gray-500 text-center py-8">No posts yet. Create your first one above!</p>
+            )}
+          </div>
+        </section>
+
+        <footer className="text-center text-gray-600 text-sm border-t border-white/5 pt-6">
+          Built with Tether by <a href="https://strands.gg" className="text-indigo-400 hover:underline">Strands Services</a>
+        </footer>
+      </div>
+    </main>
+  );
+}
 `
     );
+  } else if (template === "sveltekit") {
+    const pagePath = path2.join(projectPath, "src", "routes", "+page.svelte");
     await fs2.writeFile(
-      path2.join(projectPath, ".gitignore"),
-      `# Dependencies
-node_modules/
+      pagePath,
+      `<script lang="ts">
+  import { onMount } from 'svelte';
+  import { tether } from '$lib/tether';
 
-# Build output
-dist/
-.output/
+  interface Post {
+    id: string;
+    title: string;
+    createdAt: string;
+  }
 
-# Generated files
-_generated/
+  let posts: Post[] = [];
+  let isLoading = true;
+  let newPostTitle = '';
+  let isPending = false;
 
-# Environment
-.env
-.env.local
-.env.*.local
+  onMount(async () => {
+    await loadPosts();
+  });
 
-# IDE
-.idea/
-.vscode/
-*.swp
-*.swo
+  async function loadPosts() {
+    isLoading = true;
+    try {
+      posts = await tether.query('posts.list');
+    } catch (e) {
+      console.error('Failed to load posts:', e);
+    } finally {
+      isLoading = false;
+    }
+  }
 
-# OS
-.DS_Store
-Thumbs.db
+  async function handleCreatePost() {
+    if (!newPostTitle.trim()) return;
+    isPending = true;
+    try {
+      await tether.mutation('posts.create', { title: newPostTitle.trim(), content: '' });
+      newPostTitle = '';
+      await loadPosts();
+    } catch (e) {
+      console.error('Failed to create post:', e);
+    } finally {
+      isPending = false;
+    }
+  }
+
+  async function handleDeletePost(id: string) {
+    try {
+      await tether.mutation('posts.remove', { id });
+      await loadPosts();
+    } catch (e) {
+      console.error('Failed to delete post:', e);
+    }
+  }
+
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  }
+</script>
+
+<main>
+  <div class="container">
+    <header>
+      <h1>Welcome to Tether</h1>
+      <p>Realtime SQLite for modern apps</p>
+    </header>
+
+    <section class="demo">
+      <h2>Try it out</h2>
+      <p class="intro">Create posts in realtime. Open in multiple tabs to see live updates!</p>
+
+      <form on:submit|preventDefault={handleCreatePost}>
+        <input
+          type="text"
+          bind:value={newPostTitle}
+          placeholder="Enter a post title..."
+          disabled={isPending}
+        />
+        <button type="submit" disabled={!newPostTitle.trim() || isPending}>
+          {isPending ? 'Creating...' : 'Create Post'}
+        </button>
+      </form>
+
+      <div class="posts">
+        {#if isLoading}
+          <p class="empty">Loading posts...</p>
+        {:else if posts.length}
+          {#each posts as post (post.id)}
+            <article>
+              <div class="content">
+                <h3>{post.title}</h3>
+                <time>{formatDate(post.createdAt)}</time>
+              </div>
+              <button class="delete" on:click={() => handleDeletePost(post.id)}>
+                Delete
+              </button>
+            </article>
+          {/each}
+        {:else}
+          <p class="empty">No posts yet. Create your first one above!</p>
+        {/if}
+      </div>
+    </section>
+
+    <footer>
+      Built with Tether by <a href="https://strands.gg">Strands Services</a>
+    </footer>
+  </div>
+</main>
+
+<style>
+  main {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+    color: #e4e4e7;
+    font-family: system-ui, sans-serif;
+    padding: 2rem;
+  }
+
+  .container {
+    max-width: 640px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  header {
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 0 0.5rem;
+  }
+
+  header p {
+    color: #a1a1aa;
+    margin: 0;
+  }
+
+  .demo {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    padding: 1.5rem;
+  }
+
+  .demo h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+  }
+
+  .intro {
+    color: #a1a1aa;
+    font-size: 0.875rem;
+    margin: 0 0 1rem;
+  }
+
+  form {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    color: #e4e4e7;
+    font-size: 0.875rem;
+  }
+
+  input:focus {
+    outline: none;
+    border-color: #6366f1;
+  }
+
+  button {
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    border: none;
+    border-radius: 0.5rem;
+    color: white;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .posts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-height: 100px;
+  }
+
+  .empty {
+    color: #71717a;
+    text-align: center;
+    padding: 2rem;
+  }
+
+  article {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem 1rem;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 0.5rem;
+  }
+
+  .content h3 {
+    margin: 0 0 0.25rem;
+    font-size: 0.9375rem;
+  }
+
+  .content time {
+    font-size: 0.75rem;
+    color: #71717a;
+  }
+
+  .delete {
+    padding: 0.5rem 1rem;
+    background: transparent;
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: #fca5a5;
+    font-size: 0.75rem;
+  }
+
+  .delete:hover {
+    background: rgba(239, 68, 68, 0.1);
+  }
+
+  footer {
+    text-align: center;
+    color: #52525b;
+    font-size: 0.8125rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    padding-top: 1rem;
+  }
+
+  footer a {
+    color: #6366f1;
+    text-decoration: none;
+  }
+</style>
 `
     );
-    spinner.text = "Fetching latest package versions...";
-    const [
-      tthrClientVersion,
-      tthrSchemaVersion,
-      tthrServerVersion,
-      tthrCliVersion,
-      typescriptVersion,
-      tsxVersion
-    ] = await Promise.all([
-      getLatestVersion("@tthr/client"),
-      getLatestVersion("@tthr/schema"),
-      getLatestVersion("@tthr/server"),
-      getLatestVersion("@tthr/cli"),
-      getLatestVersion("typescript"),
-      getLatestVersion("tsx")
-    ]);
-    const dependencies = {
-      "@tthr/client": tthrClientVersion,
-      "@tthr/schema": tthrSchemaVersion,
-      "@tthr/server": tthrServerVersion
-    };
-    if (template === "vue") {
-      const [tthrVueVersion, vueVersion] = await Promise.all([
-        getLatestVersion("@tthr/vue"),
-        getLatestVersion("vue")
-      ]);
-      dependencies["@tthr/vue"] = tthrVueVersion;
-      dependencies["vue"] = vueVersion;
-    } else if (template === "react") {
-      const [tthrReactVersion, reactVersion, reactDomVersion] = await Promise.all([
-        getLatestVersion("@tthr/react"),
-        getLatestVersion("react"),
-        getLatestVersion("react-dom")
-      ]);
-      dependencies["@tthr/react"] = tthrReactVersion;
-      dependencies["react"] = reactVersion;
-      dependencies["react-dom"] = reactDomVersion;
-    } else if (template === "svelte") {
-      const [tthrSvelteVersion, svelteVersion] = await Promise.all([
-        getLatestVersion("@tthr/svelte"),
-        getLatestVersion("svelte")
-      ]);
-      dependencies["@tthr/svelte"] = tthrSvelteVersion;
-      dependencies["svelte"] = svelteVersion;
-    }
-    const packageJson = {
-      name: projectName,
-      version: "0.0.1",
-      private: true,
-      type: "module",
-      scripts: {
-        "dev": "tthr dev",
-        "generate": "tthr generate",
-        "migrate": "tthr migrate",
-        "seed": "tsx tether/seed.ts"
-      },
-      dependencies,
-      devDependencies: {
-        "@tthr/cli": tthrCliVersion,
-        "typescript": typescriptVersion,
-        "tsx": tsxVersion
-      }
-    };
-    await fs2.writeJSON(path2.join(projectPath, "package.json"), packageJson, { spaces: 2 });
-    await fs2.writeJSON(
-      path2.join(projectPath, "tsconfig.json"),
-      {
-        compilerOptions: {
-          target: "ES2022",
-          module: "ESNext",
-          moduleResolution: "bundler",
-          strict: true,
-          esModuleInterop: true,
-          skipLibCheck: true,
-          forceConsistentCasingInFileNames: true,
-          paths: {
-            "@/*": ["./*"]
-          }
-        },
-        include: ["**/*.ts"],
-        exclude: ["node_modules", "dist"]
-      },
-      { spaces: 2 }
+  }
+}
+async function runInitialMigration(projectPath, projectId, apiKey) {
+  const migrationSql = `
+    CREATE TABLE IF NOT EXISTS posts (
+      id TEXT PRIMARY KEY,
+      title TEXT NOT NULL,
+      content TEXT,
+      authorId TEXT NOT NULL,
+      createdAt TEXT NOT NULL DEFAULT (datetime('now')),
+      updatedAt TEXT NOT NULL DEFAULT (datetime('now'))
     );
-    spinner.succeed("Project structure created");
-    console.log("\n" + chalk2.green("\u2713") + " Project created successfully!\n");
-    console.log("Next steps:\n");
-    console.log(chalk2.cyan(`  cd ${projectName}`));
-    console.log(chalk2.cyan("  npm install"));
-    console.log(chalk2.cyan("  npm run dev"));
-    console.log("\n" + chalk2.dim("For more information, visit https://tthr.io/docs\n"));
-  } catch (error) {
-    spinner.fail("Failed to create project");
-    console.error(chalk2.red(error instanceof Error ? error.message : "Unknown error"));
-    process.exit(1);
+
+    CREATE TABLE IF NOT EXISTS comments (
+      id TEXT PRIMARY KEY,
+      postId TEXT NOT NULL REFERENCES posts(id),
+      content TEXT NOT NULL,
+      authorId TEXT NOT NULL,
+      createdAt TEXT NOT NULL DEFAULT (datetime('now'))
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_posts_authorId ON posts(authorId);
+    CREATE INDEX IF NOT EXISTS idx_posts_createdAt ON posts(createdAt);
+    CREATE INDEX IF NOT EXISTS idx_comments_postId ON comments(postId);
+  `;
+  try {
+    const response = await fetch(`${API_URL}/${projectId}/mutation`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${apiKey}`
+      },
+      body: JSON.stringify({
+        function: "_migrate",
+        args: { sql: migrationSql }
+      })
+    });
+    if (!response.ok) {
+    }
+  } catch {
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tthr/cli",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Tether CLI - project scaffolding, migrations, and deployment",
   "type": "module",
   "bin": {