feat(meticulous): integrate Meticulous session recorder and testing w…

.env.example

@@ -0,0 +1,6 @@
+# Meticulous session recorder — https://app.meticulous.ai/docs/recorder-installation
+# Project ID: Meticulous Dashboard → Project Settings
+NEXT_PUBLIC_METICULOUS_PROJECT_ID=
+
+# GitHub Actions only (Repository Settings → Secrets → Actions)
+# METICULOUS_API_TOKEN=

.github/workflows/meticulous.yml

@@ -0,0 +1,54 @@
+# Meticulous visual regression tests — https://app.meticulous.ai/docs/github-actions-v2
+# Required secret: METICULOUS_API_TOKEN (Meticulous Dashboard → Project Settings)
+name: Meticulous Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request: {}
+  workflow_dispatch: {}
+
+permissions:
+  actions: write
+  contents: read
+  issues: write
+  pull-requests: write
+  statuses: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Next.js app
+        run: pnpm build
+        env:
+          NODE_ENV: production
+          METICULOUS_BUILD: 'true'
+
+      - name: Start app
+        run: |
+          pnpm start &
+          npx wait-on http://localhost:3009/en --timeout 60000
+
+      - name: Run Meticulous tests
+        uses: alwaysmeticulous/report-diffs-action/cloud-compute@v1
+        with:
+          api-token: ${{ secrets.METICULOUS_API_TOKEN }}
+          app-url: 'http://localhost:3009'

app/[locale]/layout.tsx

@@ -4,6 +4,8 @@ import { notFound } from 'next/navigation'
 import { Analytics } from '@vercel/analytics/next'
 import { routing } from '@/i18n/routing'
 import { LayoutBody } from '@/components/LayoutBody'
+import { METICULOUS_RECORDER_SCRIPT_URL } from '@/lib/constants/meticulous'
+import { getMeticulousProjectId } from '@/lib/utils/getMeticulousProjectId'
 import '../globals.css'
 
 export const metadata: Metadata = {
@@ -134,9 +136,20 @@ export default async function LocaleLayout({
   // side is the easiest way to get started
   const messages = await getMessages()
   const timeZone = await getTimeZone()
+  const meticulousProjectId = getMeticulousProjectId()
 
   return (
     <html lang={resolvedLocale} suppressHydrationWarning>
+      <head>
+        {meticulousProjectId ? (
+          // Meticulous requires a synchronous native script before other scripts load.
+          // eslint-disable-next-line @next/next/no-sync-scripts -- required by Meticulous recorder
+          <script
+            data-project-id={meticulousProjectId}
+            src={METICULOUS_RECORDER_SCRIPT_URL}
+          />
+        ) : null}
+      </head>
       <body className="bg-bg-primary text-text-primary antialiased ambient-bg min-h-screen">
         <LayoutBody
           messages={messages}

lib/constants/meticulous.ts

@@ -0,0 +1,3 @@
+/** Meticulous session recorder snippet URL. @see https://app.meticulous.ai/docs/recorder-installation */
+export const METICULOUS_RECORDER_SCRIPT_URL =
+  'https://snippet.meticulous.ai/v1/meticulous.js' as const

lib/utils/getMeticulousProjectId.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the Meticulous project ID when `NEXT_PUBLIC_METICULOUS_PROJECT_ID` is set.
+ * Configure in `.env.local` for localhost session recording.
+ *
+ * @returns Project ID from the Meticulous dashboard, or undefined when not configured
+ */
+export function getMeticulousProjectId(): string | undefined {
+  const projectId = process.env.NEXT_PUBLIC_METICULOUS_PROJECT_ID?.trim()
+  return projectId ? projectId : undefined
+}