@vibiz/cli 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,39 @@
 {
   "name": "@vibiz/cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The Vibiz Stack CLI and MCP server: website, database, sign-in, email and AI for a new business, from your terminal or your AI agent.",
+  "keywords": [
+    "vibiz",
+    "cli",
+    "mcp",
+    "deploy",
+    "hosting"
+  ],
+  "homepage": "https://app.vibiz.app/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Vibiz-ai/vibiz-stack.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/Vibiz-ai/vibiz-stack/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "bin": {
+    "vibiz": "./dist/vibiz.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.32.1",
+    "zod": "4.6.7"
+  }
+}

package/templates/nextjs-saas/.env.example

@@ -0,0 +1,13 @@
+# `vibiz dev` writes the development values to .env.development.local. Never commit real values.
+DATABASE_URL=
+DIRECT_URL=
+VIBIZ_AUTH_BASE_URL=
+VIBIZ_AUTH_COOKIE_SECRET=
+# Optional: site analytics. When both are set, the analytics script loads.
+NEXT_PUBLIC_VIBIZ_ANALYTICS_KEY=
+NEXT_PUBLIC_VIBIZ_ANALYTICS_URL=
+# Optional: session replay (the `replay` resource). Asks visitors for consent first.
+NEXT_PUBLIC_VIBIZ_REPLAY=
+# Optional: the AI assistant on the dashboard (`vibiz add ai`). OPENAI_* are aliases.
+VIBIZ_AI_BASE_URL=
+VIBIZ_AI_API_KEY=

package/templates/nextjs-saas/README.md

@@ -0,0 +1,106 @@
+# nextjs-saas
+
+The Vibiz Stack starter app: a landing page, sign-in (email and Google), a protected dashboard
+that saves notes to your database, and sign-out. Next.js (App Router), TypeScript, Tailwind,
+Drizzle.
+
+## Start
+
+```bash
+vibiz login --key vz_sk_…
+mkdir acme && cd acme
+vibiz init "Acme" --template nextjs-saas   # copies this app, names it, creates the project
+npm install
+vibiz dev                                  # a development database, sign-in and AI key
+npm run dev                                # http://localhost:3000
+vibiz deploy                               # preview URL
+vibiz promote <deployment>                 # live
+```
+
+`vibiz init` refuses a folder that isn't empty; pass `--force` to copy into one anyway (files
+with the same name are overwritten).
+
+`vibiz dev` writes the development environment into `.env.development.local` (keeping any other
+lines already in it): a database branch with your schema and none of the live app's rows, its own
+sign-in and its own AI key. Production values never reach your laptop or your agent: the live app
+gets them from Vibiz directly. Run `vibiz dev` again whenever `vibiz add` adds a resource, and
+`vibiz dev --reset` for a clean copy. `vibiz dev -- npm run dev` runs with the values without
+writing a file. `.env*` files are never uploaded by `vibiz deploy`.
+
+Without the env, the app still runs: pages that need sign-in or the database say they aren't set
+up yet, and the server log names the missing variables.
+
+## Make it yours
+
+- **Name, pitch and colors**: `app.config.ts`. Everything else reads from it.
+- **Landing page**: `app/page.tsx`.
+- **After sign-in**: `AFTER_SIGN_IN` in `components/auth-form.tsx` (default `/dashboard`).
+- **Protected routes**: the `matcher` in `proxy.ts`. Pages should still check `currentUser()`.
+
+## AI
+
+`vibiz add ai` gives the app a project AI key: `VIBIZ_AI_BASE_URL` and `VIBIZ_AI_API_KEY` (also
+as `OPENAI_BASE_URL` / `OPENAI_API_KEY`, so `new OpenAI()` works as is). The dashboard's
+assistant (`components/chat-box.tsx`) streams from `app/api/chat/route.ts`, which uses the plain
+OpenAI SDK with the model `vibiz/fast`. Calls are metered against the project: set a daily budget
+with `PATCH /v1/projects/:id/ai`. Keep AI routes behind sign-in, as this one is.
+
+## Data
+
+Tables are declared in `db/schema.ts` and created on first use by `db/migrate.ts`
+(`CREATE TABLE IF NOT EXISTS`, once per server process). To add a table, declare it in the schema
+and append its idempotent `CREATE … IF NOT EXISTS` statement to `db/migrate.ts`. When the schema
+grows past that, switch to generated migrations with `drizzle-kit`.
+
+Users are stored by the sign-in service in its own schema. Reference them by id (`text`), as
+`notes.user_id` does; don't declare that schema in Drizzle.
+
+## Layout
+
+```
+app.config.ts             name, tagline, colors
+app/page.tsx              landing page
+app/sign-in, app/sign-up  email + "Continue with Google"
+app/dashboard             signed-in user and their notes (server actions)
+app/api/auth/[...path]    forwards sign-in requests to the sign-in service
+proxy.ts                  guards /dashboard, finishes Google sign-in
+lib/auth/                 server (getAuth, currentUser) and browser (authClient) handles
+lib/db.ts, db/            Postgres via Drizzle, schema, create-if-missing
+components/analytics.tsx  loads site analytics when NEXT_PUBLIC_VIBIZ_ANALYTICS_* are set
+components/replay-*.tsx   session replay: consent banner, `always` for signed-in users
+lib/replay.ts             the consent choice (localStorage) and vibiz('replay', …)
+app/api/chat, components/chat-box.tsx   the AI assistant (streams from the Vibiz AI gateway)
+```
+
+## Env
+
+| Variable                          | Used for                                  |
+| --------------------------------- | ----------------------------------------- |
+| `DATABASE_URL`                    | queries (pooled)                          |
+| `DIRECT_URL`                      | migrations tooling, if you add it          |
+| `VIBIZ_AUTH_BASE_URL`             | the sign-in service                       |
+| `VIBIZ_AUTH_COOKIE_SECRET`        | signs the session cookie (32+ chars)      |
+| `NEXT_PUBLIC_VIBIZ_ANALYTICS_KEY` | optional: analytics, with the URL below   |
+| `NEXT_PUBLIC_VIBIZ_ANALYTICS_URL` | optional: loads `<url>/v1/script.js`      |
+| `NEXT_PUBLIC_VIBIZ_REPLAY`        | optional: session replay, after consent   |
+
+The other sign-in variables Vibiz sets (`VIBIZ_AUTH_JWKS_URL`, `VIBIZ_AUTH_PROJECT_ID`, keys) are
+there for code that verifies tokens itself; this app doesn't need them.
+
+## Where sign-in works
+
+Sign-in only accepts requests from the app's own addresses: its live address
+(`https://<slug>.vibiz.app`), any domain an owner added (`vibiz domains add app.example.com`, for
+hosting the app somewhere else), and, in the development environment, `http://localhost:3000`.
+Preview deployment URLs are not trusted yet: if sign-in answers "invalid origin" on one, promote
+it and sign in on the live address. Everything else (pages, the database) works anywhere.
+
+## Session replay
+
+With the `replay` resource (`vibiz add replay`), the app asks each visitor once, in a small banner,
+whether the visit may be recorded to find and fix problems. Nothing is recorded before they say yes,
+and the choice is kept in `localStorage`. "Recording choices" in the footer asks again. What people
+type, passwords and card fields are never in a recording. Signed-in users on `/dashboard` are
+recorded for the whole tab (`vibiz('replay', 'always')`); everyone else only when something goes
+wrong (an error, a rage or dead click). Mark anything else private with `data-vibiz-mask` (text
+hidden) or `data-vibiz-block` (not recorded at all).

package/templates/nextjs-saas/_gitignore

@@ -0,0 +1,8 @@
+node_modules
+.next
+next-env.d.ts
+*.tsbuildinfo
+.env
+.env.*
+!.env.example
+.DS_Store

package/templates/nextjs-saas/_npmrc

@@ -0,0 +1 @@
+save-exact=true

package/templates/nextjs-saas/app/api/auth/[...path]/route.ts

@@ -0,0 +1,30 @@
+import { AuthNotConfiguredError, getAuth } from '@/lib/auth/server';
+
+/**
+ * Every `/api/auth/*` call is forwarded to the sign-in service. The handler is
+ * resolved per request so missing env answers 503 with a clear message.
+ */
+type Ctx = { params: Promise<{ path: string[] }> };
+type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+
+function forward(method: Method) {
+  return (request: Request, ctx: Ctx) => {
+    try {
+      return getAuth().handler()[method](request, ctx);
+    } catch (err) {
+      if (err instanceof AuthNotConfiguredError) {
+        return Response.json(
+          { error: { code: 'auth_not_configured', message: err.message } },
+          { status: 503 },
+        );
+      }
+      throw err;
+    }
+  };
+}
+
+export const GET = forward('GET');
+export const POST = forward('POST');
+export const PUT = forward('PUT');
+export const DELETE = forward('DELETE');
+export const PATCH = forward('PATCH');

package/templates/nextjs-saas/app/api/chat/route.ts

@@ -0,0 +1,76 @@
+import OpenAI from 'openai';
+import { currentUser } from '@/lib/auth/server';
+import { missingAiEnv } from '@/lib/env';
+
+/**
+ * A chat endpoint on the Vibiz AI gateway, through the plain OpenAI SDK:
+ * `VIBIZ_AI_BASE_URL` and `VIBIZ_AI_API_KEY` come with the `ai` resource
+ * (`vibiz add ai`), and every call is metered against the project's budget.
+ *
+ * Signed-in users only, short history, bounded answers: a public endpoint that
+ * calls a model is an open tap on your AI budget.
+ */
+
+const MAX_MESSAGES = 20;
+const MAX_CHARS = 4_000;
+
+type Message = { role: 'user' | 'assistant'; content: string };
+
+function parseMessages(body: unknown): Message[] | null {
+  const list = (body as { messages?: unknown })?.messages;
+  if (!Array.isArray(list) || list.length === 0) return null;
+  const messages = list.slice(-MAX_MESSAGES).map((m) => ({
+    role: (m as Message).role === 'assistant' ? 'assistant' : 'user',
+    content: String((m as Message).content ?? '').slice(0, MAX_CHARS),
+  })) as Message[];
+  return messages.every((m) => m.content) ? messages : null;
+}
+
+export async function POST(req: Request) {
+  if (missingAiEnv().length) return Response.json({ error: 'AI is not set up.' }, { status: 503 });
+  if (!(await currentUser())) return Response.json({ error: 'Sign in first.' }, { status: 401 });
+  const messages = parseMessages(await req.json().catch(() => null));
+  if (!messages) return Response.json({ error: 'Send { messages: [...] }.' }, { status: 400 });
+
+  const openai = new OpenAI({
+    baseURL: process.env.VIBIZ_AI_BASE_URL,
+    apiKey: process.env.VIBIZ_AI_API_KEY,
+  });
+  const stream = await openai.chat.completions
+    .create(
+      {
+        model: 'vibiz/fast',
+        messages: [{ role: 'system', content: 'You are a helpful, concise assistant.' }, ...messages],
+        max_tokens: 500,
+        stream: true,
+      },
+      // The visitor closing the tab cancels the model call: nobody pays for unread tokens.
+      { signal: req.signal },
+    )
+    .catch((err: unknown) => (err instanceof Error ? err : new Error(String(err))));
+  if (stream instanceof Error) {
+    const status = stream instanceof OpenAI.APIError && stream.status === 429 ? 429 : 502;
+    return Response.json({ error: 'The assistant is unavailable right now.' }, { status });
+  }
+
+  const encoder = new TextEncoder();
+  return new Response(
+    new ReadableStream({
+      async pull(controller) {
+        try {
+          for await (const chunk of stream) {
+            const text = chunk.choices[0]?.delta.content;
+            if (text) controller.enqueue(encoder.encode(text));
+          }
+          controller.close();
+        } catch (err) {
+          controller.error(err);
+        }
+      },
+      cancel() {
+        stream.controller.abort();
+      },
+    }),
+    { headers: { 'content-type': 'text/plain; charset=utf-8', 'cache-control': 'no-store' } },
+  );
+}

package/templates/nextjs-saas/app/dashboard/actions.ts

@@ -0,0 +1,32 @@
+'use server';
+
+import { and, eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+import { notes } from '@/db/schema';
+import { currentUser } from '@/lib/auth/server';
+import { getDb } from '@/lib/db';
+
+async function requireUser() {
+  const user = await currentUser();
+  if (!user) throw new Error('Not signed in');
+  return user;
+}
+
+export async function addNote(formData: FormData) {
+  const user = await requireUser();
+  const body = String(formData.get('body') ?? '').trim().slice(0, 500);
+  if (!body) return;
+  const db = await getDb();
+  await db.insert(notes).values({ userId: user.id, body });
+  revalidatePath('/dashboard');
+}
+
+export async function deleteNote(formData: FormData) {
+  const user = await requireUser();
+  const id = Number(formData.get('id'));
+  if (!Number.isInteger(id)) return;
+  const db = await getDb();
+  // Scoped by user: nobody can delete someone else's note by guessing an id.
+  await db.delete(notes).where(and(eq(notes.id, id), eq(notes.userId, user.id)));
+  revalidatePath('/dashboard');
+}

package/templates/nextjs-saas/app/dashboard/page.tsx

@@ -0,0 +1,130 @@
+import { desc, eq } from 'drizzle-orm';
+import type { Metadata } from 'next';
+import { redirect } from 'next/navigation';
+import { connection } from 'next/server';
+import { type Note, notes } from '@/db/schema';
+import { ChatBox } from '@/components/chat-box';
+import { Header } from '@/components/header';
+import { NotConfigured } from '@/components/not-configured';
+import { ReplaySignedIn } from '@/components/replay-identify';
+import { SignOutButton } from '@/components/sign-out-button';
+import { Button, Input, Notice } from '@/components/ui';
+import { currentUser } from '@/lib/auth/server';
+import { getDb } from '@/lib/db';
+import { missingAiEnv, missingAuthEnv, missingDatabaseEnv } from '@/lib/env';
+import { addNote, deleteNote } from './actions';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+async function loadNotes(userId: string): Promise<{ notes: Note[] } | { error: string }> {
+  try {
+    const db = await getDb();
+    const rows = await db
+      .select()
+      .from(notes)
+      .where(eq(notes.userId, userId))
+      .orderBy(desc(notes.createdAt))
+      .limit(50);
+    return { notes: rows };
+  } catch (err) {
+    console.error('[dashboard] could not load notes', err);
+    return { error: 'We could not reach the database. Please try again in a moment.' };
+  }
+}
+
+export default async function Dashboard() {
+  await connection();
+
+  if (missingAuthEnv().length) {
+    return (
+      <Shell>
+        <NotConfigured what="Sign-in" />
+      </Shell>
+    );
+  }
+
+  const user = await currentUser();
+  if (!user) redirect('/sign-in');
+
+  const dbReady = missingDatabaseEnv().length === 0;
+  const result = dbReady ? await loadNotes(user.id) : null;
+
+  return (
+    <Shell signedIn>
+      <ReplaySignedIn />
+      <section className="flex items-center gap-4 rounded-xl border border-zinc-200 p-6">
+        {user.image ? (
+          // A plain <img>: avatars come from any host, so next/image would need them all listed.
+          <img src={user.image} alt="" className="size-12 rounded-full" />
+        ) : (
+          <span className="grid size-12 place-items-center rounded-full bg-brand text-lg font-medium text-brand-foreground">
+            {(user.name || user.email).slice(0, 1).toUpperCase()}
+          </span>
+        )}
+        <div className="min-w-0">
+          <p className="truncate font-medium">{user.name || 'Welcome'}</p>
+          <p className="truncate text-sm text-zinc-600">{user.email}</p>
+        </div>
+      </section>
+
+      <section className="mt-8">
+        <h2 className="text-lg font-semibold tracking-tight">Your notes</h2>
+        <p className="mt-1 text-sm text-zinc-600">Saved to your account. Only you can see them.</p>
+
+        <div className="mt-4">
+          {!dbReady ? (
+            <NotConfigured what="The database" />
+          ) : result && 'error' in result ? (
+            <Notice title="Something went wrong">{result.error}</Notice>
+          ) : (
+            <>
+              <form action={addNote} className="flex gap-2">
+                <Input name="body" required maxLength={500} placeholder="Write a note…" aria-label="New note" />
+                <Button type="submit">Add</Button>
+              </form>
+              <ul className="mt-4 divide-y divide-zinc-200 rounded-xl border border-zinc-200">
+                {result?.notes.length ? (
+                  result.notes.map((n) => (
+                    <li key={n.id} className="flex items-start justify-between gap-4 px-4 py-3">
+                      <div className="min-w-0">
+                        <p className="text-sm break-words">{n.body}</p>
+                        <p className="mt-0.5 text-xs text-zinc-500">
+                          {n.createdAt.toLocaleString('en', { dateStyle: 'medium', timeStyle: 'short' })}
+                        </p>
+                      </div>
+                      <form action={deleteNote}>
+                        <input type="hidden" name="id" value={n.id} />
+                        <button type="submit" className="text-xs text-zinc-500 hover:text-red-600">
+                          Delete
+                        </button>
+                      </form>
+                    </li>
+                  ))
+                ) : (
+                  <li className="px-4 py-8 text-center text-sm text-zinc-500">No notes yet. Add your first one above.</li>
+                )}
+              </ul>
+            </>
+          )}
+        </div>
+      </section>
+
+      <section className="mt-8">
+        <h2 className="text-lg font-semibold tracking-tight">Assistant</h2>
+        <p className="mt-1 text-sm text-zinc-600">Answers come from the Vibiz AI gateway.</p>
+        <div className="mt-4">
+          {missingAiEnv().length ? <NotConfigured what="The AI assistant" /> : <ChatBox />}
+        </div>
+      </section>
+    </Shell>
+  );
+}
+
+function Shell({ children, signedIn = false }: { children: React.ReactNode; signedIn?: boolean }) {
+  return (
+    <>
+      <Header>{signedIn ? <SignOutButton /> : null}</Header>
+      <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-12">{children}</main>
+    </>
+  );
+}

package/templates/nextjs-saas/app/globals.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+/* --brand and --brand-foreground come from app.config.ts (set on <html>). */
+@theme inline {
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+}
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  @apply bg-white text-zinc-900 antialiased;
+}

package/templates/nextjs-saas/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from 'next';
+import type { CSSProperties, ReactNode } from 'react';
+import { site } from '@/app.config';
+import { Analytics } from '@/components/analytics';
+import { ReplayConsent } from '@/components/replay-consent';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: { default: site.name, template: `%s · ${site.name}` },
+  description: site.tagline,
+};
+
+const brand = {
+  '--brand': site.colors.brand,
+  '--brand-foreground': site.colors.brandForeground,
+} as CSSProperties;
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" style={brand}>
+      <body className="flex min-h-screen flex-col font-sans">
+        {children}
+        <Analytics />
+        <ReplayConsent />
+      </body>
+    </html>
+  );
+}

package/templates/nextjs-saas/app/not-found.tsx

@@ -0,0 +1,13 @@
+import { ButtonLink } from '@/components/ui';
+
+export default function NotFound() {
+  return (
+    <main className="flex flex-1 flex-col items-center justify-center gap-4 px-6 text-center">
+      <p className="text-sm font-medium text-brand">404</p>
+      <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
+      <ButtonLink href="/" variant="secondary">
+        Go home
+      </ButtonLink>
+    </main>
+  );
+}

package/templates/nextjs-saas/app/page.tsx

@@ -0,0 +1,63 @@
+import { site } from '@/app.config';
+import { Header } from '@/components/header';
+import { ReplayChoicesLink } from '@/components/replay-consent';
+import { ButtonLink } from '@/components/ui';
+
+const features = [
+  { title: 'Sign in your way', body: 'Email and password, or one click with Google.' },
+  { title: 'Your data, saved', body: 'Everything you add is stored safely and there next time.' },
+  { title: 'Fast everywhere', body: 'Pages load in a blink, on any device.' },
+];
+
+export default function Home() {
+  return (
+    <>
+      <Header>
+        <ButtonLink href="/sign-in" variant="ghost">
+          Sign in
+        </ButtonLink>
+        <ButtonLink href="/sign-up">Get started</ButtonLink>
+      </Header>
+
+      <main className="flex-1">
+        <section className="mx-auto max-w-5xl px-6 py-24 text-center sm:py-32">
+          <h1 className="mx-auto max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
+            {site.tagline}
+          </h1>
+          <p className="mx-auto mt-6 max-w-xl text-lg text-zinc-600 text-pretty">
+            {site.description}
+          </p>
+          <div className="mt-10 flex justify-center gap-3">
+            <ButtonLink href="/sign-up" className="h-11 px-6">
+              Create your account
+            </ButtonLink>
+            <ButtonLink href="/sign-in" variant="secondary" className="h-11 px-6">
+              Sign in
+            </ButtonLink>
+          </div>
+        </section>
+
+        <section className="border-t border-zinc-200 bg-zinc-50">
+          <div className="mx-auto grid max-w-5xl gap-6 px-6 py-16 sm:grid-cols-3">
+            {features.map((f) => (
+              <div key={f.title} className="rounded-xl border border-zinc-200 bg-white p-6">
+                <div className="mb-4 size-2 rounded-full bg-brand" />
+                <h2 className="font-medium">{f.title}</h2>
+                <p className="mt-2 text-sm text-zinc-600">{f.body}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+
+      <footer className="border-t border-zinc-200">
+        <div className="mx-auto flex max-w-5xl justify-between gap-4 px-6 py-8 text-sm text-zinc-500">
+          <span>
+            © {new Date().getFullYear()} {site.name}
+          </span>
+          <ReplayChoicesLink />
+        </div>
+      </footer>
+    </>
+  );
+}

package/templates/nextjs-saas/app/sign-in/page.tsx

@@ -0,0 +1,8 @@
+import type { Metadata } from 'next';
+import { AuthPage } from '@/components/auth-page';
+
+export const metadata: Metadata = { title: 'Sign in' };
+
+export default function SignInPage() {
+  return <AuthPage mode="sign-in" />;
+}

package/templates/nextjs-saas/app/sign-up/page.tsx

@@ -0,0 +1,8 @@
+import type { Metadata } from 'next';
+import { AuthPage } from '@/components/auth-page';
+
+export const metadata: Metadata = { title: 'Create your account' };
+
+export default function SignUpPage() {
+  return <AuthPage mode="sign-up" />;
+}

package/templates/nextjs-saas/app.config.ts

@@ -0,0 +1,15 @@
+/**
+ * Rebrand the whole app here: the name, the one-line pitch and the colors.
+ * `vibiz init <name>` sets `name` for you.
+ */
+export const site = {
+  name: 'Acme',
+  tagline: 'The simplest way to run your business online.',
+  description: 'Sign in, keep your notes, and get on with your day.',
+  colors: {
+    /** Buttons, links and accents. */
+    brand: '#4f46e5',
+    /** Text on top of the brand color. */
+    brandForeground: '#ffffff',
+  },
+} as const;

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

@@ -0,0 +1,20 @@
+import Script from 'next/script';
+
+/**
+ * Site analytics. Loads only when both values are set at build time, so a
+ * fresh app ships no script at all.
+ */
+export function Analytics() {
+  const key = process.env.NEXT_PUBLIC_VIBIZ_ANALYTICS_KEY?.trim();
+  const url = process.env.NEXT_PUBLIC_VIBIZ_ANALYTICS_URL?.trim().replace(/\/$/, '');
+  if (!key || !url) return null;
+  // crossOrigin: served with CORS, so the page's own errors that pass through it keep their message.
+  return (
+    <Script
+      src={`${url}/v1/script.js`}
+      data-key={key}
+      crossOrigin="anonymous"
+      strategy="afterInteractive"
+    />
+  );
+}