From 8f199a7cca429c7ec3e3832d4b15494b679bcafb Mon Sep 17 00:00:00 2001
From: "$@#il" <sahilsadekar249775@gmail.com>
Date: Mon, 23 Jun 2025 23:46:45 +0530
Subject: [PATCH] started working with monaco ui

---
 package-lock.json                             |  49 +++
 package.json                                  |   4 +-
 src/App.jsx                                   |   8 +-
 src/components/NavBar.jsx                     |   4 +-
 .../codeEditor/CodeEditorLayout.jsx           | 296 ++++++++++++++++++
 src/components/codeEditor/Editor.jsx          | 152 +++++++++
 src/components/codeEditor/FileExplorer.jsx    | 158 ++++++++++
 src/components/pages/CodeEditorPage.jsx       |  70 +++++
 src/components/pages/SingleProjectDetails.css | 123 +++++---
 src/components/pages/SingleProjectDetails.jsx | 212 ++++++++-----
 src/components/ui/alert.jsx                   |  39 +++
 src/components/ui/resizable.jsx               |  66 ++++
 yarn.lock                                     |  33 +-
 13 files changed, 1093 insertions(+), 121 deletions(-)
 create mode 100644 src/components/codeEditor/CodeEditorLayout.jsx
 create mode 100644 src/components/codeEditor/Editor.jsx
 create mode 100644 src/components/codeEditor/FileExplorer.jsx
 create mode 100644 src/components/pages/CodeEditorPage.jsx
 create mode 100644 src/components/ui/alert.jsx
 create mode 100644 src/components/ui/resizable.jsx

diff --git a/package-lock.json b/package-lock.json
index 308a4ce..f04e1f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,11 @@
     "": {
       "name": "vite-project",
       "version": "0.0.0",
+      "license": "UNLICENSED",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@heroicons/react": "^2.2.0",
+        "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-avatar": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.4",
         "@radix-ui/react-icons": "^1.3.2",
@@ -27,11 +29,13 @@
         "gsap": "^3.12.7",
         "jwt-decode": "^4.0.0",
         "lucide-react": "^0.460.0",
+        "monaco-editor": "^0.52.2",
         "path": "^0.12.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.4.0",
         "react-intersection-observer": "^9.15.1",
+        "react-resizable-panels": "^3.0.3",
         "react-router-dom": "^6.28.0",
         "react-type-animation": "^3.2.0",
         "recharts": "^2.15.0",
@@ -1216,6 +1220,29 @@
       "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
       "license": "Apache-2.0"
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@monogrid/gainmap-js": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
@@ -6613,6 +6640,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT"
+    },
     "node_modules/motion-dom": {
       "version": "11.18.1",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
@@ -7550,6 +7583,16 @@
         }
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.3.tgz",
+      "integrity": "sha512-7HA8THVBHTzhDK4ON0tvlGXyMAJN1zBeRpuyyremSikgYh2ku6ltD7tsGQOcXx4NKPrZtYCm/5CBr+dkruTGQw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.28.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
@@ -8157,6 +8200,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/stats-gl": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
diff --git a/package.json b/package.json
index 61b1853..ff98f09 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@heroicons/react": "^2.2.0",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-icons": "^1.3.2",
@@ -30,11 +31,13 @@
     "gsap": "^3.12.7",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.460.0",
+    "monaco-editor": "^0.52.2",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-intersection-observer": "^9.15.1",
+    "react-resizable-panels": "^3.0.3",
     "react-router-dom": "^6.28.0",
     "react-type-animation": "^3.2.0",
     "recharts": "^2.15.0",
@@ -59,4 +62,3 @@
     "vite": "^5.4.10"
   }
 }
-
diff --git a/src/App.jsx b/src/App.jsx
index 4d31bef..6a03eec 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,6 +14,7 @@ import DeploymentProgress from './components/pages/DeploymentProgress';
 import DeployForm from './components/pages/DeployForm';
 import LoginPage from './components/LoginPage';
 import ProjectLister from './components/pages/ProjectLister';
+import CodeEditorPage from './components/pages/CodeEditorPage';
 import NavBar from './components/NavBar';
 import Footer from './components/Footer';
 import { useUser } from './context/userContext';
@@ -55,9 +56,14 @@ function AppContent() {
           </ProtectedRoute>
         } />
         <Route path="/projects" element={<ProjectLister />} />
+        <Route path="/editor/:projectId" element={
+          // <ProtectedRoute>
+            <CodeEditorPage />
+          // </ProtectedRoute>
+        } />
       </Routes>
       
-      {location.pathname !== '/login' && <Footer />}
+      {location.pathname !== '/login' && location.pathname !== '/editor/:projectId' && <Footer />}
     </>
   );
 }
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index aefc6c8..949ea8e 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
 import { useUser } from "../context/userContext";
-import { FaUserCircle, FaSignOutAlt, FaSignInAlt, FaUserPlus, FaBars, FaTimes } from "react-icons/fa";
+import { FaUserCircle, FaSignOutAlt, FaSignInAlt, FaUserPlus, FaBars, FaTimes, FaCode } from "react-icons/fa";
 import { FiHome, FiFolder, FiInfo, FiMail } from "react-icons/fi";
 
 const NavBar = () => {
@@ -43,6 +43,7 @@ const NavBar = () => {
               {[
                 { name: "Home", icon: FiHome, path: "/" },
                 { name: "My Projects", icon: FiFolder, path: "/projects" },
+                { name: "Code Editor", icon: FaCode, path: "/editor/123" },
                 { name: "About Us", icon: FiInfo, path: "/about" },
                 { name: "Contact Us", icon: FiMail, path: "/contact" }
               ].map(({ name, icon: Icon, path }) => (
@@ -106,6 +107,7 @@ const NavBar = () => {
               {[
                 { name: "Home", icon: FiHome, path: "/" },
                 { name: "My Projects", icon: FiFolder, path: "/projects" },
+                { name: "Code Editor", icon: FaCode, path: "/editor/123" },
                 { name: "About Us", icon: FiInfo, path: "/about" },
                 { name: "Contact Us", icon: FiMail, path: "/contact" }
               ].map(({ name, icon: Icon, path }) => (
diff --git a/src/components/codeEditor/CodeEditorLayout.jsx b/src/components/codeEditor/CodeEditorLayout.jsx
new file mode 100644
index 0000000..8d46722
--- /dev/null
+++ b/src/components/codeEditor/CodeEditorLayout.jsx
@@ -0,0 +1,296 @@
+import React, { useState, useEffect } from 'react';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../ui/resizable';
+import FileExplorer from './FileExplorer';
+import Editor from './Editor';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { Loader2, AlertCircle } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+
+// Mock data for files
+const MOCK_FILES = [
+  { id: '1', name: 'index.js', path: 'src/index.js', type: 'file' },
+  { id: '2', name: 'App.jsx', path: 'src/App.jsx', type: 'file' },
+  { id: '3', name: 'components', path: 'src/components', type: 'directory' },
+  { id: '4', name: 'Button.jsx', path: 'src/components/Button.jsx', type: 'file' },
+  { id: '5', name: 'Card.jsx', path: 'src/components/Card.jsx', type: 'file' },
+  { id: '6', name: 'utils', path: 'src/utils', type: 'directory' },
+  { id: '7', name: 'helpers.js', path: 'src/utils/helpers.js', type: 'file' },
+  { id: '8', name: 'constants.js', path: 'src/utils/constants.js', type: 'file' },
+  { id: '9', name: 'package.json', path: 'package.json', type: 'file' },
+  { id: '10', name: 'README.md', path: 'README.md', type: 'file' },
+];
+
+// Mock file content
+const MOCK_FILE_CONTENTS = {
+  '1': `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);`,
+  '2': `import React from 'react';
+import { Button } from './components/Button';
+import { Card } from './components/Card';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Welcome to My React App</h1>
+        <Card title="Getting Started">
+          <p>Edit <code>src/App.js</code> and save to reload.</p>
+          <Button>Learn React</Button>
+        </Card>
+      </header>
+    </div>
+  );
+}
+
+export default App;`,
+  '4': `import React from 'react';
+import './Button.css';
+
+export const Button = ({ children, onClick, variant = 'primary' }) => {
+  return (
+    <button 
+      className={\`button \${variant}\`} 
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};`,
+  '5': `import React from 'react';
+import './Card.css';
+
+export const Card = ({ title, children }) => {
+  return (
+    <div className="card">
+      {title && <h2 className="card-title">{title}</h2>}
+      <div className="card-content">
+        {children}
+      </div>
+    </div>
+  );
+};`,
+  '7': `// Helper functions
+
+/**
+ * Format a date to a readable string
+ * @param {Date} date - The date to format
+ * @returns {string} Formatted date string
+ */
+export const formatDate = (date) => {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+
+/**
+ * Truncate a string if it's longer than maxLength
+ * @param {string} str - The string to truncate
+ * @param {number} maxLength - Maximum length before truncating
+ * @returns {string} Truncated string
+ */
+export const truncate = (str, maxLength = 100) => {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength) + '...';
+};`,
+  '8': `// Application constants
+
+export const API_BASE_URL = process.env.NODE_ENV === 'production'
+  ? 'https://api.example.com'
+  : 'http://localhost:5000';
+
+export const THEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+  SYSTEM: 'system'
+};
+
+export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB in bytes`,
+  '9': `{
+  "name": "my-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}`,
+  '10': `# My React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### \`npm start\`
+
+Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+### \`npm test\`
+
+Launches the test runner in the interactive watch mode.
+
+### \`npm run build\`
+
+Builds the app for production to the \`build\` folder.`
+};
+
+const CodeEditorLayout = ({ projectId }) => {
+  const [files, setFiles] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [fileContent, setFileContent] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState('explorer');
+
+  // Load mock files with a simulated delay
+  useEffect(() => {
+    const loadMockFiles = async () => {
+      setIsLoading(true);
+      setError(null);
+      
+      try {
+        // Simulate API delay
+        await new Promise(resolve => setTimeout(resolve, 800));
+        setFiles(MOCK_FILES);
+      } catch (err) {
+        console.error('Error loading files:', err);
+        setError('Failed to load files. Please try again.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadMockFiles();
+  }, []);
+
+  // Handle file selection
+  const handleFileSelect = async (file) => {
+    if (file.type === 'directory') return;
+    
+    setSelectedFile(file);
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      // Simulate API delay
+      await new Promise(resolve => setTimeout(resolve, 400));
+      
+      const content = MOCK_FILE_CONTENTS[file.id];
+      if (content) {
+        setFileContent(content);
+      } else {
+        setFileContent(`// No content available for ${file.name}`);
+      }
+    } catch (err) {
+      console.error('Error fetching file content:', err);
+      setError('Failed to load file content. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="h-screen flex flex-col bg-background">
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal">
+          <ResizablePanel defaultSize={20} minSize={15} maxSize={30} className="bg-muted/10">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="w-full grid grid-cols-2">
+                <TabsTrigger value="explorer">Explorer</TabsTrigger>
+                <TabsTrigger value="search">Search</TabsTrigger>
+              </TabsList>
+              
+              <TabsContent value="explorer" className="p-0 border-none">
+                {isLoading && !files.length ? (
+                  <div className="flex items-center justify-center h-32">
+                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                  </div>
+                ) : error && !files.length ? (
+                  <Alert variant="destructive" className="m-2">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>Error</AlertTitle>
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
+                ) : (
+                  <FileExplorer 
+                    files={files} 
+                    onSelectFile={handleFileSelect} 
+                    selectedFile={selectedFile}
+                  />
+                )}
+              </TabsContent>
+              
+              <TabsContent value="search" className="border-none p-2">
+                <div className="text-sm text-muted-foreground">
+                  Search functionality will be implemented here
+                </div>
+              </TabsContent>
+            </Tabs>
+          </ResizablePanel>
+          
+          <ResizableHandle />
+          
+          <ResizablePanel defaultSize={80}>
+            {selectedFile ? (
+              <Editor 
+                fileContent={fileContent} 
+                fileName={selectedFile?.name || ''} 
+                isLoading={isLoading} 
+                error={error}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                Select a file to view its content
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+};
+
+export default CodeEditorLayout; 
\ No newline at end of file
diff --git a/src/components/codeEditor/Editor.jsx b/src/components/codeEditor/Editor.jsx
new file mode 100644
index 0000000..3b90a30
--- /dev/null
+++ b/src/components/codeEditor/Editor.jsx
@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import Editor from '@monaco-editor/react';
+import { Loader2, AlertCircle } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+
+const CodeEditor = ({ fileContent, fileName, isLoading, error }) => {
+  const [language, setLanguage] = useState('javascript');
+  const [theme, setTheme] = useState('vs-dark');
+  
+  // Determine language based on file extension
+  useEffect(() => {
+    if (!fileName) return;
+    
+    const extension = fileName.split('.').pop()?.toLowerCase();
+    
+    switch(extension) {
+      case 'js':
+        setLanguage('javascript');
+        break;
+      case 'jsx':
+        setLanguage('javascript');
+        break;
+      case 'ts':
+        setLanguage('typescript');
+        break;
+      case 'tsx':
+        setLanguage('typescript');
+        break;
+      case 'html':
+        setLanguage('html');
+        break;
+      case 'css':
+        setLanguage('css');
+        break;
+      case 'scss':
+        setLanguage('scss');
+        break;
+      case 'json':
+        setLanguage('json');
+        break;
+      case 'md':
+        setLanguage('markdown');
+        break;
+      case 'py':
+        setLanguage('python');
+        break;
+      case 'go':
+        setLanguage('go');
+        break;
+      case 'java':
+        setLanguage('java');
+        break;
+      case 'php':
+        setLanguage('php');
+        break;
+      case 'c':
+        setLanguage('c');
+        break;
+      case 'cpp':
+      case 'cc':
+        setLanguage('cpp');
+        break;
+      case 'rb':
+        setLanguage('ruby');
+        break;
+      case 'rs':
+        setLanguage('rust');
+        break;
+      case 'sh':
+      case 'bash':
+        setLanguage('shell');
+        break;
+      case 'yml':
+      case 'yaml':
+        setLanguage('yaml');
+        break;
+      default:
+        setLanguage('plaintext');
+    }
+  }, [fileName]);
+
+  // Handle editor options
+  const editorOptions = {
+    minimap: { enabled: true },
+    scrollBeyondLastLine: false,
+    automaticLayout: true,
+    scrollbar: {
+      vertical: 'auto',
+      horizontal: 'auto',
+    },
+    readOnly: true, // Set to false if you want to enable editing
+    fontSize: 14,
+    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+    lineNumbers: 'on',
+    wordWrap: 'on',
+    renderLineHighlight: 'all',
+    formatOnPaste: true,
+    tabSize: 2,
+  };
+
+  // Handle editor mounting
+  const handleEditorDidMount = (editor, monaco) => {
+    // You can add any additional configuration here
+    editor.focus();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full p-4">
+        <Alert variant="destructive" className="max-w-md">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="border-b border-border px-4 py-2 bg-muted/30 flex items-center">
+        <span className="text-sm font-medium">{fileName}</span>
+      </div>
+      <div className="flex-1">
+        <Editor
+          height="100%"
+          width="100%"
+          language={language}
+          theme={theme}
+          value={fileContent}
+          options={editorOptions}
+          onMount={handleEditorDidMount}
+          loading={
+            <div className="flex items-center justify-center h-full">
+              <Loader2 className="h-6 w-6 animate-spin text-primary" />
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CodeEditor; 
\ No newline at end of file
diff --git a/src/components/codeEditor/FileExplorer.jsx b/src/components/codeEditor/FileExplorer.jsx
new file mode 100644
index 0000000..917d284
--- /dev/null
+++ b/src/components/codeEditor/FileExplorer.jsx
@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { ScrollArea } from '../ui/scroll-area';
+import { ChevronDown, ChevronRight, File, Folder } from 'lucide-react';
+
+const FileExplorer = ({ files, onSelectFile, selectedFile }) => {
+  // Transform flat file list into a tree structure
+  const buildFileTree = (fileList) => {
+    const root = { children: {} };
+    
+    fileList.forEach(file => {
+      const pathParts = file.path.split('/').filter(Boolean);
+      let currentLevel = root;
+      
+      // Navigate through path parts to build tree
+      pathParts.forEach((part, index) => {
+        if (!currentLevel.children[part]) {
+          const isLastPart = index === pathParts.length - 1;
+          currentLevel.children[part] = {
+            ...file,
+            name: part,
+            children: {},
+            isDirectory: !isLastPart || file.type === 'directory'
+          };
+        }
+        currentLevel = currentLevel.children[part];
+      });
+    });
+    
+    return root;
+  };
+
+  const fileTree = buildFileTree(files);
+  
+  return (
+    <ScrollArea className="h-[calc(100vh-10rem)]">
+      <div className="p-2">
+        <FileTreeNode 
+          node={fileTree} 
+          onSelectFile={onSelectFile}
+          selectedFile={selectedFile}
+          level={0}
+          isRoot={true}
+        />
+      </div>
+    </ScrollArea>
+  );
+};
+
+const FileTreeNode = ({ node, onSelectFile, selectedFile, level = 0, isRoot = false }) => {
+  const [expanded, setExpanded] = useState(true);
+  
+  // Skip rendering for root node
+  if (isRoot) {
+    return (
+      <div className="space-y-1">
+        {Object.values(node.children).map((childNode, index) => (
+          <FileTreeNode
+            key={childNode.id || `dir-${index}`}
+            node={childNode}
+            onSelectFile={onSelectFile}
+            selectedFile={selectedFile}
+            level={level}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  const hasChildren = Object.keys(node.children || {}).length > 0;
+  const isDirectory = node.isDirectory;
+  const isSelected = selectedFile && selectedFile.id === node.id;
+
+  const handleClick = () => {
+    if (isDirectory) {
+      setExpanded(!expanded);
+    } else {
+      onSelectFile(node);
+    }
+  };
+
+  const getFileIcon = () => {
+    if (isDirectory) {
+      return expanded ? <Folder className="h-4 w-4 text-blue-400" /> : <Folder className="h-4 w-4 text-blue-300" />;
+    }
+    
+    // Determine file icon based on extension
+    const extension = node.name.split('.').pop()?.toLowerCase();
+    
+    switch(extension) {
+      case 'js':
+      case 'jsx':
+        return <File className="h-4 w-4 text-yellow-400" />;
+      case 'ts':
+      case 'tsx':
+        return <File className="h-4 w-4 text-blue-500" />;
+      case 'css':
+      case 'scss':
+        return <File className="h-4 w-4 text-purple-400" />;
+      case 'html':
+        return <File className="h-4 w-4 text-orange-400" />;
+      case 'json':
+        return <File className="h-4 w-4 text-green-400" />;
+      case 'md':
+        return <File className="h-4 w-4 text-gray-400" />;
+      default:
+        return <File className="h-4 w-4 text-gray-300" />;
+    }
+  };
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "flex items-center py-1 px-2 rounded-md text-sm cursor-pointer hover:bg-accent/50",
+          isSelected && "bg-accent text-accent-foreground"
+        )}
+        style={{ paddingLeft: `${(level * 12) + 4}px` }}
+        onClick={handleClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            handleClick();
+            e.preventDefault();
+          }
+        }}
+      >
+        <div className="mr-1">
+          {isDirectory && (expanded ? 
+            <ChevronDown className="h-4 w-4 text-muted-foreground" /> : 
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          )}
+        </div>
+        <div className="mr-2">
+          {getFileIcon()}
+        </div>
+        <span className="truncate">{node.name}</span>
+      </div>
+      
+      {isDirectory && expanded && (
+        <div>
+          {Object.values(node.children).map((childNode, index) => (
+            <FileTreeNode
+              key={childNode.id || `child-${index}`}
+              node={childNode}
+              onSelectFile={onSelectFile}
+              selectedFile={selectedFile}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileExplorer; 
\ No newline at end of file
diff --git a/src/components/pages/CodeEditorPage.jsx b/src/components/pages/CodeEditorPage.jsx
new file mode 100644
index 0000000..feb220a
--- /dev/null
+++ b/src/components/pages/CodeEditorPage.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import CodeEditorLayout from '../codeEditor/CodeEditorLayout';
+
+// Mock project data
+const MOCK_PROJECT = {
+  id: '123',
+  name: 'Sample React Project',
+  description: 'A sample React project for demonstration',
+  gitUrl: 'https://github.com/username/sample-project',
+  createdAt: '2023-06-15T10:30:00Z',
+  updatedAt: '2023-06-20T14:45:00Z',
+};
+
+const CodeEditorPage = () => {
+  const { projectId } = useParams();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [project, setProject] = useState(null);
+
+  useEffect(() => {
+    const loadMockProject = async () => {
+      setIsLoading(true);
+      setError(null);
+      
+      try {
+        // Simulate API delay
+        await new Promise(resolve => setTimeout(resolve, 600));
+        setProject(MOCK_PROJECT);
+      } catch (err) {
+        console.error('Error loading project:', err);
+        setError('Failed to load project details. Please try again.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadMockProject();
+  }, [projectId]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-background">
+        <div className="flex flex-col items-center">
+          <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
+          <p className="text-muted-foreground">Loading project...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-background">
+        <div className="bg-destructive/15 text-destructive p-6 rounded-lg border border-destructive/30 max-w-md">
+          <h2 className="text-xl font-semibold mb-2">Error</h2>
+          <p>{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-background">
+      <CodeEditorLayout projectId={projectId} />
+    </div>
+  );
+};
+
+export default CodeEditorPage; 
\ No newline at end of file
diff --git a/src/components/pages/SingleProjectDetails.css b/src/components/pages/SingleProjectDetails.css
index 6c3f9bb..5d6efd8 100644
--- a/src/components/pages/SingleProjectDetails.css
+++ b/src/components/pages/SingleProjectDetails.css
@@ -1,80 +1,125 @@
 /* General Styles (reuse from ProjectLister) */
 .project-details-page {
-    background: #000000;
-    color: #f0f0f0;
-    min-height: 100vh;
-    padding: 40px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    color: #f8f9fa;
 }
 
 .page-header {
+    margin-bottom: 2rem;
     text-align: center;
-    margin-bottom: 30px;
 }
 
 .page-title {
-    /* ... (same as ProjectLister) */
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(to right, #3b82f6, #60a5fa);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }
 
 .page-subtitle {
-    /* ... (same as ProjectLister) */
+    font-size: 1.2rem;
+    color: #94a3b8;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    justify-content: center;
 }
 
+.code-editor-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 
+.deploy-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 
 /* Project Details Section */
 .project-details {
-    background: #1a1a1a;
-    border: 1px solid #2e2e2e;
-    border-radius: 15px;
-    padding: 20px;
-    box-shadow: 0 8px 20px rgba(255, 221, 0, 0.4);
-    margin-bottom: 20px; /* Add margin */
-    width: 100%;
-    max-width: 600px; /* Adjust max-width as needed */
+    background: rgba(30, 41, 59, 0.5);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    border: 1px solid rgba(71, 85, 105, 0.3);
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    gap: 0.75rem;
 }
 
 .detail-label {
     font-weight: 600;
-    color: #ffdd00;
-    margin-bottom: 5px;
+    color: #94a3b8;
 }
 
 .detail-value {
-    margin-bottom: 15px;
+    color: #e2e8f0;
 }
 
-.link {  /* Style the link */
-    color: #fbb034;
-    text-decoration: none; /* Remove underline */
+.link {
+    color: #60a5fa;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-
+.link:hover {
+    text-decoration: underline;
+}
 
 /* Deployments Table Styles */
+.deployments-table-wrapper {
+    background: rgba(30, 41, 59, 0.5);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    border: 1px solid rgba(71, 85, 105, 0.3);
+    overflow-x: auto;
+}
 
-.deployments-table-wrapper {  /* Added a wrapper for better control */
-    overflow-x: auto; /* Enable horizontal scrolling if needed */
-    width: 100%;
-    max-width: 800px; /* Adjust as needed */
+.status-success {
+    color: #4ade80;
+}
 
+.status-failed {
+    color: #f87171;
 }
 
-.deployments-table {
-    width: 100%;
-    border-collapse: collapse; /* Improve table styling */
+.status-pending {
+    color: #fbbf24;
 }
 
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+    color: #94a3b8;
+}
 
-.deployments-table th,
-.deployments-table td {
-    padding: 10px;
-    border: 1px solid #2e2e2e;
-    text-align: left;
+.loader {
+    border: 4px solid rgba(59, 130, 246, 0.3);
+    border-radius: 50%;
+    border-top: 4px solid #3b82f6;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
 }
 
-/* Add hover effects or other styling as desired */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
 
diff --git a/src/components/pages/SingleProjectDetails.jsx b/src/components/pages/SingleProjectDetails.jsx
index f9c6e0a..ff8f41c 100644
--- a/src/components/pages/SingleProjectDetails.jsx
+++ b/src/components/pages/SingleProjectDetails.jsx
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import './SingleProjectDetails.css';
 import { motion } from 'framer-motion';
-import { FaGithub } from 'react-icons/fa';
+import { FaGithub, FaCode } from 'react-icons/fa';
+import { Button } from '@/components/ui/button';
 import {
     Table,
     TableBody,
@@ -13,105 +14,162 @@ import {
     TableRow,
 } from "@/components/ui/table"
 
+// Mock project data
+const MOCK_PROJECT = {
+    id: '123',
+    name: 'React Dashboard App',
+    description: 'A modern React dashboard application with analytics and reporting features',
+    gitUrl: 'https://github.com/username/react-dashboard',
+    framework: 'react',
+    createdAt: '2023-05-10T08:30:00Z',
+    updatedAt: '2023-06-15T14:20:00Z'
+};
+
+// Mock deployments data
+const MOCK_DEPLOYMENTS = [
+    {
+        _id: 'deploy-001',
+        status: 'success',
+        timestamp: '2023-06-15T14:30:00Z',
+        url: 'https://app-001.example.com'
+    },
+    {
+        _id: 'deploy-002',
+        status: 'failed',
+        timestamp: '2023-06-10T09:15:00Z',
+        error: 'Build failed due to missing dependencies'
+    },
+    {
+        _id: 'deploy-003',
+        status: 'success',
+        timestamp: '2023-05-28T11:45:00Z',
+        url: 'https://app-002.example.com'
+    }
+];
+
 const SingleProjectDetails = () => {
     const API_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000';
     const { id } = useParams();
-    const navigate = navigate();
+    const navigate = useNavigate();
     const [project, setProject] = useState(null);
     const [deployments, setDeployments] = useState([]);
-    //add validator useEffect for validation projectId come  in quey param
+    const [isLoading, setIsLoading] = useState(true);
 
-    //fetch project details with deployments states
+    // Load mock data with a simulated delay
     useEffect(() => {
-        const fetchProjectDetails = async () => {
+        const loadMockData = async () => {
+            setIsLoading(true);
+            
             try {
-                const response = await axios.get(`${API_URL}/api/project/${id}`);
-                if (response.data) {
-                    setProject(response.data);
-                } else {
-                    console.error("Failed to fetch project details");
-                    navigate("/projects"); // Redirect if project not found
-                }
+                // Simulate API delay
+                await new Promise(resolve => setTimeout(resolve, 800));
+                setProject(MOCK_PROJECT);
+                setDeployments(MOCK_DEPLOYMENTS);
             } catch (error) {
-                console.error("Error fetching project details:", error);
-                navigate("/projects"); // Redirect on error
+                console.error("Error loading mock data:", error);
+            } finally {
+                setIsLoading(false);
             }
         };
 
+        loadMockData();
+    }, [id]);
 
-        const fetchDeployments = async () => {
-            try {
-                const response = await axios.get(`${API_URL}/deployments/${id}`);
-                if (response.data.success) {
-                    setDeployments(response.data.deployments);
-                }
-            } catch (error) {
-                console.error("Error fetching deployments:", error);
-            }
-        }
+    const handleViewCode = () => {
+        navigate(`/editor/${id}`);
+    };
 
-        if (id) {
-            fetchProjectDetails();
-            fetchDeployments();
-        }
-    }, [id, navigate]); //considering these will find project details and its deployments as one project has multiple deployments
+    const handleDeploy = () => {
+        navigate(`/service/${id}`);
+    };
 
+    if (isLoading) {
+        return (
+            <div className="loading-container">
+                <div className="loader"></div>
+                <p>Loading project details...</p>
+            </div>
+        );
+    }
+
+    if (!project) {
+        return null;
+    }
 
     return (
-        //add here all ui render with api endpoints hits and received data
-        <>
-            <div className="project-details-page">
-                <motion.header
-                    className="page-header"
-                    initial={{ opacity: 0, y: -50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8 }}
+        <div className="project-details-page">
+            <motion.header
+                className="page-header"
+                initial={{ opacity: 0, y: -50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8 }}
+            >
+                <h1 className="page-title">{project.name}</h1>
+                <p className="page-subtitle">Project Overview and Deployments</p>
+            </motion.header>
+
+            {/* Action Buttons */}
+            <div className="action-buttons">
+                <Button 
+                    onClick={handleViewCode} 
+                    className="code-editor-button"
+                    variant="default"
+                >
+                    <FaCode className="mr-2" /> View Code Editor
+                </Button>
+                <Button 
+                    onClick={handleDeploy} 
+                    className="deploy-button"
+                    variant="outline"
                 >
-                    <h1 className="page-title">{project.name}</h1>
-                    <p className="page-subtitle">Project Overview and Deployments</p>
-                </motion.header>
+                    Deploy Project
+                </Button>
+            </div>
 
-                {/* Project Details Section */}
-                <div className="project-details">
-                    <p className="detail-label">Description:</p>
-                    <p className="detail-value">{project.description}</p>
-                    <p className="detail-label">Git URL:</p>
-                    <a href={project.gitUrl} target="_blank" rel="noopener noreferrer" className="detail-value link">
-                        {project.gitUrl} <FaGithub />
-                    </a>
-                    {/* Add more project details as needed */}
-                </div>
+            {/* Project Details Section */}
+            <div className="project-details">
+                <p className="detail-label">Description:</p>
+                <p className="detail-value">{project.description}</p>
+                <p className="detail-label">Git URL:</p>
+                <a href={project.gitUrl} target="_blank" rel="noopener noreferrer" className="detail-value link">
+                    {project.gitUrl} <FaGithub />
+                </a>
+                <p className="detail-label">Framework:</p>
+                <p className="detail-value">{project.framework}</p>
+                <p className="detail-label">Last Updated:</p>
+                <p className="detail-value">{new Date(project.updatedAt).toLocaleString()}</p>
+            </div>
 
-                {/* Deployments Table */}
-                <div className="deployments-table-wrapper"> {/* Wrapper for better styling */}
-                    <Table className="deployments-table">
-                        <TableCaption>Deployment History</TableCaption>
-                        <TableHead>
-                            <TableRow>
-                                <TableHeader>Deployment ID</TableHeader>
-                                <TableHeader>Status</TableHeader>
-                                <TableHeader>Timestamp</TableHeader>
-                                {/* Add more columns as needed */}
-                            </TableRow>
-                        </TableHead>
-                        <TableBody>
-                            {deployments.map((deployment) => (
+            {/* Deployments Table */}
+            <div className="deployments-table-wrapper">
+                <Table className="deployments-table">
+                    <TableCaption>Deployment History</TableCaption>
+                    <TableHead>
+                        <TableRow>
+                            <TableHeader>Deployment ID</TableHeader>
+                            <TableHeader>Status</TableHeader>
+                            <TableHeader>Timestamp</TableHeader>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {deployments.length > 0 ? (
+                            deployments.map((deployment) => (
                                 <TableRow key={deployment._id}>
                                     <TableCell>{deployment._id}</TableCell>
-                                    <TableCell>{deployment.status}</TableCell>
+                                    <TableCell className={`status-${deployment.status}`}>{deployment.status}</TableCell>
                                     <TableCell>{new Date(deployment.timestamp).toLocaleString()}</TableCell>
-                                    {/* Add more cells/data as needed */}
                                 </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-
-                </div>
-
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={3} className="text-center">No deployments found</TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
             </div>
-
-        </>
-    )
-}
+        </div>
+    );
+};
 
 export default SingleProjectDetails;
\ No newline at end of file
diff --git a/src/components/ui/alert.jsx b/src/components/ui/alert.jsx
new file mode 100644
index 0000000..7a9ec59
--- /dev/null
+++ b/src/components/ui/alert.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+const Alert = React.forwardRef(({ className, variant = "default", ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(
+      "relative w-full rounded-lg border p-4",
+      {
+        "bg-background text-foreground": variant === "default",
+        "bg-destructive/15 text-destructive border-destructive/50": variant === "destructive",
+      },
+      className
+    )}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription }; 
\ No newline at end of file
diff --git a/src/components/ui/resizable.jsx b/src/components/ui/resizable.jsx
new file mode 100644
index 0000000..9d12cf5
--- /dev/null
+++ b/src/components/ui/resizable.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ({
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.Panel
+    className={cn(
+      "flex grow basis-0 overflow-auto",
+      className
+    )}
+    {...props}
+  />
+);
+
+const ResizableHandle = ({
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-1 items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-1 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="10"
+        height="10"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-2.5 w-2.5"
+      >
+        <path d="M8 18 L12 22 L16 18"></path>
+        <path d="M8 6 L12 2 L16 6"></path>
+      </svg>
+    </div>
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle
+}; 
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 931bea3..83ce03e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -427,6 +427,20 @@
   resolved "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz"
   integrity sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==
 
+"@monaco-editor/loader@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz"
+  integrity sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz"
+  integrity sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==
+  dependencies:
+    "@monaco-editor/loader" "^1.5.0"
+
 "@monogrid/gainmap-js@^3.0.6":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz"
@@ -3094,6 +3108,11 @@ mkdirp@^2.1.6:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz"
   integrity sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==
 
+monaco-editor@^0.52.2, "monaco-editor@>= 0.25.0 < 1":
+  version "0.52.2"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz"
+  integrity sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==
+
 motion-dom@^11.18.1:
   version "11.18.1"
   resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz"
@@ -3487,7 +3506,7 @@ react-composer@^5.0.3:
   dependencies:
     prop-types "^15.6.0"
 
-"react-dom@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.3.1, "react-dom@>= 15.0.0", react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, "react-dom@>=18 <19":
+"react-dom@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.3.1, "react-dom@>= 15.0.0", react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, "react-dom@>=18 <19":
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -3558,6 +3577,11 @@ react-remove-scroll@2.6.0:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-resizable-panels@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.3.tgz"
+  integrity sha512-7HA8THVBHTzhDK4ON0tvlGXyMAJN1zBeRpuyyremSikgYh2ku6ltD7tsGQOcXx4NKPrZtYCm/5CBr+dkruTGQw==
+
 react-router-dom@^6.28.0:
   version "6.28.0"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz"
@@ -3610,7 +3634,7 @@ react-use-measure@^2.1.7:
   resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz"
   integrity sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==
 
-react@*, "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, react@^18.0.0, "react@^18.0.0 || ^19.0.0", react@^18.3.1, "react@>= 15.0.0", "react@>= 16 || ^19.0.0-rc", "react@>= 16.8.0", react@>=16.13, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=17.0, "react@>=18 <19", react@>=18.0, react@>=18.0.0:
+react@*, "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, react@^18.0.0, "react@^18.0.0 || ^19.0.0", react@^18.3.1, "react@>= 15.0.0", "react@>= 16 || ^19.0.0-rc", "react@>= 16.8.0", react@>=16.13, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=17.0, "react@>=18 <19", react@>=18.0, react@>=18.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -3925,6 +3949,11 @@ source-map@~0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 stats-gl@^2.2.8:
   version "2.4.2"
   resolved "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz"