+ {/* Top subtle inner glow line */}
+
+
+ {/* Card Header */}
+
+ )
+}
+
+
+
diff --git a/frontend/src/routes/_auth/register.tsx b/frontend/src/routes/_auth/register.tsx
new file mode 100644
index 0000000..50c618e
--- /dev/null
+++ b/frontend/src/routes/_auth/register.tsx
@@ -0,0 +1,345 @@
+import { useState } from 'react'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { User, AtSign, Mail, Lock, Eye, EyeOff, ArrowRight, ShieldCheck, Check } from 'lucide-react'
+import { toast } from 'sonner'
+import { env } from '#/env'
+import { useRegister } from '#/features/auth'
+
+export const Route = createFileRoute('/_auth/register')({
+ component: RegisterComponent,
+})
+
+function RegisterComponent() {
+ const [fullName, setFullName] = useState('')
+ const [username, setUsername] = useState('')
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [confirmPassword, setConfirmPassword] = useState('')
+ const [showPassword, setShowPassword] = useState(false)
+ const [agreeTerms, setAgreeTerms] = useState(false)
+
+ const registerMutation = useRegister()
+ const navigate = useNavigate()
+
+ // Interactive Password Strength Logic
+ const getPasswordStrength = (pass: string) => {
+ let score = 0
+ if (!pass) return { score: 0, label: '', color: '' }
+ if (pass.length >= 8) score += 1
+ if (/[A-Z]/.test(pass)) score += 1
+ if (/[0-9]/.test(pass)) score += 1
+ if (/[^A-Za-z0-9]/.test(pass)) score += 1
+
+ if (score <= 1) return { score: 1, label: 'Weak', color: 'bg-rose-500' }
+ if (score === 2) return { score: 2, label: 'Fair', color: 'bg-amber-500' }
+ if (score === 3) return { score: 3, label: 'Good', color: 'bg-yellow-400' }
+ return { score: 4, label: 'Strong', color: 'bg-emerald-500' }
+ }
+
+ const strength = getPasswordStrength(password)
+ const passwordsMatch = confirmPassword.length > 0 && password === confirmPassword
+
+ const handleSubmit = (e: React.SubmitEvent) => {
+ e.preventDefault()
+ if (!agreeTerms) {
+ toast.error('Please agree to the Terms of Service & Privacy Policy.')
+ return
+ }
+ if (password !== confirmPassword) {
+ toast.error('Passwords do not match.')
+ return
+ }
+
+ const finalUsername = username.trim() || email.split('@')[0] || 'user'
+
+ registerMutation.mutate(
+ {
+ fullName,
+ username: finalUsername,
+ email,
+ password,
+ },
+ {
+ onSuccess: (res) => {
+ if (res.success) {
+ const msg = res.message || 'Account created successfully! Redirecting...'
+ toast.success(msg)
+ setTimeout(() => {
+ navigate({ to: '/' })
+ }, 800)
+ } else {
+ const msg = res.message || 'Registration failed'
+ toast.error(msg)
+ }
+ },
+ onError: (err: any) => {
+ const message =
+ err.response?.data?.message ||
+ err.message ||
+ 'Failed to create account. Please try again.'
+ toast.error(message)
+ },
+ }
+ )
+ }
+
+ const handleOAuthClick = (provider: 'github' | 'google') => {
+ const baseUrl = env.VITE_API_BASE_URL.replace(/\/+$/, '')
+ window.location.href = `${baseUrl}/oauth2/authorization/${provider}`
+ }
+
+
+ return (
+
+
+
+ {/* Form */}
+
+
+ {/* Or Divider */}
+ + Sign in to CodeCompass +
++ Enter your email and password to access your codebase intelligence workspace. +
+
+
+
+ {/* Social Logins */}
+
+
+
+
+
+ Or continue with
+
+
+
+ {/* GitHub */}
+
+
+ {/* Google */}
+
+
+
+ {/* Switch to Register */}
+
+ Don't have an account?{' '}
+
+ Sign up for free
+
+
+
+ {/* Footer Disclaimer */}
+
+ By signing in, you agree to CodeCompass's{' '}
+ Terms of Service and{' '}
+ Privacy Policy.
+
+
+ {/* Top inner glowing border */}
+
+
+ {/* Card Header */}
+
+ )
+}
+
+
diff --git a/frontend/src/routes/_auth/route.tsx b/frontend/src/routes/_auth/route.tsx
new file mode 100644
index 0000000..d5c7963
--- /dev/null
+++ b/frontend/src/routes/_auth/route.tsx
@@ -0,0 +1,141 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { Search, BookOpen, GitFork, Cpu, CheckCircle2 } from 'lucide-react'
+
+export const Route = createFileRoute('/_auth')({
+ component: AuthLayout,
+})
+
+function AuthLayout() {
+ return (
+
+
+
+ {/* Form */}
+
+
+ {/* Or Divider */}
+ + Create an Account +
++ Join thousands of developers exploring & understanding codebases with AI. +
+
+
+
+ {/* Social Register */}
+
+
+
+
+
+ Or register with
+
+
+
+ {/* GitHub */}
+
+
+ {/* Google */}
+
+
+
+ {/* Switch to Login */}
+
+ Already have an account?{' '}
+
+ Sign in
+
+
+
+ {/* Dynamic Background Glow Effects */}
+
+ )
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
new file mode 100644
index 0000000..5eba035
--- /dev/null
+++ b/frontend/src/routes/index.tsx
@@ -0,0 +1,186 @@
+import { useState } from 'react'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useCurrentUser, useLogout } from '#/features/auth'
+import { LogOut, User as UserIcon, Shield, Sparkles, ArrowRight } from 'lucide-react'
+import { toast } from 'sonner'
+
+export const Route = createFileRoute('/')({ component: Home })
+
+function Home() {
+ const { data: userResponse, isLoading } = useCurrentUser()
+ const logoutMutation = useLogout()
+ const navigate = useNavigate()
+ const [avatarError, setAvatarError] = useState(false)
+
+ const currentUser = userResponse?.data
+
+ const handleLogout = () => {
+ logoutMutation.mutate(undefined, {
+ onSuccess: () => {
+ toast.success('Signed out successfully.')
+ navigate({ to: '/login' })
+ },
+ onError: (err: any) => {
+ toast.error(err?.message || 'Logout failed.')
+ },
+ })
+ }
+
+ return (
+
+ {/* Top-left Amber/Orange Radial Glow */}
+
+ {/* Bottom-right Deep Indigo/Cyan Glow */}
+
+ {/* Subtle Tech Grid lines overlay */}
+
+
+
+ {/* LEFT COLUMN - Brand & Feature Showcase (Visible on lg screens) */}
+
+ {/* Top Logo Header */}
+
+
+ {/* RIGHT COLUMN - Form Outlet Container (Login / Register) */}
+
+
+
+ {/* Middle Hero & Feature Highlights */}
+
+ 
+
+
+
+
+ CodeCompass
+
+
+ AI Code Intelligence
+
+
+
+
+ {/* Footer info */}
+
+ + Navigate Any Codebase with{' '} + + AI Precision + +
+ ++ CodeCompass empowers engineering teams to understand, search, document, and map complex software architectures in seconds using advanced semantic AI. +
+ + {/* 4 Feature Cards Grid */} +
+
+
+ {/* Interactive Code Preview Graphic */}
+
+
+
+
+
+ Semantic Search
+Search by intent and logic across millions of lines of code.
+
+
+
+
+
+ AI Documentation
+Auto-generate comprehensive docs and system flow explanations.
+
+
+
+
+
+ Dependency Graphs
+Visualize clear module relationships and data dependencies.
+
+
+
+
+ Architecture Maps
+Deep-dive into component structures and execution paths.
+
+
+
+
+
+
+
+
+
+ UserService.ts
+
+
+
+
+
+ // AI Query: Map authentication flow and token refresh
+ export async function authenticateUser(credentials: UserAuth) {
+ // Querying CodeCompass Vector Graph...
+
+ const token = await AuthEngine.verifyAndSign(credentials);
+
+ return { status: 'AUTHENTICATED', token };
+ }
+
+ {/* Mobile Header (Shown only on small screens) */}
+
+
+
+ CodeCompass
+
+
+
+ CodeCompass
+
+
+
+ {/* Dynamic Background Glows */}
+
+ )
+}
+
diff --git a/frontend/src/routes/oauth2/callback.tsx b/frontend/src/routes/oauth2/callback.tsx
new file mode 100644
index 0000000..ad775c4
--- /dev/null
+++ b/frontend/src/routes/oauth2/callback.tsx
@@ -0,0 +1,47 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { z } from 'zod'
+import { authQueryKeys } from '#/features/auth/hooks/use-auth'
+import { tokenManager } from '#/lib/token-manager'
+
+const callbackSearchSchema = z.object({
+ access_token: z.string().optional(),
+ error: z.string().optional(),
+})
+
+export const Route = createFileRoute('/oauth2/callback')({
+ validateSearch: (search) => callbackSearchSchema.parse(search),
+ component: OAuthCallbackComponent,
+})
+
+function OAuthCallbackComponent() {
+ const { access_token, error } = Route.useSearch()
+ const navigate = useNavigate()
+ const queryClient = useQueryClient()
+
+ useEffect(() => {
+ if (access_token) {
+ tokenManager.setAccessToken(access_token)
+ queryClient.invalidateQueries({ queryKey: authQueryKeys.all })
+ toast.success('Signed in successfully!')
+ navigate({ to: '/' })
+ } else if (error) {
+ toast.error('Sign in failed. Please try again.')
+ navigate({ to: '/login' })
+ } else {
+ navigate({ to: '/login' })
+ }
+ }, [access_token, error, navigate, queryClient])
+
+ return (
+
+
+
+
+
+
+ {/* Navigation Header */}
+
+
+
+ {/* Main Content Area */}
+ {isLoading ? (
+
+
+
+
+
+
+
+
+ + CodeCompass + +
+AI Code Intelligence System
+
+ {isLoading ? (
+
+ ) : currentUser ? (
+
+ ) : (
+
+
+
+ Sign In
+
+
+ Get Started
+
+
+ )}
+
+
+
+ ) : currentUser ? (
+ Verifying session...
+
+
+
+
+ ) : (
+
+
+
+
+ {currentUser.avatarUrl && !avatarError ? (
+ 
setAvatarError(true)}
+ className="w-14 h-14 rounded-2xl object-cover border border-orange-500/30 shadow-lg shadow-orange-950/40 shrink-0"
+ />
+ ) : (
+
+
+ {currentUser.fullName ? currentUser.fullName.charAt(0).toUpperCase() : 'U'}
+
+ )}
+
+
+
+
+ + Welcome back, {currentUser.fullName}! +
+ + {currentUser.role} + ++ @{currentUser.username} • {currentUser.email} +
+
+
+
+
+
+
+
+ Session Status
+Authenticated & Token Active
+
+
+
+
+
+ User ID
+{currentUser.id}
+
+
+
+
+ Code Intelligence
+Workspace indexing ready
+
+
+
+
+ )}
+
+
+
+ + Understand Any Codebase in Seconds +
+ ++ Sign in or create an account to start performing semantic code searches, mapping dependency graphs, and generating real-time architecture insights. +
+ +
+
+ Create Free Account
+
+
+
+ )
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
new file mode 100644
index 0000000..3ee47e4
--- /dev/null
+++ b/frontend/src/styles.css
@@ -0,0 +1,371 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --sea-ink: #173a40;
+ --sea-ink-soft: #416166;
+ --lagoon: #4fb8b2;
+ --lagoon-deep: #328f97;
+ --palm: #2f6a4a;
+ --sand: #e7f0e8;
+ --foam: #f3faf5;
+ --surface: rgba(255, 255, 255, 0.74);
+ --surface-strong: rgba(255, 255, 255, 0.9);
+ --line: rgba(23, 58, 64, 0.14);
+ --inset-glint: rgba(255, 255, 255, 0.82);
+ --kicker: rgba(47, 106, 74, 0.9);
+ --bg-base: #e7f3ec;
+ --header-bg: rgba(251, 255, 248, 0.84);
+ --chip-bg: rgba(255, 255, 255, 0.8);
+ --chip-line: rgba(47, 106, 74, 0.18);
+ --link-bg-hover: rgba(255, 255, 255, 0.9);
+ --hero-a: rgba(79, 184, 178, 0.36);
+ --hero-b: rgba(47, 106, 74, 0.2);
+
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.141 0.005 285.823);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.141 0.005 285.823);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.141 0.005 285.823);
+ --primary: oklch(0.21 0.006 285.885);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.967 0.001 286.375);
+ --secondary-foreground: oklch(0.21 0.006 285.885);
+ --muted: oklch(0.967 0.001 286.375);
+ --muted-foreground: oklch(0.552 0.016 285.938);
+ --accent: oklch(0.967 0.001 286.375);
+ --accent-foreground: oklch(0.21 0.006 285.885);
+ --destructive: oklch(0.577 0.245 27.325);
+ --destructive-foreground: oklch(0.577 0.245 27.325);
+ --border: oklch(0.92 0.004 286.32);
+ --input: oklch(0.92 0.004 286.32);
+ --ring: oklch(0.871 0.006 286.286);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --radius: 0.625rem;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
+ --sidebar-primary: oklch(0.21 0.006 285.885);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.967 0.001 286.375);
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+ --sidebar-border: oklch(0.92 0.004 286.32);
+ --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+ --sea-ink: #d7ece8;
+ --sea-ink-soft: #afcdc8;
+ --lagoon: #60d7cf;
+ --lagoon-deep: #8de5db;
+ --palm: #6ec89a;
+ --sand: #0f1a1e;
+ --foam: #101d22;
+ --surface: rgba(16, 30, 34, 0.8);
+ --surface-strong: rgba(15, 27, 31, 0.92);
+ --line: rgba(141, 229, 219, 0.18);
+ --inset-glint: rgba(194, 247, 238, 0.14);
+ --kicker: #b8efe5;
+ --bg-base: #0a1418;
+ --header-bg: rgba(10, 20, 24, 0.8);
+ --chip-bg: rgba(13, 28, 32, 0.9);
+ --chip-line: rgba(141, 229, 219, 0.24);
+ --link-bg-hover: rgba(24, 44, 49, 0.8);
+ --hero-a: rgba(96, 215, 207, 0.18);
+ --hero-b: rgba(110, 200, 154, 0.12);
+
+ --background: oklch(0.141 0.005 285.823);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.141 0.005 285.823);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.141 0.005 285.823);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.985 0 0);
+ --primary-foreground: oklch(0.21 0.006 285.885);
+ --secondary: oklch(0.274 0.006 286.033);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.274 0.006 286.033);
+ --muted-foreground: oklch(0.705 0.015 286.067);
+ --accent: oklch(0.274 0.006 286.033);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.396 0.141 25.723);
+ --destructive-foreground: oklch(0.637 0.237 25.331);
+ --border: oklch(0.274 0.006 286.033);
+ --input: oklch(0.274 0.006 286.033);
+ --ring: oklch(0.442 0.017 285.786);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.21 0.006 285.885);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.274 0.006 286.033);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(0.274 0.006 286.033);
+ --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+ --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+html,
+body,
+#app {
+ min-height: 100%;
+}
+
+body {
+ margin: 0;
+ color: var(--sea-ink);
+ font-family: var(--font-sans);
+ background-color: var(--bg-base);
+ background:
+ radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
+ radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
+ radial-gradient(
+ 720px 380px at 50% 115%,
+ rgba(79, 184, 178, 0.1),
+ transparent 68%
+ ),
+ linear-gradient(
+ 180deg,
+ color-mix(in oklab, var(--sand) 68%, white) 0%,
+ var(--foam) 44%,
+ var(--bg-base) 100%
+ );
+ overflow-x: hidden;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: -1;
+ opacity: 0.28;
+ background:
+ radial-gradient(
+ circle at 20% 15%,
+ rgba(255, 255, 255, 0.8),
+ transparent 34%
+ ),
+ radial-gradient(
+ circle at 78% 26%,
+ rgba(79, 184, 178, 0.2),
+ transparent 42%
+ ),
+ radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
+}
+
+body::after {
+ content: '';
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: -1;
+ opacity: 0.14;
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+ background-size: 28px 28px;
+ mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
+}
+
+a {
+ color: var(--lagoon-deep);
+ text-decoration-color: rgba(50, 143, 151, 0.4);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 2px;
+}
+
+a:hover {
+ color: #246f76;
+}
+
+code {
+ font-size: 0.9em;
+ border: 1px solid var(--line);
+ background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
+ border-radius: 7px;
+ padding: 2px 7px;
+}
+
+pre code {
+ border: 0;
+ background: transparent;
+ padding: 0;
+ border-radius: 0;
+ font-size: inherit;
+ color: inherit;
+}
+
+.prose pre {
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ background: #1d2e45;
+ color: #e8efff;
+}
+
+.page-wrap {
+ width: min(1080px, calc(100% - 2rem));
+ margin-inline: auto;
+}
+
+.display-title {
+ font-family: 'Fraunces', Georgia, serif;
+}
+
+.island-shell {
+ border: 1px solid var(--line);
+ background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+ box-shadow:
+ 0 1px 0 var(--inset-glint) inset,
+ 0 22px 44px rgba(30, 90, 72, 0.1),
+ 0 6px 18px rgba(23, 58, 64, 0.08);
+ backdrop-filter: blur(4px);
+}
+
+.feature-card {
+ background: linear-gradient(
+ 165deg,
+ color-mix(in oklab, var(--surface-strong) 93%, white 7%),
+ var(--surface)
+ );
+ box-shadow:
+ 0 1px 0 var(--inset-glint) inset,
+ 0 18px 34px rgba(30, 90, 72, 0.1),
+ 0 4px 14px rgba(23, 58, 64, 0.06);
+}
+
+.feature-card:hover {
+ transform: translateY(-2px);
+ border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
+}
+
+button,
+.island-shell,
+a {
+ transition:
+ background-color 180ms ease,
+ color 180ms ease,
+ border-color 180ms ease,
+ transform 180ms ease;
+}
+
+.island-kicker {
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 0.69rem;
+ color: var(--kicker);
+}
+
+.nav-link {
+ position: relative;
+ text-decoration: none;
+ color: var(--sea-ink-soft);
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 100%;
+ height: 2px;
+ transform: scaleX(0);
+ transform-origin: left;
+ background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
+ transition: transform 170ms ease;
+}
+
+.nav-link:hover,
+.nav-link.is-active {
+ color: var(--sea-ink);
+}
+
+.nav-link:hover::after,
+.nav-link.is-active::after {
+ transform: scaleX(1);
+}
+
+.rise-in {
+ animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rise-in {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.site-footer {
+ border-top: 1px solid var(--line);
+ background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ background-color: var(--background);
+ color: var(--foreground);
+ }
+}
diff --git a/frontend/src/types/api.types.ts b/frontend/src/types/api.types.ts
new file mode 100644
index 0000000..21a190a
--- /dev/null
+++ b/frontend/src/types/api.types.ts
@@ -0,0 +1,5 @@
+export interface ApiResponse
+
+
+ Completing sign in...
+Please wait while we set up your session and redirect to your workspace.
+