From 205d3db9e118b6245ac5e4e02442eb6905e7979b Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Fri, 22 May 2026 14:15:14 +0000
Subject: [PATCH] feat(install-tracker): idiomatic <Script> for Next.js +
 optional subdir

Two upgrades to the auto-PR flow:

1. For Next.js layouts (.tsx/.jsx targets), insert the snippet as the
   <Script> component from next/script with strategy="afterInteractive"
   instead of a raw <script> tag. Avoids hydration warnings; matches
   how Next docs tell you to add third-party scripts. Auto-adds
   `import Script from "next/script";` after the last top-level import
   if the file doesn't already pull it in. Plain HTML / Hugo / Jekyll
   / Astro layouts still get a raw <script>.

2. The Stats-tab "Install via GitHub" modal now has an optional
   collapsed "Subdirectory" input. Fill in e.g. "apps/web" for
   monorepos where auto-detection picks the wrong file (or to be
   explicit). Empty = auto-detect (canonical paths first, then code
   search). API + installTracker were already plumbed for rootPath;
   this just exposes it in the UI.

PR body now also shows the actual snippet that was inserted (with the
right language fence: tsx for Next.js, html otherwise) and mentions the
auto-added import.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../projects/[id]/stats/auto-install.tsx      | 19 +++++
 .../[id]/github/install-tracker/route.ts      |  4 +
 lib/github/install-tracker.ts                 | 75 ++++++++++++++++---
 3 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/app/(app)/projects/[id]/stats/auto-install.tsx b/app/(app)/projects/[id]/stats/auto-install.tsx
index 2327056f..8ac5719e 100644
--- a/app/(app)/projects/[id]/stats/auto-install.tsx
+++ b/app/(app)/projects/[id]/stats/auto-install.tsx
@@ -38,6 +38,7 @@ export function AutoInstall({
 }: AutoInstallProps) {
   const [open, setOpen] = useState(false);
   const [q, setQ] = useState("");
+  const [rootPath, setRootPath] = useState("");
   const [submitting, setSubmitting] = useState<string | null>(null);
   const [result, setResult] = useState<{ repo: string; result: InstallResult } | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -77,6 +78,7 @@ export function AutoInstall({
             owner,
             repo: name,
             installation_id: repo.installation_id,
+            root_path: rootPath.trim() || undefined,
           }),
         },
       );
@@ -172,6 +174,23 @@ export function AutoInstall({
                   )}
                 </div>
 
+                <details className="mt-2 text-sm">
+                  <summary className="cursor-pointer text-xs text-[var(--color-muted)]">
+                    Subdirectory (optional, for monorepos)
+                  </summary>
+                  <input
+                    type="text"
+                    value={rootPath}
+                    onChange={(e) => setRootPath(e.target.value)}
+                    placeholder="apps/web"
+                    className="mt-2 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm"
+                  />
+                  <p className="mt-1 text-xs text-[var(--color-muted)]">
+                    Leave blank to auto-detect. Set if your site lives in a
+                    monorepo subdir like <code>apps/web</code>.
+                  </p>
+                </details>
+
                 <ul className="mt-3 max-h-72 overflow-y-auto divide-y divide-[var(--color-border)] rounded-md border border-[var(--color-border)]">
                   {filtered.length === 0 ? (
                     <li className="p-3 text-sm text-[var(--color-muted)]">
diff --git a/app/api/projects/[id]/github/install-tracker/route.ts b/app/api/projects/[id]/github/install-tracker/route.ts
index a71f41ed..6302077d 100644
--- a/app/api/projects/[id]/github/install-tracker/route.ts
+++ b/app/api/projects/[id]/github/install-tracker/route.ts
@@ -15,6 +15,9 @@ const bodySchema = z.object({
   owner: z.string().min(1),
   repo: z.string().min(1),
   installation_id: z.number().int().positive(),
+  /** Optional subdirectory inside the repo where the app lives,
+   *  e.g. "apps/web" or "sites/sh1pt.com". */
+  root_path: z.string().max(500).optional(),
 });
 
 export async function POST(
@@ -94,6 +97,7 @@ export async function POST(
       owner: body.owner,
       repo: body.repo,
       projectId,
+      rootPath: body.root_path,
     });
     await finalize({
       status: result.status,
diff --git a/lib/github/install-tracker.ts b/lib/github/install-tracker.ts
index 91769e5e..0f177a68 100644
--- a/lib/github/install-tracker.ts
+++ b/lib/github/install-tracker.ts
@@ -59,17 +59,35 @@ const CANDIDATES: string[] = [
 
 const BRANCH_PREFIX = "crawlproof/install-stats-tracker";
 
-function snippetFor(projectId: string): string {
+function rawScriptTag(projectId: string): string {
   return `<script data-site="${projectId}" src="${env.siteUrl.replace(/\/$/, "")}/stats.js" async></script>`;
 }
 
+function nextScriptTag(projectId: string): string {
+  return `<Script data-site="${projectId}" src="${env.siteUrl.replace(/\/$/, "")}/stats.js" strategy="afterInteractive" />`;
+}
+
+/**
+ * Choose the right snippet shape for a target file. For Next.js TSX/JSX
+ * layouts we use the <Script> component (next/script) — idiomatic and
+ * avoids hydration warnings about an inline <script>. Everything else
+ * gets a plain HTML <script> tag.
+ */
+function snippetForPath(projectId: string, path: string): string {
+  return /\.(tsx|jsx)$/.test(path)
+    ? nextScriptTag(projectId)
+    : rawScriptTag(projectId);
+}
+
 /**
  * Return content with the snippet inserted before the first </body>, or
- * null if there's no </body> in the file.
+ * null if there's no </body> in the file. Adds `import Script from "next/script"`
+ * at the top of TSX/JSX files when needed.
  */
 function injectBeforeBodyClose(
   content: string,
   snippet: string,
+  path: string,
 ): string | null {
   const re = /<\/body>/i;
   const match = content.match(re);
@@ -80,7 +98,36 @@ function injectBeforeBodyClose(
   const prefix = content.slice(0, idx);
   const lineStart = prefix.lastIndexOf("\n") + 1;
   const indent = prefix.slice(lineStart).match(/^\s*/)?.[0] ?? "";
-  return `${prefix}${indent}  ${snippet}\n${indent}${content.slice(idx)}`;
+  let updated = `${prefix}${indent}  ${snippet}\n${indent}${content.slice(idx)}`;
+
+  // For Next.js layouts: add `import Script from "next/script"` if it
+  // isn't already imported. Skip if the file already pulls Script in
+  // from any source.
+  if (/\.(tsx|jsx)$/.test(path) && /<Script\b/.test(snippet)) {
+    if (!/from\s+["']next\/script["']/.test(updated)) {
+      updated = addNextScriptImport(updated);
+    }
+  }
+  return updated;
+}
+
+/**
+ * Insert `import Script from "next/script";` after the last top-level
+ * import statement. Falls back to the top of the file if none.
+ */
+function addNextScriptImport(content: string): string {
+  const importLine = `import Script from "next/script";\n`;
+  // Find the line index of the LAST line that starts with `import `.
+  const lines = content.split("\n");
+  let lastImportLine = -1;
+  for (let i = 0; i < lines.length; i++) {
+    if (/^import\b/.test(lines[i])) lastImportLine = i;
+  }
+  if (lastImportLine === -1) {
+    return importLine + content;
+  }
+  lines.splice(lastImportLine + 1, 0, importLine.replace(/\n$/, ""));
+  return lines.join("\n");
 }
 
 /** Strip leading/trailing slashes so we can confidently join with "/". */
@@ -96,7 +143,6 @@ export async function installTracker(input: InstallInput): Promise<InstallResult
     repo: input.repo,
   });
   const base = repoMeta.default_branch;
-  const snippet = snippetFor(input.projectId);
   const projectIdMarker = `data-site="${input.projectId}"`;
 
   const root = normalizeRoot(input.rootPath);
@@ -195,8 +241,10 @@ export async function installTracker(input: InstallInput): Promise<InstallResult
     );
   }
 
-  // 2. Compute the new content.
-  const updated = injectBeforeBodyClose(target.content, snippet);
+  // Compute the new content. Snippet shape (Next.js <Script> vs raw
+  // <script>) depends on the target file extension.
+  const snippet = snippetForPath(input.projectId, target.path);
+  const updated = injectBeforeBodyClose(target.content, snippet, target.path);
   if (!updated) {
     throw new Error(
       `Could not locate </body> in ${target.path} after second pass.`,
@@ -234,7 +282,7 @@ export async function installTracker(input: InstallInput): Promise<InstallResult
     head: branch,
     base,
     title: "Add CrawlProof stats tracker",
-    body: prBody(input.projectId, target.path),
+    body: prBody(input.projectId, target.path, snippet),
   });
 
   return {
@@ -247,16 +295,21 @@ export async function installTracker(input: InstallInput): Promise<InstallResult
   };
 }
 
-function prBody(projectId: string, path: string): string {
+function prBody(projectId: string, path: string, snippet: string): string {
+  const isNextScript = /<Script\b/.test(snippet);
+  void projectId;
+  const importNote = isNextScript
+    ? "\n\nThe diff also imports `Script` from `next/script` if it wasn't already imported.\n"
+    : "";
   return `This PR adds the [CrawlProof](https://crawlproof.com) stats tracker to your site.
 
 **What it does:** counts pageviews by source — AI engine referrals (ChatGPT, Perplexity, Claude, Gemini…) and AI crawler hits (GPTBot, ClaudeBot, PerplexityBot…). No cookies. No PII. Rolls up to a daily counter on the CrawlProof Stats tab for your project.
 
 **What changed:** one line added to \`${path}\`, just before \`</body>\`:
 
-\`\`\`html
-<script data-site="${projectId}" src="${env.siteUrl}/stats.js" async></script>
-\`\`\`
+\`\`\`${isNextScript ? "tsx" : "html"}
+${snippet}
+\`\`\`${importNote}
 
 **Docs:** ${env.siteUrl}/docs/stats-tracker
 **Disable:** flip the tracker off on your CrawlProof project Stats tab and the script becomes a no-op (or remove this line).`;