Merge pull request #49 from kortix-ai/fix-frontend-npm-run-build

Fix frontend build mathafucka

frontend/src/app/auth/page.tsx

@@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input";
 import GoogleSignIn from "@/components/GoogleSignIn";
 import { FlickeringGrid } from "@/components/home/ui/flickering-grid";
 import { useMediaQuery } from "@/hooks/use-media-query";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, Suspense } from "react";
 import { useScroll } from "motion/react";
 import { signIn, signUp, forgotPassword } from "./actions";
 import { useSearchParams, useRouter } from "next/navigation";
@@ -22,7 +22,7 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 
-export default function Login() {
+function LoginContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { user, isLoading } = useAuth();
@@ -525,3 +525,15 @@ export default function Login() {
     </main>
   );
 }
+
+export default function Login() {
+  return (
+    <Suspense fallback={
+      <main className="flex flex-col items-center justify-center min-h-screen w-full">
+        <div className="w-12 h-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+      </main>
+    }>
+      <LoginContent />
+    </Suspense>
+  );
+}

frontend/src/app/auth/reset-password/page.tsx

@@ -3,14 +3,14 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useState, useEffect, Suspense } from "react";
 import { AlertCircle, ArrowLeft, CheckCircle } from "lucide-react";
 
 import { Input } from "@/components/ui/input";
 import { SubmitButton } from "@/components/ui/submit-button";
 import { resetPassword } from "../actions";
 
-export default function ResetPassword() {
+function ResetPasswordContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const code = searchParams.get("code");
@@ -168,4 +168,16 @@ export default function ResetPassword() {
       </div>
     </main>
   );
+}
+
+export default function ResetPassword() {
+  return (
+    <Suspense fallback={
+      <main className="flex flex-col items-center justify-center min-h-screen w-full">
+        <div className="w-12 h-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+      </main>
+    }>
+      <ResetPasswordContent />
+    </Suspense>
+  );
 } 

frontend/src/app/dashboard/(personalAccount)/loading.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+// This component will be shown while the route is loading
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="w-12 h-12 border-4 border-primary rounded-full border-t-transparent animate-spin"></div>
+    </div>
+  );
+} 

frontend/src/app/dashboard/(personalAccount)/page.tsx

@@ -1,5 +1,27 @@
-import { redirect } from 'next/navigation';
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+// Set all dynamic options to prevent prerendering
+export const dynamic = 'force-dynamic';
+export const dynamicParams = true;
+export const revalidate = 0;
+export const fetchCache = 'force-no-store';
+export const runtime = 'edge';
 
 export default function PersonalAccountPage() {
-  redirect('/dashboard');
+  const router = useRouter();
+  
+  // Use client-side navigation instead of server redirect
+  useEffect(() => {
+    router.replace('/dashboard');
+  }, [router]);
+  
+  // Return a minimal loading state until redirect happens
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="w-8 h-8 border-2 border-primary rounded-full border-t-transparent animate-spin"></div>
+    </div>
+  );
 } 

frontend/src/app/dashboard/(teamAccount)/[accountSlug]/page.tsx

@@ -1,15 +1,19 @@
+'use client';
+
 import { redirect } from 'next/navigation';
+import React from 'react';
 
-interface AccountRedirectProps {
-  params: {
-    accountSlug: string;
-  };
-}
+type AccountParams = {
+  accountSlug: string;
+};
 
-export default function AccountRedirect({
-  params,
-}: AccountRedirectProps) {
-  const { accountSlug } = params;
+export default function AccountRedirect({ 
+  params 
+}: { 
+  params: Promise<AccountParams> 
+}) {
+  const unwrappedParams = React.use(params);
+  const { accountSlug } = unwrappedParams;
   
   // Redirect to the settings page
   redirect(`/dashboard/${accountSlug}/settings`);

frontend/src/app/dashboard/(teamAccount)/[accountSlug]/settings/billing/page.tsx

@@ -1,14 +1,53 @@
+'use client';
+
+import React from 'react';
 import {createClient} from "@/lib/supabase/server";
 import AccountBillingStatus from "@/components/basejump/account-billing-status";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 
 const returnUrl = process.env.NEXT_PUBLIC_URL as string;
 
-export default async function TeamBillingPage({params: {accountSlug}}: {params: {accountSlug: string}}) {
-    const supabaseClient = await createClient();
-    const {data: teamAccount} = await supabaseClient.rpc('get_account_by_slug', {
-        slug: accountSlug
-    });
+type AccountParams = {
+  accountSlug: string;
+};
+
+export default function TeamBillingPage({ params }: { params: Promise<AccountParams> }) {
+    const unwrappedParams = React.use(params);
+    const { accountSlug } = unwrappedParams;
+    
+    // Use an effect to load team account data
+    const [teamAccount, setTeamAccount] = React.useState<any>(null);
+    const [error, setError] = React.useState<string | null>(null);
+    
+    React.useEffect(() => {
+        async function loadData() {
+            try {
+                const supabaseClient = await createClient();
+                const {data} = await supabaseClient.rpc('get_account_by_slug', {
+                    slug: accountSlug
+                });
+                setTeamAccount(data);
+            } catch (err) {
+                setError("Failed to load account data");
+                console.error(err);
+            }
+        }
+        
+        loadData();
+    }, [accountSlug]);
+    
+    if (error) {
+        return (
+            <Alert variant="destructive" className="border-red-300 dark:border-red-800 rounded-xl">
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+            </Alert>
+        );
+    }
+    
+    if (!teamAccount) {
+        return <div>Loading...</div>;
+    }
 
     if (teamAccount.account_role !== 'owner') {
         return (

frontend/src/app/dashboard/(teamAccount)/[accountSlug]/settings/layout.tsx

@@ -1,10 +1,23 @@
 'use client';
 
+import React from 'react';
 import {Separator} from "@/components/ui/separator";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-export default function TeamSettingsPage({children, params: {accountSlug}}: {children: React.ReactNode, params: {accountSlug: string}}) {
+type LayoutParams = {
+  accountSlug: string;
+};
+
+export default function TeamSettingsLayout({
+  children, 
+  params
+}: {
+  children: React.ReactNode, 
+  params: Promise<LayoutParams>
+}) {
+    const unwrappedParams = React.use(params);
+    const { accountSlug } = unwrappedParams;
     const pathname = usePathname();
     const items = [
         { name: "Account", href: `/dashboard/${accountSlug}/settings` },

frontend/src/app/dashboard/(teamAccount)/[accountSlug]/settings/members/page.tsx

@@ -1,16 +1,58 @@
+'use client';
+
+import React from 'react';
 import {createClient} from "@/lib/supabase/server";
 import ManageTeamMembers from "@/components/basejump/manage-team-members";
 import ManageTeamInvitations from "@/components/basejump/manage-team-invitations";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
-export default async function TeamMembersPage({params: {accountSlug}}: {params: {accountSlug: string}}) {
-    const supabaseClient = await createClient();
-    const {data: teamAccount} = await supabaseClient.rpc('get_account_by_slug', {
-        slug: accountSlug
-    });
+type AccountParams = {
+  accountSlug: string;
+};
 
-    if (teamAccount.account_role !== 'owner') {
+export default function TeamMembersPage({ params }: { params: Promise<AccountParams> }) {
+    const unwrappedParams = React.use(params);
+    const { accountSlug } = unwrappedParams;
+    
+    // Use an effect to load team account data
+    const [teamAccount, setTeamAccount] = React.useState<any>(null);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState<string | null>(null);
+    
+    React.useEffect(() => {
+        async function loadData() {
+            try {
+                const supabaseClient = await createClient();
+                const {data} = await supabaseClient.rpc('get_account_by_slug', {
+                    slug: accountSlug
+                });
+                setTeamAccount(data);
+                setLoading(false);
+            } catch (err) {
+                setError("Failed to load team data");
+                setLoading(false);
+                console.error(err);
+            }
+        }
+        
+        loadData();
+    }, [accountSlug]);
+    
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+    
+    if (error) {
+        return (
+            <Alert variant="destructive" className="border-red-300 dark:border-red-800 rounded-xl">
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (!teamAccount || teamAccount.account_role !== 'owner') {
         return (
             <Alert variant="destructive" className="border-red-300 dark:border-red-800 rounded-xl">
                 <AlertTitle>Access Denied</AlertTitle>

frontend/src/app/dashboard/(teamAccount)/[accountSlug]/settings/page.tsx

@@ -1,13 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import EditTeamName from "@/components/basejump/edit-team-name";
 import EditTeamSlug from "@/components/basejump/edit-team-slug";
-import { createClient } from "@/lib/supabase/server";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {createClient} from "@/lib/supabase/server";
 
-export default async function TeamSettingsPage({ params: { accountSlug } }: { params: { accountSlug: string } }) {
-    const supabaseClient = await createClient();
-    const { data: teamAccount } = await supabaseClient.rpc('get_account_by_slug', {
-        slug: accountSlug
-    });
+type AccountParams = {
+  accountSlug: string;
+};
+
+export default function TeamSettingsPage({ params }: { params: Promise<AccountParams> }) {
+    const unwrappedParams = React.use(params);
+    const { accountSlug } = unwrappedParams;
+    
+    // Use an effect to load team account data
+    const [teamAccount, setTeamAccount] = React.useState<any>(null);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState<string | null>(null);
+    
+    React.useEffect(() => {
+        async function loadData() {
+            try {
+                const supabaseClient = await createClient();
+                const {data} = await supabaseClient.rpc('get_account_by_slug', {
+                    slug: accountSlug
+                });
+                setTeamAccount(data);
+                setLoading(false);
+            } catch (err) {
+                setError("Failed to load account data");
+                setLoading(false);
+                console.error(err);
+            }
+        }
+        
+        loadData();
+    }, [accountSlug]);
+    
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+    
+    if (!teamAccount) {
+        return <div>Account not found</div>;
+    }
 
     return (
         <div className="space-y-6">

frontend/src/app/invitation/page.tsx

@@ -1,15 +1,27 @@
+'use client';
+
+import React from 'react';
 import AcceptTeamInvitation from "@/components/basejump/accept-team-invitation";
 import { redirect } from "next/navigation"
 
-export default async function AcceptInvitationPage({searchParams}: {searchParams: {token?: string}}) {
+type InvitationSearchParams = {
+  token?: string;
+};
 
-    if (!searchParams.token) {
+export default function AcceptInvitationPage({ 
+  searchParams 
+}: { 
+  searchParams: Promise<InvitationSearchParams>
+}) {
+    const unwrappedSearchParams = React.use(searchParams);
+    
+    if (!unwrappedSearchParams.token) {
        redirect("/");
     }
 
     return (
         <div className="max-w-md mx-auto w-full my-12">
-            <AcceptTeamInvitation token={searchParams.token} />
+            <AcceptTeamInvitation token={unwrappedSearchParams.token} />
         </div>
     )
 }

frontend/src/components/file-renderers/markdown-renderer.tsx

@@ -20,12 +20,16 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
         <ReactMarkdown
           rehypePlugins={[rehypeRaw, rehypeSanitize]}
           components={{
-            code({ node, inline, className, children, ...props }) {
+            code(props) {
+              const { className, children, ...rest } = props;
               const match = /language-(\w+)/.exec(className || "");
               
-              if (inline) {
+              // Check if it's an inline code block by examining the node type
+              const isInline = !className || !match;
+              
+              if (isInline) {
                 return (
-                  <code className={className} {...props}>
+                  <code className={className} {...rest}>
                     {children}
                   </code>
                 );

frontend/src/components/theme-provider.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>

frontend/src/lib/home.tsx

@@ -41,8 +41,8 @@ export const siteConfig = {
   ],
   links: {
     email: "support@kortix.ai",
-    twitter: "https://twitter.com/kortixai",
-    // discord: "https://discord.gg/kortixai",
+    twitter: "https://x.com/kortixai",
+    discord: "https://discord.gg/kortixai",
     github: "https://github.com/Kortix-ai/Suna",
     instagram: "https://instagram.com/kortixai",
   },
@@ -52,7 +52,6 @@ export const siteConfig = {
       { id: 2, name: "Use Cases", href: "#use-cases" },
       { id: 3, name: "Open Source", href: "#open-source" },
       { id: 4, name: "Pricing", href: "#pricing" },
-      // { id: 5, name: "Contact", href: "#cta" },
     ],
   },
   hero: {
@@ -1012,28 +1011,25 @@ export const siteConfig = {
     {
       title: "Kortix",
       links: [
-        { id: 1, title: "About", url: "#" },
-        { id: 2, title: "Team", url: "#" },
-        { id: 3, title: "Blog", url: "#" },
-        { id: 4, title: "Careers", url: "#" },
+        { id: 1, title: "About", url: "https://kortix.ai" },
+        { id: 3, title: "Contact", url: "contact@kortix.ai" },
+        { id: 4, title: "Careers", url: "https://kortix.ai/careers" },
       ],
     },
     {
       title: "Resources",
       links: [
-        { id: 5, title: "Documentation", url: "#" },
-        { id: 6, title: "API Reference", url: "#" },
-        { id: 7, title: "Community", url: "#" },
+        { id: 5, title: "Documentation", url: "https://github.com/Kortix-ai/Suna" },
+        { id: 7, title: "Discord", url: "https://discord.gg/Py6pCBUUPw" },
         { id: 8, title: "GitHub", url: "https://github.com/Kortix-ai/Suna" },
       ],
     },
     {
       title: "Legal",
       links: [
-        { id: 9, title: "Privacy", url: "#" },
-        { id: 10, title: "Terms", url: "#" },
-        { id: 11, title: "License", url: "#" },
-        { id: 12, title: "Contact", url: "#" },
+        { id: 9, title: "Privacy Policy", url: "https://suna.so/legal/privacy" },
+        { id: 10, title: "Terms of Service", url: "https://suna.so/legal/terms" },
+        { id: 11, title: "License Apache 2.0", url: "https://github.com/Kortix-ai/Suna/blob/main/LICENSE" },
       ],
     },
   ],