frontend: provide Clerk-safe wrappers for secretless CI prerender

frontend/src/app/agents/[agentId]/edit/page.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {

frontend/src/app/agents/[agentId]/page.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {

frontend/src/app/agents/new/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {

frontend/src/app/agents/page.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import {
   type ColumnDef,
   type SortingState,

frontend/src/app/boards/[boardId]/approvals/page.tsx

@@ -2,7 +2,7 @@
 
 import { useParams } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut } from "@/auth/clerk";
 
 import { BoardApprovalsPanel } from "@/components/BoardApprovalsPanel";
 import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";

frontend/src/app/boards/[boardId]/edit/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import { X } from "lucide-react";
 
 import { ApiError } from "@/api/mutator";

frontend/src/app/boards/[boardId]/page.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import {
   Activity,
   ArrowUpRight,

frontend/src/app/boards/new/page.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import { useCreateBoardApiV1BoardsPost } from "@/api/generated/boards/boards";

frontend/src/app/boards/page.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useState } from "react";
 import Link from "next/link";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import {
   type ColumnDef,
   flexRender,

frontend/src/app/dashboard/page.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import {
   Area,
   AreaChart,

frontend/src/app/gateways/[gatewayId]/edit/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
 
 import { ApiError } from "@/api/mutator";

frontend/src/app/gateways/[gatewayId]/page.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {

frontend/src/app/gateways/new/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
 
 import { ApiError } from "@/api/mutator";

frontend/src/app/gateways/page.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useState } from "react";
 import Link from "next/link";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import {
   type ColumnDef,
   type SortingState,

frontend/src/app/onboarding/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth, useUser } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth, useUser } from "@/auth/clerk";
 import { Globe, Info, RotateCcw, Save, User } from "lucide-react";
 
 import { ApiError } from "@/api/mutator";

frontend/src/auth/clerk.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+// NOTE: We intentionally keep this file very small and dependency-free.
+// It provides CI/secretless-build safe fallbacks for Clerk hooks/components.
+
+import {
+  ClerkProvider,
+  SignedIn as ClerkSignedIn,
+  SignedOut as ClerkSignedOut,
+  SignInButton as ClerkSignInButton,
+  SignOutButton as ClerkSignOutButton,
+  useAuth as clerkUseAuth,
+  useUser as clerkUseUser,
+} from "@clerk/nextjs";
+
+export function isClerkEnabled(): boolean {
+  const key = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+  if (!key) return false;
+
+  // Clerk validates publishable key contents at runtime; use a conservative heuristic.
+  const m = /^pk_(test|live)_([A-Za-z0-9]+)$/.exec(key);
+  if (!m) return false;
+  const body = m[2];
+  if (body.length < 16) return false;
+  if (/^0+$/.test(body)) return false;
+  return true;
+}
+
+export function SignedIn(props: { children: ReactNode }) {
+  if (!isClerkEnabled()) return null;
+  return <ClerkSignedIn>{props.children}</ClerkSignedIn>;
+}
+
+export function SignedOut(props: { children: ReactNode }) {
+  if (!isClerkEnabled()) return <>{props.children}</>;
+  return <ClerkSignedOut>{props.children}</ClerkSignedOut>;
+}
+
+// Accept arbitrary Clerk component props so existing call sites don't need edits.
+export function SignInButton(props: any) {
+  if (!isClerkEnabled()) return null;
+  return <ClerkSignInButton {...props} />;
+}
+
+export function SignOutButton(props: any) {
+  if (!isClerkEnabled()) return null;
+  return <ClerkSignOutButton {...props} />;
+}
+
+export function useUser() {
+  if (!isClerkEnabled()) {
+    return { isLoaded: true, isSignedIn: false, user: null } as const;
+  }
+  return clerkUseUser();
+}
+
+export function useAuth() {
+  if (!isClerkEnabled()) {
+    return {
+      isLoaded: true,
+      isSignedIn: false,
+      userId: null,
+      sessionId: null,
+      getToken: async () => null,
+    } as const;
+  }
+  return clerkUseAuth();
+}
+
+// Re-export ClerkProvider for places that want to mount it, but strongly prefer
+// gating via isClerkEnabled() at call sites.
+export { ClerkProvider };

frontend/src/components/BoardApprovalsPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo, useState } from "react";
 
-import { useAuth } from "@clerk/nextjs";
+import { useAuth } from "@/auth/clerk";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { Clock } from "lucide-react";

frontend/src/components/organisms/LandingHero.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut } from "@/auth/clerk";
 
 import { HeroCopy } from "@/components/molecules/HeroCopy";
 import { Button } from "@/components/ui/button";

frontend/src/components/organisms/UserMenu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { SignOutButton, useUser } from "@clerk/nextjs";
+import { SignOutButton, useUser } from "@/auth/clerk";
 import { LogOut } from "lucide-react";
 
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

frontend/src/components/templates/DashboardShell.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 
-import { SignedIn, useUser } from "@clerk/nextjs";
+import { SignedIn, useUser } from "@/auth/clerk";
 
 import { BrandMark } from "@/components/atoms/BrandMark";
 import { UserMenu } from "@/components/organisms/UserMenu";

frontend/src/components/templates/LandingShell.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 
-import { SignedIn } from "@clerk/nextjs";
+import { SignedIn } from "@/auth/clerk";
 
 import { BrandMark } from "@/components/atoms/BrandMark";
 import { UserMenu } from "@/components/organisms/UserMenu";

frontend/src/proxy.ts

@@ -1,6 +1,18 @@
+import { NextResponse } from "next/server";
 import { clerkMiddleware } from "@clerk/nextjs/server";
 
-export default clerkMiddleware();
+const isClerkEnabled = () => {
+  const key = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+  if (!key) return false;
+  const m = /^pk_(test|live)_([A-Za-z0-9]+)$/.exec(key);
+  if (!m) return false;
+  const body = m[2];
+  if (body.length < 16) return false;
+  if (/^0+$/.test(body)) return false;
+  return true;
+};
+
+export default isClerkEnabled() ? clerkMiddleware() : () => NextResponse.next();
 
 export const config = {
   matcher: [