@geekmidas/cli 0.54.0 → 1.0.1

package/src/init/generators/web.ts

@@ -11,6 +11,7 @@ export function generateWebAppFiles(options: TemplateOptions): GeneratedFile[] {
 
 	const packageName = `@${options.name}/web`;
 	const modelsPackage = `@${options.name}/models`;
+	const uiPackage = `@${options.name}/ui`;
 
 	// package.json for web app
 	const packageJson = {
@@ -19,23 +20,28 @@ export function generateWebAppFiles(options: TemplateOptions): GeneratedFile[] {
 		private: true,
 		type: 'module',
 		scripts: {
-			dev: 'next dev -p 3001',
-			build: 'next build',
+			dev: 'gkm exec -- next dev --turbopack',
+			build: 'gkm exec -- next build',
 			start: 'next start',
 			typecheck: 'tsc --noEmit',
 		},
 		dependencies: {
 			[modelsPackage]: 'workspace:*',
+			[uiPackage]: 'workspace:*',
 			'@geekmidas/client': GEEKMIDAS_VERSIONS['@geekmidas/client'],
 			'@tanstack/react-query': '~5.80.0',
+			'better-auth': '~1.2.0',
 			next: '~16.1.0',
 			react: '~19.2.0',
 			'react-dom': '~19.2.0',
 		},
 		devDependencies: {
+			'@geekmidas/cli': GEEKMIDAS_VERSIONS['@geekmidas/cli'],
+			'@tailwindcss/postcss': '^4.0.0',
 			'@types/node': '~22.0.0',
 			'@types/react': '~19.0.0',
 			'@types/react-dom': '~19.0.0',
+			tailwindcss: '^4.0.0',
 			typescript: '~5.8.2',
 		},
 	};
@@ -46,10 +52,18 @@ export function generateWebAppFiles(options: TemplateOptions): GeneratedFile[] {
 const nextConfig: NextConfig = {
   output: 'standalone',
   reactStrictMode: true,
-  transpilePackages: ['${modelsPackage}'],
+  transpilePackages: ['${modelsPackage}', '${uiPackage}'],
 };
 
 export default nextConfig;
+`;
+
+	// postcss.config.mjs for Tailwind v4
+	const postcssConfig = `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
 `;
 
 	// tsconfig.json for Next.js
@@ -75,9 +89,11 @@ export default nextConfig;
 				},
 			],
 			paths: {
-				'@/*': ['./src/*'],
+				'~/*': ['./src/*'],
 				[`${modelsPackage}`]: ['../../packages/models/src'],
 				[`${modelsPackage}/*`]: ['../../packages/models/src/*'],
+				[`${uiPackage}`]: ['../../packages/ui/src'],
+				[`${uiPackage}/*`]: ['../../packages/ui/src/*'],
 			},
 			baseUrl: '.',
 		},
@@ -85,23 +101,52 @@ export default nextConfig;
 		exclude: ['node_modules'],
 	};
 
-	// Providers with QueryClient
+	// Query client singleton for browser, fresh instance for server
+	const queryClientTs = `import { QueryClient } from '@tanstack/react-query';
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+export function getQueryClient() {
+  if (typeof window === 'undefined') {
+    // Server: always make a new query client
+    return makeQueryClient();
+  }
+  // Browser: reuse existing query client
+  if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  return browserQueryClient;
+}
+`;
+
+	// Auth client for better-auth
+	const authClientTs = `import { createAuthClient } from 'better-auth/react';
+import { magicLinkClient } from 'better-auth/client/plugins';
+
+export const authClient = createAuthClient({
+  baseURL: process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:3002',
+  plugins: [magicLinkClient()],
+});
+
+export const { signIn, signUp, signOut, useSession, magicLink } = authClient;
+`;
+
+	// Providers using shared QueryClient
 	const providersTsx = `'use client';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useState } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { getQueryClient } from '~/lib/query-client';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 60 * 1000,
-          },
-        },
-      }),
-  );
+  const queryClient = getQueryClient();
 
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
@@ -109,49 +154,24 @@ export function Providers({ children }: { children: React.ReactNode }) {
 }
 `;
 
-	// API client setup
-	const apiIndexTs = `import { TypedFetcher } from '@geekmidas/client/fetcher';
-import { createEndpointHooks } from '@geekmidas/client/endpoint-hooks';
-
-// TODO: Run 'gkm openapi' to generate typed paths from your API
-// This is a placeholder that will be replaced by the generated openapi.ts
-interface paths {
-  '/health': {
-    get: {
-      responses: {
-        200: {
-          content: {
-            'application/json': { status: string; timestamp: string };
-          };
-        };
-      };
-    };
-  };
-  '/users': {
-    get: {
-      responses: {
-        200: {
-          content: {
-            'application/json': { users: Array<{ id: string; name: string }> };
-          };
-        };
-      };
-    };
-  };
-}
-
-const baseURL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+	// API client setup - uses createApi with shared QueryClient
+	const apiIndexTs = `import { createApi } from './openapi';
+import { getQueryClient } from '~/lib/query-client';
 
-const fetcher = new TypedFetcher<paths>({ baseURL });
-
-const hooks = createEndpointHooks<paths>(fetcher.request.bind(fetcher));
+export const api = createApi({
+  baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000',
+  queryClient: getQueryClient(),
+});
+`;
 
-export const api = Object.assign(fetcher.request.bind(fetcher), hooks);
+	// globals.css that imports UI package styles
+	const globalsCss = `@import '${uiPackage}/styles';
 `;
 
 	// App layout
 	const layoutTsx = `import type { Metadata } from 'next';
 import { Providers } from './providers';
+import './globals.css';
 
 export const metadata: Metadata = {
   title: '${options.name}',
@@ -173,45 +193,60 @@ export default function RootLayout({
 }
 `;
 
-	// Home page with API example
-	const pageTsx = `import { api } from '@/api';
+	// Home page with API example using UI components
+	const pageTsx = `import { api } from '~/api';
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '${uiPackage}/components';
 
 export default async function Home() {
   // Type-safe API call using the generated client
   const health = await api('GET /health').catch(() => null);
 
   return (
-    <main style={{ padding: '2rem', fontFamily: 'system-ui' }}>
-      <h1>Welcome to ${options.name}</h1>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>API Status</h2>
-        {health ? (
-          <pre style={{ background: '#f0f0f0', padding: '1rem', borderRadius: '8px' }}>
-            {JSON.stringify(health, null, 2)}
-          </pre>
-        ) : (
-          <p>Unable to connect to API</p>
-        )}
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Next Steps</h2>
-        <ul>
-          <li>Run <code>gkm openapi</code> to generate typed API client</li>
-          <li>Edit <code>apps/web/src/app/page.tsx</code> to customize this page</li>
-          <li>Add API routes in <code>apps/api/src/endpoints/</code></li>
-          <li>Define shared schemas in <code>packages/models/src/</code></li>
-        </ul>
-      </section>
+    <main className="min-h-screen bg-background p-8">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <div className="space-y-2">
+          <h1 className="text-4xl font-bold tracking-tight">Welcome to ${options.name}</h1>
+          <p className="text-muted-foreground">Your fullstack application is ready.</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>API Status</CardTitle>
+            <CardDescription>Connection to your backend API</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {health ? (
+              <pre className="rounded-lg bg-muted p-4 text-sm">
+                {JSON.stringify(health, null, 2)}
+              </pre>
+            ) : (
+              <p className="text-destructive">Unable to connect to API</p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Next Steps</CardTitle>
+            <CardDescription>Get started with your project</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <ul className="list-inside list-disc space-y-2 text-muted-foreground">
+              <li>Run <code className="rounded bg-muted px-1">gkm openapi</code> to generate typed API client</li>
+              <li>Edit <code className="rounded bg-muted px-1">apps/web/src/app/page.tsx</code> to customize this page</li>
+              <li>Add API routes in <code className="rounded bg-muted px-1">apps/api/src/endpoints/</code></li>
+              <li>Add UI components with <code className="rounded bg-muted px-1">npx shadcn@latest add</code> in packages/ui</li>
+            </ul>
+            <div className="flex gap-4">
+              <Button>Get Started</Button>
+              <Button variant="outline">Documentation</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
     </main>
   );
 }
-`;
-
-	// Environment file for web app
-	const envLocal = `# API URL for client-side requests
-NEXT_PUBLIC_API_URL=http://localhost:3000
 `;
 
 	// .gitignore for Next.js
@@ -230,10 +265,18 @@ node_modules/
 			path: 'apps/web/next.config.ts',
 			content: nextConfig,
 		},
+		{
+			path: 'apps/web/postcss.config.mjs',
+			content: postcssConfig,
+		},
 		{
 			path: 'apps/web/tsconfig.json',
 			content: `${JSON.stringify(tsConfig, null, 2)}\n`,
 		},
+		{
+			path: 'apps/web/src/app/globals.css',
+			content: globalsCss,
+		},
 		{
 			path: 'apps/web/src/app/layout.tsx',
 			content: layoutTsx,
@@ -247,12 +290,16 @@ node_modules/
 			content: pageTsx,
 		},
 		{
-			path: 'apps/web/src/api/index.ts',
-			content: apiIndexTs,
+			path: 'apps/web/src/lib/query-client.ts',
+			content: queryClientTs,
 		},
 		{
-			path: 'apps/web/.env.local',
-			content: envLocal,
+			path: 'apps/web/src/lib/auth-client.ts',
+			content: authClientTs,
+		},
+		{
+			path: 'apps/web/src/api/index.ts',
+			content: apiIndexTs,
 		},
 		{
 			path: 'apps/web/.gitignore',

package/src/init/index.ts

@@ -17,6 +17,7 @@ import { generateModelsPackage } from './generators/models.js';
 import { generateMonorepoFiles } from './generators/monorepo.js';
 import { generatePackageJson } from './generators/package.js';
 import { generateSourceFiles } from './generators/source.js';
+import { generateUiPackageFiles } from './generators/ui.js';
 import { generateWebAppFiles } from './generators/web.js';
 import {
 	type DeployTarget,
@@ -294,6 +295,11 @@ export async function initCommand(
 	// Collect auth app files for fullstack template
 	const authAppFiles = isFullstack ? generateAuthAppFiles(templateOptions) : [];
 
+	// Collect UI package files for fullstack template
+	const uiPackageFiles = isFullstack
+		? generateUiPackageFiles(templateOptions)
+		: [];
+
 	// Write root files (for monorepo)
 	for (const { path, content } of rootFiles) {
 		const fullPath = join(targetDir, path);
@@ -329,6 +335,13 @@ export async function initCommand(
 		await writeFile(fullPath, content);
 	}
 
+	// Write UI package files (shared components)
+	for (const { path, content } of uiPackageFiles) {
+		const fullPath = join(targetDir, path);
+		await mkdir(dirname(fullPath), { recursive: true });
+		await writeFile(fullPath, content);
+	}
+
 	// Initialize encrypted secrets for development stage
 	console.log('🔐 Initializing encrypted secrets...\n');
 	const secretServices: ComposeServiceName[] = [];
@@ -359,6 +372,7 @@ export async function initCommand(
 
 		// Auth service secrets (better-auth)
 		customSecrets.AUTH_PORT = '3002';
+		customSecrets.AUTH_URL = 'http://localhost:3002'; // For API app to call auth service
 		customSecrets.BETTER_AUTH_SECRET = `better-auth-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 		customSecrets.BETTER_AUTH_URL = 'http://localhost:3002';
 		customSecrets.BETTER_AUTH_TRUSTED_ORIGINS =
@@ -407,7 +421,9 @@ export async function initCommand(
 		});
 		console.log('  Initialized git repository on branch main');
 	} catch {
-		console.log('  Could not initialize git repository (git may not be installed)');
+		console.log(
+			'  Could not initialize git repository (git may not be installed)',
+		);
 	}
 
 	// Print success message with next steps
@@ -449,7 +465,10 @@ function printNextSteps(
 			console.log(`  │   └── web/          # Next.js frontend`);
 		}
 		console.log(`  ├── packages/`);
-		console.log(`  │   └── models/       # Shared Zod schemas`);
+		console.log(`  │   ├── models/       # Shared Zod schemas`);
+		if (isFullstackTemplate(options.template)) {
+			console.log(`  │   └── ui/           # Shared UI components`);
+		}
 		console.log(`  ├── .gkm/secrets/     # Encrypted secrets`);
 		console.log(`  ├── gkm.config.ts     # Workspace config`);
 		console.log(`  └── turbo.json        # Turbo config`);
@@ -470,6 +489,6 @@ function printNextSteps(
 		console.log('');
 	}
 
-	console.log('📚 Documentation: https://docs.geekmidas.dev');
+	console.log('📚 Documentation: https://geekmidas.github.io/toolbox/');
 	console.log('');
 }

package/src/init/templates/api.ts

@@ -105,7 +105,22 @@ export const config = envParser
 			// health endpoint
 			{
 				path: getRoutePath('health.ts'),
-				content: `import { e } from '@geekmidas/constructs/endpoints';
+				content: monorepo
+					? `import { z } from 'zod';
+import { publicRouter } from '~/router';
+
+export const healthEndpoint = publicRouter
+  .get('/health')
+  .output(z.object({
+    status: z.string(),
+    timestamp: z.string(),
+  }))
+  .handle(async () => ({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+  }));
+`
+					: `import { e } from '@geekmidas/constructs/endpoints';
 import { z } from 'zod';
 
 export const healthEndpoint = e
@@ -163,12 +178,12 @@ export const listUsersEndpoint = e
 				path: getRoutePath('users/get.ts'),
 				content: modelsImport
 					? `import { e } from '@geekmidas/constructs/endpoints';
-import { IdSchema } from '${modelsImport}/common';
+import { IdParamsSchema } from '${modelsImport}/common';
 import { UserResponseSchema } from '${modelsImport}/user';
 
 export const getUserEndpoint = e
   .get('/users/:id')
-  .params({ id: IdSchema })
+  .params(IdParamsSchema)
   .output(UserResponseSchema)
   .handle(async ({ params }) => ({
     id: params.id,
@@ -196,6 +211,97 @@ export const getUserEndpoint = e
 			},
 		];
 
+		// Add auth service for monorepo (calls auth app for session)
+		if (options.monorepo) {
+			files.push({
+				path: 'src/services/auth.ts',
+				content: `import type { Service, ServiceRegisterOptions } from '@geekmidas/services';
+
+export interface Session {
+  user: {
+    id: string;
+    email: string;
+    name: string;
+  };
+}
+
+export interface AuthClient {
+  getSession: (cookie: string) => Promise<Session | null>;
+}
+
+export const authService = {
+  serviceName: 'auth' as const,
+  async register({ envParser, context }: ServiceRegisterOptions) {
+    const logger = context.getLogger();
+
+    const config = envParser
+      .create((get) => ({
+        url: get('AUTH_URL').string(),
+      }))
+      .parse();
+
+    logger.info({ authUrl: config.url }, 'Auth service configured');
+
+    return {
+      getSession: async (cookie: string): Promise<Session | null> => {
+        const res = await fetch(\`\${config.url}/api/auth/get-session\`, {
+          headers: { cookie },
+        });
+        if (!res.ok) return null;
+        return res.json();
+      },
+    };
+  },
+} satisfies Service<'auth', AuthClient>;
+`,
+			});
+
+			// Add router with session
+			files.push({
+				path: 'src/router.ts',
+				content: `import { e } from '@geekmidas/constructs/endpoints';
+import { UnauthorizedError } from '@geekmidas/errors';
+import { authService, type Session } from './services/auth.js';
+import { logger } from './config/logger.js';
+
+// Public router - no auth required
+export const publicRouter = e.logger(logger);
+
+// Router with auth service available (but session not enforced)
+export const r = publicRouter.services([authService]);
+
+// Session router - requires active session, throws if not authenticated
+export const sessionRouter = r.session<Session>(async ({ services, header }) => {
+  const cookie = header('cookie') || '';
+  const session = await services.auth.getSession(cookie);
+
+  if (!session?.user) {
+    throw new UnauthorizedError('No active session');
+  }
+
+  return session;
+});
+`,
+			});
+
+			// Add protected endpoint example
+			files.push({
+				path: getRoutePath('profile.ts'),
+				content: `import { z } from 'zod';
+import { sessionRouter } from '~/router';
+
+export const profileEndpoint = sessionRouter
+  .get('/profile')
+  .output(z.object({
+    id: z.string(),
+    email: z.string(),
+    name: z.string(),
+  }))
+  .handle(async ({ session }) => session.user);
+`,
+			});
+		}
+
 		// Add database service if enabled
 		if (options.database) {
 			files.push({

package/src/init/versions.ts

@@ -1,58 +1,30 @@
-import { createRequire } from 'node:module';
-
-const require = createRequire(import.meta.url);
-
-// Load package.json - handles both bundled (flat dist/) and source (nested src/init/)
-function loadPackageJson(): { version: string } {
-	try {
-		// Try flat dist path first (../package.json from dist/)
-		return require('../package.json');
-	} catch {
-		// Fall back to nested source path (../../package.json from src/init/)
-		return require('../../package.json');
-	}
-}
-
-const pkg = loadPackageJson();
-
-/**
- * CLI version from package.json (used for scaffolded projects)
- */
-export const CLI_VERSION = `~${pkg.version}`;
-
 /**
- * Current released versions of @geekmidas packages
- * Update these when publishing new versions
- * Note: CLI version is read from package.json via CLI_VERSION
+ * Package versions for @geekmidas packages
+ *
+ * AUTO-GENERATED - Do not edit manually
+ * Run: pnpm --filter @geekmidas/cli sync-versions
  */
 export const GEEKMIDAS_VERSIONS = {
-	'@geekmidas/audit': '~0.2.0',
-	'@geekmidas/auth': '~0.2.0',
-	'@geekmidas/cache': '~0.2.0',
-	'@geekmidas/cli': CLI_VERSION,
-	'@geekmidas/client': '~0.5.0',
-	'@geekmidas/cloud': '~0.2.0',
-	'@geekmidas/constructs': '~0.8.0',
-	'@geekmidas/db': '~0.3.0',
-	'@geekmidas/emailkit': '~0.2.0',
-	'@geekmidas/envkit': '~0.7.0',
-	'@geekmidas/errors': '~0.1.0',
-	'@geekmidas/events': '~0.2.0',
-	'@geekmidas/logger': '~0.4.0',
-	'@geekmidas/rate-limit': '~0.3.0',
-	'@geekmidas/schema': '~0.1.0',
-	'@geekmidas/services': '~0.2.0',
-	'@geekmidas/storage': '~0.1.0',
-	'@geekmidas/studio': '~0.4.0',
-	'@geekmidas/telescope': '~0.6.0',
-	'@geekmidas/testkit': '~0.6.0',
-};
+	'@geekmidas/audit': '~1.0.0',
+	'@geekmidas/auth': '~1.0.0',
+	'@geekmidas/cache': '~1.0.0',
+	'@geekmidas/cli': '~1.0.0',
+	'@geekmidas/client': '~1.0.0',
+	'@geekmidas/cloud': '~1.0.0',
+	'@geekmidas/constructs': '~1.0.0',
+	'@geekmidas/db': '~1.0.0',
+	'@geekmidas/emailkit': '~1.0.0',
+	'@geekmidas/envkit': '~1.0.0',
+	'@geekmidas/errors': '~1.0.0',
+	'@geekmidas/events': '~1.0.0',
+	'@geekmidas/logger': '~1.0.0',
+	'@geekmidas/rate-limit': '~1.0.0',
+	'@geekmidas/schema': '~1.0.0',
+	'@geekmidas/services': '~1.0.0',
+	'@geekmidas/storage': '~1.0.0',
+	'@geekmidas/studio': '~1.0.0',
+	'@geekmidas/telescope': '~1.0.0',
+	'@geekmidas/testkit': '~1.0.0',
+} as const;
 
 export type GeekmidasPackage = keyof typeof GEEKMIDAS_VERSIONS;
-
-/**
- * Get the version for a @geekmidas package
- */
-export function getPackageVersion(pkg: GeekmidasPackage): string {
-	return GEEKMIDAS_VERSIONS[pkg]!;
-}