From 2e0784f50c563c60d98df310ee63e4359361c136 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Sun, 27 Jul 2025 16:30:48 +0200
Subject: [PATCH 01/11] fix: update navbar link to point to dashboard instead
 of root(since the root redirects to dashboard)

---
 web/components/dashboard/navbar/index.tsx | 2 +-
 web/components/profile/navbar.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/dashboard/navbar/index.tsx b/web/components/dashboard/navbar/index.tsx
index 13caee46..bba3929e 100644
--- a/web/components/dashboard/navbar/index.tsx
+++ b/web/components/dashboard/navbar/index.tsx
@@ -10,7 +10,7 @@ export default function DashboardNavbar({ userData }: { userData: User }) {
     <div className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-2">
         <Link
-          href="/"
+          href="/dashboard"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Logo />
diff --git a/web/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
index 5de5c55a..cec73f0a 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -11,7 +11,7 @@ export default function ProfileNavbar({ userData }: { userData?: User }) {
     <nav className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-2">
         <Link
-          href="/"
+          href="/dashboard"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Logo />

From 11f178c44c07480ad9786def0218ee4514211ac3 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Sun, 27 Jul 2025 17:09:38 +0200
Subject: [PATCH 02/11] refactor: remove unnecessary TooltipProvider wrappers
 in Providers and Sidebar components

---
 web/app/providers.tsx            | 28 ++++++++-------
 web/components/profile/index.tsx | 61 +++++++++++++++-----------------
 web/components/ui/sidebar.tsx    |  9 ++---
 3 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/web/app/providers.tsx b/web/app/providers.tsx
index 89185599..32155169 100644
--- a/web/app/providers.tsx
+++ b/web/app/providers.tsx
@@ -1,14 +1,14 @@
 "use client"
 
-import { QueryClientProvider } from "@/lib/get-query-client"
 import { Toaster } from "@/components/ui/sonner"
 import { ThemeProvider } from "@/components/ui/theme-provider"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { QueryClientProvider } from "@/lib/get-query-client"
 import { AppProgressProvider as ProgressProvider } from "@bprogress/next"
 import { ClerkProvider } from "@clerk/nextjs"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { Analytics } from "@vercel/analytics/react"
 import * as React from "react"
-
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider>
@@ -18,17 +18,19 @@ export function Providers({ children }: { children: React.ReactNode }) {
           defaultTheme="system"
           disableTransitionOnChange
         >
-          <ProgressProvider
-            height="4px"
-            delay={500}
-            color="hsl(var(--foreground))"
-            options={{ showSpinner: false }}
-            shallowRouting
-          >
-            {children}
-            <Analytics />
-            <Toaster position="bottom-left" richColors />
-          </ProgressProvider>
+          <TooltipProvider>
+            <ProgressProvider
+              height="4px"
+              delay={500}
+              color="hsl(var(--foreground))"
+              options={{ showSpinner: false }}
+              shallowRouting
+            >
+              {children}
+              <Analytics />
+              <Toaster position="bottom-left" richColors />
+            </ProgressProvider>
+          </TooltipProvider>
         </ThemeProvider>
       </ClerkProvider>
       <ReactQueryDevtools />
diff --git a/web/components/profile/index.tsx b/web/components/profile/index.tsx
index 93a84fb5..2d6e56ab 100644
--- a/web/components/profile/index.tsx
+++ b/web/components/profile/index.tsx
@@ -27,7 +27,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { deleteSandbox, updateSandbox, updateUser } from "@/lib/api/actions"
@@ -185,37 +184,35 @@ function ProfileCard({
     <Card className="mb-6 md:mb-0 sticky top-6">
       {isOwnProfile && (
         <div className="absolute top-2 right-2 flex flex-col gap-2">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  onClick={toggleEdit}
-                  aria-label={isEditing ? "close edit form" : "open edit form"}
-                  size="smIcon"
-                  variant="secondary"
-                  className="rounded-full relative"
-                >
-                  {isEditing ? (
-                    <X className="size-4" />
-                  ) : showAddMoreInfoBanner ? (
-                    <>
-                      <Sparkles className="size-4 text-yellow-400 z-[2]" />
-                      <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
-                    </>
-                  ) : (
-                    <Edit className="size-4" />
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  {showAddMoreInfoBanner
-                    ? "Add more information to your profile"
-                    : "Edit your profile"}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={toggleEdit}
+                aria-label={isEditing ? "close edit form" : "open edit form"}
+                size="smIcon"
+                variant="secondary"
+                className="rounded-full relative"
+              >
+                {isEditing ? (
+                  <X className="size-4" />
+                ) : showAddMoreInfoBanner ? (
+                  <>
+                    <Sparkles className="size-4 text-yellow-400 z-[2]" />
+                    <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
+                  </>
+                ) : (
+                  <Edit className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {showAddMoreInfoBanner
+                  ? "Add more information to your profile"
+                  : "Edit your profile"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       )}
       <CardContent className="flex flex-col gap-4 pt-6">
diff --git a/web/components/ui/sidebar.tsx b/web/components/ui/sidebar.tsx
index 64c83817..3d322587 100644
--- a/web/components/ui/sidebar.tsx
+++ b/web/components/ui/sidebar.tsx
@@ -5,7 +5,6 @@ import { buttonVariants } from "@/components/ui/button"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
@@ -264,11 +263,9 @@ export function Sidebar({
 }: SidebarProps) {
   return (
     <SidebarProvider defaultActiveItem={defaultActiveItem}>
-      <TooltipProvider>
-        <div className={cn("flex h-full", className)} {...props}>
-          {children}
-        </div>
-      </TooltipProvider>
+      <div className={cn("flex h-full", className)} {...props}>
+        {children}
+      </div>
     </SidebarProvider>
   )
 }

From 844e0584be6236d1982ec6e5ae5ef009821b08c4 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Tue, 29 Jul 2025 09:54:15 +0200
Subject: [PATCH 03/11]  fix: update navbar link to point to dashboard instead
 of root(since the root redirects to dashboard)

---
 web/components/project/navbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/project/navbar/index.tsx b/web/components/project/navbar/index.tsx
index 1f0d9b38..ee9cbe29 100644
--- a/web/components/project/navbar/index.tsx
+++ b/web/components/project/navbar/index.tsx
@@ -45,7 +45,7 @@ export default function Navbar({
       <div className="h-14 shrink-0 px-2 w-full flex items-center justify-between border-b border-border">
         <div className="flex items-center space-x-4">
           <Link
-            href="/"
+            href="/dashboard"
             className="ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md"
           >
             <Logo />

From 4d5a7496c16a5e0f7a3bcc59cf50db834cb775a4 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Tue, 29 Jul 2025 11:02:36 +0200
Subject: [PATCH 04/11] feat: add isSocketReady state to SocketContext and
 update TerminalContext to use it

---
 web/context/SocketContext.tsx   | 15 +++++++++++++++
 web/context/TerminalContext.tsx | 15 +--------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/context/SocketContext.tsx b/web/context/SocketContext.tsx
index a6b581c0..2d951b21 100644
--- a/web/context/SocketContext.tsx
+++ b/web/context/SocketContext.tsx
@@ -5,6 +5,7 @@ import { io, Socket } from "socket.io-client"
 
 interface SocketContextType {
   socket: Socket | null
+  isSocketReady: boolean
 }
 
 const SocketContext = createContext<SocketContextType | undefined>(undefined)
@@ -16,6 +17,7 @@ export const SocketProvider: React.FC<{
   sandboxId: string
 }> = ({ children, token, userId, sandboxId }) => {
   const [socket, setSocket] = useState<Socket | null>(null)
+  const [isSocketReady, setIsSocketReady] = useState<boolean>(false)
 
   useEffect(() => {
     const newSocket = io(
@@ -34,8 +36,21 @@ export const SocketProvider: React.FC<{
     }
   }, [])
 
+  // Listen for the "ready" signal from the socket
+  React.useEffect(() => {
+    if (socket) {
+      socket.on("ready", () => {
+        setIsSocketReady(true)
+      })
+    }
+    return () => {
+      if (socket) socket.off("ready")
+    }
+  }, [socket])
+
   const value = {
     socket,
+    isSocketReady,
   }
 
   return (
diff --git a/web/context/TerminalContext.tsx b/web/context/TerminalContext.tsx
index 7bc9d8f6..9310ef96 100644
--- a/web/context/TerminalContext.tsx
+++ b/web/context/TerminalContext.tsx
@@ -33,25 +33,12 @@ const TerminalContext = createContext<TerminalContextType | undefined>(
 export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const { socket } = useSocket()
+  const { socket, isSocketReady } = useSocket()
   const [terminals, setTerminals] = useState<
     { id: string; terminal: Terminal | null }[]
   >([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
   const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false)
-  const [isSocketReady, setIsSocketReady] = useState<boolean>(false)
-
-  // Listen for the "ready" signal from the socket
-  React.useEffect(() => {
-    if (socket) {
-      socket.on("ready", () => {
-        setIsSocketReady(true)
-      })
-    }
-    return () => {
-      if (socket) socket.off("ready")
-    }
-  }, [socket])
 
   const createNewTerminal = async (command?: string): Promise<void> => {
     if (!socket) return

From 355374a861a6c3ba342ed7f1a69f1c1618b3f645 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Tue, 29 Jul 2025 11:05:09 +0200
Subject: [PATCH 05/11] feat: run preview on mount & localize state

---
 web/components/project/navbar/index.tsx |  7 +---
 web/components/project/navbar/run.tsx   | 53 +++++++++++++------------
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/web/components/project/navbar/index.tsx b/web/components/project/navbar/index.tsx
index ee9cbe29..16a6705c 100644
--- a/web/components/project/navbar/index.tsx
+++ b/web/components/project/navbar/index.tsx
@@ -25,7 +25,6 @@ export default function Navbar({
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false)
   const [isShareOpen, setIsShareOpen] = useState(false)
-  const [isRunning, setIsRunning] = useState(false)
 
   const isOwner = sandboxData.userId === userData.id
 
@@ -62,11 +61,7 @@ export default function Navbar({
             ) : null}
           </div>
         </div>
-        <RunButtonModal
-          isRunning={isRunning}
-          setIsRunning={setIsRunning}
-          sandboxData={sandboxData}
-        />
+        <RunButtonModal sandboxData={sandboxData} />
         <div className="flex items-center h-full space-x-4">
           {/* <Avatars /> */}
 
diff --git a/web/components/project/navbar/run.tsx b/web/components/project/navbar/run.tsx
index a65c467d..fe6fc58b 100644
--- a/web/components/project/navbar/run.tsx
+++ b/web/components/project/navbar/run.tsx
@@ -2,39 +2,22 @@
 
 import { Button } from "@/components/ui/button"
 import { useEditorLayout } from "@/context/EditorLayoutContext"
+import { useSocket } from "@/context/SocketContext"
 import { useTerminal } from "@/context/TerminalContext"
 import { Sandbox } from "@/lib/types"
 import { templateConfigs } from "@gitwit/templates"
 import { Play, StopCircle } from "lucide-react"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { toast } from "sonner"
 
-export default function RunButtonModal({
-  isRunning,
-  setIsRunning,
-  sandboxData,
-}: {
-  isRunning: boolean
-  setIsRunning: (running: boolean) => void
-  sandboxData: Sandbox
-}) {
+const MAX_TERMINALS = 4
+export default function RunButton({ sandboxData }: { sandboxData: Sandbox }) {
+  const [isRunning, setIsRunning] = useState(false)
+  const { isSocketReady } = useSocket()
   const { createNewTerminal, closeTerminal, terminals } = useTerminal()
   const { setIsPreviewCollapsed, previewPanelRef } = useEditorLayout()
   // Ref to keep track of the last created terminal's ID
   const lastCreatedTerminalRef = useRef<string | null>(null)
-
-  // Effect to update the lastCreatedTerminalRef when a new terminal is added
-  useEffect(() => {
-    if (terminals.length > 0 && !isRunning) {
-      const latestTerminal = terminals[terminals.length - 1]
-      if (
-        latestTerminal &&
-        latestTerminal.id !== lastCreatedTerminalRef.current
-      ) {
-        lastCreatedTerminalRef.current = latestTerminal.id
-      }
-    }
-  }, [terminals, isRunning])
   // commands to run in the terminal
   const handleRun = async () => {
     if (isRunning && lastCreatedTerminalRef.current) {
@@ -42,7 +25,7 @@ export default function RunButtonModal({
       lastCreatedTerminalRef.current = null
       setIsPreviewCollapsed(true)
       previewPanelRef.current?.collapse()
-    } else if (!isRunning && terminals.length < 4) {
+    } else if (!isRunning && terminals.length < MAX_TERMINALS) {
       const command =
         templateConfigs[sandboxData.type]?.runCommand || "npm run dev"
 
@@ -67,8 +50,28 @@ export default function RunButtonModal({
     setIsRunning(!isRunning)
   }
 
+  // Effect to handle the run action on component mount
+  useEffect(() => {
+    if (!isSocketReady) return
+    // If the socket is ready, we can handle the run action
+    handleRun()
+  }, [isSocketReady])
+
+  // Effect to update the lastCreatedTerminalRef when a new terminal is added
+  useEffect(() => {
+    if (terminals.length > 0 && !isRunning) {
+      const latestTerminal = terminals[terminals.length - 1]
+      if (
+        latestTerminal &&
+        latestTerminal.id !== lastCreatedTerminalRef.current
+      ) {
+        lastCreatedTerminalRef.current = latestTerminal.id
+      }
+    }
+  }, [terminals, isRunning])
+
   return (
-    <Button variant="outline" onClick={handleRun}>
+    <Button variant="outline" onClick={handleRun} disabled={!isSocketReady}>
       {isRunning ? (
         <StopCircle className="w-4 h-4 mr-2" />
       ) : (

From 7e5485873356bba1ad5708599277b257d28a494e Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Tue, 29 Jul 2025 11:06:26 +0200
Subject: [PATCH 06/11] feat: enhance PreviewWindow UI with maximize toggle and
 keyboard controls

---
 web/components/project/preview/index.tsx  | 312 +++++++++++++++++-----
 web/components/project/project-layout.tsx |  59 ++--
 2 files changed, 280 insertions(+), 91 deletions(-)

diff --git a/web/components/project/preview/index.tsx b/web/components/project/preview/index.tsx
index 85d5ac66..4d6eaa12 100644
--- a/web/components/project/preview/index.tsx
+++ b/web/components/project/preview/index.tsx
@@ -2,115 +2,283 @@
 
 import { Button } from "@/components/ui/button"
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useEditorLayout } from "@/context/EditorLayoutContext"
+import { cn } from "@/lib/utils"
+import { AnimatePresence, motion } from "framer-motion"
+import {
+  AppWindowIcon,
   ArrowDownToLine,
   ArrowRightToLine,
+  Columns3CogIcon,
   Link,
+  Maximize,
+  Minimize,
   RotateCw,
   UnfoldVertical,
 } from "lucide-react"
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react"
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
 import { toast } from "sonner"
-
-export default forwardRef(function PreviewWindow(
-  {
-    collapsed,
-    open,
-    src,
-    isHorizontal,
-    toggleLayout,
-    isAIChatOpen,
-  }: {
-    collapsed: boolean
-    open: () => void
-    src: string
-    isHorizontal: boolean
-    toggleLayout: () => void
-    isAIChatOpen: boolean
-  },
+export function PreviewWindow({
+  ref,
+}: {
   ref: React.Ref<{
     refreshIframe: () => void
   }>
-) {
+}) {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
-  const refreshIframe = () => {
+  const [previewMaximized, setPreviewMaximized] = useState(false)
+  const refreshIframe = useCallback(() => {
     setIframeKey((prev) => prev + 1)
-  }
+  }, [])
+  const { previewURL: src } = useEditorLayout()
+
+  const togglePreviewMaximize = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    setPreviewMaximized((prev) => !prev)
+  }, [src])
+
   // Refresh the preview when the URL changes.
   useEffect(refreshIframe, [src])
+  useEffect(() => {
+    // when escape is pressed, toggle preview maximize state
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setPreviewMaximized(false)
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [])
   // Expose refreshIframe method to the parent.
   useImperativeHandle(ref, () => ({ refreshIframe }))
 
   return (
     <>
-      <div className="flex items-center justify-between">
-        <Button
-          onClick={toggleLayout}
-          size="sm"
-          variant="ghost"
-          className="mr-2 border"
-          disabled={isAIChatOpen}
+      <AnimatePresence>
+        {previewMaximized && (
+          <motion.div
+            key="preview"
+            initial={{ opacity: 0, backdropFilter: "blur(0px)" }}
+            animate={{ opacity: 1, backdropFilter: "blur(12px)" }}
+            exit={{ opacity: 0, backdropFilter: "blur(0px)" }}
+            className="fixed inset-0 z-20 bg-background/10"
+            transition={{ duration: 0.2 }}
+            onClick={togglePreviewMaximize}
+          />
+        )}
+      </AnimatePresence>
+      <motion.div
+        layout="position"
+        className={cn(
+          "flex flex-col gap-2 bg-background transition-shadow shadow-[0_0_0_0px_hsl(var(--muted-foreground))]",
+          previewMaximized
+            ? "fixed inset-4 z-50 rounded-lg shadow-[0_0_0_1px_hsl(var(--muted-foreground)_/_0.4)]"
+            : "relative w-full h-full"
+        )}
+      >
+        <PreviewHeader
+          {...{
+            refreshIframe,
+            previewMaximized,
+            togglePreviewMaximize,
+          }}
+        />
+        <motion.div
+          layout
+          className="w-full grow rounded-md overflow-hidden bg-background mt-2"
         >
-          {isHorizontal ? (
-            <ArrowRightToLine className="w-4 h-4" />
+          {src ? (
+            <iframe
+              key={iframeKey}
+              ref={iframeRef}
+              title="Gitwit Sandbox project preview"
+              width="100%"
+              height="100%"
+              src={src}
+              allow="fullscreen; camera; microphone; gyroscope; accelerometer; geolocation; clipboard-write; autoplay"
+              loading="eager"
+              className="bg-secondary"
+            />
           ) : (
-            <ArrowDownToLine className="w-4 h-4" />
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              <p className="text-sm">No preview available</p>
+            </div>
           )}
-        </Button>
-        <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
-          <div className="text-xs">Preview</div>
-          <div className="flex space-x-1 translate-x-1">
-            {collapsed ? (
-              <PreviewButton onClick={open}>
-                <UnfoldVertical className="w-4 h-4" />
-              </PreviewButton>
-            ) : (
-              <>
-                <PreviewButton onClick={open}>
-                  <UnfoldVertical className="w-4 h-4" />
-                </PreviewButton>
+        </motion.div>
+      </motion.div>
+    </>
+  )
+}
+
+PreviewWindow.displayName = "PreviewWindow"
+
+function PreviewHeader({
+  refreshIframe,
+  previewMaximized,
+  togglePreviewMaximize,
+}: {
+  refreshIframe: () => void
+  previewMaximized: boolean
+  togglePreviewMaximize: () => void
+}) {
+  const {
+    isHorizontalLayout: isHorizontal,
+    isPreviewCollapsed: collapsed,
+    previewURL: src,
+    togglePreviewPanel: open,
+    toggleLayout,
+  } = useEditorLayout()
+
+  const copyLink = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    navigator.clipboard
+      .writeText(src)
+      .then(() => {
+        toast.success("Preview link copied to clipboard")
+      })
+      .catch((err) => {
+        console.error("Failed to copy link: ", err)
+        toast.error("Failed to copy preview link")
+      })
+  }, [src])
+
+  const openInNewTab = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    window.open(src, "_blank")
+  }, [src])
 
-                <PreviewButton
-                  onClick={() => {
-                    navigator.clipboard.writeText(src)
-                    toast.info("Copied preview link to clipboard")
-                  }}
+  return (
+    <motion.div
+      layout
+      className={cn(
+        "flex gap-2 items-center justify-between",
+        previewMaximized && "px-2 pt-2"
+      )}
+    >
+      <div className="flex gap-2 items-center">
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger disabled={previewMaximized} asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="smIcon"
+                  variant="outline"
+                  className="h-8 w-8 rounded-md"
                 >
-                  <Link className="w-4 h-4" />
-                </PreviewButton>
-                <PreviewButton onClick={refreshIframe}>
-                  <RotateCw className="w-3 h-3" />
-                </PreviewButton>
-              </>
+                  <Columns3CogIcon className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Layout Options</p>
+            </TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={toggleLayout}>
+              {isHorizontal ? (
+                <ArrowRightToLine className="size-4 mr-2 opacity-80" />
+              ) : (
+                <ArrowDownToLine className="size-4 mr-2 opacity-80" />
+              )}
+              Toggle Layout
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={open}>
+              <UnfoldVertical className="size-4 mr-2 opacity-80" />
+              {(isHorizontal ? !collapsed : collapsed)
+                ? "Expand Preview"
+                : "Collapse Preview"}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <motion.div
+        layout
+        className="h-8 rounded-md bg-secondary px-1 flex gap-2 items-center w-full justify-between"
+      >
+        <PreviewButton label="Reload" onClick={refreshIframe}>
+          <RotateCw className="size-3" />
+        </PreviewButton>
+        <div className="text-xs flex-1">Preview</div>
+        <div className="flex gap-1">
+          <PreviewButton
+            label={previewMaximized ? "Minimize" : "Maximize"}
+            onClick={togglePreviewMaximize}
+          >
+            {previewMaximized ? (
+              <Minimize className="size-3" />
+            ) : (
+              <Maximize className="size-3" />
             )}
-          </div>
+          </PreviewButton>
+          {previewMaximized ? (
+            <PreviewButton label="open in new tab" onClick={openInNewTab}>
+              <AppWindowIcon className="size-3" />
+            </PreviewButton>
+          ) : (
+            <PreviewButton label="copy link" onClick={copyLink}>
+              <Link className="size-3" />
+            </PreviewButton>
+          )}
         </div>
-      </div>
-      <div className="w-full grow rounded-md overflow-hidden bg-background mt-2">
-        {src ? (
-          <iframe key={iframeKey} width="100%" height="100%" src={src} />
-        ) : null}
-      </div>
-    </>
+      </motion.div>
+    </motion.div>
   )
-})
+}
 
 function PreviewButton({
   children,
   disabled = false,
+  label,
   onClick,
 }: {
   children: React.ReactNode
   disabled?: boolean
   onClick: () => void
+  label: string
 }) {
   return (
-    <div
-      className={`${
-        disabled ? "pointer-events-none opacity-50" : ""
-      } p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
-      onClick={onClick}
-    >
-      {children}
-    </div>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          className={`${
+            disabled ? "pointer-events-none opacity-50" : ""
+          } p-0.5 size-6  flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{label}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }
diff --git a/web/components/project/project-layout.tsx b/web/components/project/project-layout.tsx
index 116b5108..6b93b545 100644
--- a/web/components/project/project-layout.tsx
+++ b/web/components/project/project-layout.tsx
@@ -16,7 +16,7 @@ import { FileJson, TerminalSquare } from "lucide-react"
 import * as monaco from "monaco-editor"
 import { useTheme } from "next-themes"
 import { useParams } from "next/navigation"
-import { useCallback, useRef, useState } from "react"
+import { useCallback, useMemo, useRef, useState } from "react"
 import { ImperativePanelHandle } from "react-resizable-panels"
 import Tab from "../ui/tab"
 import AIChat from "./ai-chat"
@@ -25,7 +25,7 @@ import { SessionTimeoutDialog } from "./alerts/session-timeout-dialog"
 import { useCodeDiffer } from "./hooks/useCodeDiffer"
 import { useEditorSocket } from "./hooks/useEditorSocket"
 import { useMonacoEditor } from "./hooks/useMonacoEditor"
-import PreviewWindow from "./preview"
+import { PreviewWindow } from "./preview"
 import Terminals from "./terminals"
 export interface ProjectLayoutProps {
   isOwner: boolean
@@ -81,9 +81,6 @@ export default function ProjectLayout({
     isHorizontalLayout,
     isPreviewCollapsed,
     isAIChatOpen,
-    previewURL,
-    togglePreviewPanel,
-    toggleLayout,
     toggleAIChat,
     loadPreviewURL,
     setIsAIChatOpen,
@@ -146,6 +143,39 @@ export default function ProjectLayout({
     }
     setDraft(activeTab.id, content ?? "")
   }
+
+  const previewPanelProps = useMemo(
+    () => ({
+      onCollapse: () => {
+        setIsPreviewCollapsed(true)
+        const previewPanel = document.querySelector(
+          ".preview-panel"
+        ) as HTMLDivElement
+        if (previewPanel) {
+          previewPanel.style.transition = ""
+        }
+      },
+
+      onExpand: () => {
+        setIsPreviewCollapsed(false)
+        const previewPanel = document.querySelector(
+          ".preview-panel"
+        ) as HTMLDivElement
+        if (previewPanel) {
+          previewPanel.style.transition = ""
+        }
+      },
+      onResize: () => {
+        const previewPanel = document.querySelector(
+          ".preview-panel"
+        ) as HTMLDivElement
+        if (previewPanel) {
+          previewPanel.style.transition = "none"
+        }
+      },
+    }),
+    [setIsPreviewCollapsed]
+  )
   return (
     <ResizablePanelGroup
       direction={isHorizontalLayout ? "horizontal" : "vertical"}
@@ -238,23 +268,14 @@ export default function ProjectLayout({
               {/* Preview Panel */}
               <ResizablePanel
                 ref={previewPanelRef}
-                defaultSize={isPreviewCollapsed ? 4 : 20}
+                defaultSize={isPreviewCollapsed ? 4 : 40}
                 minSize={25}
-                collapsedSize={isHorizontalLayout ? 20 : 4}
-                className="p-2 flex flex-col gap-2"
+                collapsedSize={isHorizontalLayout ? 40 : 4}
+                className="preview-panel p-2 transition-all duration-300 ease-in-out"
                 collapsible
-                onCollapse={() => setIsPreviewCollapsed(true)}
-                onExpand={() => setIsPreviewCollapsed(false)}
+                {...previewPanelProps}
               >
-                <PreviewWindow
-                  open={togglePreviewPanel}
-                  collapsed={isPreviewCollapsed}
-                  src={previewURL}
-                  ref={previewWindowRef}
-                  toggleLayout={toggleLayout}
-                  isHorizontal={isHorizontalLayout}
-                  isAIChatOpen={isAIChatOpen}
-                />
+                <PreviewWindow ref={previewWindowRef} />
               </ResizablePanel>
 
               <ResizableHandle />

From c11991692bafb0c3a9e523fc10f7957f2f5c0947 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Tue, 29 Jul 2025 21:07:57 +0200
Subject: [PATCH 07/11] feat: simplify PreviewHeader layout and enhance button
 interactions

---
 web/components/project/preview/index.tsx | 87 +++++++++++-------------
 1 file changed, 41 insertions(+), 46 deletions(-)

diff --git a/web/components/project/preview/index.tsx b/web/components/project/preview/index.tsx
index 4d6eaa12..71cd729e 100644
--- a/web/components/project/preview/index.tsx
+++ b/web/components/project/preview/index.tsx
@@ -1,12 +1,6 @@
 "use client"
 
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import {
   Tooltip,
   TooltipContent,
@@ -19,7 +13,6 @@ import {
   AppWindowIcon,
   ArrowDownToLine,
   ArrowRightToLine,
-  Columns3CogIcon,
   Link,
   Maximize,
   Minimize,
@@ -178,50 +171,32 @@ function PreviewHeader({
   return (
     <motion.div
       layout
-      className={cn(
-        "flex gap-2 items-center justify-between",
-        previewMaximized && "px-2 pt-2"
-      )}
+      className={cn("flex gap-2 items-center", previewMaximized && "px-2 pt-2")}
     >
-      <div className="flex gap-2 items-center">
-        <DropdownMenu>
-          <Tooltip>
-            <TooltipTrigger disabled={previewMaximized} asChild>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  size="smIcon"
-                  variant="outline"
-                  className="h-8 w-8 rounded-md"
-                >
-                  <Columns3CogIcon className="size-4" />
-                </Button>
-              </DropdownMenuTrigger>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Layout Options</p>
-            </TooltipContent>
-          </Tooltip>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={toggleLayout}>
+      <div className={cn(previewMaximized && "hidden")}>
+        <Tooltip>
+          <TooltipTrigger disabled={previewMaximized} asChild>
+            <Button
+              size="smIcon"
+              variant="outline"
+              className="size-8 rounded-md"
+              onClick={toggleLayout}
+            >
               {isHorizontal ? (
-                <ArrowRightToLine className="size-4 mr-2 opacity-80" />
+                <ArrowRightToLine className="size-4 opacity-80" />
               ) : (
-                <ArrowDownToLine className="size-4 mr-2 opacity-80" />
+                <ArrowDownToLine className="size-4 opacity-80" />
               )}
-              Toggle Layout
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={open}>
-              <UnfoldVertical className="size-4 mr-2 opacity-80" />
-              {(isHorizontal ? !collapsed : collapsed)
-                ? "Expand Preview"
-                : "Collapse Preview"}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Toggle Layout</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
       <motion.div
         layout
-        className="h-8 rounded-md bg-secondary px-1 flex gap-2 items-center w-full justify-between"
+        className="h-8 rounded-md bg-secondary px-1 flex gap-2 items-center w-full"
       >
         <PreviewButton label="Reload" onClick={refreshIframe}>
           <RotateCw className="size-3" />
@@ -249,6 +224,25 @@ function PreviewHeader({
           )}
         </div>
       </motion.div>
+      <div className={cn(previewMaximized && "hidden")}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="smIcon"
+              variant="outline"
+              className="size-8 rounded-md"
+              onClick={open}
+            >
+              <UnfoldVertical className="size-4 opacity-80" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {(isHorizontal ? !collapsed : collapsed)
+              ? "Expand Preview"
+              : "Collapse Preview"}
+          </TooltipContent>
+        </Tooltip>
+      </div>
     </motion.div>
   )
 }
@@ -267,14 +261,15 @@ function PreviewButton({
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <motion.button
+          layout
           className={`${
             disabled ? "pointer-events-none opacity-50" : ""
           } p-0.5 size-6  flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
           onClick={onClick}
         >
           {children}
-        </button>
+        </motion.button>
       </TooltipTrigger>
       <TooltipContent>
         <p>{label}</p>

From a164b35131d79b2b6a581da504626ffec20d0c6c Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Wed, 6 Aug 2025 17:15:33 +0200
Subject: [PATCH 08/11] refactor: remove automatic run action on socket
 readiness

---
 web/components/project/navbar/run.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/web/components/project/navbar/run.tsx b/web/components/project/navbar/run.tsx
index fe6fc58b..1e2939c6 100644
--- a/web/components/project/navbar/run.tsx
+++ b/web/components/project/navbar/run.tsx
@@ -50,13 +50,6 @@ export default function RunButton({ sandboxData }: { sandboxData: Sandbox }) {
     setIsRunning(!isRunning)
   }
 
-  // Effect to handle the run action on component mount
-  useEffect(() => {
-    if (!isSocketReady) return
-    // If the socket is ready, we can handle the run action
-    handleRun()
-  }, [isSocketReady])
-
   // Effect to update the lastCreatedTerminalRef when a new terminal is added
   useEffect(() => {
     if (terminals.length > 0 && !isRunning) {

From febaa14952559243850c151b6a6415169fb14da2 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Wed, 6 Aug 2025 17:16:35 +0200
Subject: [PATCH 09/11] feat: improve layout animations and loading/error
 states

---
 web/components/project/preview/index.tsx | 288 ++++++++++++++++-------
 1 file changed, 197 insertions(+), 91 deletions(-)

diff --git a/web/components/project/preview/index.tsx b/web/components/project/preview/index.tsx
index 71cd729e..43858fa3 100644
--- a/web/components/project/preview/index.tsx
+++ b/web/components/project/preview/index.tsx
@@ -8,25 +8,30 @@ import {
 } from "@/components/ui/tooltip"
 import { useEditorLayout } from "@/context/EditorLayoutContext"
 import { cn } from "@/lib/utils"
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion"
 import {
-  AppWindowIcon,
+  AlertTriangle,
   ArrowDownToLine,
   ArrowRightToLine,
+  ExternalLinkIcon,
   Link,
+  Loader2,
   Maximize,
   Minimize,
   RotateCw,
   UnfoldVertical,
 } from "lucide-react"
 import {
+  createContext,
   useCallback,
+  useContext,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from "react"
 import { toast } from "sonner"
+
 export function PreviewWindow({
   ref,
 }: {
@@ -34,29 +39,44 @@ export function PreviewWindow({
     refreshIframe: () => void
   }>
 }) {
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-  const [iframeKey, setIframeKey] = useState(0)
-  const [previewMaximized, setPreviewMaximized] = useState(false)
-  const refreshIframe = useCallback(() => {
-    setIframeKey((prev) => prev + 1)
-  }, [])
   const { previewURL: src } = useEditorLayout()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
 
-  const togglePreviewMaximize = useCallback(() => {
-    if (!src) {
-      toast.error("No preview URL available")
-      return
-    }
-    setPreviewMaximized((prev) => !prev)
-  }, [src])
+  const {
+    iframeKey,
+    isMaximized,
+    isLoading,
+    hasError,
+    refreshIframe,
+    toggleMaximize,
+    setIsLoading,
+    setIsMaximized,
+    setHasError,
+  } = usePreviewState(src)
+
+  const handleIframeLoad = useCallback(() => {
+    setIsLoading(false)
+    setHasError(false)
+  }, [setIsLoading, setHasError])
+
+  const handleIframeError = useCallback(() => {
+    setIsLoading(false)
+    setHasError(true)
+  }, [setIsLoading, setHasError])
 
-  // Refresh the preview when the URL changes.
-  useEffect(refreshIframe, [src])
   useEffect(() => {
     // when escape is pressed, toggle preview maximize state
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setPreviewMaximized(false)
+      if (
+        event.key === "Escape" &&
+        !event.ctrlKey &&
+        !event.altKey &&
+        !event.shiftKey &&
+        !(event.target as HTMLElement)?.matches(
+          "input, textarea, [contenteditable]"
+        )
+      ) {
+        setIsMaximized(false)
       }
     }
     window.addEventListener("keydown", handleKeyDown)
@@ -68,74 +88,100 @@ export function PreviewWindow({
   useImperativeHandle(ref, () => ({ refreshIframe }))
 
   return (
-    <>
-      <AnimatePresence>
-        {previewMaximized && (
-          <motion.div
-            key="preview"
-            initial={{ opacity: 0, backdropFilter: "blur(0px)" }}
-            animate={{ opacity: 1, backdropFilter: "blur(12px)" }}
-            exit={{ opacity: 0, backdropFilter: "blur(0px)" }}
-            className="fixed inset-0 z-20 bg-background/10"
-            transition={{ duration: 0.2 }}
-            onClick={togglePreviewMaximize}
-          />
-        )}
-      </AnimatePresence>
-      <motion.div
-        layout="position"
-        className={cn(
-          "flex flex-col gap-2 bg-background transition-shadow shadow-[0_0_0_0px_hsl(var(--muted-foreground))]",
-          previewMaximized
-            ? "fixed inset-4 z-50 rounded-lg shadow-[0_0_0_1px_hsl(var(--muted-foreground)_/_0.4)]"
-            : "relative w-full h-full"
-        )}
-      >
-        <PreviewHeader
-          {...{
-            refreshIframe,
-            previewMaximized,
-            togglePreviewMaximize,
-          }}
-        />
+    <PreviewContext.Provider value={{ isMaximized, toggleMaximize }}>
+      <LayoutGroup>
+        <AnimatePresence>
+          {isMaximized && (
+            <motion.div
+              key="preview"
+              initial={{ opacity: 0, backdropFilter: "blur(0px)" }}
+              animate={{ opacity: 1, backdropFilter: "blur(12px)" }}
+              exit={{ opacity: 0, backdropFilter: "blur(0px)" }}
+              className="fixed inset-0 z-20 bg-background/10"
+              transition={{ duration: 0.3 }}
+              onClick={toggleMaximize}
+            />
+          )}
+        </AnimatePresence>
         <motion.div
           layout
-          className="w-full grow rounded-md overflow-hidden bg-background mt-2"
-        >
-          {src ? (
-            <iframe
-              key={iframeKey}
-              ref={iframeRef}
-              title="Gitwit Sandbox project preview"
-              width="100%"
-              height="100%"
-              src={src}
-              allow="fullscreen; camera; microphone; gyroscope; accelerometer; geolocation; clipboard-write; autoplay"
-              loading="eager"
-              className="bg-secondary"
-            />
-          ) : (
-            <div className="flex items-center justify-center h-full text-muted-foreground">
-              <p className="text-sm">No preview available</p>
-            </div>
+          layoutDependency={isMaximized}
+          className={cn(
+            "flex flex-col gap-2 bg-background transition-shadow shadow-[0_0_0_0px_hsl(var(--muted-foreground))]",
+            isMaximized
+              ? "fixed inset-4 z-50 rounded-lg shadow-[0_0_0_1px_hsl(var(--muted-foreground)_/_0.4)]"
+              : "relative w-full h-full"
           )}
+        >
+          <PreviewHeader
+            {...{
+              refreshIframe,
+            }}
+          />
+          <motion.div
+            layout
+            layoutDependency={isMaximized}
+            className="w-full grow rounded-md overflow-hidden bg-background mt-2"
+          >
+            {src ? (
+              <>
+                <iframe
+                  key={iframeKey}
+                  ref={iframeRef}
+                  title="Gitwit Sandbox project preview"
+                  width="100%"
+                  height="100%"
+                  src={src}
+                  allow="fullscreen; camera; microphone; gyroscope; accelerometer; geolocation; clipboard-write; autoplay"
+                  loading="eager"
+                  className="bg-secondary"
+                  onLoad={handleIframeLoad}
+                  onError={handleIframeError}
+                />
+
+                {/* Loading overlay */}
+                {isLoading && (
+                  <div className="h-full flex items-center justify-center bg-secondary">
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                      <Loader2 className="size-4 animate-spin" />
+                      <span className="text-sm">Loading preview...</span>
+                    </div>
+                  </div>
+                )}
+
+                {/* Error overlay */}
+                {hasError && (
+                  <div className="h-full flex items-center justify-center bg-secondary">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <AlertTriangle className="size-8" />
+                      <span className="text-sm">Failed to load preview</span>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={refreshIframe}
+                        className="mt-2"
+                      >
+                        Try Again
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <p className="text-sm">No preview available</p>
+              </div>
+            )}
+          </motion.div>
         </motion.div>
-      </motion.div>
-    </>
+      </LayoutGroup>
+    </PreviewContext.Provider>
   )
 }
 
 PreviewWindow.displayName = "PreviewWindow"
 
-function PreviewHeader({
-  refreshIframe,
-  previewMaximized,
-  togglePreviewMaximize,
-}: {
-  refreshIframe: () => void
-  previewMaximized: boolean
-  togglePreviewMaximize: () => void
-}) {
+function PreviewHeader({ refreshIframe }: { refreshIframe: () => void }) {
   const {
     isHorizontalLayout: isHorizontal,
     isPreviewCollapsed: collapsed,
@@ -143,6 +189,7 @@ function PreviewHeader({
     togglePreviewPanel: open,
     toggleLayout,
   } = useEditorLayout()
+  const { isMaximized, toggleMaximize } = usePreviewContext()
 
   const copyLink = useCallback(() => {
     if (!src) {
@@ -171,11 +218,12 @@ function PreviewHeader({
   return (
     <motion.div
       layout
-      className={cn("flex gap-2 items-center", previewMaximized && "px-2 pt-2")}
+      layoutDependency={isMaximized}
+      className={cn("flex gap-2 items-center", isMaximized && "px-2 pt-2")}
     >
-      <div className={cn(previewMaximized && "hidden")}>
+      <div className={cn(isMaximized && "hidden")}>
         <Tooltip>
-          <TooltipTrigger disabled={previewMaximized} asChild>
+          <TooltipTrigger disabled={isMaximized} asChild>
             <Button
               size="smIcon"
               variant="outline"
@@ -196,6 +244,7 @@ function PreviewHeader({
       </div>
       <motion.div
         layout
+        layoutDependency={isMaximized}
         className="h-8 rounded-md bg-secondary px-1 flex gap-2 items-center w-full"
       >
         <PreviewButton label="Reload" onClick={refreshIframe}>
@@ -204,18 +253,18 @@ function PreviewHeader({
         <div className="text-xs flex-1">Preview</div>
         <div className="flex gap-1">
           <PreviewButton
-            label={previewMaximized ? "Minimize" : "Maximize"}
-            onClick={togglePreviewMaximize}
+            label={isMaximized ? "Minimize" : "Maximize"}
+            onClick={toggleMaximize}
           >
-            {previewMaximized ? (
+            {isMaximized ? (
               <Minimize className="size-3" />
             ) : (
               <Maximize className="size-3" />
             )}
           </PreviewButton>
-          {previewMaximized ? (
+          {isMaximized ? (
             <PreviewButton label="open in new tab" onClick={openInNewTab}>
-              <AppWindowIcon className="size-3" />
+              <ExternalLinkIcon className="size-3" />
             </PreviewButton>
           ) : (
             <PreviewButton label="copy link" onClick={copyLink}>
@@ -224,7 +273,7 @@ function PreviewHeader({
           )}
         </div>
       </motion.div>
-      <div className={cn(previewMaximized && "hidden")}>
+      <div className={cn(isMaximized && "hidden")}>
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
@@ -247,6 +296,47 @@ function PreviewHeader({
   )
 }
 
+const usePreviewState = (src: string | undefined) => {
+  const [iframeKey, setIframeKey] = useState(() => Date.now())
+  const [isMaximized, setIsMaximized] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasError, setHasError] = useState(false)
+
+  const refreshIframe = useCallback(() => {
+    setIframeKey(Date.now())
+    setIsLoading(true)
+    setHasError(false)
+  }, [])
+
+  const toggleMaximize = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    setIsMaximized((prev) => !prev)
+  }, [src])
+
+  // Reset states when URL changes
+  useEffect(() => {
+    if (!src) return
+    setIsLoading(true)
+    setHasError(false)
+    refreshIframe()
+  }, [src, refreshIframe])
+
+  return {
+    iframeKey,
+    isMaximized,
+    isLoading,
+    hasError,
+    refreshIframe,
+    toggleMaximize,
+    setIsMaximized,
+    setIsLoading,
+    setHasError,
+  }
+}
+
 function PreviewButton({
   children,
   disabled = false,
@@ -258,14 +348,17 @@ function PreviewButton({
   onClick: () => void
   label: string
 }) {
+  const { isMaximized } = usePreviewContext()
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <motion.button
-          layout
-          className={`${
-            disabled ? "pointer-events-none opacity-50" : ""
-          } p-0.5 size-6  flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
+          layout="position"
+          layoutDependency={isMaximized}
+          className={cn(
+            disabled && "pointer-events-none opacity-50",
+            "p-0.5 size-6  flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
+          )}
           onClick={onClick}
         >
           {children}
@@ -277,3 +370,16 @@ function PreviewButton({
     </Tooltip>
   )
 }
+
+const PreviewContext = createContext<{
+  isMaximized: boolean
+  toggleMaximize: () => void
+} | null>(null)
+
+const usePreviewContext = () => {
+  const context = useContext(PreviewContext)
+  if (!context) {
+    throw new Error("usePreviewContext must be used within a PreviewProvider")
+  }
+  return context
+}

From 0648b67b38cbc79c46c75ee0fd0f57db5cf97e18 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Wed, 6 Aug 2025 17:16:45 +0200
Subject: [PATCH 10/11] fix: adjust terminal font size from 14 to 12 for better
 readability

---
 web/components/project/terminals/terminal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/project/terminals/terminal.tsx b/web/components/project/terminals/terminal.tsx
index 118ecc35..d21a9715 100644
--- a/web/components/project/terminals/terminal.tsx
+++ b/web/components/project/terminals/terminal.tsx
@@ -34,7 +34,7 @@ export default function EditorTerminal({
       cursorBlink: true,
       theme: theme === "light" ? lightTheme : darkTheme,
       fontFamily: "var(--font-geist-mono)",
-      fontSize: 14,
+      fontSize: 12,
       lineHeight: 1.5,
       letterSpacing: 0,
       allowTransparency: true,

From 4e0b56c7a45a3c3b5c8ac2e111977728dbbd9c1e Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Wed, 6 Aug 2025 17:16:54 +0200
Subject: [PATCH 11/11] fix: adjust preview panel sizes for improved layout
 responsiveness

---
 web/components/project/project-layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/project/project-layout.tsx b/web/components/project/project-layout.tsx
index 6b93b545..33f3f8ac 100644
--- a/web/components/project/project-layout.tsx
+++ b/web/components/project/project-layout.tsx
@@ -268,9 +268,9 @@ export default function ProjectLayout({
               {/* Preview Panel */}
               <ResizablePanel
                 ref={previewPanelRef}
-                defaultSize={isPreviewCollapsed ? 4 : 40}
+                defaultSize={isPreviewCollapsed ? 4 : 50}
                 minSize={25}
-                collapsedSize={isHorizontalLayout ? 40 : 4}
+                collapsedSize={isHorizontalLayout ? 50 : 4}
                 className="preview-panel p-2 transition-all duration-300 ease-in-out"
                 collapsible
                 {...previewPanelProps}