feat: bolt dyi preview final (#1569)

* V1

## [Unreleased] - 2025-03-28

### ✅ Fixed
- Fixed deployment errors on Cloudflare Pages caused by:
  - Missing or outdated `compatibility_date` and `compatibility_flags` in `wrangler.toml`
  - Use of Node.js built-ins (`crypto`, `stream`) in functions without proper polyfilling
  - Invalid Wrangler CLI options (`--log-level`) used during deployment
  - Type error when importing the Remix server build

### 🛠 Changed
- `wrangler.toml` updated:
  ```toml
  name = "bolt"
  compatibility_date = "2025-03-28"
  compatibility_flags = ["nodejs_compat"]
  pages_build_output_dir = "./build/client"
  send_metrics = false
  ```
- `functions/[[path]].ts` updated:
  ```ts
  import type { ServerBuild } from '@remix-run/cloudflare';
  import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
  import * as serverBuild from '../build/server';

  export const onRequest = createPagesFunctionHandler({
    build: serverBuild as unknown as ServerBuild,
  });
  ```

### 🚀 Deployment
- Successful deployment to:
  - Preview: https://979e2ca9.bolt-55b.pages.dev
  - Production: https://main.bolt-55b.pages.dev

* V1

## [Unreleased] - 2025-03-28

### ✅ Fixed
- Fixed deployment errors on Cloudflare Pages caused by:
  - Missing or outdated `compatibility_date` and `compatibility_flags` in `wrangler.toml`
  - Use of Node.js built-ins (`crypto`, `stream`) in functions without proper polyfilling
  - Invalid Wrangler CLI options (`--log-level`) used during deployment
  - Type error when importing the Remix server build

### 🛠 Changed
- `wrangler.toml` updated:
  ```toml
  name = "bolt"
  compatibility_date = "2025-03-28"
  compatibility_flags = ["nodejs_compat"]
  pages_build_output_dir = "./build/client"
  send_metrics = false
  ```
- `functions/[[path]].ts` updated:
  ```ts
  import type { ServerBuild } from '@remix-run/cloudflare';
  import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
  import * as serverBuild from '../build/server';

  export const onRequest = createPagesFunctionHandler({
    build: serverBuild as unknown as ServerBuild,
  });
  ```

### 🚀 Deployment
- Successful deployment to:
  - Preview: https://979e2ca9.bolt-55b.pages.dev
  - Production: https://main.bolt-55b.pages.dev

* feat: small bugfix

* Update Preview.tsx

app/components/workbench/Preview.tsx

@@ -12,13 +12,37 @@ interface WindowSize {
   width: number;
   height: number;
   icon: string;
+  hasFrame?: boolean;
+  frameType?: 'mobile' | 'tablet' | 'laptop' | 'desktop';
 }
 
 const WINDOW_SIZES: WindowSize[] = [
-  { name: 'Mobile', width: 375, height: 667, icon: 'i-ph:device-mobile' },
+  { name: 'iPhone SE', width: 375, height: 667, icon: 'i-ph:device-mobile', hasFrame: true, frameType: 'mobile' },
-  { name: 'Tablet', width: 768, height: 1024, icon: 'i-ph:device-tablet' },
+  { name: 'iPhone 12/13', width: 390, height: 844, icon: 'i-ph:device-mobile', hasFrame: true, frameType: 'mobile' },
-  { name: 'Laptop', width: 1366, height: 768, icon: 'i-ph:laptop' },
+  {
-  { name: 'Desktop', width: 1920, height: 1080, icon: 'i-ph:monitor' },
+    name: 'iPhone 12/13 Pro Max',
+    width: 428,
+    height: 926,
+    icon: 'i-ph:device-mobile',
+    hasFrame: true,
+    frameType: 'mobile',
+  },
+  { name: 'iPad Mini', width: 768, height: 1024, icon: 'i-ph:device-tablet', hasFrame: true, frameType: 'tablet' },
+  { name: 'iPad Air', width: 820, height: 1180, icon: 'i-ph:device-tablet', hasFrame: true, frameType: 'tablet' },
+  { name: 'iPad Pro 11"', width: 834, height: 1194, icon: 'i-ph:device-tablet', hasFrame: true, frameType: 'tablet' },
+  {
+    name: 'iPad Pro 12.9"',
+    width: 1024,
+    height: 1366,
+    icon: 'i-ph:device-tablet',
+    hasFrame: true,
+    frameType: 'tablet',
+  },
+  { name: 'Small Laptop', width: 1280, height: 800, icon: 'i-ph:laptop', hasFrame: true, frameType: 'laptop' },
+  { name: 'Laptop', width: 1366, height: 768, icon: 'i-ph:laptop', hasFrame: true, frameType: 'laptop' },
+  { name: 'Large Laptop', width: 1440, height: 900, icon: 'i-ph:laptop', hasFrame: true, frameType: 'laptop' },
+  { name: 'Desktop', width: 1920, height: 1080, icon: 'i-ph:monitor', hasFrame: true, frameType: 'desktop' },
+  { name: '4K Display', width: 3840, height: 2160, icon: 'i-ph:monitor', hasFrame: true, frameType: 'desktop' },
 ];
 
 export const Preview = memo(() => {
@@ -43,6 +67,7 @@ export const Preview = memo(() => {
 
   // Use percentage for width
   const [widthPercent, setWidthPercent] = useState<number>(37.5);
+  const [currentWidth, setCurrentWidth] = useState<number>(0);
 
   const resizingState = useRef({
     isResizing: false,
@@ -50,12 +75,17 @@ export const Preview = memo(() => {
     startX: 0,
     startWidthPercent: 37.5,
     windowWidth: window.innerWidth,
+    pointerId: null as number | null,
   });
 
-  const SCALING_FACTOR = 2;
+  // Reduce scaling factor to make resizing less sensitive
+  const SCALING_FACTOR = 1;
 
   const [isWindowSizeDropdownOpen, setIsWindowSizeDropdownOpen] = useState(false);
   const [selectedWindowSize, setSelectedWindowSize] = useState<WindowSize>(WINDOW_SIZES[0]);
+  const [isLandscape, setIsLandscape] = useState(false);
+  const [showDeviceFrame, setShowDeviceFrame] = useState(true);
+  const [showDeviceFrameInPreview, setShowDeviceFrameInPreview] = useState(false);
 
   useEffect(() => {
     if (!activePreview) {
@@ -133,68 +163,209 @@ export const Preview = memo(() => {
     setIsDeviceModeOn((prev) => !prev);
   };
 
-  const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
+  const startResizing = (e: React.PointerEvent, side: ResizeSide) => {
     if (!isDeviceModeOn) {
       return;
     }
 
+    const target = e.currentTarget as HTMLElement;
+    target.setPointerCapture(e.pointerId);
+
     document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'ew-resize';
 
-    resizingState.current.isResizing = true;
+    resizingState.current = {
-    resizingState.current.side = side;
+      isResizing: true,
-    resizingState.current.startX = e.clientX;
+      side,
-    resizingState.current.startWidthPercent = widthPercent;
+      startX: e.clientX,
-    resizingState.current.windowWidth = window.innerWidth;
+      startWidthPercent: widthPercent,
-
+      windowWidth: window.innerWidth,
-    document.addEventListener('mousemove', onMouseMove);
+      pointerId: e.pointerId,
-    document.addEventListener('mouseup', onMouseUp);
+    };
-
-    e.preventDefault();
   };
 
-  const onMouseMove = (e: MouseEvent) => {
+  const ResizeHandle = ({ side }: { side: ResizeSide }) => {
-    if (!resizingState.current.isResizing) {
+    if (!side) {
-      return;
+      return null;
     }
 
-    const dx = e.clientX - resizingState.current.startX;
+    return (
-    const windowWidth = resizingState.current.windowWidth;
+      <div
-
+        className={`resize-handle-${side}`}
-    const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
+        onPointerDown={(e) => startResizing(e, side)}
-
+        style={{
-    let newWidthPercent = resizingState.current.startWidthPercent;
+          position: 'absolute',
-
+          top: 0,
-    if (resizingState.current.side === 'right') {
+          ...(side === 'left' ? { left: 0, marginLeft: '-7px' } : { right: 0, marginRight: '-7px' }),
-      newWidthPercent = resizingState.current.startWidthPercent + dxPercent;
+          width: '15px',
-    } else if (resizingState.current.side === 'left') {
+          height: '100%',
-      newWidthPercent = resizingState.current.startWidthPercent - dxPercent;
+          cursor: 'ew-resize',
-    }
+          background: 'var(--bolt-elements-background-depth-4, rgba(0,0,0,.3))',
-
+          display: 'flex',
-    newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90));
+          alignItems: 'center',
-
+          justifyContent: 'center',
-    setWidthPercent(newWidthPercent);
+          transition: 'background 0.2s',
-  };
+          userSelect: 'none',
-
+          touchAction: 'none',
-  const onMouseUp = () => {
+          zIndex: 10,
-    resizingState.current.isResizing = false;
+        }}
-    resizingState.current.side = null;
+        onMouseOver={(e) =>
-    document.removeEventListener('mousemove', onMouseMove);
+          (e.currentTarget.style.background = 'var(--bolt-elements-background-depth-4, rgba(0,0,0,.3))')
-    document.removeEventListener('mouseup', onMouseUp);
+        }
-
+        onMouseOut={(e) =>
-    document.body.style.userSelect = '';
+          (e.currentTarget.style.background = 'var(--bolt-elements-background-depth-3, rgba(0,0,0,.15))')
+        }
+        title="Drag to resize width"
+      >
+        <GripIcon />
+      </div>
+    );
   };
 
+  useEffect(() => {
+    // Skip if not in device mode
+    if (!isDeviceModeOn) {
+      return;
+    }
+
+    const handlePointerMove = (e: PointerEvent) => {
+      const state = resizingState.current;
+
+      if (!state.isResizing || e.pointerId !== state.pointerId) {
+        return;
+      }
+
+      const dx = e.clientX - state.startX;
+      const dxPercent = (dx / state.windowWidth) * 100 * SCALING_FACTOR;
+
+      let newWidthPercent = state.startWidthPercent;
+
+      if (state.side === 'right') {
+        newWidthPercent = state.startWidthPercent + dxPercent;
+      } else if (state.side === 'left') {
+        newWidthPercent = state.startWidthPercent - dxPercent;
+      }
+
+      // Limit width percentage between 10% and 90%
+      newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90));
+
+      // Force a synchronous update to ensure the UI reflects the change immediately
+      setWidthPercent(newWidthPercent);
+
+      // Calculate and update the actual pixel width
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.clientWidth;
+        const newWidth = Math.round((containerWidth * newWidthPercent) / 100);
+        setCurrentWidth(newWidth);
+
+        // Apply the width directly to the container for immediate feedback
+        const previewContainer = containerRef.current.querySelector('div[style*="width"]');
+
+        if (previewContainer) {
+          (previewContainer as HTMLElement).style.width = `${newWidthPercent}%`;
+        }
+      }
+    };
+
+    const handlePointerUp = (e: PointerEvent) => {
+      const state = resizingState.current;
+
+      if (!state.isResizing || e.pointerId !== state.pointerId) {
+        return;
+      }
+
+      // Find all resize handles
+      const handles = document.querySelectorAll('.resize-handle-left, .resize-handle-right');
+
+      // Release pointer capture from any handle that has it
+      handles.forEach((handle) => {
+        if ((handle as HTMLElement).hasPointerCapture?.(e.pointerId)) {
+          (handle as HTMLElement).releasePointerCapture(e.pointerId);
+        }
+      });
+
+      // Reset state
+      resizingState.current = {
+        ...resizingState.current,
+        isResizing: false,
+        side: null,
+        pointerId: null,
+      };
+
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+    };
+
+    // Add event listeners
+    document.addEventListener('pointermove', handlePointerMove, { passive: false });
+    document.addEventListener('pointerup', handlePointerUp);
+    document.addEventListener('pointercancel', handlePointerUp);
+
+    // Define cleanup function
+    function cleanupResizeListeners() {
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+      document.removeEventListener('pointercancel', handlePointerUp);
+
+      // Release any lingering pointer captures
+      if (resizingState.current.pointerId !== null) {
+        const handles = document.querySelectorAll('.resize-handle-left, .resize-handle-right');
+        handles.forEach((handle) => {
+          if ((handle as HTMLElement).hasPointerCapture?.(resizingState.current.pointerId!)) {
+            (handle as HTMLElement).releasePointerCapture(resizingState.current.pointerId!);
+          }
+        });
+
+        // Reset state
+        resizingState.current = {
+          ...resizingState.current,
+          isResizing: false,
+          side: null,
+          pointerId: null,
+        };
+
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+      }
+    }
+
+    // Return the cleanup function
+    // eslint-disable-next-line consistent-return
+    return cleanupResizeListeners;
+  }, [isDeviceModeOn, SCALING_FACTOR]);
+
   useEffect(() => {
     const handleWindowResize = () => {
-      // Optional: Adjust widthPercent if necessary
+      // Update the window width in the resizing state
+      resizingState.current.windowWidth = window.innerWidth;
+
+      // Update the current width in pixels
+      if (containerRef.current && isDeviceModeOn) {
+        const containerWidth = containerRef.current.clientWidth;
+        setCurrentWidth(Math.round((containerWidth * widthPercent) / 100));
+      }
     };
 
     window.addEventListener('resize', handleWindowResize);
 
+    // Initial calculation of current width
+    if (containerRef.current && isDeviceModeOn) {
+      const containerWidth = containerRef.current.clientWidth;
+      setCurrentWidth(Math.round((containerWidth * widthPercent) / 100));
+    }
+
     return () => {
       window.removeEventListener('resize', handleWindowResize);
     };
-  }, []);
+  }, [isDeviceModeOn, widthPercent]);
+
+  // Update current width when device mode is toggled
+  useEffect(() => {
+    if (containerRef.current && isDeviceModeOn) {
+      const containerWidth = containerRef.current.clientWidth;
+      setCurrentWidth(Math.round((containerWidth * widthPercent) / 100));
+    }
+  }, [isDeviceModeOn]);
 
   const GripIcon = () => (
     <div
@@ -208,7 +379,7 @@ export const Preview = memo(() => {
     >
       <div
         style={{
-          color: 'rgba(0,0,0,0.5)',
+          color: 'var(--bolt-elements-textSecondary, rgba(0,0,0,0.5))',
           fontSize: '10px',
           lineHeight: '5px',
           userSelect: 'none',
@@ -227,14 +398,166 @@ export const Preview = memo(() => {
       if (match) {
         const previewId = match[1];
         const previewUrl = `/webcontainer/preview/${previewId}`;
-        const newWindow = window.open(
-          previewUrl,
-          '_blank',
-          `noopener,noreferrer,width=${size.width},height=${size.height},menubar=no,toolbar=no,location=no,status=no`,
-        );
 
-        if (newWindow) {
+        // Adjust dimensions for landscape mode if applicable
-          newWindow.focus();
+        let width = size.width;
+        let height = size.height;
+
+        if (isLandscape && (size.frameType === 'mobile' || size.frameType === 'tablet')) {
+          // Swap width and height for landscape mode
+          width = size.height;
+          height = size.width;
+        }
+
+        // Create a window with device frame if enabled
+        if (showDeviceFrame && size.hasFrame) {
+          // Calculate frame dimensions
+          const frameWidth = size.frameType === 'mobile' ? (isLandscape ? 120 : 40) : 60; // Width padding on each side
+          const frameHeight = size.frameType === 'mobile' ? (isLandscape ? 80 : 80) : isLandscape ? 60 : 100; // Height padding on top and bottom
+
+          // Create a window with the correct dimensions first
+          const newWindow = window.open(
+            '',
+            '_blank',
+            `width=${width + frameWidth},height=${height + frameHeight + 40},menubar=no,toolbar=no,location=no,status=no`,
+          );
+
+          if (!newWindow) {
+            console.error('Failed to open new window');
+            return;
+          }
+
+          // Create the HTML content for the frame
+          const frameColor = getFrameColor();
+          const frameRadius = size.frameType === 'mobile' ? '36px' : '20px';
+          const framePadding =
+            size.frameType === 'mobile'
+              ? isLandscape
+                ? '40px 60px'
+                : '40px 20px'
+              : isLandscape
+                ? '30px 50px'
+                : '50px 30px';
+
+          // Position notch and home button based on orientation
+          const notchTop = isLandscape ? '50%' : '20px';
+          const notchLeft = isLandscape ? '30px' : '50%';
+          const notchTransform = isLandscape ? 'translateY(-50%)' : 'translateX(-50%)';
+          const notchWidth = isLandscape ? '8px' : size.frameType === 'mobile' ? '60px' : '80px';
+          const notchHeight = isLandscape ? (size.frameType === 'mobile' ? '60px' : '80px') : '8px';
+
+          const homeBottom = isLandscape ? '50%' : '15px';
+          const homeRight = isLandscape ? '30px' : '50%';
+          const homeTransform = isLandscape ? 'translateY(50%)' : 'translateX(50%)';
+          const homeWidth = isLandscape ? '4px' : '40px';
+          const homeHeight = isLandscape ? '40px' : '4px';
+
+          // Create HTML content for the wrapper page
+          const htmlContent = `
+            <!DOCTYPE html>
+            <html>
+            <head>
+              <meta charset="utf-8">
+              <title>${size.name} Preview</title>
+              <style>
+                body {
+                  margin: 0;
+                  padding: 0;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  height: 100vh;
+                  background: #f0f0f0;
+                  overflow: hidden;
+                  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                }
+                
+                .device-container {
+                  position: relative;
+                }
+                
+                .device-name {
+                  position: absolute;
+                  top: -30px;
+                  left: 0;
+                  right: 0;
+                  text-align: center;
+                  font-size: 14px;
+                  color: #333;
+                }
+                
+                .device-frame {
+                  position: relative;
+                  border-radius: ${frameRadius};
+                  background: ${frameColor};
+                  padding: ${framePadding};
+                  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+                  overflow: hidden;
+                }
+                
+                /* Notch */
+                .device-frame:before {
+                  content: '';
+                  position: absolute;
+                  top: ${notchTop};
+                  left: ${notchLeft};
+                  transform: ${notchTransform};
+                  width: ${notchWidth};
+                  height: ${notchHeight};
+                  background: #333;
+                  border-radius: 4px;
+                  z-index: 2;
+                }
+                
+                /* Home button */
+                .device-frame:after {
+                  content: '';
+                  position: absolute;
+                  bottom: ${homeBottom};
+                  right: ${homeRight};
+                  transform: ${homeTransform};
+                  width: ${homeWidth};
+                  height: ${homeHeight};
+                  background: #333;
+                  border-radius: 50%;
+                  z-index: 2;
+                }
+                
+                iframe {
+                  border: none;
+                  width: ${width}px;
+                  height: ${height}px;
+                  background: white;
+                  display: block;
+                }
+              </style>
+            </head>
+            <body>
+              <div class="device-container">
+                <div class="device-name">${size.name} ${isLandscape ? '(Landscape)' : '(Portrait)'}</div>
+                <div class="device-frame">
+                  <iframe src="${previewUrl}" sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin" allow="cross-origin-isolated"></iframe>
+                </div>
+              </div>
+            </body>
+            </html>
+          `;
+
+          // Write the HTML content to the new window
+          newWindow.document.open();
+          newWindow.document.write(htmlContent);
+          newWindow.document.close();
+        } else {
+          // Standard window without frame
+          const newWindow = window.open(
+            previewUrl,
+            '_blank',
+            `width=${width},height=${height},menubar=no,toolbar=no,location=no,status=no`,
+          );
+
+          if (newWindow) {
+            newWindow.focus();
+          }
         }
       } else {
         console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl);
@@ -242,6 +565,67 @@ export const Preview = memo(() => {
     }
   };
 
+  // Function to get the correct frame padding based on orientation
+  const getFramePadding = useCallback(() => {
+    if (!selectedWindowSize) {
+      return '40px 20px';
+    }
+
+    const isMobile = selectedWindowSize.frameType === 'mobile';
+
+    if (isLandscape) {
+      // Increase horizontal padding in landscape mode to ensure full device frame is visible
+      return isMobile ? '40px 60px' : '30px 50px';
+    }
+
+    return isMobile ? '40px 20px' : '50px 30px';
+  }, [isLandscape, selectedWindowSize]);
+
+  // Function to get the scale factor for the device frame
+  const getDeviceScale = useCallback(() => {
+    // Always return 1 to ensure the device frame is shown at its exact size
+    return 1;
+  }, [isLandscape, selectedWindowSize, widthPercent]);
+
+  // Update the device scale when needed
+  useEffect(() => {
+    /*
+     * Intentionally disabled - we want to maintain scale of 1
+     * No dynamic scaling to ensure device frame matches external window exactly
+     */
+    return () => {};
+  }, [isDeviceModeOn, showDeviceFrameInPreview, getDeviceScale, isLandscape, selectedWindowSize]);
+
+  // Function to get the frame color based on dark mode
+  const getFrameColor = useCallback(() => {
+    // Check if the document has a dark class or data-theme="dark"
+    const isDarkMode =
+      document.documentElement.classList.contains('dark') ||
+      document.documentElement.getAttribute('data-theme') === 'dark' ||
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    // Return a darker color for light mode, lighter color for dark mode
+    return isDarkMode ? '#555' : '#111';
+  }, []);
+
+  // Effect to handle color scheme changes
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleColorSchemeChange = () => {
+      // Force a re-render when color scheme changes
+      if (showDeviceFrameInPreview) {
+        setShowDeviceFrameInPreview(true);
+      }
+    };
+
+    darkModeMediaQuery.addEventListener('change', handleColorSchemeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener('change', handleColorSchemeChange);
+    };
+  }, [showDeviceFrameInPreview]);
+
   return (
     <div
       ref={containerRef}
@@ -300,6 +684,21 @@ export const Preview = memo(() => {
             title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'}
           />
 
+          {isDeviceModeOn && (
+            <>
+              <IconButton
+                icon="i-ph:rotate-right"
+                onClick={() => setIsLandscape(!isLandscape)}
+                title={isLandscape ? 'Switch to Portrait' : 'Switch to Landscape'}
+              />
+              <IconButton
+                icon={showDeviceFrameInPreview ? 'i-ph:device-mobile' : 'i-ph:device-mobile-slash'}
+                onClick={() => setShowDeviceFrameInPreview(!showDeviceFrameInPreview)}
+                title={showDeviceFrameInPreview ? 'Hide Device Frame' : 'Show Device Frame'}
+              />
+            </>
+          )}
+
           <IconButton
             icon="i-ph:layout-light"
             onClick={() => setIsPreviewOnly(!isPreviewOnly)}
@@ -328,7 +727,50 @@ export const Preview = memo(() => {
             {isWindowSizeDropdownOpen && (
               <>
                 <div className="fixed inset-0 z-50" onClick={() => setIsWindowSizeDropdownOpen(false)} />
-                <div className="absolute right-0 top-full mt-2 z-50 min-w-[240px] bg-white dark:bg-black rounded-xl shadow-2xl border border-[#E5E7EB] dark:border-[rgba(255,255,255,0.1)] overflow-hidden">
+                <div className="absolute right-0 top-full mt-2 z-50 min-w-[240px] max-h-[400px] overflow-y-auto bg-white dark:bg-black rounded-xl shadow-2xl border border-[#E5E7EB] dark:border-[rgba(255,255,255,0.1)] overflow-hidden">
+                  <div className="p-3 border-b border-[#E5E7EB] dark:border-[rgba(255,255,255,0.1)]">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium text-[#111827] dark:text-gray-300">Device Options</span>
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-[#6B7280] dark:text-gray-400">Show Device Frame</span>
+                        <button
+                          className={`w-10 h-5 rounded-full transition-colors duration-200 ${
+                            showDeviceFrame ? 'bg-[#6D28D9]' : 'bg-gray-300 dark:bg-gray-700'
+                          } relative`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowDeviceFrame(!showDeviceFrame);
+                          }}
+                        >
+                          <span
+                            className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform duration-200 ${
+                              showDeviceFrame ? 'transform translate-x-5' : ''
+                            }`}
+                          />
+                        </button>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-[#6B7280] dark:text-gray-400">Landscape Mode</span>
+                        <button
+                          className={`w-10 h-5 rounded-full transition-colors duration-200 ${
+                            isLandscape ? 'bg-[#6D28D9]' : 'bg-gray-300 dark:bg-gray-700'
+                          } relative`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setIsLandscape(!isLandscape);
+                          }}
+                        >
+                          <span
+                            className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform duration-200 ${
+                              isLandscape ? 'transform translate-x-5' : ''
+                            }`}
+                          />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
                   {WINDOW_SIZES.map((size) => (
                     <button
                       key={size.name}
@@ -342,14 +784,34 @@ export const Preview = memo(() => {
                       <div
                         className={`${size.icon} w-5 h-5 text-[#6B7280] dark:text-gray-400 group-hover:text-[#6D28D9] dark:group-hover:text-[#6D28D9] transition-colors duration-200`}
                       />
-                      <div className="flex flex-col">
+                      <div className="flex-grow flex flex-col">
                         <span className="font-medium group-hover:text-[#6D28D9] dark:group-hover:text-[#6D28D9] transition-colors duration-200">
                           {size.name}
                         </span>
                         <span className="text-xs text-[#6B7280] dark:text-gray-400 group-hover:text-[#6D28D9] dark:group-hover:text-[#6D28D9] transition-colors duration-200">
-                          {size.width} × {size.height}
+                          {isLandscape && (size.frameType === 'mobile' || size.frameType === 'tablet')
+                            ? `${size.height} × ${size.width}`
+                            : `${size.width} × ${size.height}`}
+                          {size.hasFrame && showDeviceFrame ? ' (with frame)' : ''}
                         </span>
                       </div>
+                      {selectedWindowSize.name === size.name && (
+                        <div className="text-[#6D28D9] dark:text-[#6D28D9]">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          >
+                            <polyline points="20 6 9 17 4 12"></polyline>
+                          </svg>
+                        </div>
+                      )}
                     </button>
                   ))}
                 </div>
@@ -362,24 +824,110 @@ export const Preview = memo(() => {
       <div className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto">
         <div
           style={{
-            width: isDeviceModeOn ? `${widthPercent}%` : '100%',
+            width: isDeviceModeOn ? (showDeviceFrameInPreview ? '100%' : `${widthPercent}%`) : '100%',
             height: '100%',
-            overflow: 'visible',
+            overflow: 'auto',
             background: 'var(--bolt-elements-background-depth-1)',
             position: 'relative',
             display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
           {activePreview ? (
             <>
-              <iframe
+              {isDeviceModeOn && showDeviceFrameInPreview ? (
-                ref={iframeRef}
+                <div
-                title="preview"
+                  className="device-wrapper"
-                className="border-none w-full h-full bg-bolt-elements-background-depth-1"
+                  style={{
-                src={iframeUrl}
+                    display: 'flex',
-                sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
+                    justifyContent: 'center',
-                allow="cross-origin-isolated"
+                    alignItems: 'center',
-              />
+                    width: '100%',
+                    height: '100%',
+                    padding: '0',
+                    overflow: 'auto',
+                    transition: 'all 0.3s ease',
+                    position: 'relative',
+                  }}
+                >
+                  <div
+                    className="device-frame-container"
+                    style={{
+                      position: 'relative',
+                      borderRadius: selectedWindowSize.frameType === 'mobile' ? '36px' : '20px',
+                      background: getFrameColor(),
+                      padding: getFramePadding(),
+                      boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+                      overflow: 'hidden',
+                      transform: 'scale(1)',
+                      transformOrigin: 'center center',
+                      transition: 'all 0.3s ease',
+                      margin: '40px',
+                      width: isLandscape
+                        ? `${selectedWindowSize.height + (selectedWindowSize.frameType === 'mobile' ? 120 : 60)}px`
+                        : `${selectedWindowSize.width + (selectedWindowSize.frameType === 'mobile' ? 40 : 60)}px`,
+                      height: isLandscape
+                        ? `${selectedWindowSize.width + (selectedWindowSize.frameType === 'mobile' ? 80 : 60)}px`
+                        : `${selectedWindowSize.height + (selectedWindowSize.frameType === 'mobile' ? 80 : 100)}px`,
+                    }}
+                  >
+                    {/* Notch - positioned based on orientation */}
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: isLandscape ? '50%' : '20px',
+                        left: isLandscape ? '30px' : '50%',
+                        transform: isLandscape ? 'translateY(-50%)' : 'translateX(-50%)',
+                        width: isLandscape ? '8px' : selectedWindowSize.frameType === 'mobile' ? '60px' : '80px',
+                        height: isLandscape ? (selectedWindowSize.frameType === 'mobile' ? '60px' : '80px') : '8px',
+                        background: '#333',
+                        borderRadius: '4px',
+                        zIndex: 2,
+                      }}
+                    />
+
+                    {/* Home button - positioned based on orientation */}
+                    <div
+                      style={{
+                        position: 'absolute',
+                        bottom: isLandscape ? '50%' : '15px',
+                        right: isLandscape ? '30px' : '50%',
+                        transform: isLandscape ? 'translateY(50%)' : 'translateX(50%)',
+                        width: isLandscape ? '4px' : '40px',
+                        height: isLandscape ? '40px' : '4px',
+                        background: '#333',
+                        borderRadius: '50%',
+                        zIndex: 2,
+                      }}
+                    />
+
+                    <iframe
+                      ref={iframeRef}
+                      title="preview"
+                      style={{
+                        border: 'none',
+                        width: isLandscape ? `${selectedWindowSize.height}px` : `${selectedWindowSize.width}px`,
+                        height: isLandscape ? `${selectedWindowSize.width}px` : `${selectedWindowSize.height}px`,
+                        background: 'white',
+                        display: 'block',
+                      }}
+                      src={iframeUrl}
+                      sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
+                      allow="cross-origin-isolated"
+                    />
+                  </div>
+                </div>
+              ) : (
+                <iframe
+                  ref={iframeRef}
+                  title="preview"
+                  className="border-none w-full h-full bg-bolt-elements-background-depth-1"
+                  src={iframeUrl}
+                  sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
+                  allow="cross-origin-isolated"
+                />
+              )}
               <ScreenshotSelector
                 isSelectionMode={isSelectionMode}
                 setIsSelectionMode={setIsSelectionMode}
@@ -392,55 +940,30 @@ export const Preview = memo(() => {
             </div>
           )}
 
-          {isDeviceModeOn && (
+          {isDeviceModeOn && !showDeviceFrameInPreview && (
             <>
+              {/* Width indicator */}
               <div
-                onMouseDown={(e) => startResizing(e, 'left')}
                 style={{
                   position: 'absolute',
-                  top: 0,
+                  top: '-25px',
-                  left: 0,
+                  left: '50%',
-                  width: '15px',
+                  transform: 'translateX(-50%)',
-                  marginLeft: '-15px',
+                  background: 'var(--bolt-elements-background-depth-3, rgba(0,0,0,0.7))',
-                  height: '100%',
+                  color: 'var(--bolt-elements-textPrimary, white)',
-                  cursor: 'ew-resize',
+                  padding: '2px 8px',
-                  background: 'rgba(255,255,255,.2)',
+                  borderRadius: '4px',
-                  display: 'flex',
+                  fontSize: '12px',
-                  alignItems: 'center',
+                  pointerEvents: 'none',
-                  justifyContent: 'center',
+                  opacity: resizingState.current.isResizing ? 1 : 0,
-                  transition: 'background 0.2s',
+                  transition: 'opacity 0.3s',
-                  userSelect: 'none',
                 }}
-                onMouseOver={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.5)')}
-                onMouseOut={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.2)')}
-                title="Drag to resize width"
               >
-                <GripIcon />
+                {currentWidth}px
               </div>
 
-              <div
+              <ResizeHandle side="left" />
-                onMouseDown={(e) => startResizing(e, 'right')}
+              <ResizeHandle side="right" />
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  right: 0,
-                  width: '15px',
-                  marginRight: '-15px',
-                  height: '100%',
-                  cursor: 'ew-resize',
-                  background: 'rgba(255,255,255,.2)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  transition: 'background 0.2s',
-                  userSelect: 'none',
-                }}
-                onMouseOver={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.5)')}
-                onMouseOut={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.2)')}
-                title="Drag to resize width"
-              >
-                <GripIcon />
-              </div>
             </>
           )}
         </div>