feat: added settings tab in project-overview drawer to edit app

package.json

@@ -47,7 +47,7 @@
     "elysia": "^1.4.28",
     "exact-mirror": "^1.0.0",
     "file-type": "^22.0.1",
-    "lucide-react": "^0.465.0",
+    "lucide-react": "^1.47.0",
     "moment": "^2.30.1",
     "next": "^15",
     "next-auth": "^4.24.14",

src/app/api/build-status/route.ts

@@ -0,0 +1,103 @@
+import buildLiveStatusService from "@/server/services/build-live-status.service";
+import buildStatusService from "@/server/services/standalone-services/build-status-pub-sub.service";
+import buildWatchService from "@/server/services/standalone-services/build-watch.service";
+import { getAuthUserSession, simpleRoute } from "@/server/utils/action-wrapper.utils";
+import { StreamUtils } from "@/shared/utils/stream.utils";
+
+// Prevents this route's response from being cached
+export const dynamic = "force-dynamic";
+
+export async function POST() {
+    return simpleRoute(async () => {
+        const session = await getAuthUserSession();
+
+        void buildWatchService.startWatch();
+        await buildStatusService.ensureSeeded();
+
+        let appLookup = await buildLiveStatusService.getBuildableAppLookup(session);
+
+        const encoder = new TextEncoder();
+        let shouldStopStreaming = false;
+        let unsubscribe: (() => void) | null = null;
+        let heartbeat: ReturnType<typeof setInterval> | null = null;
+
+        const customReadable = new ReadableStream({
+            async start(controller) {
+                const sendData = (data: unknown) => {
+                    if (shouldStopStreaming) {
+                        return;
+                    }
+                    try {
+                        controller.enqueue(encoder.encode(StreamUtils.encodeSseData(data)));
+                    } catch (e) {
+                        console.error(`[BUILD STATUS] Error while enqueueing build status data: `, e);
+                        shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
+                        controller.close();
+                    }
+                };
+
+                unsubscribe = buildStatusService.subscribe(async (status) => {
+                    if (shouldStopStreaming || status.workloadType !== 'app') {
+                        return;
+                    }
+
+                    let appInfo = appLookup.get(status.workloadId);
+                    if (!appInfo) {
+                        // A new app might have been created while streaming, refresh the lookup.
+                        appLookup = await buildLiveStatusService.getBuildableAppLookup(session);
+                        appInfo = appLookup.get(status.workloadId);
+                    }
+                    if (!appInfo) {
+                        return;
+                    }
+
+                    sendData(buildLiveStatusService.mapBuildToStatus(status, appInfo));
+                });
+
+                try {
+                    sendData(buildLiveStatusService.getInitialStatus(appLookup));
+                } catch (e) {
+                    console.error("Error fetching initial build status", e);
+                }
+
+                heartbeat = setInterval(() => {
+                    if (shouldStopStreaming) return;
+                    try {
+                        controller.enqueue(encoder.encode(': ping\n\n'));
+                    } catch (error) {
+                        console.error('[BUILD STATUS] Error while sending heartbeat:', error);
+                        shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
+                        controller.close();
+                    }
+                }, 25_000);
+            },
+            cancel() {
+                console.log("[BUILD STATUS] Client left, cancelling build status stream");
+                shouldStopStreaming = true;
+                if (unsubscribe) {
+                    unsubscribe();
+                    unsubscribe = null;
+                }
+                if (heartbeat) clearInterval(heartbeat);
+                heartbeat = null;
+            },
+        });
+
+        return new Response(customReadable, {
+            headers: {
+                Connection: "keep-alive",
+                "Content-Encoding": "none",
+                "Cache-Control": "no-cache, no-transform",
+                "Content-Type": "text/event-stream; charset=utf-8",
+            },
+        });
+    });
+}

src/app/api/deployment-status/route.ts

@@ -23,6 +23,7 @@ export async function POST() {
         const encoder = new TextEncoder();
         let shouldStopStreaming = false;
         let unsubscribe: (() => void) | null = null;
+        let heartbeat: ReturnType<typeof setInterval> | null = null;
 
         // Fetch all projects and apps to build a lookup map
         let appLookup = await deploymentLiveStatusService.getAppLookup(session);
@@ -37,6 +38,10 @@ export async function POST() {
                     } catch (e) {
                         console.error(`[ENQUEUE ERROR] Error while enqueueing Deployment Status data: `, e);
                         shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
                         controller.close();
                     }
                 };
@@ -85,6 +90,21 @@ export async function POST() {
 
                     sendData(status);
                 });
+
+                heartbeat = setInterval(() => {
+                    if (shouldStopStreaming) return;
+                    try {
+                        controller.enqueue(encoder.encode(': ping\n\n'));
+                    } catch (error) {
+                        console.error('[ENQUEUE ERROR] Error while sending deployment status heartbeat:', error);
+                        shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
+                        controller.close();
+                    }
+                }, 25_000);
             },
             cancel() {
                 console.log("[LEAVE] Cancelling deployment status stream");
@@ -93,6 +113,8 @@ export async function POST() {
                     unsubscribe();
                     unsubscribe = null;
                 }
+                if (heartbeat) clearInterval(heartbeat);
+                heartbeat = null;
             }
         });
 

src/app/error.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import ErrorState from '@/components/custom/error-state';
+import { CircleAlert } from 'lucide-react';
+import { useEffect } from 'react';
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    useEffect(() => {
+        console.error(error);
+    }, [error]);
+
+    return (
+        <ErrorState
+            icon={<CircleAlert />}
+            mediaClassName="bg-destructive/10 text-destructive"
+            title="Something went wrong"
+            description="An unexpected error occurred while loading this page. You can try again, or return to the dashboard."
+            digest={error.digest}
+            onRetry={reset}
+        />
+    );
+}

src/app/error/page.tsx

@@ -1,9 +1,13 @@
+import ErrorState from '@/components/custom/error-state';
+import { TriangleAlert } from 'lucide-react';
 
 export default function ErrorPage() {
-
     return (
-        <div>
-            Error Page
-        </div>
-    )
-}
+        <ErrorState
+            icon={<TriangleAlert />}
+            mediaClassName="bg-destructive/10 text-destructive"
+            title="Something went wrong"
+            description="An unexpected error occurred. Please try again or return to the dashboard."
+        />
+    );
+}

src/app/global-error.tsx

@@ -1,41 +1,39 @@
-'use client' // Error boundaries must be Client Components
+'use client';
 
-import { cn } from "@/frontend/utils/utils";
-import { AlertCircle } from "lucide-react"
-import { Inter } from "next/font/google";
+import ErrorState from '@/components/custom/error-state';
+import { cn } from '@/frontend/utils/utils';
+import { TriangleAlert } from 'lucide-react';
+import { Inter } from 'next/font/google';
 
 const inter = Inter({
-    subsets: ["latin"],
-    variable: "--font-sans",
+    subsets: ['latin'],
+    variable: '--font-sans',
 });
 
 export default function GlobalError({
     error,
+    reset,
 }: {
-    error: Error & { digest?: string }
-    reset: () => void
+    error: Error & { digest?: string };
+    reset: () => void;
 }) {
     return (
-        <html >
-            <body className={cn(
-                "min-h-screen bg-background font-sans antialiased",
-                inter.variable
-            )}>
-                <div className="h-screen w-fuäll flex flex-col items-center justify-center p-4 space-y-4 bg-background text-foreground">
-                    <div className="flex flex-col items-center justify-center space-y-2 text-center max-w-md">
-                        <div className="rounded-full bg-destructive/10 p-3">
-                            <AlertCircle className="h-8 w-8 text-destructive" />
-                        </div>
-                        <h2 className="text-2xl font-bold tracking-tight">Something went wrong!</h2>
-                        <p className="text-muted-foreground mt-4">
-                            An unexpected error occurred. Please check if your authorized for this action and try again.
-                        </p>
-                        <p className="text-xs text-muted-foreground mt-6">
-                            Digest: {error.digest}
-                        </p>
-                    </div>
-                </div>
+        <html lang="en">
+            <body
+                className={cn(
+                    'min-h-screen bg-background font-sans antialiased',
+                    inter.variable
+                )}
+            >
+                <ErrorState
+                    icon={<TriangleAlert />}
+                    mediaClassName="bg-destructive/10 text-destructive"
+                    title="Something went wrong"
+                    description="A critical error occurred. Please try again, or reload the page to get back to the dashboard."
+                    digest={error.digest}
+                    onRetry={reset}
+                />
             </body>
         </html>
-    )
+    );
 }

src/app/layout.tsx

@@ -13,6 +13,7 @@ import { BreadcrumbsGenerator } from "../components/custom/breadcrumbs-generator
 import { getUserSession } from "@/server/utils/action-wrapper.utils";
 import { InputDialog } from "@/components/custom/input-dialog";
 import PodsStatusPollingProvider from "@/components/custom/pods-status-polling-provider";
+import BuildStatusPollingProvider from "@/components/custom/build-status-polling-provider";
 import { GenericDialog } from "@/components/custom/generic-dialog";
 
 const inter = Inter({
@@ -50,8 +51,8 @@ export default async function RootLayout({
         <SidebarProvider defaultOpen={defaultOpen}>
           <AppSidebar />
           <main className="flex min-w-0 flex-1 flex-col items-center">
-            <div className="w-full min-w-0 max-w-8xl px-2 lg:px-4">
-              <div className="min-w-0 flex-col p-6 md:flex">
+            <div className="w-full min-w-0 max-w-8xl px-2 has-[[data-project-network-graph]]:max-w-none lg:px-4">
+              <div className="min-w-0 flex-col p-6 md:flex has-[[data-project-network-graph]]:pb-0">
                 {userIsLoggedIn && <BreadcrumbsGenerator />}
                 <Suspense fallback={<FullLoadingSpinner />}>
                   {children}
@@ -66,6 +67,7 @@ export default async function RootLayout({
         <InputDialog />
         <GenericDialog />
         {userIsLoggedIn && <PodsStatusPollingProvider />}
+        {userIsLoggedIn && <BuildStatusPollingProvider />}
       </body>
     </html>
   );

src/app/not-found.tsx

@@ -0,0 +1,12 @@
+import ErrorState from '@/components/custom/error-state';
+import { FileQuestion } from 'lucide-react';
+
+export default function NotFound() {
+    return (
+        <ErrorState
+            icon={<FileQuestion className="text-muted-foreground" />}
+            title="Page not found"
+            description="The page you are looking for doesn't exist or may have been moved."
+        />
+    );
+}

src/app/project/[projectId]/actions.ts

@@ -56,7 +56,7 @@ export const createApp = async (appName: string, projectId: string, appId?: stri
             projectId
         });
 
-        return new SuccessActionResult(returnData, "App created successfully.");
+        return new SuccessActionResult(returnData, "Saved successfully.");
     });
 
 export const createAppFromTemplate = async (prevState: any, inputData: AppTemplateModel, projectId: string) =>