feat: Add developer console branding with mission statement and authentication logging (#72)

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { ClerkProvider } from "@clerk/nextjs";
 import localFont from "next/font/local";
+import { ConsoleBranding } from "@/components/console-branding";
 import ConvexClientProvider from "@/components/convex-client-provider";
 import { NetworkStatusIndicator } from "@/components/error-display";
 import { Footer } from "@/components/header/footer";
@@ -40,6 +41,7 @@ export default function RootLayout({
         >
           <ClerkProvider dynamic>
             <ConvexClientProvider>
+              <ConsoleBranding />
               <ActivateSubscriptionBanner />
               <Header />
               <div className="pb-[24px]">{children}</div>

components/ascii-art.ts

@@ -0,0 +1,18 @@
+export const VAI_ASCII_ART = `
+██╗   ██╗ █████╗ ██╗     ██╗   ██╗███████╗██╗  ██╗
+██║   ██║██╔══██╗██║     ██║   ██║██╔════╝╚██╗██╔╝
+██║   ██║███████║██║     ██║   ██║█████╗   ╚███╔╝
+╚██╗ ██╔╝██╔══██║██║     ╚██╗ ██╔╝██╔══╝   ██╔██╗
+ ╚████╔╝ ██║  ██║███████╗ ╚████╔╝ ███████╗██╔╝ ██╗
+  ╚═══╝  ╚═╝  ╚═╝╚══════╝  ╚═══╝  ╚══════╝╚═╝  ╚═╝
+`;
+
+export const MISSION_STATEMENT = `
+🚀 Empowering AI Engineers to Build the Future
+
+Join us in creating the world's most innovative AI engineering community.
+Share knowledge, collaborate on projects, and advance the field of AI together.
+
+💼 Explore Career Opportunities: https://vibewith.ai/blog
+🌟 Be part of something extraordinary.
+`;

components/console-branding.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import { useEffect } from "react";
+import { useConsoleLogger } from "@/hooks/use-console-branding";
+
+export function ConsoleBranding() {
+  const { isSignedIn, user } = useUser();
+  const { logBranding, logAuthEvent } = useConsoleLogger();
+
+  // Display branding once on mount
+  useEffect(() => {
+    logBranding();
+
+    // Log initial auth state
+    logAuthEvent("session_initialized", {
+      isSignedIn: !!isSignedIn,
+      userId: user?.id,
+      timestamp: new Date().toISOString(),
+    });
+  }, [logBranding, logAuthEvent, isSignedIn, user?.id]);
+
+  // Log auth state changes
+  useEffect(() => {
+    if (isSignedIn) {
+      logAuthEvent("user_signed_in", {
+        isSignedIn: true,
+        userId: user?.id,
+        timestamp: new Date().toISOString(),
+      });
+    } else {
+      logAuthEvent("user_signed_out", {
+        isSignedIn: false,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }, [isSignedIn, user?.id, logAuthEvent]);
+
+  // This component only handles console output
+  return null;
+}

hooks/use-console-branding.ts

@@ -0,0 +1,70 @@
+import { useCallback } from "react";
+import { MISSION_STATEMENT, VAI_ASCII_ART } from "@/components/ascii-art";
+
+interface AuthEventData {
+  timestamp: string;
+  isSignedIn?: boolean;
+  userId?: string;
+  event?: string;
+}
+
+interface TokenRefreshData {
+  expiresAt: string;
+  refreshedAt: string;
+}
+
+export function useConsoleLogger() {
+  const isDev = process.env.NODE_ENV === "development";
+
+  const logBranding = useCallback(() => {
+    if (typeof window === "undefined") return;
+
+    console.log(`%c${VAI_ASCII_ART}`, "color: #3b82f6; font-weight: bold; font-family: monospace;");
+    console.log(`%c${MISSION_STATEMENT}`, "color: #10b981; font-size: 14px; line-height: 1.5;");
+    console.log(
+      "%c===== VAI-VEX Developer Console =====",
+      "color: #f59e0b; font-weight: bold; font-size: 16px;",
+    );
+    console.log("%cVersion: 0.1.0", "color: #6b7280;");
+    console.log(`%cEnvironment: ${process.env.NODE_ENV}`, "color: #6b7280;");
+  }, []);
+
+  const logAuthEvent = useCallback(
+    (event: string, data: AuthEventData) => {
+      if (typeof window === "undefined") return;
+
+      const logLevel = isDev ? "log" : "debug";
+
+      // Only include sensitive data in development
+      const safeData = {
+        timestamp: data.timestamp,
+        event,
+        isSignedIn: !!data.isSignedIn,
+        ...(isDev && data.userId && { userId: data.userId }),
+      };
+
+      console[logLevel](
+        `%c🔐 AUTH ${event.toUpperCase()}`,
+        "color: #8b5cf6; font-weight: bold;",
+        safeData,
+      );
+    },
+    [isDev],
+  );
+
+  const logTokenRefresh = useCallback((tokenData: TokenRefreshData) => {
+    if (typeof window === "undefined") return;
+
+    console.log("%c🔄 TOKEN REFRESH", "color: #06b6d4; font-weight: bold;", {
+      timestamp: new Date().toISOString(),
+      expiresAt: tokenData.expiresAt,
+      refreshedAt: tokenData.refreshedAt,
+    });
+  }, []);
+
+  return {
+    logBranding,
+    logAuthEvent,
+    logTokenRefresh,
+  };
+}