From 53eeeced4ca9d9777b4f0bb6ce5fed67e264a168 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 4 Apr 2025 00:25:03 -0700
Subject: [PATCH 1/6] Working resize

---
 .../[id]/_components/canvas/frames/frame.tsx        | 13 +++++++------
 .../_components/canvas/frames/resize-handles.tsx    | 13 ++++++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
index e1a4b16ed0..91ccd2566b 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
@@ -1,7 +1,7 @@
 import type { FrameSettings } from "@onlook/models/projects";
 import { cn } from "@onlook/ui-v4/utils";
 import { observer } from "mobx-react-lite";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { ResizeHandles } from './resize-handles';
 
 export const Frame = observer(
@@ -12,6 +12,7 @@ export const Frame = observer(
     }) => {
         const position = settings.position;
         const iframeRef = useRef<HTMLIFrameElement>(null);
+        const [dimensions, setDimensions] = useState(settings.dimension);
 
         return (
             <div
@@ -32,7 +33,7 @@ export const Frame = observer(
                     webviewSize={webviewSize}
                 /> */}
                 <div className="relative">
-                    <ResizeHandles settings={settings} />
+                    <ResizeHandles settings={settings} dimensions={dimensions} onResize={setDimensions} />
                     <iframe
                         id={settings.id}
                         ref={iframeRef}
@@ -44,10 +45,10 @@ export const Frame = observer(
                         src={settings.url}
                         sandbox="allow-modals allow-forms allow-same-origin allow-scripts allow-popups allow-downloads"
                         allow="geolocation; microphone; camera; midi; encrypted-media"
-                    // style={{
-                    //     width: clampedDimensions.width,
-                    //     height: clampedDimensions.height,
-                    // }}
+                        style={{
+                            width: dimensions.width,
+                            height: dimensions.height,
+                        }}
                     />
                     {/* <GestureScreen
                         isResizing={isResizing}
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
index 3864320197..b110d206f4 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
@@ -1,7 +1,7 @@
 import { useEditorEngine } from '@/components/store';
 import type { SizePreset } from '@/components/store/editor/engine/canvas';
 import { DefaultSettings } from '@onlook/models/constants';
-import type { FrameSettings } from '@onlook/models/projects';
+import type { FrameSettings, RectDimension } from '@onlook/models/projects';
 import { ToastAction } from '@onlook/ui/toast';
 import { useToast } from '@onlook/ui/use-toast';
 import { cn } from '@onlook/ui/utils';
@@ -16,15 +16,18 @@ enum HandleType {
 export const ResizeHandles = observer(
     ({
         settings,
+        dimensions,
+        onResize,
     }: {
         settings: FrameSettings;
+        dimensions: RectDimension;
+        onResize: (dimensions: RectDimension) => void;
     }) => {
         const editorEngine = useEditorEngine();
         const resizeHandleRef = useRef(null);
         const { toast } = useToast();
 
         // TODO: Move these to the store
-        const [size, setSize] = useState(settings.dimension);
         const [isResizing, setIsResizing] = useState<boolean>(false);
         const [aspectRatioLocked, setAspectRatioLocked] = useState(
             settings.aspectRatioLocked || DefaultSettings.ASPECT_RATIO_LOCKED,
@@ -43,8 +46,8 @@ export const ResizeHandles = observer(
 
             const startX = e.clientX;
             const startY = e.clientY;
-            const startWidth = size.width;
-            const startHeight = size.height;
+            const startWidth = dimensions.width;
+            const startHeight = dimensions.height;
             const aspectRatio = startWidth / startHeight;
 
             const resize: any = (e: MouseEvent) => {
@@ -95,7 +98,7 @@ export const ResizeHandles = observer(
                     }
                 }
 
-                setSize({
+                onResize({
                     width: Math.floor(currentWidth),
                     height: Math.floor(currentHeight),
                 });

From 973706cd0b68cb7c8f4faab097dd8128fce46689 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 4 Apr 2025 12:15:55 -0700
Subject: [PATCH 2/6] Save

---
 .../[id]/_components/canvas/frames/frame.tsx  |   2 +
 .../_components/canvas/frames/gesture.tsx     | 209 ++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx

diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
index 91ccd2566b..2622d0d384 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
@@ -12,6 +12,8 @@ export const Frame = observer(
     }) => {
         const position = settings.position;
         const iframeRef = useRef<HTMLIFrameElement>(null);
+
+        // TODO: Dimensions need to be structured in a way where Yjs can track changes. Abstract a FrameState interface.
         const [dimensions, setDimensions] = useState(settings.dimension);
 
         return (
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
new file mode 100644
index 0000000000..4abe19c0b5
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
@@ -0,0 +1,209 @@
+import { useEditorEngine } from '@/components/store';
+import { getRelativeMousePositionToWebview } from '@/components/store/editor/engine/overlay/utils';
+import { EditorMode, MouseAction } from '@onlook/models/editor';
+import type { DomElement, ElementPosition } from '@onlook/models/element';
+import { cn } from '@onlook/ui/utils';
+import throttle from 'lodash/throttle';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useEffect, useMemo } from 'react';
+// import RightClickMenu from '../RightClickMenu';
+
+interface GestureScreenProps {
+    webviewRef: React.RefObject<Electron.WebviewTag>;
+    setHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isResizing: boolean;
+}
+
+const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureScreenProps) => {
+    const editorEngine = useEditorEngine();
+
+    const getWebview = useCallback((): Electron.WebviewTag => {
+        const webview = webviewRef.current as Electron.WebviewTag | null;
+        if (!webview) {
+            throw Error('No webview found');
+        }
+        return webview;
+    }, [webviewRef]);
+
+    const getRelativeMousePosition = useCallback(
+        (e: React.MouseEvent<HTMLDivElement>): ElementPosition => {
+            const webview = getWebview();
+            return getRelativeMousePositionToWebview(e, webview);
+        },
+        [getWebview],
+    );
+
+    const handleMouseEvent = useCallback(
+        async (e: React.MouseEvent<HTMLDivElement>, action: MouseAction) => {
+            const webview = getWebview();
+            const pos = getRelativeMousePosition(e);
+            const el: DomElement = await webview.executeJavaScript(
+                `window.api?.getElementAtLoc(${pos.x}, ${pos.y}, ${action === MouseAction.MOUSE_DOWN || action === MouseAction.DOUBLE_CLICK})`,
+            );
+            if (!el) {
+                return;
+            }
+
+            switch (action) {
+                case MouseAction.MOVE:
+                    editorEngine.elements.mouseover(el, webview);
+                    if (e.altKey) {
+                        editorEngine.elements.showMeasurement();
+                    } else {
+                        editorEngine.overlay.removeMeasurement();
+                    }
+                    break;
+                case MouseAction.MOUSE_DOWN:
+                    if (el.tagName.toLocaleLowerCase() === 'body') {
+                        editorEngine.webview.select(webview);
+                        return;
+                    }
+                    // Ignore right-clicks
+                    if (e.button == 2) {
+                        break;
+                    }
+                    if (editorEngine.text.isEditing) {
+                        editorEngine.text.end();
+                    }
+                    if (e.shiftKey) {
+                        editorEngine.elements.shiftClick(el, webview);
+                    } else {
+                        editorEngine.move.start(el, pos, webview);
+                        editorEngine.elements.click([el], webview);
+                    }
+                    break;
+                case MouseAction.DOUBLE_CLICK:
+                    editorEngine.text.start(el, webview);
+                    break;
+            }
+        },
+        [getWebview, getRelativeMousePosition, editorEngine],
+    );
+
+    const throttledMouseMove = useMemo(
+        () =>
+            throttle((e: React.MouseEvent<HTMLDivElement>) => {
+                if (editorEngine.state.move.isDragging) {
+                    editorEngine.state.move.drag(e, getRelativeMousePosition);
+                } else if (
+                    editorEngine.state.editorMode === EditorMode.DESIGN ||
+                    ((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
+                        editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
+                        editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
+                        !editorEngine.insert.isDrawing)
+                ) {
+                    handleMouseEvent(e, MouseAction.MOVE);
+                } else if (editorEngine.insert.isDrawing) {
+                    editorEngine.insert.draw(e);
+                }
+            }, 16),
+        [editorEngine, getRelativeMousePosition, handleMouseEvent],
+    );
+
+    useEffect(() => {
+        return () => {
+            throttledMouseMove.cancel();
+        };
+    }, [throttledMouseMove]);
+
+    const handleClick = useCallback(
+        (e: React.MouseEvent<HTMLDivElement>) => {
+            const webview = getWebview();
+            editorEngine.webview.deselectAll();
+            editorEngine.webview.select(webview);
+        },
+        [getWebview, editorEngine.webview],
+    );
+
+    function handleDoubleClick(e: React.MouseEvent<HTMLDivElement>) {
+        if (editorEngine.state.editorMode !== EditorMode.DESIGN) {
+            return;
+        }
+        handleMouseEvent(e, MouseAction.DOUBLE_CLICK);
+    }
+
+    function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
+        if (editorEngine.state.editorMode === EditorMode.DESIGN) {
+            handleMouseEvent(e, MouseAction.MOUSE_DOWN);
+        } else if (
+            editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
+            editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
+            editorEngine.state.editorMode === EditorMode.INSERT_IMAGE
+        ) {
+            editorEngine.insert.start(e);
+        }
+    }
+
+    async function handleMouseUp(e: React.MouseEvent<HTMLDivElement>) {
+        editorEngine.insert.end(e, webviewRef.current);
+        editorEngine.move.end(e);
+    }
+
+    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleMouseEvent(e, MouseAction.MOVE);
+    };
+
+    const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        try {
+            const propertiesData = e.dataTransfer.getData('application/json');
+            if (!propertiesData) {
+                console.error('No element properties in drag data');
+                return;
+            }
+
+            const properties = JSON.parse(propertiesData);
+
+            if (properties.type === 'image') {
+                const webview = getWebview();
+                const dropPosition = getRelativeMousePosition(e);
+                await editorEngine.insert.insertDroppedImage(webview, dropPosition, properties);
+            } else {
+                const webview = getWebview();
+                const dropPosition = getRelativeMousePosition(e);
+                await editorEngine.insert.insertDroppedElement(webview, dropPosition, properties);
+            }
+
+            editorEngine.state.editorMode = EditorMode.DESIGN;
+        } catch (error) {
+            console.error('drop operation failed:', error);
+        }
+    };
+
+    const gestureScreenClassName = useMemo(() => {
+        return cn(
+            'absolute inset-0 bg-transparent',
+            editorEngine.state.editorMode === EditorMode.PREVIEW && !isResizing ? 'hidden' : 'visible',
+            editorEngine.state.editorMode === EditorMode.INSERT_DIV && 'cursor-crosshair',
+            editorEngine.state.editorMode === EditorMode.INSERT_TEXT && 'cursor-text',
+        );
+    }, [editorEngine.state.editorMode, isResizing]);
+
+    return (
+        // <RightClickMenu>
+        <div
+            className={gestureScreenClassName}
+            onClick={handleClick}
+            onMouseOver={() => setHovered(true)}
+            onMouseOut={useCallback(() => {
+                setHovered(false);
+                editorEngine.elements.clearHoveredElement();
+                editorEngine.overlay.state.updateHoverRect(null);
+            }, [editorEngine, setHovered])}
+            onMouseLeave={handleMouseUp}
+            onMouseMove={throttledMouseMove}
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onDoubleClick={handleDoubleClick}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+        ></div>
+        // </RightClickMenu>
+    );
+});
+
+export default GestureScreen;

From 3a31fb4611b0088a81d24ea4906d387d0bf6e894 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sat, 5 Apr 2025 17:08:11 -0700
Subject: [PATCH 3/6] Update frame state

---
 .../routes/editor/LayersPanel/LayersTab.tsx   |   2 +-
 .../routes/editor/RightClickMenu/index.tsx    |   2 -
 .../editor/WebviewArea/GestureScreen.tsx      |   4 +-
 .../[id]/_components/canvas/frames/frame.tsx  |  65 -----
 .../_components/canvas/frames/frame/index.tsx |  40 +++
 .../_components/canvas/frames/frame/web.tsx   |  25 ++
 .../_components/canvas/frames/gesture.tsx     | 268 +++++++++---------
 .../[id]/_components/canvas/frames/index.tsx  |   6 +-
 .../canvas/frames/resize-handles.tsx          |  95 ++-----
 .../_components/canvas/frames/right-click.tsx | 237 ++++++++++++++++
 .../project/[id]/_components/canvas/index.tsx |  10 +-
 .../canvas/overlay/elements/chat.tsx          |   4 +-
 apps/web/src/components/ide.ts                |  69 +++++
 .../store/editor/engine/canvas/frame.ts       |  44 +++
 .../store/editor/engine/canvas/index.ts       | 204 ++++++-------
 .../store/editor/engine/canvas/state.ts       |   0
 .../store/editor/engine/overlay/index.ts      |  56 ++--
 packages/models/src/frame/index.ts            |  15 +
 packages/models/src/index.ts                  |   1 +
 19 files changed, 711 insertions(+), 436 deletions(-)
 delete mode 100644 apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
 create mode 100644 apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx
 create mode 100644 apps/web/src/app/project/[id]/_components/canvas/frames/frame/web.tsx
 create mode 100644 apps/web/src/app/project/[id]/_components/canvas/frames/right-click.tsx
 create mode 100644 apps/web/src/components/ide.ts
 create mode 100644 apps/web/src/components/store/editor/engine/canvas/frame.ts
 create mode 100644 apps/web/src/components/store/editor/engine/canvas/state.ts
 create mode 100644 packages/models/src/frame/index.ts

diff --git a/apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx b/apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx
index 518e6b99bf..132ec20270 100644
--- a/apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx
+++ b/apps/studio/src/routes/editor/LayersPanel/LayersTab.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { type NodeApi, Tree, type TreeApi } from 'react-arborist';
 import useResizeObserver from 'use-resize-observer';
-import RightClickMenu from '../RightClickMenu';
+import { RightClickMenu } from '../RightClickMenu';
 import TreeNode from './Tree/TreeNode';
 import TreeRow from './Tree/TreeRow';
 
diff --git a/apps/studio/src/routes/editor/RightClickMenu/index.tsx b/apps/studio/src/routes/editor/RightClickMenu/index.tsx
index a095ab5d4e..b810b608c6 100644
--- a/apps/studio/src/routes/editor/RightClickMenu/index.tsx
+++ b/apps/studio/src/routes/editor/RightClickMenu/index.tsx
@@ -227,5 +227,3 @@ export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
         </ContextMenu>
     );
 });
-
-export default RightClickMenu;
diff --git a/apps/studio/src/routes/editor/WebviewArea/GestureScreen.tsx b/apps/studio/src/routes/editor/WebviewArea/GestureScreen.tsx
index ab808b5b75..2cc94c29d7 100644
--- a/apps/studio/src/routes/editor/WebviewArea/GestureScreen.tsx
+++ b/apps/studio/src/routes/editor/WebviewArea/GestureScreen.tsx
@@ -2,12 +2,12 @@ import { useEditorEngine } from '@/components/Context';
 import { getRelativeMousePositionToWebview } from '@/lib/editor/engine/overlay/utils';
 import { EditorMode } from '@/lib/models';
 import { MouseAction } from '@onlook/models/editor';
-import type { DomElement, DropElementProperties, ElementPosition } from '@onlook/models/element';
+import type { DomElement, ElementPosition } from '@onlook/models/element';
 import { cn } from '@onlook/ui/utils';
 import throttle from 'lodash/throttle';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
-import RightClickMenu from '../RightClickMenu';
+import { RightClickMenu } from '../RightClickMenu';
 
 interface GestureScreenProps {
     webviewRef: React.RefObject<Electron.WebviewTag>;
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
deleted file mode 100644
index 2622d0d384..0000000000
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/frame.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { FrameSettings } from "@onlook/models/projects";
-import { cn } from "@onlook/ui-v4/utils";
-import { observer } from "mobx-react-lite";
-import { useRef, useState } from "react";
-import { ResizeHandles } from './resize-handles';
-
-export const Frame = observer(
-    ({
-        settings,
-    }: {
-        settings: FrameSettings;
-    }) => {
-        const position = settings.position;
-        const iframeRef = useRef<HTMLIFrameElement>(null);
-
-        // TODO: Dimensions need to be structured in a way where Yjs can track changes. Abstract a FrameState interface.
-        const [dimensions, setDimensions] = useState(settings.dimension);
-
-        return (
-            <div
-                className="flex flex-col fixed"
-                style={{ transform: `translate(${position.x}px, ${position.y}px)` }}
-            >
-                {/* <BrowserControls
-                    webviewRef={domReady ? webviewRef : null}
-                    webviewSrc={webviewSrc}
-                    setWebviewSrc={setWebviewSrc}
-                    selected={selected}
-                    hovered={hovered}
-                    setHovered={setHovered}
-                    setDarkmode={setDarkmode}
-                    settings={settings}
-                    startMove={startMove}
-                    domState={domState}
-                    webviewSize={webviewSize}
-                /> */}
-                <div className="relative">
-                    <ResizeHandles settings={settings} dimensions={dimensions} onResize={setDimensions} />
-                    <iframe
-                        id={settings.id}
-                        ref={iframeRef}
-                        className={cn(
-                            'w-[96rem] h-[60rem] backdrop-blur-sm transition outline outline-4',
-                            // shouldShowDomFailed ? 'bg-transparent' : 'bg-white',
-                            // selected ? getSelectedOutlineColor() : 'outline-transparent',
-                        )}
-                        src={settings.url}
-                        sandbox="allow-modals allow-forms allow-same-origin allow-scripts allow-popups allow-downloads"
-                        allow="geolocation; microphone; camera; midi; encrypted-media"
-                        style={{
-                            width: dimensions.width,
-                            height: dimensions.height,
-                        }}
-                    />
-                    {/* <GestureScreen
-                        isResizing={isResizing}
-                        webviewRef={webviewRef}
-                        setHovered={setHovered}
-                    /> */}
-                    {/* {domFailed && shouldShowDomFailed && renderNotRunning()} */}
-                </div>
-
-            </div>
-        );
-    });
\ No newline at end of file
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx
new file mode 100644
index 0000000000..da8b259727
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx
@@ -0,0 +1,40 @@
+import { FrameType, type Frame, type WebFrame } from "@onlook/models";
+import { observer } from "mobx-react-lite";
+import { GestureScreen } from '../gesture';
+import { ResizeHandles } from '../resize-handles';
+import { WebFrameComponent } from "./web";
+
+export const FrameView = observer(
+    ({
+        frame,
+    }: {
+        frame: Frame;
+    }) => {
+        return (
+            <div
+                className="flex flex-col fixed"
+                style={{ transform: `translate(${frame.position.x}px, ${frame.position.y}px)` }}
+            >
+                {/* <BrowserControls
+                    webviewRef={domReady ? webviewRef : null}
+                    webviewSrc={webviewSrc}
+                    setWebviewSrc={setWebviewSrc}
+                    selected={selected}
+                    hovered={hovered}
+                    setHovered={setHovered}
+                    setDarkmode={setDarkmode}
+                    settings={settings}
+                    startMove={startMove}
+                    domState={domState}
+                    webviewSize={webviewSize}
+                /> */}
+                <div className="relative">
+                    <ResizeHandles frame={frame} />
+                    {frame.type === FrameType.WEB && <WebFrameComponent frame={frame as WebFrame} />}
+                    <GestureScreen />
+                    {/* {domFailed && shouldShowDomFailed && renderNotRunning()} */}
+                </div>
+
+            </div>
+        );
+    });
\ No newline at end of file
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame/web.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/frame/web.tsx
new file mode 100644
index 0000000000..c7654618be
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/frame/web.tsx
@@ -0,0 +1,25 @@
+import type { WebFrame } from "@onlook/models";
+import { cn } from "@onlook/ui-v4/utils";
+import { observer } from "mobx-react-lite";
+
+export const WebFrameComponent = observer(({
+    frame,
+}: { frame: WebFrame }) => {
+    return (
+        <iframe
+            id={frame.id}
+            className={cn(
+                'backdrop-blur-sm transition outline outline-4',
+                // shouldShowDomFailed ? 'bg-transparent' : 'bg-white',
+                // selected ? getSelectedOutlineColor() : 'outline-transparent',
+            )}
+            src={frame.url}
+            sandbox="allow-modals allow-forms allow-same-origin allow-scripts allow-popups allow-downloads"
+            allow="geolocation; microphone; camera; midi; encrypted-media"
+            style={{
+                width: frame.dimension.width,
+                height: frame.dimension.height,
+            }}
+        />
+    );
+});
\ No newline at end of file
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
index 4abe19c0b5..154a1a5697 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
@@ -1,29 +1,24 @@
 import { useEditorEngine } from '@/components/store';
 import { getRelativeMousePositionToWebview } from '@/components/store/editor/engine/overlay/utils';
-import { EditorMode, MouseAction } from '@onlook/models/editor';
-import type { DomElement, ElementPosition } from '@onlook/models/element';
+import { EditorMode, type MouseAction } from '@onlook/models/editor';
+import type { ElementPosition } from '@onlook/models/element';
 import { cn } from '@onlook/ui/utils';
 import throttle from 'lodash/throttle';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
-// import RightClickMenu from '../RightClickMenu';
+import { RightClickMenu } from './right-click';
 
-interface GestureScreenProps {
-    webviewRef: React.RefObject<Electron.WebviewTag>;
-    setHovered: React.Dispatch<React.SetStateAction<boolean>>;
-    isResizing: boolean;
-}
-
-const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureScreenProps) => {
+export const GestureScreen = observer(() => {
     const editorEngine = useEditorEngine();
+    const isResizing = false;
 
     const getWebview = useCallback((): Electron.WebviewTag => {
-        const webview = webviewRef.current as Electron.WebviewTag | null;
-        if (!webview) {
-            throw Error('No webview found');
-        }
-        return webview;
-    }, [webviewRef]);
+        // const webview = webviewRef.current as Electron.WebviewTag | null;
+        // if (!webview) {
+        //     throw Error('No webview found');
+        // }
+        // return webview;
+    }, []);
 
     const getRelativeMousePosition = useCallback(
         (e: React.MouseEvent<HTMLDivElement>): ElementPosition => {
@@ -35,47 +30,47 @@ const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureS
 
     const handleMouseEvent = useCallback(
         async (e: React.MouseEvent<HTMLDivElement>, action: MouseAction) => {
-            const webview = getWebview();
-            const pos = getRelativeMousePosition(e);
-            const el: DomElement = await webview.executeJavaScript(
-                `window.api?.getElementAtLoc(${pos.x}, ${pos.y}, ${action === MouseAction.MOUSE_DOWN || action === MouseAction.DOUBLE_CLICK})`,
-            );
-            if (!el) {
-                return;
-            }
-
-            switch (action) {
-                case MouseAction.MOVE:
-                    editorEngine.elements.mouseover(el, webview);
-                    if (e.altKey) {
-                        editorEngine.elements.showMeasurement();
-                    } else {
-                        editorEngine.overlay.removeMeasurement();
-                    }
-                    break;
-                case MouseAction.MOUSE_DOWN:
-                    if (el.tagName.toLocaleLowerCase() === 'body') {
-                        editorEngine.webview.select(webview);
-                        return;
-                    }
-                    // Ignore right-clicks
-                    if (e.button == 2) {
-                        break;
-                    }
-                    if (editorEngine.text.isEditing) {
-                        editorEngine.text.end();
-                    }
-                    if (e.shiftKey) {
-                        editorEngine.elements.shiftClick(el, webview);
-                    } else {
-                        editorEngine.move.start(el, pos, webview);
-                        editorEngine.elements.click([el], webview);
-                    }
-                    break;
-                case MouseAction.DOUBLE_CLICK:
-                    editorEngine.text.start(el, webview);
-                    break;
-            }
+            // const webview = getWebview();
+            // const pos = getRelativeMousePosition(e);
+            // const el: DomElement = await webview.executeJavaScript(
+            //     `window.api?.getElementAtLoc(${pos.x}, ${pos.y}, ${action === MouseAction.MOUSE_DOWN || action === MouseAction.DOUBLE_CLICK})`,
+            // );
+            // if (!el) {
+            //     return;
+            // }
+
+            // switch (action) {
+            //     case MouseAction.MOVE:
+            //         editorEngine.elements.mouseover(el, webview);
+            //         if (e.altKey) {
+            //             editorEngine.elements.showMeasurement();
+            //         } else {
+            //             editorEngine.overlay.removeMeasurement();
+            //         }
+            //         break;
+            //     case MouseAction.MOUSE_DOWN:
+            //         if (el.tagName.toLocaleLowerCase() === 'body') {
+            //             editorEngine.webview.select(webview);
+            //             return;
+            //         }
+            //         // Ignore right-clicks
+            //         if (e.button == 2) {
+            //             break;
+            //         }
+            //         if (editorEngine.text.isEditing) {
+            //             editorEngine.text.end();
+            //         }
+            //         if (e.shiftKey) {
+            //             editorEngine.elements.shiftClick(el, webview);
+            //         } else {
+            //             editorEngine.move.start(el, pos, webview);
+            //             editorEngine.elements.click([el], webview);
+            //         }
+            //         break;
+            //     case MouseAction.DOUBLE_CLICK:
+            //         editorEngine.text.start(el, webview);
+            //         break;
+            // }
         },
         [getWebview, getRelativeMousePosition, editorEngine],
     );
@@ -83,19 +78,19 @@ const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureS
     const throttledMouseMove = useMemo(
         () =>
             throttle((e: React.MouseEvent<HTMLDivElement>) => {
-                if (editorEngine.state.move.isDragging) {
-                    editorEngine.state.move.drag(e, getRelativeMousePosition);
-                } else if (
-                    editorEngine.state.editorMode === EditorMode.DESIGN ||
-                    ((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
-                        editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
-                        editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
-                        !editorEngine.insert.isDrawing)
-                ) {
-                    handleMouseEvent(e, MouseAction.MOVE);
-                } else if (editorEngine.insert.isDrawing) {
-                    editorEngine.insert.draw(e);
-                }
+                // if (editorEngine.state.move.isDragging) {
+                //     editorEngine.state.move.drag(e, getRelativeMousePosition);
+                // } else if (
+                //     editorEngine.state.editorMode === EditorMode.DESIGN ||
+                //     ((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
+                //         editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
+                //         editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
+                //         !editorEngine.insert.isDrawing)
+                // ) {
+                //     handleMouseEvent(e, MouseAction.MOVE);
+                // } else if (editorEngine.insert.isDrawing) {
+                //     editorEngine.insert.draw(e);
+                // }
             }, 16),
         [editorEngine, getRelativeMousePosition, handleMouseEvent],
     );
@@ -108,70 +103,70 @@ const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureS
 
     const handleClick = useCallback(
         (e: React.MouseEvent<HTMLDivElement>) => {
-            const webview = getWebview();
-            editorEngine.webview.deselectAll();
-            editorEngine.webview.select(webview);
+            // const webview = getWebview();
+            // editorEngine.webview.deselectAll();
+            // editorEngine.webview.select(webview);
         },
         [getWebview, editorEngine.webview],
     );
 
     function handleDoubleClick(e: React.MouseEvent<HTMLDivElement>) {
-        if (editorEngine.state.editorMode !== EditorMode.DESIGN) {
-            return;
-        }
-        handleMouseEvent(e, MouseAction.DOUBLE_CLICK);
+        // if (editorEngine.state.editorMode !== EditorMode.DESIGN) {
+        //     return;
+        // }
+        // handleMouseEvent(e, MouseAction.DOUBLE_CLICK);
     }
 
     function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
-        if (editorEngine.state.editorMode === EditorMode.DESIGN) {
-            handleMouseEvent(e, MouseAction.MOUSE_DOWN);
-        } else if (
-            editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
-            editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
-            editorEngine.state.editorMode === EditorMode.INSERT_IMAGE
-        ) {
-            editorEngine.insert.start(e);
-        }
+        // if (editorEngine.state.editorMode === EditorMode.DESIGN) {
+        //     handleMouseEvent(e, MouseAction.MOUSE_DOWN);
+        // } else if (
+        //     editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
+        //     editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
+        //     editorEngine.state.editorMode === EditorMode.INSERT_IMAGE
+        // ) {
+        //     editorEngine.insert.start(e);
+        // }
     }
 
     async function handleMouseUp(e: React.MouseEvent<HTMLDivElement>) {
-        editorEngine.insert.end(e, webviewRef.current);
-        editorEngine.move.end(e);
+        // editorEngine.insert.end(e, webviewRef.current);
+        // editorEngine.move.end(e);
     }
 
     const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        handleMouseEvent(e, MouseAction.MOVE);
+        // e.preventDefault();
+        // e.stopPropagation();
+        // handleMouseEvent(e, MouseAction.MOVE);
     };
 
     const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
         e.preventDefault();
         e.stopPropagation();
 
-        try {
-            const propertiesData = e.dataTransfer.getData('application/json');
-            if (!propertiesData) {
-                console.error('No element properties in drag data');
-                return;
-            }
-
-            const properties = JSON.parse(propertiesData);
-
-            if (properties.type === 'image') {
-                const webview = getWebview();
-                const dropPosition = getRelativeMousePosition(e);
-                await editorEngine.insert.insertDroppedImage(webview, dropPosition, properties);
-            } else {
-                const webview = getWebview();
-                const dropPosition = getRelativeMousePosition(e);
-                await editorEngine.insert.insertDroppedElement(webview, dropPosition, properties);
-            }
-
-            editorEngine.state.editorMode = EditorMode.DESIGN;
-        } catch (error) {
-            console.error('drop operation failed:', error);
-        }
+        // try {
+        //     const propertiesData = e.dataTransfer.getData('application/json');
+        //     if (!propertiesData) {
+        //         console.error('No element properties in drag data');
+        //         return;
+        //     }
+
+        //     const properties = JSON.parse(propertiesData);
+
+        //     if (properties.type === 'image') {
+        //         const webview = getWebview();
+        //         const dropPosition = getRelativeMousePosition(e);
+        //         await editorEngine.insert.insertDroppedImage(webview, dropPosition, properties);
+        //     } else {
+        //         const webview = getWebview();
+        //         const dropPosition = getRelativeMousePosition(e);
+        //         await editorEngine.insert.insertDroppedElement(webview, dropPosition, properties);
+        //     }
+
+        //     editorEngine.state.editorMode = EditorMode.DESIGN;
+        // } catch (error) {
+        //     console.error('drop operation failed:', error);
+        // }
     };
 
     const gestureScreenClassName = useMemo(() => {
@@ -183,27 +178,30 @@ const GestureScreen = observer(({ webviewRef, setHovered, isResizing }: GestureS
         );
     }, [editorEngine.state.editorMode, isResizing]);
 
+    const handleMouseOut = () => {
+        setHovered(false);
+        editorEngine.elements.clearHoveredElement();
+        editorEngine.overlay.state.updateHoverRect(null);
+    }
+
+    const setHovered = (hovered: boolean) => {
+        return;
+    }
     return (
-        // <RightClickMenu>
-        <div
-            className={gestureScreenClassName}
-            onClick={handleClick}
-            onMouseOver={() => setHovered(true)}
-            onMouseOut={useCallback(() => {
-                setHovered(false);
-                editorEngine.elements.clearHoveredElement();
-                editorEngine.overlay.state.updateHoverRect(null);
-            }, [editorEngine, setHovered])}
-            onMouseLeave={handleMouseUp}
-            onMouseMove={throttledMouseMove}
-            onMouseDown={handleMouseDown}
-            onMouseUp={handleMouseUp}
-            onDoubleClick={handleDoubleClick}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-        ></div>
-        // </RightClickMenu>
+        <RightClickMenu>
+            <div
+                className={gestureScreenClassName}
+                onClick={handleClick}
+                onMouseOver={() => setHovered(true)}
+                onMouseOut={handleMouseOut}
+                onMouseLeave={handleMouseUp}
+                onMouseMove={throttledMouseMove}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onDoubleClick={handleDoubleClick}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+            ></div>
+        </RightClickMenu>
     );
 });
-
-export default GestureScreen;
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/index.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/index.tsx
index 0142326edd..8e260b59fd 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/index.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/index.tsx
@@ -2,14 +2,14 @@
 
 import { useEditorEngine } from "@/components/store";
 import { observer } from "mobx-react-lite";
-import { Frame } from "./frame";
+import { FrameView } from "./frame";
 
 export const Frames = observer(() => {
     const editorEngine = useEditorEngine();
     return (
         <div className="grid grid-flow-col gap-72">
-            {editorEngine.canvas.frames.map((settings) => (
-                <Frame key={settings.id} settings={settings} />
+            {editorEngine.canvas.frames.map((frame) => (
+                <FrameView key={frame.id} frame={frame} />
             ))}
         </div>
     );
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
index b110d206f4..e693b6acd5 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
@@ -1,12 +1,9 @@
 import { useEditorEngine } from '@/components/store';
-import type { SizePreset } from '@/components/store/editor/engine/canvas';
+import type { FrameImpl } from '@/components/store/editor/engine/canvas/frame';
 import { DefaultSettings } from '@onlook/models/constants';
-import type { FrameSettings, RectDimension } from '@onlook/models/projects';
-import { ToastAction } from '@onlook/ui/toast';
-import { useToast } from '@onlook/ui/use-toast';
 import { cn } from '@onlook/ui/utils';
 import { observer } from 'mobx-react-lite';
-import { type MouseEvent, useRef, useState } from 'react';
+import { type MouseEvent } from 'react';
 
 enum HandleType {
     Right = 'right',
@@ -15,42 +12,28 @@ enum HandleType {
 
 export const ResizeHandles = observer(
     ({
-        settings,
-        dimensions,
-        onResize,
+        frame
     }: {
-        settings: FrameSettings;
-        dimensions: RectDimension;
-        onResize: (dimensions: RectDimension) => void;
+        frame: FrameImpl;
     }) => {
         const editorEngine = useEditorEngine();
-        const resizeHandleRef = useRef(null);
-        const { toast } = useToast();
-
-        // TODO: Move these to the store
-        const [isResizing, setIsResizing] = useState<boolean>(false);
-        const [aspectRatioLocked, setAspectRatioLocked] = useState(
-            settings.aspectRatioLocked || DefaultSettings.ASPECT_RATIO_LOCKED,
-        );
-        const [selectedPreset, setSelectedPreset] = useState<SizePreset | null>(null);
-        const [lockedPreset, setLockedPreset] = useState<SizePreset | null>(null);
+        const aspectRatioLocked = false;
+        const lockedPreset = false;
 
         const startResize = (
-            e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
+            e: MouseEvent,
             types: HandleType[],
         ) => {
             e.preventDefault();
             e.stopPropagation();
 
-            setIsResizing(true);
-
             const startX = e.clientX;
             const startY = e.clientY;
-            const startWidth = dimensions.width;
-            const startHeight = dimensions.height;
+            const startWidth = frame.dimension.width;
+            const startHeight = frame.dimension.height;
             const aspectRatio = startWidth / startHeight;
 
-            const resize: any = (e: MouseEvent) => {
+            const resize = (e: MouseEvent) => {
                 const scale = editorEngine.canvas.scale;
                 let heightDelta = types.includes(HandleType.Bottom)
                     ? (e.clientY - startY) / scale
@@ -98,85 +81,55 @@ export const ResizeHandles = observer(
                     }
                 }
 
-                onResize({
+                frame.dimension = {
                     width: Math.floor(currentWidth),
                     height: Math.floor(currentHeight),
-                });
-
-                setSelectedPreset(null);
+                };
             };
 
-            const stopResize = (e: any) => {
+            const stopResize = (e: MouseEvent) => {
                 e.preventDefault();
                 e.stopPropagation();
 
-                setIsResizing(false);
-
-                window.removeEventListener('mousemove', resize);
-                window.removeEventListener('mouseup', stopResize);
-            };
-
-            window.addEventListener('mousemove', resize);
-            window.addEventListener('mouseup', stopResize);
-        };
-
-        const handleLockedResize = () => {
-            const unlockPresetToast = () => {
-                setLockedPreset(null);
+                window.removeEventListener('mousemove', resize as unknown as EventListener);
+                window.removeEventListener('mouseup', stopResize as unknown as EventListener);
             };
 
-            toast({
-                title: 'Preset dimensions locked.',
-                description: 'Unlock to resize.',
-                action: (
-                    <ToastAction altText="Unlock" onClick={unlockPresetToast}>
-                        Unlock
-                    </ToastAction>
-                ),
-            });
+            window.addEventListener('mousemove', resize as unknown as EventListener);
+            window.addEventListener('mouseup', stopResize as unknown as EventListener);
         };
 
         return (
             <div
-                className={cn('absolute inset-0 opacity-40 transition min-w-0 visible', {
-                    'hover:opacity-60': !lockedPreset,
-                })}
+                className={cn(
+                    'absolute inset-0 opacity-40 transition min-w-0 visible hover:opacity-60',
+                    lockedPreset && 'hover:opacity-40',
+                )}
             >
                 <div
-                    ref={resizeHandleRef}
                     className={cn(
                         'flex items-center justify-center absolute -bottom-10 w-full h-10',
                         lockedPreset ? 'cursor-not-allowed' : 'cursor-s-resize',
                     )}
-                    onMouseDown={(e) =>
-                        lockedPreset ? handleLockedResize() : startResize(e, [HandleType.Bottom])
-                    }
+                    onMouseDown={(e) => startResize(e, [HandleType.Bottom])}
                 >
                     <div className="rounded bg-foreground-primary/80 w-48 h-1"></div>
                 </div>
                 <div
-                    ref={resizeHandleRef}
                     className={cn(
                         'flex items-center justify-center absolute -right-10 h-full w-10',
                         lockedPreset ? 'cursor-not-allowed' : 'cursor-e-resize',
                     )}
-                    onMouseDown={(e) =>
-                        lockedPreset ? handleLockedResize() : startResize(e, [HandleType.Right])
-                    }
+                    onMouseDown={(e) => startResize(e, [HandleType.Right])}
                 >
                     <div className="rounded bg-foreground-primary/80 w-1 h-48"></div>
                 </div>
                 <div
-                    ref={resizeHandleRef}
                     className={cn(
                         'flex items-center justify-center absolute -bottom-10 -right-10 w-10 h-10',
                         lockedPreset ? 'cursor-not-allowed' : 'cursor-se-resize',
                     )}
-                    onMouseDown={(e) =>
-                        lockedPreset
-                            ? handleLockedResize()
-                            : startResize(e, [HandleType.Right, HandleType.Bottom])
-                    }
+                    onMouseDown={(e) => startResize(e, [HandleType.Right, HandleType.Bottom])}
                 >
                     <div className="rounded bg-foreground-primary/80 w-2 h-2"></div>
                 </div>
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/right-click.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames/right-click.tsx
new file mode 100644
index 0000000000..682db1d8cd
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/canvas/frames/right-click.tsx
@@ -0,0 +1,237 @@
+import { Hotkey } from '@/components/hotkey';
+import { IDE } from '@/components/ide';
+import { useEditorEngine, useUserManager } from '@/components/store';
+import { DEFAULT_IDE, EditorTabValue } from '@onlook/models';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+} from '@onlook/ui/context-menu';
+import { Icons } from '@onlook/ui/icons';
+import { Kbd } from '@onlook/ui/kbd';
+import { cn } from '@onlook/ui/utils';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+
+interface RightClickMenuProps {
+    children: React.ReactNode;
+}
+
+interface MenuItem {
+    label: string;
+    action: () => void;
+    hotkey?: Hotkey;
+    children?: MenuItem[];
+    icon: React.ReactNode;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+
+export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
+    const editorEngine = useEditorEngine();
+    const userManager = useUserManager();
+    const [menuItems, setMenuItems] = useState<MenuItem[][]>([]);
+    const ide = IDE.fromType(userManager.settings.settings?.editor?.ideType ?? DEFAULT_IDE);
+
+    useEffect(() => {
+        updateMenuItems();
+    }, [
+        // editorEngine.elements.selected,
+        // editorEngine.ast.mappings.layers,
+        // editorEngine.webviews.selected,
+    ]);
+
+    const OPEN_DEV_TOOL_ITEM: MenuItem = {
+        label: 'Open devtool',
+        action: () => editorEngine.inspect(),
+        icon: <Icons.Code className="mr-2 h-4 w-4" />,
+        hotkey: Hotkey.OPEN_DEV_TOOL,
+    };
+
+    const TOOL_ITEMS: MenuItem[] = [
+        OPEN_DEV_TOOL_ITEM,
+        {
+            label: 'Add to AI Chat',
+            action: () => {
+                editorEngine.state.editorPanelTab = EditorTabValue.CHAT;
+                editorEngine.chat.focusChatInput();
+            },
+            icon: <Icons.MagicWand className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.ADD_AI_CHAT,
+            disabled: !editorEngine.elements.selected.length,
+        },
+        {
+            label: 'New AI Chat',
+            action: () => {
+                editorEngine.state.editorPanelTab = EditorTabValue.CHAT;
+                editorEngine.chat.conversation.startNewConversation();
+                editorEngine.chat.focusChatInput();
+            },
+            icon: <Icons.MagicWand className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.NEW_AI_CHAT,
+        },
+    ];
+
+    const GROUP_ITEMS: MenuItem[] = [
+        {
+            label: 'Group',
+            icon: <Icons.Box className="mr-2 h-4 w-4" />,
+            // action: () => editorEngine.group.groupSelectedElements(),
+            // disabled: !editorEngine.group.canGroupElements(),
+            action: () => { },
+            hotkey: Hotkey.GROUP,
+        },
+        {
+            label: 'Ungroup',
+            // action: () => editorEngine.group.ungroupSelectedElement(),
+            // disabled: !editorEngine.group.canUngroupElement(),
+            action: () => { },
+            icon: <Icons.Group className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.UNGROUP,
+        },
+    ];
+
+    const EDITING_ITEMS: MenuItem[] = [
+        {
+            label: 'Edit text',
+            // action: () => editorEngine.text.editSelectedElement(),
+            action: () => { },
+            icon: <Icons.Pencil className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.ENTER,
+        },
+        {
+            label: 'Copy',
+            // action: () => editorEngine.copy.copy(),
+            action: () => { },
+            icon: <Icons.Clipboard className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.COPY,
+        },
+        {
+            label: 'Paste',
+            // action: () => editorEngine.copy.paste(),
+            action: () => { },
+            icon: <Icons.ClipboardCopy className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.PASTE,
+        },
+        {
+            label: 'Cut',
+            // action: () => editorEngine.copy.cut(),
+            action: () => { },
+            icon: <Icons.Scissors className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.CUT,
+        },
+        {
+            label: 'Duplicate',
+            // action: () => editorEngine.copy.duplicate(),
+            action: () => { },
+            icon: <Icons.Copy className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.DUPLICATE,
+        },
+        {
+            label: 'Delete',
+            // action: () => editorEngine.elements.delete(),
+            action: () => { },
+            icon: <Icons.Trash className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.DELETE,
+            destructive: true,
+        },
+    ];
+
+    const WINDOW_ITEMS: MenuItem[] = [
+        {
+            label: 'Duplicate',
+            // action: () => editorEngine.duplicateWindow(),
+            action: () => { },
+            icon: <Icons.Copy className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.DUPLICATE,
+        },
+        {
+            label: 'Delete',
+            // action: () => editorEngine.deleteWindow(editorEngine.webviews.selected[0].id),
+            action: () => { },
+            icon: <Icons.Trash className="mr-2 h-4 w-4" />,
+            hotkey: Hotkey.DELETE,
+            destructive: true,
+            // disabled: !editorEngine.canDeleteWindow(),
+        },
+    ];
+
+    const updateMenuItems = () => {
+        // let instance: string | null = null;
+        // let root: string | null = null;
+
+        // if (editorEngine.elements.selected.length > 0) {
+        //     const element: DomElement = editorEngine.elements.selected[0];
+        //     instance = element.instanceId;
+        //     root = element.oid;
+        // }
+        // let menuItems: MenuItem[][] = [];
+
+        // if (editorEngine.isWindowSelected) {
+        //     menuItems = [WINDOW_ITEMS, [OPEN_DEV_TOOL_ITEM]];
+        // } else {
+        //     const updatedToolItems = [
+        //         instance !== null && {
+        //             label: 'View instance code',
+        //             action: () => viewSource(instance),
+        //             icon: <Icons.ComponentInstance className="mr-2 h-4 w-4" />,
+        //         },
+        //         {
+        //             label: `View ${instance ? 'component' : 'element'} in ${ide.displayName}`,
+        //             disabled: !root,
+        //             action: () => viewSource(root),
+        //             icon: instance ? (
+        //                 <Icons.Component className="mr-2 h-4 w-4" />
+        //             ) : (
+        //                 <Icons.ExternalLink className="mr-2 h-4 w-4" />
+        //             ),
+        //         },
+        //         ...TOOL_ITEMS,
+        //     ].filter(Boolean) as MenuItem[];
+
+        //     menuItems = [updatedToolItems, GROUP_ITEMS, EDITING_ITEMS];
+        // }
+
+        // setMenuItems(menuItems);
+    };
+
+    function viewSource(oid: string | null) {
+        editorEngine.code.viewSource(oid);
+    }
+
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger>{children}</ContextMenuTrigger>
+            <ContextMenuContent className="w-64 bg-background/95 backdrop-blur-lg">
+                {menuItems.map((group, groupIndex) => (
+                    <div key={groupIndex}>
+                        {group.map((item) => (
+                            <ContextMenuItem
+                                key={item.label}
+                                onClick={item.action}
+                                disabled={item.disabled}
+                                className="cursor-pointer"
+                            >
+                                <span
+                                    className={cn(
+                                        'flex w-full items-center gap-1',
+                                        item.destructive && 'text-red',
+                                    )}
+                                >
+                                    <span>{item.icon}</span>
+                                    <span>{item.label}</span>
+                                    <span className="ml-auto">
+                                        {item.hotkey && <Kbd>{item.hotkey.readableCommand}</Kbd>}
+                                    </span>
+                                </span>
+                            </ContextMenuItem>
+                        ))}
+                        {groupIndex < menuItems.length - 1 && <ContextMenuSeparator />}
+                    </div>
+                ))}
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+});
\ No newline at end of file
diff --git a/apps/web/src/app/project/[id]/_components/canvas/index.tsx b/apps/web/src/app/project/[id]/_components/canvas/index.tsx
index 778ce5fc1b..738dba65c9 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/index.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/index.tsx
@@ -114,23 +114,23 @@ export const Canvas = observer(({ children }: { children: ReactNode }) => {
         [handleZoom, handlePan],
     );
 
-    const middleMouseButtonDown = (e: MouseEvent) => {
+    const middleMouseButtonDown = useCallback((e: MouseEvent) => {
         if (e.button === 1) {
             editorEngine.state.editorMode = EditorMode.PAN;
             setIsPanning(true);
             e.preventDefault();
             e.stopPropagation();
         }
-    }
+    }, []);
 
-    const middleMouseButtonUp = (e: MouseEvent) => {
+    const middleMouseButtonUp = useCallback((e: MouseEvent) => {
         if (e.button === 1) {
             editorEngine.state.editorMode = EditorMode.DESIGN;
             setIsPanning(false);
             e.preventDefault();
             e.stopPropagation();
         }
-    }
+    }, []);
 
     const transformStyle = useMemo(
         () => ({
@@ -153,7 +153,7 @@ export const Canvas = observer(({ children }: { children: ReactNode }) => {
                 div.removeEventListener('mouseup', middleMouseButtonUp);
             };
         }
-    }, [handleWheel]);
+    }, [handleWheel, middleMouseButtonDown, middleMouseButtonUp]);
 
     return (
         <HotkeysArea>
diff --git a/apps/web/src/app/project/[id]/_components/canvas/overlay/elements/chat.tsx b/apps/web/src/app/project/[id]/_components/canvas/overlay/elements/chat.tsx
index f64cb9d8b3..fab60aefe0 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/overlay/elements/chat.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/overlay/elements/chat.tsx
@@ -6,8 +6,8 @@ import { Icons } from '@onlook/ui/icons/index';
 import { Textarea } from '@onlook/ui/textarea';
 import { cn } from '@onlook/ui/utils';
 import { observer } from 'mobx-react-lite';
+import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 const SPACING = {
     base: 8,
@@ -43,7 +43,7 @@ export const OverlayChat = observer(
         const [isComposing, setIsComposing] = useState(false);
         const textareaRef = useRef<HTMLTextAreaElement>(null);
         const prevChatPositionRef = useRef<{ x: number; y: number } | null>(null);
-        const { t } = useTranslation();
+        const t = useTranslations();
 
         const shouldHideButton =
             !selectedEl ||
diff --git a/apps/web/src/components/ide.ts b/apps/web/src/components/ide.ts
new file mode 100644
index 0000000000..2dc0a9ad7e
--- /dev/null
+++ b/apps/web/src/components/ide.ts
@@ -0,0 +1,69 @@
+import type { TemplateNode } from '@onlook/models/element';
+import { IdeType } from '@onlook/models/ide';
+import type { Icons } from '@onlook/ui/icons';
+import { assertNever } from '@onlook/utility';
+
+export class IDE {
+    static readonly VS_CODE = new IDE('VSCode', IdeType.VS_CODE, 'vscode', 'VSCodeLogo');
+    static readonly CURSOR = new IDE('Cursor', IdeType.CURSOR, 'cursor', 'CursorLogo');
+    static readonly ZED = new IDE('Zed', IdeType.ZED, 'zed', 'ZedLogo');
+    static readonly WINDSURF = new IDE('Windsurf', IdeType.WINDSURF, 'windsurf', 'WindsurfLogo');
+
+    private constructor(
+        public readonly displayName: string,
+        public readonly type: IdeType,
+        public readonly command: string,
+        public readonly icon: keyof typeof Icons,
+    ) { }
+
+    toString() {
+        return this.displayName;
+    }
+
+    static fromType(type: IdeType): IDE {
+        switch (type) {
+            case IdeType.VS_CODE:
+                return IDE.VS_CODE;
+            case IdeType.CURSOR:
+                return IDE.CURSOR;
+            case IdeType.ZED:
+                return IDE.ZED;
+            case IdeType.WINDSURF:
+                return IDE.WINDSURF;
+            default:
+                assertNever(type);
+        }
+    }
+
+    static getAll(): IDE[] {
+        return [this.VS_CODE, this.CURSOR, this.ZED, this.WINDSURF];
+    }
+
+    getCodeCommand(templateNode: TemplateNode) {
+        const filePath = templateNode.path;
+        const startTag = templateNode.startTag;
+        const endTag = templateNode.endTag ?? startTag;
+        let codeCommand = `${this.command}://file/${filePath}`;
+
+        if (startTag && endTag) {
+            const startRow = startTag.start.line;
+            const startColumn = startTag.start.column;
+            const endRow = endTag.end.line;
+            const endColumn = endTag.end.column - 1;
+            codeCommand += `:${startRow}:${startColumn}`;
+            // Note: Zed API doesn't seem to handle end row/column (ref: https://github.com/zed-industries/zed/issues/18520)
+            if (this.type !== IdeType.ZED) {
+                codeCommand += `:${endRow}:${endColumn}`;
+            }
+        }
+        return codeCommand;
+    }
+
+    getCodeFileCommand(filePath: string, line?: number) {
+        let command = `${this.command}://file/${filePath}`;
+        if (line) {
+            command += `:${line}`;
+        }
+        return command;
+    }
+}
diff --git a/apps/web/src/components/store/editor/engine/canvas/frame.ts b/apps/web/src/components/store/editor/engine/canvas/frame.ts
new file mode 100644
index 0000000000..53f6f88067
--- /dev/null
+++ b/apps/web/src/components/store/editor/engine/canvas/frame.ts
@@ -0,0 +1,44 @@
+import type { Frame, FrameType, RectDimension, RectPosition, WebFrame } from "@onlook/models";
+import { makeObservable, observable } from "mobx";
+
+export class FrameImpl implements Frame {
+    id: string;
+    position: RectPosition;
+    dimension: RectDimension;
+    type: FrameType;
+
+    constructor({ id, position, dimension, type }: Frame) {
+        this.id = id;
+        this.position = position;
+        this.dimension = dimension;
+        this.type = type;
+
+        makeObservable(this, {
+            id: observable,
+            position: observable,
+            dimension: observable,
+            type: observable
+        });
+    }
+
+    static fromJSON(json: Frame) {
+        return new FrameImpl(json);
+    }
+}
+
+export class WebFrameImpl extends FrameImpl implements WebFrame {
+    url: string;
+
+    constructor({ id, position, dimension, type, url }: WebFrame) {
+        super({ id, position, dimension, type });
+        this.url = url;
+
+        makeObservable(this, {
+            url: observable
+        });
+    }
+
+    static fromJSON(json: WebFrame) {
+        return new WebFrameImpl(json);
+    }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/store/editor/engine/canvas/index.ts b/apps/web/src/components/store/editor/engine/canvas/index.ts
index 2dff5a9907..d76bc6a29c 100644
--- a/apps/web/src/components/store/editor/engine/canvas/index.ts
+++ b/apps/web/src/components/store/editor/engine/canvas/index.ts
@@ -1,48 +1,40 @@
-import { DefaultSettings, Orientation, Theme } from '@onlook/models/constants';
+import { FrameType, type Frame, type WebFrame } from '@onlook/models';
+import { DefaultSettings } from '@onlook/models/constants';
 import type {
     FrameSettings,
     Project,
-    ProjectSettings,
-    RectPosition,
+    RectPosition
 } from '@onlook/models/projects';
-import { Icons, type IconProps } from '@onlook/ui-v4/icons/index';
 import { debounce } from 'lodash';
 import { makeAutoObservable } from 'mobx';
 import { nanoid } from 'nanoid/non-secure';
+import { WebFrameImpl, type FrameImpl } from './frame';
 
-export interface SizePreset {
-    name: string;
-    width: number;
-    height: number;
-    icon: React.FC<IconProps>;
-}
-
-export const SIZE_PRESETS: SizePreset[] = [
-    { name: 'Desktop', width: 1440, height: 1024, icon: Icons.Desktop },
-    { name: 'Laptop', width: 1280, height: 832, icon: Icons.Laptop },
-    { name: 'Mobile', width: 320, height: 568, icon: Icons.Mobile },
-];
-
-type SettingsObserver = (settings: FrameSettings) => void;
 export class CanvasManager {
-    private zoomScale: number = DefaultSettings.SCALE;
-    private panPosition: RectPosition = DefaultSettings.PAN_POSITION;
-    private settingsObservers: Map<string, Set<SettingsObserver>> = new Map();
-    private _frames: FrameSettings[] = [];
+    private _scale: number = DefaultSettings.SCALE;
+    private _position: RectPosition = DefaultSettings.PAN_POSITION;
+    private _frames: FrameImpl[] = [];
 
     constructor() {
         makeAutoObservable(this);
-        this.panPosition = this.getDefaultPanPosition();
-        this.frames = [{
+        this._position = this.getDefaultPanPosition();
+
+        const webFrame: WebFrame = {
             id: '1',
-            url: 'https://www.tailwindcss.com',
+            url: 'https://react.dev/',
             position: { x: 0, y: 0 },
             dimension: { width: 1000, height: 1000 },
-            device: 'Desktop',
-            theme: Theme.Light,
-            orientation: Orientation.Portrait,
-            aspectRatioLocked: false,
-        }];
+            type: FrameType.WEB,
+        };
+
+        const webFrame1 = {
+            id: '2',
+            url: 'https://react.dev/',
+            position: { x: 1100, y: 0 },
+            dimension: { width: 1000, height: 1000 },
+            type: FrameType.WEB,
+        };
+        this._frames = [WebFrameImpl.fromJSON(webFrame), WebFrameImpl.fromJSON(webFrame1)];
     }
 
     getDefaultPanPosition(): RectPosition {
@@ -56,30 +48,30 @@ export class CanvasManager {
         if (center) {
             x =
                 window.innerWidth / 2 -
-                (DefaultSettings.FRAME_DIMENSION.width * this.zoomScale) / 2;
+                (DefaultSettings.FRAME_DIMENSION.width * this._scale) / 2;
             y =
                 window.innerHeight / 2 -
-                (DefaultSettings.FRAME_DIMENSION.height * this.zoomScale) / 2;
+                (DefaultSettings.FRAME_DIMENSION.height * this._scale) / 2;
         }
 
         return { x, y };
     }
 
     get scale() {
-        return this.zoomScale;
+        return this._scale;
     }
 
     set scale(value: number) {
-        this.zoomScale = value;
-        this.saveSettings();
+        this._scale = value;
+        // this.saveSettings();
     }
 
     get position() {
-        return this.panPosition;
+        return this._position;
     }
 
     set position(value: RectPosition) {
-        this.panPosition = value;
+        this._position = value;
         this.saveSettings();
     }
 
@@ -87,7 +79,7 @@ export class CanvasManager {
         return this._frames;
     }
 
-    set frames(frames: FrameSettings[]) {
+    set frames(frames: Frame[]) {
         this._frames = frames;
         this.saveSettings();
     }
@@ -97,60 +89,59 @@ export class CanvasManager {
     }
 
     saveFrame(id: string, newSettings: Partial<FrameSettings>) {
-        let frame = this.frames.find((f) => f.id === id);
-        if (!frame) {
-            return;
-        }
+        // let frame = this.frames.find((f) => f.id === id);
+        // if (!frame) {
+        //     return;
+        // }
 
-        frame = { ...frame, ...newSettings };
-        this.frames = this.frames.map((f) => (f.id === id ? frame : f));
-        this.saveSettings();
-        this.notifySettingsObservers(id);
+        // frame = { ...frame, ...newSettings };
+        // this.frames = this.frames.map((f) => (f.id === id ? frame : f));
+        // this.saveSettings();
     }
 
-    saveFrames(frames: FrameSettings[]) {
-        this.frames = frames;
-        this.saveSettings();
+    saveFrames(frames: Frame[]) {
+        // this.frames = frames;
+        // this.saveSettings();
     }
 
     async applySettings(project: Project) {
-        this.zoomScale = project.settings?.scale || DefaultSettings.SCALE;
-        this.panPosition = project.settings?.position || this.getDefaultPanPosition();
-
-        if (project.settings?.frames && project.settings.frames.length) {
-            this.frames = project.settings.frames;
-        } else {
-            // Find desktop and mobile presets
-            const desktopPreset = SIZE_PRESETS.find((preset) => preset.name === 'Desktop');
-            const mobilePreset = SIZE_PRESETS.find((preset) => preset.name === 'Mobile');
-
-            // Create desktop frame
-            const desktopFrame = this.getDefaultFrame({
-                url: project.url,
-                dimension: desktopPreset
-                    ? { width: desktopPreset.width, height: desktopPreset.height }
-                    : DefaultSettings.FRAME_DIMENSION,
-                device: 'Desktop',
-            });
-
-            // Create mobile frame with position offset to avoid overlap
-            const mobileFrame = this.getDefaultFrame({
-                url: project.url,
-                dimension: mobilePreset
-                    ? { width: mobilePreset.width, height: mobilePreset.height }
-                    : { width: 320, height: 568 },
-                position: { x: desktopFrame.dimension.width + 100, y: 0 },
-                device: 'Mobile',
-            });
-
-            this.frames = [desktopFrame, mobileFrame];
-        }
+        // this.zoomScale = project.settings?.scale || DefaultSettings.SCALE;
+        // this.panPosition = project.settings?.position || this.getDefaultPanPosition();
+
+        // if (project.settings?.frames && project.settings.frames.length) {
+        //     this.frames = project.settings.frames;
+        // } else {
+        //     // Find desktop and mobile presets
+        //     const desktopPreset = SIZE_PRESETS.find((preset) => preset.name === 'Desktop');
+        //     const mobilePreset = SIZE_PRESETS.find((preset) => preset.name === 'Mobile');
+
+        //     // Create desktop frame
+        //     const desktopFrame = this.getDefaultFrame({
+        //         url: project.url,
+        //         dimension: desktopPreset
+        //             ? { width: desktopPreset.width, height: desktopPreset.height }
+        //             : DefaultSettings.FRAME_DIMENSION,
+        //         device: 'Desktop',
+        //     });
+
+        //     // Create mobile frame with position offset to avoid overlap
+        //     const mobileFrame = this.getDefaultFrame({
+        //         url: project.url,
+        //         dimension: mobilePreset
+        //             ? { width: mobilePreset.width, height: mobilePreset.height }
+        //             : { width: 320, height: 568 },
+        //         position: { x: desktopFrame.dimension.width + 100, y: 0 },
+        //         device: 'Mobile',
+        //     });
+
+        //     this.frames = [desktopFrame, mobileFrame];
+        // }
     }
 
     clear() {
         this.frames = [];
-        this.zoomScale = DefaultSettings.SCALE;
-        this.panPosition = DefaultSettings.PAN_POSITION;
+        this._scale = DefaultSettings.SCALE;
+        this._position = DefaultSettings.PAN_POSITION;
     }
 
     getFrameMap(frames: FrameSettings[]): Map<string, FrameSettings> {
@@ -161,52 +152,23 @@ export class CanvasManager {
         return map;
     }
 
-    getDefaultFrame(defaults: Partial<FrameSettings>): FrameSettings {
+    getDefaultFrame(defaults: Partial<Frame>): Frame {
         return {
-            id: defaults.id || nanoid(),
-            url: defaults.url || DefaultSettings.URL,
-            position: defaults.position || DefaultSettings.FRAME_POSITION,
-            dimension: defaults.dimension || DefaultSettings.FRAME_DIMENSION,
-            aspectRatioLocked: defaults.aspectRatioLocked || DefaultSettings.ASPECT_RATIO_LOCKED,
-            device: defaults.device || DefaultSettings.DEVICE,
-            theme: defaults.theme || DefaultSettings.THEME,
-            orientation: defaults.orientation || DefaultSettings.ORIENTATION,
+            id: defaults.id ?? nanoid(),
+            position: defaults.position ?? DefaultSettings.FRAME_POSITION,
+            dimension: defaults.dimension ?? DefaultSettings.FRAME_DIMENSION,
+            type: FrameType.WEB,
         };
     }
 
     saveSettings = debounce(this.undebouncedSaveSettings, 1000);
 
-    observeSettings(id: string, observer: SettingsObserver): void {
-        if (!this.settingsObservers.has(id)) {
-            this.settingsObservers.set(id, new Set());
-        }
-        this.settingsObservers.get(id)!.add(observer);
-    }
-
-    unobserveSettings(id: string, observer: SettingsObserver): void {
-        this.settingsObservers.get(id)?.delete(observer);
-        if (this.settingsObservers.get(id)?.size === 0) {
-            this.settingsObservers.delete(id);
-        }
-    }
-
-    private notifySettingsObservers(id: string): void {
-        const settings = this.frames.find((f) => f.id === id);
-        if (!settings) {
-            return;
-        }
-
-        this.settingsObservers.get(id)?.forEach((observer) => {
-            observer(settings);
-        });
-    }
-
     private undebouncedSaveSettings() {
-        const settings: ProjectSettings = {
-            scale: this.zoomScale,
-            position: this.panPosition,
-            frames: Array.from(this.frames.values()),
-        };
+        // const settings: ProjectSettings = {
+        //     scale: this.zoomScale,
+        //     position: this.panPosition,
+        //     frames: Array.from(this.frames.values()),
+        // };
 
         // if (this.projects.project) {
         //     this.projects.project.settings = settings;
diff --git a/apps/web/src/components/store/editor/engine/canvas/state.ts b/apps/web/src/components/store/editor/engine/canvas/state.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/components/store/editor/engine/overlay/index.ts b/apps/web/src/components/store/editor/engine/overlay/index.ts
index 3af1bf2553..286164e633 100644
--- a/apps/web/src/components/store/editor/engine/overlay/index.ts
+++ b/apps/web/src/components/store/editor/engine/overlay/index.ts
@@ -1,9 +1,7 @@
-import type { DomElement } from '@onlook/models/element';
 import { reaction } from 'mobx';
 import type { EditorEngine } from '..';
 import type { RectDimensions } from './rect';
 import { OverlayState } from './state';
-import { adaptRectToCanvas } from './utils';
 
 export class OverlayManager {
     scrollPosition: { x: number; y: number } = { x: 0, y: 0 };
@@ -16,40 +14,40 @@ export class OverlayManager {
     listenToScaleChange() {
         reaction(
             () => ({
-                position: this.editorEngine.canvas.position,
-                scale: this.editorEngine.canvas.scale,
+                // position: this.editorEngine.canvas.position,
+                // scale: this.editorEngine.canvas.scale,
             }),
             () => {
-                this.refreshOverlay();
+                // this.refreshOverlay();
             },
         );
     }
 
     refreshOverlay = async () => {
-        this.state.updateHoverRect(null);
-        const newClickRects: { rect: RectDimensions; styles: Record<string, string> }[] = [];
-        for (const selectedElement of this.editorEngine.elements.selected) {
-            const webview = this.editorEngine.webviews.getWebview(selectedElement.webviewId);
-            if (!webview) {
-                continue;
-            }
-            const el: DomElement = await webview.executeJavaScript(
-                `window.api?.getDomElementByDomId('${selectedElement.domId}', true)`,
-            );
-            if (!el) {
-                continue;
-            }
-            const adaptedRect = adaptRectToCanvas(el.rect, webview);
-            newClickRects.push({ rect: adaptedRect, styles: el.styles?.computed || {} });
-        }
-        this.state.removeClickRects();
-        for (const clickRect of newClickRects) {
-            if (!this.editorEngine.text.isEditing) {
-                this.state.addClickRect(clickRect.rect, clickRect.styles);
-            } else {
-                this.state.updateTextEditor(clickRect.rect);
-            }
-        }
+        // this.state.updateHoverRect(null);
+        // const newClickRects: { rect: RectDimensions; styles: Record<string, string> }[] = [];
+        // for (const selectedElement of this.editorEngine.elements.selected) {
+        //     const webview = this.editorEngine.webviews.getWebview(selectedElement.webviewId);
+        //     if (!webview) {
+        //         continue;
+        //     }
+        //     const el: DomElement = await webview.executeJavaScript(
+        //         `window.api?.getDomElementByDomId('${selectedElement.domId}', true)`,
+        //     );
+        //     if (!el) {
+        //         continue;
+        //     }
+        //     const adaptedRect = adaptRectToCanvas(el.rect, webview);
+        //     newClickRects.push({ rect: adaptedRect, styles: el.styles?.computed || {} });
+        // }
+        // this.state.removeClickRects();
+        // for (const clickRect of newClickRects) {
+        //     if (!this.editorEngine.text.isEditing) {
+        //         this.state.addClickRect(clickRect.rect, clickRect.styles);
+        //     } else {
+        //         this.state.updateTextEditor(clickRect.rect);
+        //     }
+        // }
     };
 
     updateMeasurement = (fromRect: RectDimensions, toRect: RectDimensions) => {
diff --git a/packages/models/src/frame/index.ts b/packages/models/src/frame/index.ts
new file mode 100644
index 0000000000..9db3258f55
--- /dev/null
+++ b/packages/models/src/frame/index.ts
@@ -0,0 +1,15 @@
+export enum FrameType {
+    WEB = 'web',
+}
+
+export interface Frame {
+    id: string;
+    position: { x: number; y: number };
+    dimension: { width: number; height: number };
+    type: FrameType;
+}
+
+export interface WebFrame extends Frame {
+    url: string;
+    type: FrameType.WEB;
+}
diff --git a/packages/models/src/index.ts b/packages/models/src/index.ts
index 068d0b0576..b183202bfc 100644
--- a/packages/models/src/index.ts
+++ b/packages/models/src/index.ts
@@ -6,6 +6,7 @@ export * from './constants/';
 export * from './create/';
 export * from './editor/';
 export * from './element/';
+export * from './frame/';
 export * from './ide/';
 export * from './llm/';
 export * from './pages/';

From ed334a92d17db403681f3b60cc3d4aa1bdadc1eb Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sat, 5 Apr 2025 20:45:09 -0700
Subject: [PATCH 4/6] Working frame

---
 .../canvas/{frames => frame}/gesture.tsx      |  5 --
 .../canvas/{frames => }/frame/index.tsx       | 22 ++-----
 .../{frames => frame}/resize-handles.tsx      |  0
 .../canvas/{frames => frame}/right-click.tsx  |  0
 .../[id]/_components/canvas/frame/top-bar.tsx | 61 +++++++++++++++++++
 .../frame/web.tsx => frame/web-frame.tsx}     |  0
 .../canvas/{frames/index.tsx => frames.tsx}   |  0
 7 files changed, 67 insertions(+), 21 deletions(-)
 rename apps/web/src/app/project/[id]/_components/canvas/{frames => frame}/gesture.tsx (98%)
 rename apps/web/src/app/project/[id]/_components/canvas/{frames => }/frame/index.tsx (53%)
 rename apps/web/src/app/project/[id]/_components/canvas/{frames => frame}/resize-handles.tsx (100%)
 rename apps/web/src/app/project/[id]/_components/canvas/{frames => frame}/right-click.tsx (100%)
 create mode 100644 apps/web/src/app/project/[id]/_components/canvas/frame/top-bar.tsx
 rename apps/web/src/app/project/[id]/_components/canvas/{frames/frame/web.tsx => frame/web-frame.tsx} (100%)
 rename apps/web/src/app/project/[id]/_components/canvas/{frames/index.tsx => frames.tsx} (100%)

diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx b/apps/web/src/app/project/[id]/_components/canvas/frame/gesture.tsx
similarity index 98%
rename from apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
rename to apps/web/src/app/project/[id]/_components/canvas/frame/gesture.tsx
index 154a1a5697..e9b72ab89e 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/gesture.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frame/gesture.tsx
@@ -179,20 +179,15 @@ export const GestureScreen = observer(() => {
     }, [editorEngine.state.editorMode, isResizing]);
 
     const handleMouseOut = () => {
-        setHovered(false);
         editorEngine.elements.clearHoveredElement();
         editorEngine.overlay.state.updateHoverRect(null);
     }
 
-    const setHovered = (hovered: boolean) => {
-        return;
-    }
     return (
         <RightClickMenu>
             <div
                 className={gestureScreenClassName}
                 onClick={handleClick}
-                onMouseOver={() => setHovered(true)}
                 onMouseOut={handleMouseOut}
                 onMouseLeave={handleMouseUp}
                 onMouseMove={throttledMouseMove}
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx b/apps/web/src/app/project/[id]/_components/canvas/frame/index.tsx
similarity index 53%
rename from apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx
rename to apps/web/src/app/project/[id]/_components/canvas/frame/index.tsx
index da8b259727..2c6f28bef0 100644
--- a/apps/web/src/app/project/[id]/_components/canvas/frames/frame/index.tsx
+++ b/apps/web/src/app/project/[id]/_components/canvas/frame/index.tsx
@@ -1,8 +1,9 @@
 import { FrameType, type Frame, type WebFrame } from "@onlook/models";
 import { observer } from "mobx-react-lite";
-import { GestureScreen } from '../gesture';
-import { ResizeHandles } from '../resize-handles';
-import { WebFrameComponent } from "./web";
+import { GestureScreen } from './gesture';
+import { ResizeHandles } from './resize-handles';
+import { TopBar } from "./top-bar";
+import { WebFrameComponent } from "./web-frame";
 
 export const FrameView = observer(
     ({
@@ -15,19 +16,8 @@ export const FrameView = observer(
                 className="flex flex-col fixed"
                 style={{ transform: `translate(${frame.position.x}px, ${frame.position.y}px)` }}
             >
-                {/* <BrowserControls
-                    webviewRef={domReady ? webviewRef : null}
-                    webviewSrc={webviewSrc}
-                    setWebviewSrc={setWebviewSrc}
-                    selected={selected}
-                    hovered={hovered}
-                    setHovered={setHovered}
-                    setDarkmode={setDarkmode}
-                    settings={settings}
-                    startMove={startMove}
-                    domState={domState}
-                    webviewSize={webviewSize}
-                /> */}
+                <TopBar frame={frame}>
+                </TopBar>
                 <div className="relative">
                     <ResizeHandles frame={frame} />
                     {frame.type === FrameType.WEB && <WebFrameComponent frame={frame as WebFrame} />}
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx b/apps/web/src/app/project/[id]/_components/canvas/frame/resize-handles.tsx
similarity index 100%
rename from apps/web/src/app/project/[id]/_components/canvas/frames/resize-handles.tsx
rename to apps/web/src/app/project/[id]/_components/canvas/frame/resize-handles.tsx
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/right-click.tsx b/apps/web/src/app/project/[id]/_components/canvas/frame/right-click.tsx
similarity index 100%
rename from apps/web/src/app/project/[id]/_components/canvas/frames/right-click.tsx
rename to apps/web/src/app/project/[id]/_components/canvas/frame/right-click.tsx
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frame/top-bar.tsx b/apps/web/src/app/project/[id]/_components/canvas/frame/top-bar.tsx
new file mode 100644
index 0000000000..e2851d2f02
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/canvas/frame/top-bar.tsx
@@ -0,0 +1,61 @@
+import { useEditorEngine } from '@/components/store';
+import type { Frame } from '@onlook/models';
+import { observer } from 'mobx-react-lite';
+
+export const TopBar = observer(
+    ({
+        frame,
+        children
+    }: {
+        frame: Frame;
+        children?: React.ReactNode;
+    }) => {
+        const editorEngine = useEditorEngine();
+
+        const startMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const startPositionX = frame.position.x;
+            const startPositionY = frame.position.y;
+
+            const handleMove = (e: MouseEvent) => {
+                const scale = editorEngine.canvas.scale;
+                const deltaX = (e.clientX - startX) / scale;
+                const deltaY = (e.clientY - startY) / scale;
+
+                frame.position = {
+                    x: startPositionX + deltaX,
+                    y: startPositionY + deltaY,
+                };
+            };
+
+            const endMove = (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                window.removeEventListener('mousemove', handleMove);
+                window.removeEventListener('mouseup', endMove);
+            };
+
+            window.addEventListener('mousemove', handleMove);
+            window.addEventListener('mouseup', endMove);
+        };
+
+        return (
+            <div
+                className='rounded bg-foreground-primary/10 hover:shadow h-6 m-auto flex flex-row items-center backdrop-blur-sm overflow-hidden relative shadow-sm border-input text-foreground'
+                style={{
+                    transform: `scale(${1 / editorEngine.canvas.scale})`,
+                    width: `${frame.dimension.width * editorEngine.canvas.scale}px`,
+                    marginBottom: `${20 / editorEngine.canvas.scale}px`,
+                }}
+                onMouseDown={startMove}
+            >
+                {children}
+            </div>
+        );
+    },
+);
\ No newline at end of file
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/frame/web.tsx b/apps/web/src/app/project/[id]/_components/canvas/frame/web-frame.tsx
similarity index 100%
rename from apps/web/src/app/project/[id]/_components/canvas/frames/frame/web.tsx
rename to apps/web/src/app/project/[id]/_components/canvas/frame/web-frame.tsx
diff --git a/apps/web/src/app/project/[id]/_components/canvas/frames/index.tsx b/apps/web/src/app/project/[id]/_components/canvas/frames.tsx
similarity index 100%
rename from apps/web/src/app/project/[id]/_components/canvas/frames/index.tsx
rename to apps/web/src/app/project/[id]/_components/canvas/frames.tsx

From e8bd6f6e2c0003132d904c19d2ed2c351168672f Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 7 Apr 2025 13:49:56 -0700
Subject: [PATCH 5/6] Add right panel

---
 .../_components/right-panel/chat/controls.tsx |  38 ++++
 .../right-panel/chat/panel-dropdown.tsx       | 125 +++++++++++++
 .../[id]/_components/right-panel/index.tsx    | 169 ++++++++++++++++++
 .../[id]/_components/top-bar/index.tsx        |   2 +-
 apps/web/src/app/project/[id]/page.tsx        |  20 +--
 packages/ui-v4/src/components/resizable.tsx   |   4 +-
 6 files changed, 343 insertions(+), 15 deletions(-)
 create mode 100644 apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx
 create mode 100644 apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx
 create mode 100644 apps/web/src/app/project/[id]/_components/right-panel/index.tsx

diff --git a/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx b/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx
new file mode 100644
index 0000000000..5365842b66
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx
@@ -0,0 +1,38 @@
+import { useEditorEngine } from '@/components/store';
+import { Button } from '@onlook/ui/button';
+import { Icons } from '@onlook/ui/icons';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
+import { TooltipArrow, TooltipProvider } from '@radix-ui/react-tooltip';
+import { observer } from 'mobx-react-lite';
+
+export const ChatControls = observer(() => {
+    const editorEngine = useEditorEngine();
+    const handleNewChat = () => {
+        editorEngine.chat.conversation.startNewConversation();
+        editorEngine.chat.focusChatInput();
+    };
+
+    return (
+        <div className="flex flex-row opacity-0 transition-opacity duration-200 group-hover/panel:opacity-100">
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant={'ghost'}
+                            size={'icon'}
+                            className="p-2 w-fit h-fit hover:bg-background-onlook"
+                            onClick={handleNewChat}
+                            disabled={editorEngine.chat?.isWaiting || true}
+                        >
+                            <Icons.Plus />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                        <p>New Chat</p>
+                        <TooltipArrow className="fill-foreground" />
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </div>
+    );
+});
diff --git a/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx b/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx
new file mode 100644
index 0000000000..88371b35a4
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx
@@ -0,0 +1,125 @@
+import { useEditorEngine, useUserManager } from '@/components/store';
+import { DefaultSettings } from '@onlook/models/constants';
+import { EditorTabValue } from "@onlook/models/editor";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@onlook/ui/dropdown-menu';
+import { Icons } from '@onlook/ui/icons';
+import { cn } from '@onlook/ui/utils';
+
+export const ChatPanelDropdown = ({ children }: { children: React.ReactNode }) => {
+    const userManager = useUserManager();
+    const editorEngine = useEditorEngine();
+
+    const chatSettings = userManager.settings.settings?.chat ?? DefaultSettings.CHAT_SETTINGS;
+    const selectedTab = editorEngine.state.editorPanelTab;
+
+    const updateChatSettings = (e: React.MouseEvent, settings: Partial<ChatSettings>) => {
+        e.preventDefault();
+        userManager.settings.updateChat(settings);
+    };
+
+    return (
+        < DropdownMenu >
+            <DropdownMenuTrigger
+                asChild
+                disabled={selectedTab !== EditorTabValue.CHAT}
+            >
+                <div className="flex items-center" >
+                    {children}
+                </div>
+            </DropdownMenuTrigger>
+            < DropdownMenuContent className="min-w-[220px]" >
+                <DropdownMenuItem
+                    className="flex items-center py-1.5"
+                    onClick={(e) => {
+                        updateChatSettings(e, {
+                            showSuggestions: !chatSettings.showSuggestions,
+                        });
+                    }}
+                >
+                    <Icons.Check
+                        className={
+                            cn(
+                                'mr-2 h-4 w-4',
+                                chatSettings.showSuggestions
+                                    ? 'opacity-100'
+                                    : 'opacity-0',
+                            )
+                        }
+                    />
+                    Show suggestions
+                </DropdownMenuItem>
+                < DropdownMenuItem
+                    className="flex items-center py-1.5"
+                    onClick={(e) => {
+                        updateChatSettings(e, {
+                            autoApplyCode: !chatSettings.autoApplyCode,
+                        });
+                    }}
+                >
+                    <Icons.Check
+                        className={
+                            cn(
+                                'mr-2 h-4 w-4',
+                                chatSettings.autoApplyCode
+                                    ? 'opacity-100'
+                                    : 'opacity-0',
+                            )
+                        }
+                    />
+                    Auto - apply results
+                </DropdownMenuItem>
+                < DropdownMenuItem
+                    className="flex items-center py-1.5"
+                    onClick={(e) => {
+                        updateChatSettings(e, {
+                            expandCodeBlocks: !chatSettings.expandCodeBlocks,
+                        });
+                    }}
+                >
+                    <Icons.Check
+                        className={
+                            cn(
+                                'mr-2 h-4 w-4',
+                                chatSettings.expandCodeBlocks
+                                    ? 'opacity-100'
+                                    : 'opacity-0',
+                            )
+                        }
+                    />
+                    Show code while rendering
+                </DropdownMenuItem>
+                < DropdownMenuItem
+                    className="flex items-center py-1.5"
+                    onClick={(e) => {
+                        updateChatSettings(e, {
+                            showMiniChat: !chatSettings.showMiniChat,
+                        });
+                    }}
+                >
+                    <Icons.Check
+                        className={
+                            cn(
+                                'mr-2 h-4 w-4',
+                                chatSettings.showMiniChat ? 'opacity-100' : 'opacity-0',
+                            )
+                        }
+                    />
+                    Show mini chat
+                </DropdownMenuItem>
+                < DropdownMenuSeparator />
+                <DropdownMenuItem
+                    onClick={() => setIsChatHistoryOpen(!isChatHistoryOpen)}
+                >
+                    <Icons.CounterClockwiseClock className="mr-2 h-4 w-4" />
+                    Chat History
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
\ No newline at end of file
diff --git a/apps/web/src/app/project/[id]/_components/right-panel/index.tsx b/apps/web/src/app/project/[id]/_components/right-panel/index.tsx
new file mode 100644
index 0000000000..1df30aa6c2
--- /dev/null
+++ b/apps/web/src/app/project/[id]/_components/right-panel/index.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useEditorEngine } from '@/components/store';
+import { EditorMode, EditorTabValue } from "@onlook/models/editor";
+import { Icons } from '@onlook/ui-v4/icons';
+import { ResizablePanel } from '@onlook/ui-v4/resizable';
+import { Separator } from '@onlook/ui-v4/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@onlook/ui-v4/tabs';
+import { cn } from '@onlook/ui-v4/utils';
+import { observer } from 'mobx-react-lite';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { ChatControls } from './chat/controls';
+import { ChatPanelDropdown } from './chat/panel-dropdown';
+
+// import { ChatTab } from './ChatTab';
+// import { ChatControls } from './ChatTab/ChatControls';
+// import { ChatHistory } from './ChatTab/ChatControls/ChatHistory';
+// import { DevTab } from './DevTab';
+// import { PropsTab } from './PropsTab';
+// import { StylesTab } from './StylesTab';
+
+const EDIT_PANEL_WIDTHS = {
+    [EditorTabValue.CHAT]: 352,
+    [EditorTabValue.PROPS]: 295,
+    [EditorTabValue.STYLES]: 240,
+};
+
+// const DEV_PANEL_WIDTH = 500;
+// const DEV_PANEL_MIN_WIDTH = 300;
+// const DEV_PANEL_MAX_WIDTH = 1000;
+
+export const RightPanel = observer(() => {
+    const editorEngine = useEditorEngine();
+    const t = useTranslations();
+
+    const [isOpen, setIsOpen] = useState(true);
+    const selectedTab = editorEngine.state.editorPanelTab;
+    const editPanelWidth = EDIT_PANEL_WIDTHS[selectedTab];
+    const [isChatHistoryOpen, setIsChatHistoryOpen] = useState(false);
+
+
+    function renderEmptyState() {
+        return (
+            <div className="text-sm pt-96 flex items-center justify-center text-center opacity-70 px-4" >
+                {t('editor.panels.edit.tabs.styles.emptyState')}
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={
+                cn(
+                    'flex flex-row h-full',
+                    editorEngine.state.editorMode === EditorMode.PREVIEW ? 'hidden' : 'visible',
+                )
+            }
+        >
+            {/* {isDevPanelOpen && (
+                <ResizablePanel
+                    side="right"
+                    defaultWidth={DEV_PANEL_WIDTH}
+                    forceWidth={DEV_PANEL_WIDTH}
+                    minWidth={DEV_PANEL_MIN_WIDTH}
+                    maxWidth={DEV_PANEL_MAX_WIDTH}
+                >
+                    <div
+                        id="dev-panel"
+                        className="rounded-tl-xl transition-width duration-300 opacity-100 bg-background/95 overflow-hidden h-full"
+                    >
+                        <div
+                            className={
+                                cn(
+                                    'backdrop-blur-xl shadow h-full relative transition-opacity duration-300',
+                                    isOpen ? '' : 'rounded-tr-xl',
+                                )
+                            }
+                        >
+                            <DevTab />
+                        </div>
+                    </div>
+                </ResizablePanel>
+            )} */}
+            <ResizablePanel
+                side="right"
+                defaultWidth={editPanelWidth}
+                forceWidth={editPanelWidth}
+                minWidth={240}
+                maxWidth={700}
+            >
+                <div
+                    id="style-panel"
+                    className={
+                        cn(
+                            'w-full transition-width transition-opacity duration-300 bg-background/95 overflow-hidden group/panel border-[0.5px] backdrop-blur-xl shadow h-full rounded-tl-xl',
+                            editorEngine.state.editorMode === EditorMode.PREVIEW ? 'hidden' : 'visible',
+                            isOpen ? 'opacity-100 visible' : 'opacity-0 invisible',
+                            // isDevPanelOpen && 'rounded-none'
+                        )}>
+                    <Tabs onValueChange={(value) => editorEngine.state.editorPanelTab = value as EditorTabValue} value={selectedTab} >
+                        <TabsList
+                            className={
+                                cn(
+                                    'bg-transparent w-full select-none justify-between items-center px-2',
+                                    isOpen ? 'h-11' : 'h-full',
+                                )
+                            }
+                        >
+                            <div className="flex flex-row items-center gap-2 " >
+                                <button
+                                    className="text-default rounded-lg p-2 bg-transparent hover:text-foreground-hover hidden"
+                                    onClick={() => setIsOpen(false)}
+                                >
+                                    <Icons.PinRight />
+                                </button>
+                                <ChatPanelDropdown>
+                                    <TabsTrigger
+                                        className="bg-transparent py-2 px-1 text-small hover:text-foreground-hover"
+                                        value={EditorTabValue.CHAT}
+                                    >
+                                        <Icons.Sparkles className="mr-1.5 mb-0.5 h-4 w-4" />
+                                        {t('editor.panels.edit.tabs.chat.name')}
+                                        < Icons.ChevronDown className="ml-1 h-3 w-3 text-muted-foreground" />
+                                    </TabsTrigger>
+                                </ChatPanelDropdown>
+                                < TabsTrigger
+                                    className="bg-transparent py-2 px-1 text-small hover:text-foreground-hover"
+                                    value={EditorTabValue.STYLES}
+                                >
+                                    <Icons.Styles className="mr-1.5 h-4 w-4" />
+                                    {t('editor.panels.edit.tabs.styles.name')}
+                                </TabsTrigger>
+                                < TabsTrigger
+                                    className="bg-transparent py-2 px-1 text-xs hover:text-foreground-hover hidden"
+                                    value={EditorTabValue.PROPS}
+                                >
+                                    <Icons.MixerHorizontal className="mr-1.5 mb-0.5" />
+                                    Props
+                                </TabsTrigger>
+                            </div>
+                            {selectedTab === EditorTabValue.CHAT && <ChatControls />}
+                        </TabsList>
+                        < Separator className="mt-0" />
+                        {/* <ChatHistory isOpen={isChatHistoryOpen} onOpenChange={setIsChatHistoryOpen} /> */}
+                        <div className="overflow-auto" >
+                            <TabsContent value={EditorTabValue.CHAT}>
+                                {/* <ChatTab /> */}
+                            </TabsContent>
+                            < TabsContent value={EditorTabValue.PROPS} >
+                                {/* <PropsTab /> */}
+                            </TabsContent>
+                            < TabsContent value={EditorTabValue.STYLES} >
+                                {
+                                    editorEngine.elements.selected.length > 0 ? (
+                                        // <StylesTab />
+                                        <></>
+                                    ) : (
+                                        renderEmptyState()
+                                    )
+                                }
+                            </TabsContent>
+                        </div>
+                    </Tabs>
+                </div>
+            </ResizablePanel>
+        </div>
+    );
+});
diff --git a/apps/web/src/app/project/[id]/_components/top-bar/index.tsx b/apps/web/src/app/project/[id]/_components/top-bar/index.tsx
index 246640a029..855ab37a64 100644
--- a/apps/web/src/app/project/[id]/_components/top-bar/index.tsx
+++ b/apps/web/src/app/project/[id]/_components/top-bar/index.tsx
@@ -13,7 +13,7 @@ import { useTranslations } from 'next-intl';
 import { ModeToggle } from './mode-toggle';
 import { ProjectBreadcrumb } from './project-breadcrumb';
 
-export const EditorTopBar = observer(() => {
+export const TopBar = observer(() => {
     const editorEngine = useEditorEngine();
     const t = useTranslations();
 
diff --git a/apps/web/src/app/project/[id]/page.tsx b/apps/web/src/app/project/[id]/page.tsx
index dea7f2d35c..cee0d1780b 100644
--- a/apps/web/src/app/project/[id]/page.tsx
+++ b/apps/web/src/app/project/[id]/page.tsx
@@ -1,28 +1,26 @@
 
 import { Frames } from './_components/canvas/frames';
-
-// import { EditPanel } from './EditPanel';
+import { RightPanel } from './_components/right-panel';
 // import { HotkeysModal } from './HotkeysModal';
 // import { LayersPanel } from './LayersPanel';
 // import { Toolbar } from './Toolbar';
 
 import { Canvas } from "./_components/canvas";
-import { EditorTopBar } from "./_components/top-bar";
+import { TopBar } from "./_components/top-bar";
 
-export default async function Page({ params }: { params: { id: string } }) {
-    const id = (await params).id
+export default async function Page({ }: { params: { id: string } }) {
     return (
-        <div className="h-screen w-screen relative flex flex-row select-none">
+        <div className="relative h-screen w-screen flex flex-row select-none">
             <Canvas>
                 <Frames />
             </Canvas>
 
-            <div className="fixed top-20 left-0 animate-layer-panel-in">
-                {/* <LayersPanel /> */}
+            <div className="absolute top-10 left-0 animate-layer-panel-in h-[calc(100%-2.60rem)]">
+                {/* <LeftPanel /> */}
             </div>
 
-            <div className="fixed top-20 right-0 animate-edit-panel-in">
-                {/* <EditPanel /> */}
+            <div className="absolute top-10 right-0 animate-edit-panel-in h-[calc(100%-2.60rem)]">
+                <RightPanel />
             </div>
 
             <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 animate-toolbar-up ">
@@ -30,7 +28,7 @@ export default async function Page({ params }: { params: { id: string } }) {
             </div>
 
             <div className="absolute top-0 w-full">
-                <EditorTopBar />
+                <TopBar />
             </div>
             {/* <HotkeysModal /> */}
         </div>
diff --git a/packages/ui-v4/src/components/resizable.tsx b/packages/ui-v4/src/components/resizable.tsx
index 32cb8a627c..368693130e 100644
--- a/packages/ui-v4/src/components/resizable.tsx
+++ b/packages/ui-v4/src/components/resizable.tsx
@@ -84,7 +84,7 @@ interface ResizablePanelProps {
     className?: string;
 }
 
-const ResizablePanel: React.FC<ResizablePanelProps> = ({
+export const ResizablePanel: React.FC<ResizablePanelProps> = ({
     children,
     side = 'left',
     defaultWidth = 240,
@@ -122,5 +122,3 @@ const ResizablePanel: React.FC<ResizablePanelProps> = ({
         </div>
     );
 };
-
-export default ResizablePanel;

From 368be202b97592932c47d2d0517213a7fc8375a3 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 7 Apr 2025 13:57:28 -0700
Subject: [PATCH 6/6] Clean up

---
 .../app/project/[id]/_components/right-panel/chat/controls.tsx  | 2 +-
 .../[id]/_components/right-panel/chat/panel-dropdown.tsx        | 2 +-
 apps/web/src/app/project/[id]/_components/right-panel/index.tsx | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx b/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx
index 5365842b66..e68341a500 100644
--- a/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx
+++ b/apps/web/src/app/project/[id]/_components/right-panel/chat/controls.tsx
@@ -22,7 +22,7 @@ export const ChatControls = observer(() => {
                             size={'icon'}
                             className="p-2 w-fit h-fit hover:bg-background-onlook"
                             onClick={handleNewChat}
-                            disabled={editorEngine.chat?.isWaiting || true}
+                            disabled={editorEngine.chat?.isWaiting || false}
                         >
                             <Icons.Plus />
                         </Button>
diff --git a/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx b/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx
index 88371b35a4..8c38a5e395 100644
--- a/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx
+++ b/apps/web/src/app/project/[id]/_components/right-panel/chat/panel-dropdown.tsx
@@ -20,7 +20,7 @@ export const ChatPanelDropdown = ({ children }: { children: React.ReactNode }) =
 
     const updateChatSettings = (e: React.MouseEvent, settings: Partial<ChatSettings>) => {
         e.preventDefault();
-        userManager.settings.updateChat(settings);
+        // userManager.settings.updateChat(settings);
     };
 
     return (
diff --git a/apps/web/src/app/project/[id]/_components/right-panel/index.tsx b/apps/web/src/app/project/[id]/_components/right-panel/index.tsx
index 1df30aa6c2..bb5893bd26 100644
--- a/apps/web/src/app/project/[id]/_components/right-panel/index.tsx
+++ b/apps/web/src/app/project/[id]/_components/right-panel/index.tsx
@@ -37,8 +37,6 @@ export const RightPanel = observer(() => {
     const [isOpen, setIsOpen] = useState(true);
     const selectedTab = editorEngine.state.editorPanelTab;
     const editPanelWidth = EDIT_PANEL_WIDTHS[selectedTab];
-    const [isChatHistoryOpen, setIsChatHistoryOpen] = useState(false);
-
 
     function renderEmptyState() {
         return (