daikictrl · coderabbitai · May 3, 2026
diff --git a/.agents/skills/clerk-nextjs-patterns/templates/nextjs-basic-auth/app/layout.tsx b/.agents/skills/clerk-nextjs-patterns/templates/nextjs-basic-auth/app/layout.tsx
@@ -1,5 +1,15 @@
 import { ClerkProvider, Show, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs'
 
+/**
+ * Wraps the application with the root HTML structure and Clerk authentication provider.
+ *
+ * Renders an <html> and <body>, nests a ClerkProvider that supplies auth state, displays
+ * sign-in and sign-up controls when the user is signed out and a user menu when signed in,
+ * then renders the provided children beneath the header.
+ *
+ * @param children - The page or app content to render inside the layout
+ * @returns The top-level HTML element containing the ClerkProvider, header, and `children`
+ */
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">

diff --git a/.agents/skills/clerk-nextjs-patterns/templates/nextjs-basic-auth/app/page.tsx b/.agents/skills/clerk-nextjs-patterns/templates/nextjs-basic-auth/app/page.tsx
@@ -1,3 +1,8 @@
+/**
+ * Render the Home page.
+ *
+ * @returns A React element containing an `<h1>` with the text "Home".
+ */
 export default function Home() {
   return <h1>Home</h1>
 }
diff --git a/app/editor/layout.tsx b/app/editor/layout.tsx
@@ -1,5 +1,10 @@
 import { EditorLayout } from "@/components/editor/editor-layout"
 
+/**
+ * Wraps its children inside the EditorLayout component.
+ *
+ * @returns A React element rendering `EditorLayout` containing the given `children`.
+ */
 export default function ProtectedEditorLayout({
   children,
 }: Readonly<{

diff --git a/app/editor/page.tsx b/app/editor/page.tsx
@@ -1,3 +1,11 @@
+/**
+ * Page component that renders a centered "Ghost AI" heading.
+ *
+ * Renders a full-height flex container that centers its content and displays
+ * the heading text "Ghost AI" with prominent styling.
+ *
+ * @returns A JSX element containing the centered container and heading.
+ */
 export default function EditorPage() {
   return (
     <div className="flex h-full items-center justify-center">

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -40,6 +40,12 @@ const clerkAppearance = {
   },
 };
 
+/**
+ * Root layout component that wraps the application with Clerk authentication and global styles.
+ *
+ * @param children - The page content to render inside the layout
+ * @returns The React element rendering the app wrapped in a `ClerkProvider` and an `html`/`body` scaffold with configured fonts and dark-theme classes
+ */
 export default function RootLayout({
   children,
 }: Readonly<{

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,11 @@
 import { auth } from "@clerk/nextjs/server";
 import { redirect } from "next/navigation";
 
+/**
+ * Redirects the request to "/editor" when a user is authenticated, otherwise redirects to "/sign-in".
+ *
+ * The function decides the destination solely from the current authentication state and performs an immediate navigation redirect.
+ */
 export default async function Home() {
   const { userId } = await auth();
 

diff --git a/app/sign-in/[[...sign-in]]/page.tsx b/app/sign-in/[[...sign-in]]/page.tsx
@@ -2,6 +2,16 @@ import { SignIn } from "@clerk/nextjs"
 
 import { AuthPageShell } from "@/components/auth/auth-page-shell"
 
+/**
+ * Renders the sign-in page using the AuthPageShell and Clerk's SignIn component.
+ *
+ * The embedded SignIn is configured to use path-based routing at `/sign-in`, will
+ * redirect to `/editor` when no target is determined, and uses the
+ * `NEXT_PUBLIC_CLERK_SIGN_UP_URL` environment variable for the sign-up URL if set,
+ * falling back to `/sign-up` otherwise.
+ *
+ * @returns The React element for the sign-in page.
+ */
 export default function SignInPage() {
   return (
     <AuthPageShell

diff --git a/app/sign-up/[[...sign-up]]/page.tsx b/app/sign-up/[[...sign-up]]/page.tsx
@@ -2,6 +2,16 @@ import { SignUp } from "@clerk/nextjs"
 
 import { AuthPageShell } from "@/components/auth/auth-page-shell"
 
+/**
+ * Render the sign-up page with Clerk's SignUp UI inside the AuthPageShell.
+ *
+ * The page sets the shell's title to "Create your workspace" and a brief tagline,
+ * and configures the `SignUp` component to use path-based routing (`/sign-up`),
+ * use `NEXT_PUBLIC_CLERK_SIGN_IN_URL` (falling back to `/sign-in`) for the sign-in URL,
+ * and redirect to `/editor` after successful sign-up.
+ *
+ * @returns A React element containing the sign-up UI wrapped by the auth page shell.
+ */
 export default function SignUpPage() {
   return (
     <AuthPageShell

diff --git a/components/auth/auth-page-shell.tsx b/components/auth/auth-page-shell.tsx
@@ -10,6 +10,14 @@ const authFeatures = [
   "Profile and logout handled securely",
 ]
 
+/**
+ * Provides a two-column authentication page layout with a left marketing panel (visible on large screens) and a right, centered content area for form or interactive UI.
+ *
+ * @param title - Heading text displayed in the left marketing panel
+ * @param tagline - Subheading text displayed above the title in the left panel
+ * @param children - Content rendered in the right column (for example, sign-in or sign-up forms)
+ * @returns The React element for the authentication page shell
+ */
 function AuthPageShell({ title, tagline, children }: AuthPageShellProps) {
   return (
     <main className="min-h-dvh bg-background text-foreground lg:grid lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1fr)]">

diff --git a/components/editor/editor-navbar.tsx b/components/editor/editor-navbar.tsx
@@ -12,6 +12,16 @@ type EditorNavbarProps = {
   className?: string
 }
 
+/**
+ * Renders the editor top navbar with a sidebar toggle and user account button.
+ *
+ * Renders a header containing a left-aligned sidebar toggle button (icon and ARIA state reflect `isSidebarOpen`), an empty center region, and a right-aligned Clerk `UserButton`. The `onSidebarToggle` callback is invoked when the toggle button is clicked.
+ *
+ * @param isSidebarOpen - Whether the projects sidebar is currently open; controls the toggle icon and `aria-pressed` state.
+ * @param onSidebarToggle - Click handler invoked to toggle the sidebar state.
+ * @param className - Optional additional CSS classes applied to the header container.
+ * @returns The navbar header element containing the toggle button and user button.
+ */
 function EditorNavbar({
   isSidebarOpen,
   onSidebarToggle,