AI Wrapper on React Router v8, Postgres (Neon) and Clerk

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

// Neon pooled endpoint = PgBouncer transaction mode → prepared statements off.
// ponytail: single module-level client; the serverless runtime + PgBouncer do
// the pooling, so no custom pool/globalThis singleton dance needed.
const client = postgres(process.env.DATABASE_URL!, { prepare: false });

export const db = drizzle({ client });

// ponytail: Clerk is hosted — set the publishable + secret keys in the env
// (React Router reads VITE_CLERK_PUBLISHABLE_KEY client-side; CLERK_SECRET_KEY
// server-side). ClerkProvider + rootAuthLoader pick them up automatically.

// Root route for React Router v8 (framework mode). <ClerkProvider> makes
// Clerk's hooks/components available client-side; rootAuthLoader hydrates the auth
// state from the request on the server; clerkMiddleware attaches the Auth object to
// the request context so protected loaders can gate via getAuth() — the RR7 analog
// of Next's clerkMiddleware proxy + auth.protect().
import { ClerkProvider } from "@clerk/react-router";
import { clerkMiddleware, rootAuthLoader } from "@clerk/react-router/server";
import type { LoaderFunctionArgs } from "react-router";
import { Outlet, useLoaderData } from "react-router";

// RR7 route middleware: runs on every request and populates Clerk's auth context.
// Protected routes call getAuth(args) in their loader and redirect signed-out users —
// equivalent gating to the Next branch's isProtectedRoute + auth.protect().
export const middleware = [clerkMiddleware()];

export async function loader(args: LoaderFunctionArgs) {
  return rootAuthLoader(args);
}

export default function Root() {
  const loaderData = useLoaderData<typeof loader>();
  return (
    <ClerkProvider loaderData={loaderData}>
      <Outlet />
    </ClerkProvider>
  );
}

// === file: app/db/schema.ts ===
import { relations, sql } from "drizzle-orm";
import {
  bigint,
  check,
  index,
  integer,
  jsonb,
  pgTable,
  text,
  timestamp,
  uuid,
} from "drizzle-orm/pg-core";
// Better Auth owns identity; we only reference its `user` table by id.
import { user } from "./auth-schema";

export type CallStatus = "ok" | "error" | "filtered";

/** One profile per Better Auth user — extends identity with AI-app preferences
 *  and the soft monthly token budget the metering layer enforces. */
export const userProfiles = pgTable(
  "user_profiles",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    // Better Auth's user.id is text — match it, don't recast. One profile per
    // user, so the FK itself is unique (this is the 1:1 extension of `user`).
    userId: text("user_id")
      .notNull()
      .unique()
      .references(() => user.id, { onDelete: "cascade" }),
    displayName: text("display_name"),
    // Default model this user's requests fall back to (e.g. gpt-4o-mini).
    defaultModel: text("default_model").notNull().default("gpt-4o-mini"),
    // Soft cap the metering layer checks token_usage against per calendar month.
    monthlyTokenBudget: bigint("monthly_token_budget", { mode: "number" })
      .notNull()
      .default(0),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [index("idx_profile_model").on(t.defaultModel)],
);

/** Append-only token meter: one row per upstream LLM call. Roll up by
 *  user + window for budget enforcement and cost reporting. */
export const tokenUsage = pgTable(
  "token_usage",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    userId: text("user_id")
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    // Which upstream model was billed (provider model id, opaque to us).
    model: text("model").notNull(),
    promptTokens: integer("prompt_tokens").notNull().default(0),
    completionTokens: integer("completion_tokens").notNull().default(0),
    // ponytail: store cost in micro-cents as an integer — no float money, and
    // fine-grained enough for sub-cent per-token pricing without a numeric type.
    costMicrocents: bigint("cost_microcents", { mode: "number" })
      .notNull()
      .default(0),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [
    // Drives the "tokens used this month" rollup + budget check.
    index("idx_usage_user_time").on(t.userId, t.createdAt),
    index("idx_usage_model").on(t.model),
  ],
);

/** Append-only prompt/completion history — the auditable record of every
 *  exchange (prompt in, completion out, model, token split, outcome). */
export const promptLogs = pgTable(
  "prompt_logs",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    userId: text("user_id")
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    model: text("model").notNull(),
    prompt: text("prompt").notNull(),
    // Null while a streamed completion is still in flight.
    completion: text("completion"),
    promptTokens: integer("prompt_tokens").notNull().default(0),
    completionTokens: integer("completion_tokens").notNull().default(0),
    latencyMs: integer("latency_ms"),
    status: text("status").$type<CallStatus>().notNull().default("ok"),
    // ponytail: opaque per-call metadata (tool calls, finish_reason, etc.) —
    // jsonb bag beats a column-per-provider-field churn.
    metadata: jsonb("metadata"),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [
    // Drives the per-user history feed (most-recent-first).
    index("idx_log_user_time").on(t.userId, t.createdAt),
    check(
      "prompt_logs_status_check",
      sql`${t.status} in ('ok','error','filtered')`,
    ),
  ],
);

export const userProfilesRelations = relations(userProfiles, ({ one }) => ({
  user: one(user, {
    fields: [userProfiles.userId],
    references: [user.id],
  }),
}));

export const tokenUsageRelations = relations(tokenUsage, ({ one }) => ({
  user: one(user, { fields: [tokenUsage.userId], references: [user.id] }),
}));

export const promptLogsRelations = relations(promptLogs, ({ one }) => ({
  user: one(user, { fields: [promptLogs.userId], references: [user.id] }),
}));

// === file: app/db/auth-schema.ts ===
import { pgTable, text, timestamp } from "drizzle-orm/pg-core";

// Local mirror of Clerk identity — the FK target app-type schemas reference as user.
// id = Clerk's user id, so existing user_id foreign keys resolve once the sync runs.
// This IS the auth-schema slot for Clerk cells: the SaaS schema's ./auth-schema FK
// target (src/db/auth-schema.ts) resolves here, same slot Better Auth's generated file fills.
export const user = pgTable("user", {
  id: text("id").primaryKey(), // = Clerk user id
  email: text("email"),
  firstName: text("first_name"),
  lastName: text("last_name"),
  imageUrl: text("image_url"),
  updatedAt: timestamp("updated_at", { withTimezone: true }), // staleness key (Clerk updated_at)
  createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
});

import { and, eq, isNull, lt, or } from "drizzle-orm";
import { user } from "@/db/auth-schema";

export type ClerkUserEvent = {
  type: string;
  data: {
    id: string;
    email_addresses?: { email_address: string }[];
    first_name?: string | null;
    last_name?: string | null;
    image_url?: string | null;
    updated_at?: number;
  };
};

// Idempotent + concurrency-safe sync of a Clerk user into the local user table.
// Keyed on id (= Clerk id, the PK); the staleness guard lives in the UPDATE WHERE so
// a late/older event cannot clobber newer state. user.deleted removes the row.
export async function recordClerkEvent(
  // ponytail: loosely typed Drizzle client so the emitted core stays portable.
  db: any,
  event: ClerkUserEvent,
): Promise<{ changed: boolean }> {
  const d = event.data;
  if (event.type === "user.deleted") {
    const deleted = await db.delete(user).where(eq(user.id, d.id)).returning({ id: user.id });
    return { changed: deleted.length > 0 };
  }

  const email = d.email_addresses?.[0]?.email_address ?? null;
  const eventAt = new Date(d.updated_at ?? 0);
  const fields = {
    email,
    firstName: d.first_name ?? null,
    lastName: d.last_name ?? null,
    imageUrl: d.image_url ?? null,
    updatedAt: eventAt,
  };

  const updated = await db
    .update(user)
    .set(fields)
    .where(and(eq(user.id, d.id), or(isNull(user.updatedAt), lt(user.updatedAt, eventAt))))
    .returning({ id: user.id });
  if (updated.length > 0) return { changed: true };

  const [existing] = await db.select({ id: user.id }).from(user).where(eq(user.id, d.id)).limit(1);
  if (existing) return { changed: false };

  const inserted = await db
    .insert(user)
    .values({ id: d.id, ...fields })
    .onConflictDoNothing({ target: user.id })
    .returning({ id: user.id });
  return { changed: inserted.length > 0 };
}

// Clerk identity webhook for React Router v8 (framework mode). A resource
// route (no default component) — React Router invokes `action` for the POST. Clerk
// webhooks are svix: verify the signature, then hand the event to recordClerkEvent.
import type { ActionFunctionArgs } from "react-router";
import { Webhook } from "svix";
import { db } from "@/lib/db";
import { recordClerkEvent, type ClerkUserEvent } from "@/lib/identity/record";

const USER_EVENTS = new Set(["user.created", "user.updated", "user.deleted"]);

export async function action({ request }: ActionFunctionArgs) {
  const secret = process.env.CLERK_WEBHOOK_SECRET;
  if (!secret) return Response.json({ error: "Server misconfigured" }, { status: 500 });

  const raw = await request.text();
  const headers = Object.fromEntries(request.headers.entries());

  let event: ClerkUserEvent;
  try {
    event = new Webhook(secret).verify(raw, headers) as ClerkUserEvent;
  } catch {
    return Response.json({ error: "Invalid signature" }, { status: 403 });
  }

  if (USER_EVENTS.has(event.type)) await recordClerkEvent(db, event);
  return Response.json({ ok: true });
}

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

// Serverless: one connection per (short-lived) instance; Neon's pooler multiplexes.
export const sql = postgres(process.env.DATABASE_URL!, { prepare: false, max: 1 });
export const db = drizzle(sql);

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

// Long-running process: a real, reused pool. Still prepare:false on the pooled endpoint.
export const sql = postgres(process.env.DATABASE_URL!, { prepare: false, max: 10, idle_timeout: 20 });
export const db = drizzle(sql);

import { neon } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";

// Edge/Workers have NO TCP sockets, so postgres-js cannot run here. Neon's HTTP
// driver speaks Postgres over fetch — the only client that works on Workers.
export const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql);