@percepta/create 3.1.0 → 3.1.3

package/templates/webapp/scripts/migrate.ts

@@ -6,10 +6,13 @@ async function main(): Promise<void> {
   loadEnvConfig(process.cwd());
 
   // Dynamically load because we need to load the environment variables before importing modules that depend on them.
+  const { getEnvConfig } = await import("../src/config/getEnvConfig");
   const { client } = await import("../src/drizzle/db");
+  const { DATABASE_SCHEMA: databaseSchema } = getEnvConfig();
 
   await migrate(drizzle(client), {
     migrationsFolder: "./src/drizzle/migrations",
+    ...(databaseSchema ? { migrationsSchema: databaseSchema } : {}),
   });
 
   await client.end();

package/templates/webapp/scripts/open-ryvn-deploy-pr.ts

@@ -1,37 +1,60 @@
 #!/usr/bin/env tsx
-/* eslint-disable no-console, n/no-process-env */
+/* eslint-disable n/no-process-env */
 
 import { execFileSync } from "node:child_process";
 import { existsSync } from "node:fs";
 import { appendFile, mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { createInterface } from "node:readline/promises";
 import { stdin as input, stdout as output } from "node:process";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath } from "node:url";
 
 const APP_NAME = "__APP_NAME__";
 const DATABASE_SCHEMA = "__APP_NAME_SNAKE__";
 const ENVIRONMENT = "percepta-test";
 const INFRA_REMOTE = "git@github.com:Percepta-Core/infra.git";
 
+type DeployPhase = "service" | "installation";
+
 interface Options {
   infraPath?: string;
   yes: boolean;
   noClone: boolean;
+  phase: DeployPhase;
 }
 
 function parseArgs(argv: string[]): Options {
   const options: Options = {
     yes: false,
     noClone: false,
+    phase: "service",
   };
 
   for (let index = 0; index < argv.length; index++) {
     const arg = argv[index];
-    if (arg === "--yes" || arg === "-y") {
+    if (arg === "--") {
+      continue;
+    } else if (arg === "--yes" || arg === "-y") {
       options.yes = true;
     } else if (arg === "--no-clone") {
       options.noClone = true;
+    } else if (arg === "--service") {
+      options.phase = "service";
+    } else if (arg === "--installation" || arg === "--install") {
+      options.phase = "installation";
+    } else if (arg === "--phase") {
+      const value = argv[index + 1];
+      if (!value) throw new Error("--phase requires service or installation");
+      if (value === "service") {
+        options.phase = "service";
+      } else if (value === "installation" || value === "install") {
+        options.phase = "installation";
+      } else {
+        throw new Error(
+          `Invalid --phase value "${value}". Use service or installation.`,
+        );
+      }
+      index++;
     } else if (arg === "--infra") {
       const value = argv[index + 1];
       if (!value) throw new Error("--infra requires a path");
@@ -135,7 +158,9 @@ async function resolveInfraRepo(
       `Infra repo not found. Clone Percepta-Core/infra to ${infraPath}?`,
     );
     if (!shouldClone) {
-      throw new Error("Skipped cloning infra repo. Re-run with --infra <path>.");
+      throw new Error(
+        "Skipped cloning infra repo. Re-run with --infra <path>.",
+      );
     }
   }
 
@@ -155,8 +180,14 @@ function assertCleanGitWorktree(repoPath: string): void {
   );
 }
 
-function switchDeployBranch(repoPath: string): string {
-  const branchName = `deploy/${APP_NAME}-${ENVIRONMENT}`;
+function getDeployBranchName(phase: DeployPhase): string {
+  return phase === "service"
+    ? `deploy/${APP_NAME}-${ENVIRONMENT}-service`
+    : `deploy/${APP_NAME}-${ENVIRONMENT}-installation`;
+}
+
+function switchDeployBranch(repoPath: string, phase: DeployPhase): string {
+  const branchName = getDeployBranchName(phase);
   const currentBranch = run(
     "git",
     ["branch", "--show-current"],
@@ -165,6 +196,8 @@ function switchDeployBranch(repoPath: string): string {
   );
   if (currentBranch === branchName) return branchName;
 
+  run("git", ["fetch", "origin", "main"], repoPath);
+
   let branchExists = false;
   try {
     run("git", ["rev-parse", "--verify", branchName], repoPath, "pipe");
@@ -176,7 +209,7 @@ function switchDeployBranch(repoPath: string): string {
   if (branchExists) {
     run("git", ["switch", branchName], repoPath);
   } else {
-    run("git", ["switch", "-c", branchName], repoPath);
+    run("git", ["switch", "-c", branchName, "origin/main"], repoPath);
   }
 
   return branchName;
@@ -199,6 +232,7 @@ async function writeIfChanged(
 async function copyDeployYaml(
   packageDir: string,
   infraRepo: string,
+  phase: DeployPhase,
 ): Promise<string[]> {
   const serviceSource = path.join(
     packageDir,
@@ -216,7 +250,11 @@ async function copyDeployYaml(
     `${APP_NAME}.env.${ENVIRONMENT}.serviceinstallation.yaml`,
   );
 
-  const serviceTarget = path.join(infraRepo, "ryvn", `${APP_NAME}.service.yaml`);
+  const serviceTarget = path.join(
+    infraRepo,
+    "ryvn",
+    `${APP_NAME}.service.yaml`,
+  );
   const installationTarget = path.join(
     infraRepo,
     "ryvn",
@@ -227,14 +265,18 @@ async function copyDeployYaml(
   );
 
   const changed: string[] = [];
-  if (await writeIfChanged(serviceTarget, await readFile(serviceSource, "utf8"))) {
+  if (
+    phase === "service" &&
+    (await writeIfChanged(serviceTarget, await readFile(serviceSource, "utf8")))
+  ) {
     changed.push(path.relative(infraRepo, serviceTarget));
   }
   if (
-    await writeIfChanged(
+    phase === "installation" &&
+    (await writeIfChanged(
       installationTarget,
       await readFile(installationSource, "utf8"),
-    )
+    ))
   ) {
     changed.push(path.relative(infraRepo, installationTarget));
   }
@@ -300,10 +342,89 @@ function getPrUrl(repoPath: string, branchName: string): string | null {
   }
 }
 
+function getPrTitle(phase: DeployPhase): string {
+  return phase === "service"
+    ? `Add ${APP_NAME} ${ENVIRONMENT} service`
+    : `Install ${APP_NAME} in ${ENVIRONMENT}`;
+}
+
+function getPrBody(phase: DeployPhase): string {
+  if (phase === "service") {
+    return [
+      `Adds the Ryvn service for ${APP_NAME}.`,
+      "",
+      `Also creates the ${DATABASE_SCHEMA} schema in the shared demos database.`,
+      "",
+      "After merge:",
+      "1. Let GitOps import the service.",
+      "2. Approve/apply the percepta-internal Terraform task if one is created.",
+      "3. Push the app to main or run the release workflow so Ryvn has a first release.",
+      `4. Open the installation PR with pnpm deploy:percepta-test:pr -- --phase installation --yes.`,
+    ].join("\n");
+  }
+
+  return [
+    `Adds the ${ENVIRONMENT} ServiceInstallation for ${APP_NAME}.`,
+    "",
+    "Pre-merge checklist:",
+    "1. The Ryvn Service exists from the service/schema PR.",
+    "2. At least one Ryvn release exists for this service.",
+    "",
+    "After merge, import deploy/ryvn/percepta-test.secrets.env in the Ryvn UI for the installation secrets.",
+  ].join("\n");
+}
+
+function printNextSteps(phase: DeployPhase): void {
+  if (phase === "service") {
+    console.log("");
+    console.log("Next:");
+    console.log("1. Merge the service/schema PR.");
+    console.log("2. Wait for GitOps to import the service.");
+    console.log(
+      "3. Approve/apply the percepta-internal Terraform task if one is created.",
+    );
+    console.log("4. Push the app to main or run the release workflow.");
+    console.log(
+      "5. Run: pnpm deploy:percepta-test:pr -- --phase installation --yes",
+    );
+    return;
+  }
+
+  console.log("");
+  console.log("Next:");
+  console.log("1. Merge the installation PR.");
+  console.log("2. Let GitOps import the ServiceInstallation.");
+  console.log(
+    "3. Import deploy/ryvn/percepta-test.secrets.env in the Ryvn UI.",
+  );
+  console.log(
+    "4. Verify health with: ryvn get installation __APP_NAME__ -e percepta-test",
+  );
+}
+
+async function confirmInstallationPrerequisites(
+  options: Options,
+): Promise<void> {
+  if (options.phase !== "installation" || options.yes) return;
+
+  const message =
+    "Before opening the installation PR, confirm the service exists, " +
+    "and a first Ryvn release exists. Continue?";
+
+  if (!process.stdin.isTTY) {
+    throw new Error(`${message} Re-run with --yes to confirm.`);
+  }
+
+  if (!(await confirm(message))) {
+    throw new Error("Skipped installation PR.");
+  }
+}
+
 async function main(): Promise<void> {
   const options = parseArgs(process.argv.slice(2));
   assertCommand("git");
   assertCommand("gh");
+  await confirmInstallationPrerequisites(options);
 
   const packageDir = path.resolve(
     path.dirname(fileURLToPath(import.meta.url)),
@@ -314,16 +435,25 @@ async function main(): Promise<void> {
   const infraRepo = await resolveInfraRepo(options, defaultInfraPath);
 
   assertCleanGitWorktree(infraRepo);
-  const branchName = switchDeployBranch(infraRepo);
+  const branchName = switchDeployBranch(infraRepo, options.phase);
 
-  const changedPaths = await copyDeployYaml(packageDir, infraRepo);
-  const schemaPath = await ensureDatabaseSchema(infraRepo);
-  if (schemaPath) changedPaths.push(schemaPath);
+  const changedPaths = await copyDeployYaml(
+    packageDir,
+    infraRepo,
+    options.phase,
+  );
+  if (options.phase === "service") {
+    const schemaPath = await ensureDatabaseSchema(infraRepo);
+    if (schemaPath) changedPaths.push(schemaPath);
+  }
 
   if (changedPaths.length === 0) {
     console.log(
-      "Infra repo already has the generated Ryvn files and database schema.",
+      options.phase === "service"
+        ? "Infra repo already has the generated Ryvn service and database schema."
+        : "Infra repo already has the generated Ryvn installation.",
     );
+    printNextSteps(options.phase);
     return;
   }
 
@@ -333,42 +463,32 @@ async function main(): Promise<void> {
     return;
   }
 
-  run(
-    "git",
-    ["commit", "-m", `Add ${APP_NAME} ${ENVIRONMENT} deployment`],
-    infraRepo,
-  );
+  run("git", ["commit", "-m", getPrTitle(options.phase)], infraRepo);
   run("git", ["push", "-u", "origin", branchName], infraRepo);
 
   const existingPr = getPrUrl(infraRepo, branchName);
   if (existingPr) {
     console.log(`Infra PR: ${existingPr}`);
+    printNextSteps(options.phase);
     return;
   }
 
-  const body = [
-    `Adds the Ryvn service and ${ENVIRONMENT} installation for ${APP_NAME}.`,
-    "",
-    `Also creates the ${DATABASE_SCHEMA} schema in the shared demos database.`,
-    "",
-    "After merge, Ryvn GitOps should create the installation and the release workflow can deploy the app.",
-  ].join("\n");
-
   const prUrl = run(
     "gh",
     [
       "pr",
       "create",
       "--title",
-      `Add ${APP_NAME} ${ENVIRONMENT} deployment`,
+      getPrTitle(options.phase),
       "--body",
-      body,
+      getPrBody(options.phase),
     ],
     infraRepo,
     "pipe",
   );
 
   console.log(`Infra PR: ${prUrl}`);
+  printNextSteps(options.phase);
 }
 
 void main().catch((error) => {

package/templates/webapp/scripts/seed.ts

@@ -18,7 +18,7 @@ const DEFAULT_USER = {
 
 async function main(): Promise<void> {
   loadEnvConfig(process.cwd());
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
   (globalThis as any).AsyncLocalStorage = AsyncLocalStorage;
 
   const { auth } = await import("../src/lib/auth");

package/templates/webapp/scripts/setup-database.ts

@@ -1,6 +1,7 @@
 import { loadEnvConfig } from "@next/env";
 import { Pool } from "pg";
 import { getEnvConfig } from "../src/config/getEnvConfig";
+import { getPgSslConfig } from "../src/drizzle/ssl";
 
 const SHARED_DATABASES = new Set(["demos", "internal_apps"]);
 
@@ -39,7 +40,7 @@ async function main(): Promise<void> {
     user,
     password,
     database: "postgres", // Connect to default postgres database
-    ssl: useSSL,
+    ssl: getPgSslConfig(useSSL),
   });
 
   try {

package/templates/webapp/scripts/start.sh

@@ -17,8 +17,9 @@ echo "Running database migrations..."
 if pnpm db:setup-and-migrate; then
     echo "✅ Database migrations completed successfully"
 else
-    echo "❌ Database migration failed. App will start anyway."
+    echo "❌ Database migration failed. App will not start."
     echo "Check your database configuration and connectivity."
+    exit 1
 fi
 
 # Setup readonly database user for EDW (only if READONLY_SECRET_NAME is set)
@@ -49,4 +50,4 @@ fi
 
 # Start the Next.js application
 echo "Starting Next.js server on port ${PORT:-3000}..."
-exec pnpm start
+exec pnpm start

package/templates/webapp/scripts/with-local-env.ts

@@ -0,0 +1,75 @@
+#!/usr/bin/env tsx
+
+import { spawn } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import path from "node:path";
+
+type EnvMap = Record<string, string>;
+
+const LOCAL_ENV_PATH = path.join(
+  homedir(),
+  ".config",
+  "percepta",
+  "create.env",
+);
+
+function parseEnvFile(filePath: string): EnvMap {
+  if (!existsSync(filePath)) return {};
+
+  const env: EnvMap = {};
+  const content = readFileSync(filePath, "utf8");
+  for (const rawLine of content.split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (!line || line.startsWith("#")) continue;
+
+    const normalized = line.startsWith("export ") ? line.slice(7).trim() : line;
+    const separatorIndex = normalized.indexOf("=");
+    if (separatorIndex === -1) continue;
+
+    const key = normalized.slice(0, separatorIndex).trim();
+    const rawValue = normalized.slice(separatorIndex + 1).trim();
+    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) continue;
+
+    env[key] = unquote(rawValue);
+  }
+
+  return env;
+}
+
+function unquote(value: string): string {
+  if (
+    (value.startsWith('"') && value.endsWith('"')) ||
+    (value.startsWith("'") && value.endsWith("'"))
+  ) {
+    return value.slice(1, -1);
+  }
+
+  return value;
+}
+
+const [command, ...args] = process.argv.slice(2);
+if (!command) {
+  throw new Error("Usage: tsx scripts/with-local-env.ts <command> [...args]");
+}
+
+const child = spawn(command, args, {
+  env: {
+    ...parseEnvFile(LOCAL_ENV_PATH),
+    ...process.env,
+  },
+  stdio: "inherit",
+});
+
+child.on("error", (error) => {
+  throw error;
+});
+
+child.on("exit", (code, signal) => {
+  if (signal) {
+    process.kill(process.pid, signal);
+    return;
+  }
+
+  process.exit(code ?? 1);
+});

package/templates/webapp/src/app/(app)/layout.tsx

@@ -1,11 +1,7 @@
 import React from "react";
 import Header from "../../components/Header";
 
-export default function AppLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />

package/templates/webapp/src/app/(auth)/auth/signin/CredentialsSignInForm.tsx

@@ -2,14 +2,15 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Input } from "@percepta/design";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import z from "zod";
 import { FormItem } from "../../../../components/form/FormItem";
-import { authClient } from "../../../../lib/auth-client";
 import { IS_DEV } from "../../../../config/isDev";
+import { authClient } from "../../../../lib/auth-client";
 
 const CREDENTIALS_SCHEMA = z.object({
   email: z.string().min(1, "Email is required"),
@@ -66,6 +67,15 @@ export function CredentialsSignInForm() {
     <div className="space-y-8">
       <div className="text-center">
         <h1 className="text-2xl font-bold text-foreground">Sign In</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Need an account?{" "}
+          <Link
+            className="font-medium text-primary underline-offset-4 hover:underline"
+            href={`/auth/signup?callbackUrl=${encodeURIComponent(callbackUrl)}`}
+          >
+            Create one
+          </Link>
+        </p>
       </div>
       <form className="space-y-6" onSubmit={handleSubmit(submit)}>
         <div className="space-y-4">

package/templates/webapp/src/app/(auth)/auth/signup/CredentialsSignUpForm.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input } from "@percepta/design";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useCallback } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
+import { FormItem } from "../../../../components/form/FormItem";
+import { authClient } from "../../../../lib/auth-client";
+
+const CREDENTIALS_SCHEMA = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.string().email("Enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+type Credentials = z.infer<typeof CREDENTIALS_SCHEMA>;
+
+export function CredentialsSignUpForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+  } = useForm<Credentials>({
+    resolver: zodResolver(CREDENTIALS_SCHEMA),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/";
+
+  const submit = useCallback(
+    async ({ name, email, password }: Credentials): Promise<void> => {
+      const { error } = await authClient.signUp.email({
+        name,
+        email,
+        password,
+        callbackURL: callbackUrl,
+      });
+
+      if (error != null) {
+        toast.error(error.message ?? "Unable to create account.");
+        return;
+      }
+
+      router.push(callbackUrl);
+      router.refresh();
+    },
+    [callbackUrl, router],
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-foreground">Create Account</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link
+            className="font-medium text-primary underline-offset-4 hover:underline"
+            href={`/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`}
+          >
+            Sign in
+          </Link>
+        </p>
+      </div>
+      <form className="space-y-6" onSubmit={handleSubmit(submit)}>
+        <div className="space-y-4">
+          <Controller
+            control={control}
+            name="name"
+            render={({ field, fieldState }) => (
+              <FormItem label="Name" fieldState={fieldState}>
+                <Input {...field} autoComplete="name" />
+              </FormItem>
+            )}
+          />
+          <Controller
+            control={control}
+            name="email"
+            render={({ field, fieldState }) => (
+              <FormItem label="Email" fieldState={fieldState}>
+                <Input {...field} type="email" autoComplete="email" />
+              </FormItem>
+            )}
+          />
+          <Controller
+            control={control}
+            name="password"
+            render={({ field, fieldState }) => (
+              <FormItem label="Password" fieldState={fieldState}>
+                <Input {...field} type="password" autoComplete="new-password" />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="flex justify-end">
+          <Button type="submit" loading={isSubmitting}>
+            Create Account
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/templates/webapp/src/app/(auth)/auth/signup/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { auth } from "../../../../lib/auth";
+import { CredentialsSignUpForm } from "./CredentialsSignUpForm";
+
+export const metadata: Metadata = {
+  title: "Create Account — __APP_TITLE__",
+};
+
+export default async function SignUpPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (session?.user != null) {
+    redirect("/");
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <p className="text-center text-sm text-muted-foreground">Loading...</p>
+      }
+    >
+      <CredentialsSignUpForm />
+    </Suspense>
+  );
+}

package/templates/webapp/src/app/global-error.tsx

@@ -18,7 +18,7 @@ export default function GlobalError({
 
   return (
     <html lang="en">
-      <body suppressHydrationWarning>
+      <body suppressHydrationWarning={true}>
         <div style={{ padding: "2rem", textAlign: "center" }}>
           <h1>Something went wrong</h1>
           <button onClick={() => reset()}>Try again</button>

package/templates/webapp/src/components/FaroProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Alert, AlertDescription, AlertTitle, Button } from "@percepta/design";
 import { FaroProvider as BaseFaroProvider } from "@percepta/next-utils/faro";
-import { Alert, AlertTitle, AlertDescription, Button } from "@percepta/design";
 import { type ReactNode } from "react";
 
 // Import to trigger Faro initialization at module scope (earliest possible)
@@ -9,9 +9,7 @@ import "../services/observability/initFaro";
 
 export function AppFaroProvider({ children }: { children: ReactNode }) {
   return (
-    <BaseFaroProvider fallback={<ErrorFallback />}>
-      {children}
-    </BaseFaroProvider>
+    <BaseFaroProvider fallback={<ErrorFallback />}>{children}</BaseFaroProvider>
   );
 }