@vibiz/cli 0.0.0-stage → 0.1.0

package/templates/nextjs-saas/components/auth-form.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { type FormEvent, useState } from 'react';
+import { authClient } from '@/lib/auth/client';
+import { Button, Input } from '@/components/ui';
+
+type Mode = 'sign-in' | 'sign-up';
+
+const AFTER_SIGN_IN = '/dashboard';
+
+/**
+ * Email/password and Google. Runs in the browser so requests reach
+ * `/api/auth` with the page's own Origin header, which the sign-in service
+ * checks.
+ */
+export function AuthForm({ mode }: { mode: Mode }) {
+  const router = useRouter();
+  const [pending, setPending] = useState<'email' | 'google' | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setPending('email');
+    const form = new FormData(e.currentTarget);
+    const email = String(form.get('email') ?? '').trim();
+    const password = String(form.get('password') ?? '');
+    const name = String(form.get('name') ?? '').trim() || email.split('@')[0] || email;
+
+    const { error } =
+      mode === 'sign-up'
+        ? await authClient.signUp.email({ name, email, password })
+        : await authClient.signIn.email({ email, password });
+    if (error) {
+      setError(error.message ?? 'Something went wrong. Please try again.');
+      setPending(null);
+      return;
+    }
+    router.push(AFTER_SIGN_IN);
+    router.refresh();
+  }
+
+  async function onGoogle() {
+    setError(null);
+    setPending('google');
+    const { error } = await authClient.signIn.social({
+      provider: 'google',
+      callbackURL: AFTER_SIGN_IN,
+    });
+    // On success the browser is already on its way to Google.
+    if (error) {
+      setError(error.message ?? 'Google sign-in failed. Please try again.');
+      setPending(null);
+    }
+  }
+
+  const isSignUp = mode === 'sign-up';
+
+  return (
+    <div className="w-full max-w-sm">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        {isSignUp ? 'Create your account' : 'Welcome back'}
+      </h1>
+      <p className="mt-1 text-sm text-zinc-600">
+        {isSignUp ? 'It takes less than a minute.' : 'Sign in to continue.'}
+      </p>
+
+      <Button
+        type="button"
+        variant="secondary"
+        className="mt-8 w-full"
+        onClick={onGoogle}
+        disabled={pending !== null}
+      >
+        <GoogleIcon />
+        {pending === 'google' ? 'Redirecting…' : 'Continue with Google'}
+      </Button>
+
+      <div className="my-6 flex items-center gap-3 text-xs text-zinc-400">
+        <span className="h-px flex-1 bg-zinc-200" />
+        or
+        <span className="h-px flex-1 bg-zinc-200" />
+      </div>
+
+      <form onSubmit={onSubmit} className="grid gap-3">
+        {error ? (
+          <p role="alert" className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+            {error}
+          </p>
+        ) : null}
+        {isSignUp ? (
+          <label className="grid gap-1.5 text-sm font-medium">
+            Name
+            <Input name="name" autoComplete="name" placeholder="Ada Lovelace" />
+          </label>
+        ) : null}
+        <label className="grid gap-1.5 text-sm font-medium">
+          Email
+          <Input name="email" type="email" required autoComplete="email" placeholder="you@example.com" />
+        </label>
+        <label className="grid gap-1.5 text-sm font-medium">
+          Password
+          <Input
+            name="password"
+            type="password"
+            required
+            minLength={8}
+            autoComplete={isSignUp ? 'new-password' : 'current-password'}
+            placeholder={isSignUp ? 'At least 8 characters' : ''}
+          />
+        </label>
+        <Button type="submit" className="mt-2 w-full" disabled={pending !== null}>
+          {pending === 'email'
+            ? isSignUp
+              ? 'Creating account…'
+              : 'Signing in…'
+            : isSignUp
+              ? 'Create account'
+              : 'Sign in'}
+        </Button>
+      </form>
+
+      <p className="mt-6 text-center text-sm text-zinc-600">
+        {isSignUp ? 'Already have an account? ' : 'New here? '}
+        <Link href={isSignUp ? '/sign-in' : '/sign-up'} className="font-medium text-brand hover:underline">
+          {isSignUp ? 'Sign in' : 'Create an account'}
+        </Link>
+      </p>
+    </div>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="size-4" aria-hidden="true">
+      <path fill="#4285F4" d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.8z" />
+      <path fill="#34A853" d="M12 24c3.2 0 6-1.1 7.9-2.9l-3.9-3c-1.1.7-2.4 1.2-4 1.2-3.1 0-5.7-2.1-6.6-4.9h-4v3.1A12 12 0 0 0 12 24z" />
+      <path fill="#FBBC05" d="M5.4 14.4a7.2 7.2 0 0 1 0-4.7V6.6h-4a12 12 0 0 0 0 10.8l4-3z" />
+      <path fill="#EA4335" d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.4 6.6l4 3.1C6.3 6.9 8.9 4.8 12 4.8z" />
+    </svg>
+  );
+}

package/templates/nextjs-saas/components/auth-page.tsx

@@ -0,0 +1,30 @@
+import { redirect } from 'next/navigation';
+import { connection } from 'next/server';
+import { AuthForm } from '@/components/auth-form';
+import { Logo } from '@/components/header';
+import { NotConfigured } from '@/components/not-configured';
+import { currentUser } from '@/lib/auth/server';
+import { missingAuthEnv } from '@/lib/env';
+
+export async function AuthPage({ mode }: { mode: 'sign-in' | 'sign-up' }) {
+  await connection(); // read the env per request, never at build time
+  const configured = missingAuthEnv().length === 0;
+  if (configured && (await currentUser())) redirect('/dashboard');
+
+  return (
+    <main className="flex flex-1 flex-col">
+      <div className="px-6 py-5">
+        <Logo />
+      </div>
+      <div className="flex flex-1 items-center justify-center px-6 pb-24">
+        {configured ? (
+          <AuthForm mode={mode} />
+        ) : (
+          <div className="w-full max-w-sm">
+            <NotConfigured what="Sign-in" />
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}

package/templates/nextjs-saas/components/chat-box.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Button, Input } from '@/components/ui';
+
+type Message = { role: 'user' | 'assistant'; content: string };
+
+/** A small chat box that streams answers from `/api/chat` as they are written. */
+export function ChatBox() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const abort = useRef<AbortController | null>(null);
+
+  useEffect(() => () => abort.current?.abort(), []);
+
+  async function send(e: React.FormEvent) {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || busy) return;
+    const history: Message[] = [...messages, { role: 'user', content: text }];
+    setMessages([...history, { role: 'assistant', content: '' }]);
+    setInput('');
+    setError(null);
+    setBusy(true);
+    abort.current = new AbortController();
+    try {
+      const res = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ messages: history }),
+        signal: abort.current.signal,
+      });
+      if (!res.ok || !res.body) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null;
+        throw new Error(body?.error ?? 'Something went wrong.');
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        const piece = decoder.decode(value, { stream: true });
+        setMessages((m) => {
+          const last = m[m.length - 1];
+          return last ? [...m.slice(0, -1), { ...last, content: last.content + piece }] : m;
+        });
+      }
+    } catch (err) {
+      if ((err as Error).name !== 'AbortError') setError((err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="rounded-xl border border-zinc-200">
+      <ul className="max-h-80 space-y-3 overflow-y-auto p-4 text-sm" aria-live="polite">
+        {messages.length === 0 ? (
+          <li className="text-zinc-500">Ask anything. Answers stream in as they are written.</li>
+        ) : (
+          messages.map((m, i) => (
+            <li key={i} className={m.role === 'user' ? 'text-right' : ''}>
+              <span
+                className={`inline-block max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-2 text-left ${
+                  m.role === 'user' ? 'bg-brand text-brand-foreground' : 'bg-zinc-100 text-zinc-900'
+                }`}
+              >
+                {m.content || '…'}
+              </span>
+            </li>
+          ))
+        )}
+      </ul>
+      {error ? <p className="px-4 pb-2 text-sm text-red-600">{error}</p> : null}
+      <form onSubmit={send} className="flex gap-2 border-t border-zinc-200 p-3">
+        <Input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Ask the assistant…"
+          aria-label="Message"
+          maxLength={4000}
+        />
+        {busy ? (
+          <Button type="button" variant="secondary" onClick={() => abort.current?.abort()}>
+            Stop
+          </Button>
+        ) : (
+          <Button type="submit">Send</Button>
+        )}
+      </form>
+    </div>
+  );
+}

package/templates/nextjs-saas/components/header.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import { site } from '@/app.config';
+
+export function Logo() {
+  return (
+    <Link href="/" className="flex items-center gap-2 font-semibold tracking-tight">
+      <span className="grid size-7 place-items-center rounded-md bg-brand text-sm text-brand-foreground">
+        {site.name.slice(0, 1).toUpperCase()}
+      </span>
+      {site.name}
+    </Link>
+  );
+}
+
+export function Header({ children }: { children?: React.ReactNode }) {
+  return (
+    <header className="border-b border-zinc-200">
+      <div className="mx-auto flex h-16 max-w-5xl items-center justify-between px-6">
+        <Logo />
+        <nav className="flex items-center gap-3 text-sm">{children}</nav>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs-saas/components/not-configured.tsx

@@ -0,0 +1,17 @@
+import { Notice } from '@/components/ui';
+
+/**
+ * Shown instead of a feature whose environment is missing. The variable names
+ * go to the server log (see lib/env.ts), not to the page.
+ */
+export function NotConfigured({ what }: { what: string }) {
+  return (
+    <Notice title={`${what} isn't set up yet`}>
+      <p>
+        Deployed apps are set up automatically. For local development, run{' '}
+        <code className="font-mono">vibiz dev</code> in this folder and restart
+        the dev server.
+      </p>
+    </Notice>
+  );
+}

package/templates/nextjs-saas/components/replay-consent.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui';
+import { type Consent, readConsent, replay, replayEnabled, writeConsent } from '@/lib/replay';
+
+/**
+ * Asks once whether this visit may be recorded to find and fix problems.
+ * Typed text is hidden in the recording either way. Until the visitor says
+ * yes, nothing is recorded and nothing is stored for replay.
+ */
+export function ReplayConsent() {
+  const [consent, setConsent] = useState<Consent | 'unknown'>('unknown');
+
+  useEffect(() => {
+    if (!replayEnabled()) return;
+    const current = readConsent();
+    setConsent(current);
+    if (current === 'granted') replay('start');
+    const reopen = () => setConsent(readConsent());
+    window.addEventListener('vibiz-replay-consent', reopen);
+    return () => window.removeEventListener('vibiz-replay-consent', reopen);
+  }, []);
+
+  if (consent !== null) return null;
+
+  const choose = (value: 'granted' | 'denied') => {
+    writeConsent(value);
+    setConsent(value);
+    replay(value === 'granted' ? 'start' : 'stop');
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-live="polite"
+      aria-label="Recording preferences"
+      className="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-md rounded-xl border border-zinc-200 bg-white p-4 shadow-lg sm:right-4 sm:left-auto sm:mx-0"
+    >
+      <p className="text-sm text-zinc-700">
+        May we record how you use this site to find and fix problems? What you type stays hidden.
+      </p>
+      <div className="mt-3 flex justify-end gap-2">
+        <Button variant="ghost" className="h-9" onClick={() => choose('denied')}>
+          No thanks
+        </Button>
+        <Button className="h-9" data-vibiz-name="replay-consent-allow" onClick={() => choose('granted')}>
+          Allow
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/** Lets a visitor change their mind: shows the question again. */
+export function ReplayChoicesLink() {
+  const [shown, setShown] = useState(false);
+  useEffect(() => setShown(replayEnabled()), []);
+  if (!shown) return null;
+  return (
+    <button
+      type="button"
+      className="underline-offset-4 hover:underline"
+      onClick={() => {
+        replay('stop');
+        try {
+          window.localStorage.removeItem('vibiz-replay-consent');
+        } catch {}
+        window.dispatchEvent(new Event('vibiz-replay-consent'));
+      }}
+    >
+      Recording choices
+    </button>
+  );
+}

package/templates/nextjs-saas/components/replay-identify.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useEffect } from 'react';
+import { readConsent, replay, replayEnabled } from '@/lib/replay';
+
+/**
+ * Signed-in customers' sessions are always worth keeping: record the whole
+ * tab, not just the minutes before an error. Still only with consent.
+ */
+export function ReplaySignedIn() {
+  useEffect(() => {
+    if (!replayEnabled()) return;
+    const apply = () => {
+      if (readConsent() === 'granted') replay('always');
+    };
+    apply();
+    window.addEventListener('vibiz-replay-consent', apply);
+    return () => window.removeEventListener('vibiz-replay-consent', apply);
+  }, []);
+  return null;
+}

package/templates/nextjs-saas/components/sign-out-button.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { authClient } from '@/lib/auth/client';
+import { Button } from '@/components/ui';
+
+export function SignOutButton() {
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+  return (
+    <Button
+      variant="ghost"
+      disabled={pending}
+      onClick={async () => {
+        setPending(true);
+        await authClient.signOut();
+        router.push('/');
+        router.refresh();
+      }}
+    >
+      {pending ? 'Signing out…' : 'Sign out'}
+    </Button>
+  );
+}

package/templates/nextjs-saas/components/ui.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link';
+import type { ComponentProps } from 'react';
+
+const base =
+  'inline-flex h-10 items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60';
+
+export const buttonStyles = {
+  primary: `${base} bg-brand text-brand-foreground hover:opacity-90`,
+  secondary: `${base} border border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-50`,
+  ghost: `${base} text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900`,
+};
+
+type Variant = keyof typeof buttonStyles;
+
+export function Button({
+  variant = 'primary',
+  className = '',
+  ...props
+}: ComponentProps<'button'> & { variant?: Variant }) {
+  return <button className={`${buttonStyles[variant]} ${className}`} {...props} />;
+}
+
+export function ButtonLink({
+  variant = 'primary',
+  className = '',
+  ...props
+}: ComponentProps<typeof Link> & { variant?: Variant }) {
+  return <Link className={`${buttonStyles[variant]} ${className}`} {...props} />;
+}
+
+export function Input(props: ComponentProps<'input'>) {
+  return (
+    <input
+      className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+      {...props}
+    />
+  );
+}
+
+export function Notice({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div role="alert" className="rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-900">
+      <p className="font-medium">{title}</p>
+      <div className="mt-1 text-amber-800">{children}</div>
+    </div>
+  );
+}

package/templates/nextjs-saas/db/migrate.ts

@@ -0,0 +1,21 @@
+import { sql } from 'drizzle-orm';
+import type { NodePgDatabase } from 'drizzle-orm/node-postgres';
+
+/**
+ * Create-if-missing, run once per server process before the first query.
+ * Every statement is idempotent, so concurrent cold starts are safe. Keep it
+ * in step with `db/schema.ts`; add new statements at the end.
+ */
+const STATEMENTS = [
+  sql`CREATE TABLE IF NOT EXISTS notes (
+    id serial PRIMARY KEY,
+    user_id text NOT NULL,
+    body text NOT NULL,
+    created_at timestamptz NOT NULL DEFAULT now()
+  )`,
+  sql`CREATE INDEX IF NOT EXISTS notes_user_id_idx ON notes (user_id)`,
+];
+
+export async function migrate(db: NodePgDatabase<Record<string, unknown>>): Promise<void> {
+  for (const statement of STATEMENTS) await db.execute(statement);
+}

package/templates/nextjs-saas/db/schema.ts

@@ -0,0 +1,18 @@
+import { index, pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';
+
+/**
+ * Your tables. Users live in the sign-in service's own schema, so reference
+ * them by id (`text`) rather than with a foreign key.
+ */
+export const notes = pgTable(
+  'notes',
+  {
+    id: serial('id').primaryKey(),
+    userId: text('user_id').notNull(),
+    body: text('body').notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+  },
+  (t) => [index('notes_user_id_idx').on(t.userId)],
+);
+
+export type Note = typeof notes.$inferSelect;

package/templates/nextjs-saas/lib/auth/client.ts

@@ -0,0 +1,6 @@
+'use client';
+
+import { createAuthClient } from '@neondatabase/auth/next';
+
+/** Browser-side auth: talks to this app's own `/api/auth/*` route. */
+export const authClient = createAuthClient();

package/templates/nextjs-saas/lib/auth/server.ts

@@ -0,0 +1,44 @@
+import { createNeonAuth } from '@neondatabase/auth/next/server';
+import { missingAuthEnv } from '@/lib/env';
+
+type Auth = ReturnType<typeof createNeonAuth>;
+
+let cached: Auth | null = null;
+
+/** Thrown when sign-in is used before its environment is set. */
+export class AuthNotConfiguredError extends Error {
+  constructor(readonly missing: string[]) {
+    super('Sign-in is not set up yet. Run `vibiz dev` for local development.');
+    this.name = 'AuthNotConfiguredError';
+  }
+}
+
+/**
+ * The server-side auth handle. Built lazily: constructing it validates the
+ * cookie secret, and doing that at import time would take down every page
+ * when the env is missing.
+ */
+export function getAuth(): Auth {
+  if (cached) return cached;
+  const missing = missingAuthEnv();
+  if (missing.length) throw new AuthNotConfiguredError(missing);
+  cached = createNeonAuth({
+    baseUrl: process.env.VIBIZ_AUTH_BASE_URL as string,
+    cookies: { secret: process.env.VIBIZ_AUTH_COOKIE_SECRET as string },
+  });
+  return cached;
+}
+
+export interface SessionUser {
+  id: string;
+  name: string;
+  email: string;
+  image?: string | null;
+}
+
+/** The signed-in user, or null (also null when sign-in is not configured). */
+export async function currentUser(): Promise<SessionUser | null> {
+  if (missingAuthEnv().length) return null;
+  const { data } = await getAuth().getSession();
+  return (data?.user as SessionUser | undefined) ?? null;
+}

package/templates/nextjs-saas/lib/db.ts

@@ -0,0 +1,32 @@
+import { drizzle, type NodePgDatabase } from 'drizzle-orm/node-postgres';
+import { Pool } from 'pg';
+import { migrate } from '@/db/migrate';
+import * as schema from '@/db/schema';
+import { missingDatabaseEnv } from '@/lib/env';
+
+type Db = NodePgDatabase<typeof schema>;
+
+let ready: Promise<Db> | null = null;
+
+export class DatabaseNotConfiguredError extends Error {
+  constructor() {
+    super('The database is not set up yet. Run `vibiz dev` for local development.');
+    this.name = 'DatabaseNotConfiguredError';
+  }
+}
+
+/** The database, with its tables created on first use. */
+export function getDb(): Promise<Db> {
+  if (missingDatabaseEnv().length) throw new DatabaseNotConfiguredError();
+  ready ??= (async () => {
+    // A small pool: serverless functions run many instances, each with its own.
+    const pool = new Pool({ connectionString: process.env.DATABASE_URL, max: 3 });
+    const db = drizzle(pool, { schema });
+    await migrate(db);
+    return db;
+  })().catch((err) => {
+    ready = null; // let the next request retry (a sleeping database, a blip)
+    throw err;
+  });
+  return ready;
+}

package/templates/nextjs-saas/lib/env.ts

@@ -0,0 +1,36 @@
+/**
+ * What the app needs from its environment, checked at request time so a
+ * missing value shows a clear message instead of crashing the page. Missing
+ * names are logged once on the server; pages only say what isn't set up.
+ */
+
+const warned = new Set<string>();
+
+function report(feature: string, missing: string[]): string[] {
+  if (missing.length && !warned.has(feature)) {
+    warned.add(feature);
+    console.warn(
+      `[env] ${feature} is not configured: missing ${missing.join(', ')}. ` +
+        'Run `vibiz dev` and restart the dev server.',
+    );
+  }
+  return missing;
+}
+
+export function missingAuthEnv(): string[] {
+  const missing: string[] = [];
+  if (!process.env.VIBIZ_AUTH_BASE_URL) missing.push('VIBIZ_AUTH_BASE_URL');
+  const secret = process.env.VIBIZ_AUTH_COOKIE_SECRET;
+  if (!secret || secret.length < 32) missing.push('VIBIZ_AUTH_COOKIE_SECRET (32+ chars)');
+  return report('sign-in', missing);
+}
+
+export function missingDatabaseEnv(): string[] {
+  return report('database', process.env.DATABASE_URL ? [] : ['DATABASE_URL']);
+}
+
+/** The AI gateway: set by the `ai` resource (`vibiz add ai`). */
+export function missingAiEnv(): string[] {
+  const missing = ['VIBIZ_AI_BASE_URL', 'VIBIZ_AI_API_KEY'].filter((k) => !process.env[k]);
+  return report('the AI assistant', missing);
+}