diff --git a/app/frontend/src/App.tsx b/app/frontend/src/App.tsx
index 1e9f91117..8ac339c25 100644
--- a/app/frontend/src/App.tsx
+++ b/app/frontend/src/App.tsx
@@ -1,5 +1,5 @@
-import { Layout } from './components/layout';
-import { Toaster } from './components/ui/sonner';
+import { Layout } from "./components/Layout";
+import { Toaster } from "./components/ui/sonner";
 
 export default function App() {
   return (
diff --git a/app/frontend/src/components/Layout.tsx b/app/frontend/src/components/Layout.tsx
index 4d14a12be..5dc081226 100644
--- a/app/frontend/src/components/Layout.tsx
+++ b/app/frontend/src/components/Layout.tsx
@@ -1,33 +1,38 @@
-import { BottomPanel } from '@/components/panels/bottom/bottom-panel';
-import { LeftSidebar } from '@/components/panels/left/left-sidebar';
-import { RightSidebar } from '@/components/panels/right/right-sidebar';
-import { TabBar } from '@/components/tabs/tab-bar';
-import { TabContent } from '@/components/tabs/tab-content';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { FlowProvider, useFlowContext } from '@/contexts/flow-context';
-import { LayoutProvider, useLayoutContext } from '@/contexts/layout-context';
-import { TabsProvider, useTabsContext } from '@/contexts/tabs-context';
-import { useLayoutKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
-import { cn } from '@/lib/utils';
-import { SidebarStorageService } from '@/services/sidebar-storage';
-import { TabService } from '@/services/tab-service';
-import { ReactFlowProvider } from '@xyflow/react';
-import { ReactNode, useEffect, useState } from 'react';
-import { TopBar } from './layout/top-bar';
+import { BottomPanel } from "@/components/panels/bottom/bottom-panel";
+import { LeftSidebar } from "@/components/panels/left/left-sidebar";
+import { RightSidebar } from "@/components/panels/right/right-sidebar";
+import { TabBar } from "@/components/tabs/tab-bar";
+import { TabContent } from "@/components/tabs/tab-content";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { FlowProvider, useFlowContext } from "@/contexts/flow-context";
+import { LayoutProvider, useLayoutContext } from "@/contexts/layout-context";
+import { TabsProvider, useTabsContext } from "@/contexts/tabs-context";
+import { useLayoutKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { cn } from "@/lib/utils";
+import { SidebarStorageService } from "@/services/sidebar-storage";
+import { TabService } from "@/services/tab-service";
+import { ReactFlowProvider } from "@xyflow/react";
+import { ReactNode, useEffect, useState } from "react";
+import { TopBar } from "./layout/top-bar";
 
 // Create a LayoutContent component to access the FlowContext, TabsContext, and LayoutContext
 function LayoutContent({ children }: { children: ReactNode }) {
   const { reactFlowInstance } = useFlowContext();
   const { openTab } = useTabsContext();
-  const { isBottomCollapsed, expandBottomPanel, collapseBottomPanel, toggleBottomPanel } = useLayoutContext();
-  
+  const {
+    isBottomCollapsed,
+    expandBottomPanel,
+    collapseBottomPanel,
+    toggleBottomPanel,
+  } = useLayoutContext();
+
   // Initialize sidebar states from storage service
-  const [isLeftCollapsed, setIsLeftCollapsed] = useState(() => 
-    SidebarStorageService.loadLeftSidebarState(false)
+  const [isLeftCollapsed, setIsLeftCollapsed] = useState(() =>
+    SidebarStorageService.loadLeftSidebarState(false),
   );
-  
-  const [isRightCollapsed, setIsRightCollapsed] = useState(() => 
-    SidebarStorageService.loadRightSidebarState(false)
+
+  const [isRightCollapsed, setIsRightCollapsed] = useState(() =>
+    SidebarStorageService.loadRightSidebarState(false),
   );
 
   // Track actual sidebar widths for dynamic positioning
@@ -43,7 +48,7 @@ function LayoutContent({ children }: { children: ReactNode }) {
   // Add keyboard shortcuts for toggling sidebars and fit view
   useLayoutKeyboardShortcuts(
     () => setIsRightCollapsed(!isRightCollapsed), // Cmd+I for right sidebar
-    () => setIsLeftCollapsed(!isLeftCollapsed),   // Cmd+B for left sidebar
+    () => setIsLeftCollapsed(!isLeftCollapsed), // Cmd+B for left sidebar
     () => reactFlowInstance.fitView({ padding: 0.1, duration: 500 }), // Cmd+O for fit view
     // Note: undo/redo will be handled directly in the Flow component for now
     undefined, // undo
@@ -65,15 +70,15 @@ function LayoutContent({ children }: { children: ReactNode }) {
   const getSidebarBasedStyle = () => {
     let left = 0;
     let right = 0;
-    
+
     if (!isLeftCollapsed) {
       left = leftSidebarWidth;
     }
-    
+
     if (!isRightCollapsed) {
       right = rightSidebarWidth;
     }
-    
+
     return {
       left: `${left}px`,
       right: `${right}px`,
@@ -85,18 +90,18 @@ function LayoutContent({ children }: { children: ReactNode }) {
     const tabBarHeight = 40; // Approximate tab bar height
     let top = tabBarHeight;
     let bottom = 0;
-    
+
     if (!isBottomCollapsed) {
       bottom = bottomPanelHeight;
     }
-    
+
     return {
       top: `${top}px`,
       bottom: `${bottom}px`,
-      left: '0',
-      right: '0',
-      width: 'auto',
-      height: 'auto',
+      left: "0",
+      right: "0",
+      width: "auto",
+      height: "auto",
     };
   };
 
@@ -114,7 +119,7 @@ function LayoutContent({ children }: { children: ReactNode }) {
       />
 
       {/* Tab Bar - positioned absolutely like bottom panel */}
-      <div 
+      <div
         className="absolute top-0 z-10 transition-all duration-200"
         style={getSidebarBasedStyle()}
       >
@@ -122,23 +127,25 @@ function LayoutContent({ children }: { children: ReactNode }) {
       </div>
 
       {/* Main content area */}
-      <main 
-        className="absolute inset-0 overflow-hidden" 
+      <main
+        className="absolute inset-0 overflow-hidden"
         style={{
-          left: !isLeftCollapsed ? `${leftSidebarWidth}px` : '0px',
-          right: !isRightCollapsed ? `${rightSidebarWidth}px` : '0px',
-          top: '40px', // Tab bar height
-          bottom: !isBottomCollapsed ? `${bottomPanelHeight}px` : '0px',
+          left: !isLeftCollapsed ? `${leftSidebarWidth}px` : "0px",
+          right: !isRightCollapsed ? `${rightSidebarWidth}px` : "0px",
+          top: "40px", // Tab bar height
+          bottom: !isBottomCollapsed ? `${bottomPanelHeight}px` : "0px",
         }}
       >
         <TabContent className="h-full w-full" />
       </main>
 
       {/* Floating left sidebar */}
-      <div className={cn(
-        "absolute top-0 left-0 z-30 h-full transition-transform",
-        isLeftCollapsed && "transform -translate-x-full opacity-0"
-      )}>
+      <div
+        className={cn(
+          "absolute top-0 left-0 z-30 h-full transition-transform",
+          isLeftCollapsed && "transform -translate-x-full opacity-0",
+        )}
+      >
         <LeftSidebar
           isCollapsed={isLeftCollapsed}
           onCollapse={() => setIsLeftCollapsed(true)}
@@ -148,10 +155,12 @@ function LayoutContent({ children }: { children: ReactNode }) {
       </div>
 
       {/* Floating right sidebar */}
-      <div className={cn(
-        "absolute top-0 right-0 z-30 h-full transition-transform",
-        isRightCollapsed && "transform translate-x-full opacity-0"
-      )}>
+      <div
+        className={cn(
+          "absolute top-0 right-0 z-30 h-full transition-transform",
+          isRightCollapsed && "transform translate-x-full opacity-0",
+        )}
+      >
         <RightSidebar
           isCollapsed={isRightCollapsed}
           onCollapse={() => setIsRightCollapsed(true)}
@@ -161,10 +170,10 @@ function LayoutContent({ children }: { children: ReactNode }) {
       </div>
 
       {/* Bottom panel */}
-      <div 
+      <div
         className={cn(
           "absolute bottom-0 z-20 transition-transform",
-          isBottomCollapsed && "transform translate-y-full opacity-0"
+          isBottomCollapsed && "transform translate-y-full opacity-0",
         )}
         style={getSidebarBasedStyle()}
       >
@@ -198,4 +207,5 @@ export function Layout({ children }: LayoutProps) {
       </ReactFlowProvider>
     </SidebarProvider>
   );
-}
\ No newline at end of file
+}
+
diff --git a/app/package-lock.json b/app/package-lock.json
new file mode 100644
index 000000000..4ca926f5d
--- /dev/null
+++ b/app/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "app",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}