Windsurf AI-Native Collaborative Development

// Cascade Prompt Example:
// "Refactor authentication to use better-auth v1.3.9 across these files:
//  - lib/auth.ts
//  - app/api/auth/[...auth]/route.ts
//  - components/login-form.tsx
//  Maintain all existing OAuth providers and session logic."

// Before: lib/auth.ts (NextAuth)
import NextAuth from 'next-auth';
import { authOptions } from './options';

export const { handlers, signIn, signOut, auth } = NextAuth(authOptions);

// After: lib/auth.ts (better-auth) - Generated by Cascade
import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';
import { prisma } from '@/lib/db';

export const auth = betterAuth({
  database: prismaAdapter(prisma, { provider: 'postgresql' }),
  emailAndPassword: { enabled: true },
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
});

export const { signIn, signOut } = auth;

// Cascade Prompt:
// "Extract user profile section into components/user/profile.tsx
//  with variants support and proper TypeScript types."

// After: components/user/profile.tsx - Generated by Cascade
import type { User } from '@/types/user';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

interface UserProfileProps {
  user: User;
  variant?: 'compact' | 'full';
}

export function UserProfile({ user, variant = 'full' }: UserProfileProps) {
  return (
    <div className="flex items-center gap-4">
      <Avatar className={variant === 'compact' ? 'h-8 w-8' : 'h-16 w-16'}>
        <AvatarImage src={user.avatar} alt={user.name} />
        <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
      </Avatar>
      <div>
        <h3 className={variant === 'compact' ? 'text-sm font-medium' : 'text-lg font-semibold'}>
          {user.name}
        </h3>
        {variant === 'full' && (
          <>
            <p className="text-sm text-muted-foreground">{user.email}</p>
            {user.bio && <p className="mt-2 text-sm">{user.bio}</p>}
          </>
        )}
      </div>
    </div>
  );
}

// Updated dashboard usage:
import { UserProfile } from '@/components/user/profile';

export default function DashboardPage() {
  const { user } = useAuth();
  return (
    <div>
      <UserProfile user={user} variant="full" />
    </div>
  );
}