Lets deploy

sonar-project.properties

@@ -1,6 +1,7 @@
 # Mandatory configuration
 sonar.projectKey=vitruv-tools_Vitruv-UI-Methodologist
 sonar.organization=vitruv-tools
+sonar.host.url=https://sonarcloud.io
 
 # Source and coverage paths
 sonar.sources=src

src/App.test.tsx

@@ -14,6 +14,6 @@ afterEach(() => {
 
 test('renders Vitruvius Modeler title', () => {
   render(<App />);
-  const titleElement = screen.getByText(/vitruvius modeler/i);
-  expect(titleElement).toBeInTheDocument();
+  const titleHeading = screen.getByRole('heading', { name: /Metadologist Dashboard/i });
+  expect(titleHeading).toBeInTheDocument();
 });

src/App.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { MainLayout, AuthPage } from './components';
+import { AuthPage } from './components/auth/AuthPage';
+import { HomePage } from './pages/HomePage';
+import { ProjectPage } from './pages/ProjectPage';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { apiService } from './services/api';
 import { exportFlowData } from './utils';
 import { Node, Edge } from 'reactflow';
 import './App.css';
+import { SidebarTabs, MainLayout } from './components';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, isLoading } = useAuth();
@@ -32,6 +35,8 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
+// Render MainLayout immediately without lazy loading for consistent UX across routes
+
 function AppContent() {
   const { user, signOut } = useAuth();
 
@@ -78,6 +83,8 @@ function AppContent() {
       onNew={handleNew}
       user={user}
       onLogout={handleLogout}
+      leftSidebar={<SidebarTabs width={350} />}
+      leftSidebarWidth={350}
     />
   );
 }
@@ -90,7 +97,17 @@ function App() {
           <Route path="/auth" element={<AuthPage />} />
           <Route path="/" element={
              <ProtectedRoute>
+              <HomePage />
+            </ProtectedRoute>
+          } />
+          <Route path="/mml" element={
+            <ProtectedRoute>
               <AppContent />
+             </ProtectedRoute>
+          } />
+          <Route path="/project" element={
+            <ProtectedRoute>
+              <ProjectPage />
             </ProtectedRoute>
           } />
         </Routes>

src/components/auth/SignUp.tsx

@@ -214,19 +214,6 @@ export function SignUp({ onSignUpSuccess, onSwitchToSignIn }: SignUpProps) {
             </button>
           </p>
         </div>
-
-        <div className="auth-divider">
-          <span>or</span>
-        </div>
-
-        <div className="demo-credentials">
-          <p className="demo-title">API Endpoint</p>
-          <div className="demo-info">
-            <p>This application connects to the backend API at:</p>
-            <p><code>http://localhost:9811/api/v1/users/sign-up</code></p>
-            <p>Make sure your backend server is running on port 9811.</p>
-          </div>
-        </div>
       </div>
     </div>
   );

src/components/flow/EcoreFileBox.tsx

@@ -615,8 +615,8 @@ export const EcoreFileBox: React.FC<EcoreFileBoxProps> = ({
 
       <ConfirmDialog
         isOpen={showDeleteConfirm}
-        title="Delete ECORE File"
-        message={`Are you sure you want to delete "${fileName}"? This action will remove the file from the workspace but will not affect the original uploaded file.`}
+        title="Delete ECORE File from Workspace"
+        message={`Do you want to delete "${fileName}" from workspace?`}
         confirmText="Delete"
         cancelText="Cancel"
         onConfirm={confirmDelete}

src/components/flow/FlowCanvas.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import ReactFlow, {
   MiniMap,
-  Controls,
   Background,
   ReactFlowInstance,
   Node,
@@ -54,6 +53,7 @@ export const FlowCanvas = forwardRef<{
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
   const [isDragOver, setIsDragOver] = useState(false);
+  const [isInteractive, setIsInteractive] = useState(true);
   const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
   const [expandedFileId, setExpandedFileId] = useState<string | null>(null);
 
@@ -350,9 +350,15 @@ export const FlowCanvas = forwardRef<{
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         onInit={setReactFlowInstance}
+        nodesDraggable={isInteractive}
+        nodesConnectable={isInteractive}
+        elementsSelectable={isInteractive}
+        panOnDrag={isInteractive}
+        panOnScroll={isInteractive}
+        zoomOnScroll={isInteractive}
+        zoomOnPinch={isInteractive}
       >
         <MiniMap position="bottom-right" style={{ bottom: 16, right: 16, zIndex: 30 }} />
-        <Controls position="bottom-left" />
         <Background />
       </ReactFlow>
 
@@ -384,6 +390,41 @@ export const FlowCanvas = forwardRef<{
         />
       ))}
 
+      {/* Canvas Controls anchored to wrapper so they move with sidebar resizing */}
+      <div style={{ position: 'absolute', left: 16, bottom: 16, zIndex: 31, display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <button
+          onClick={() => reactFlowInstance?.zoomIn?.()}
+          style={{ width: 36, height: 36, borderRadius: 6, border: '1px solid #e5e7eb', background: '#ffffff', cursor: 'pointer' }}
+          title="Zoom in"
+        >
+          +
+        </button>
+        <button
+          onClick={() => reactFlowInstance?.zoomOut?.()}
+          style={{ width: 36, height: 36, borderRadius: 6, border: '1px solid #e5e7eb', background: '#ffffff', cursor: 'pointer' }}
+          title="Zoom out"
+        >
+          –
+        </button>
+        <button
+          onClick={() => reactFlowInstance?.fitView?.({ padding: 0.2 })}
+          style={{ width: 36, height: 36, borderRadius: 6, border: '1px solid #e5e7eb', background: '#ffffff', cursor: 'pointer' }}
+          title="Fit view"
+        >
+          ⛶
+        </button>
+        <button
+          onClick={() => {
+            const next = !isInteractive;
+            setIsInteractive(next);
+          }}
+          style={{ width: 36, height: 36, borderRadius: 6, border: '1px solid #e5e7eb', background: '#ffffff', cursor: 'pointer' }}
+          title={isInteractive ? 'Lock interactions' : 'Unlock interactions'}
+        >
+          {isInteractive ? '🔓' : '🔒'}
+        </button>
+      </div>
+
       {isDragOver && (
         <div style={{
           position: 'absolute',

src/components/index.ts

@@ -10,8 +10,11 @@ export { EcoreFileBox } from './flow/EcoreFileBox';
 
 // UI components
 export { ToolsPanel } from './ui/ToolsPanel';
+export { SidebarTabs } from './ui/SidebarTabs';
 export { ConfirmDialog } from './ui/ConfirmDialog';
 export { CreateModelModal } from './ui/CreateModelModal';
+export { KeywordTagsInput } from './ui/KeywordTagsInput';
+export { ToastProvider, useToast } from './ui/ToastProvider';
 
 
 // Auth components

src/components/layout/Header.tsx

@@ -11,7 +11,7 @@ interface HeaderProps {
   onLogout?: () => void;
 }
 
-export function Header({ title = 'Vitruvius Modeler', user, onLogout }: HeaderProps) {
+export function Header({ title = 'Metadologist Dashboard', user, onLogout }: HeaderProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -62,8 +62,9 @@ export function Header({ title = 'Vitruvius Modeler', user, onLogout }: HeaderPr
       right: 0,
       zIndex: 20,
     }}>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
         <h1 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{title}</h1>
+
       </div>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
         <div ref={menuRef} style={{ position: 'relative' }}>
@@ -72,9 +73,9 @@ export function Header({ title = 'Vitruvius Modeler', user, onLogout }: HeaderPr
             aria-haspopup="menu"
             aria-expanded={isMenuOpen}
             title={
-              user?.name || `${user?.givenName || ''} ${user?.familyName || ''}`.trim() || 
-              user?.email || 
-              user?.username || 
+              user?.name || `${user?.givenName || ''} ${user?.familyName || ''}`.trim() ||
+              user?.email ||
+              user?.username ||
               'User menu'
             }
             style={{
@@ -127,7 +128,7 @@ export function Header({ title = 'Vitruvius Modeler', user, onLogout }: HeaderPr
               }}
             >
               {/* User Info Section */}
-              <div style={{ 
+              <div style={{
                 background: '#f8f9fa',
                 padding: '20px',
                 color: '#2c3e50',
@@ -168,7 +169,7 @@ export function Header({ title = 'Vitruvius Modeler', user, onLogout }: HeaderPr
                     )}
                   </div>
                 </div>
-                
+
                 {/* Status Badge */}
                 {user?.emailVerified !== undefined && (
                   <div style={{
@@ -189,9 +190,9 @@ export function Header({ title = 'Vitruvius Modeler', user, onLogout }: HeaderPr
 
               {/* Menu Actions */}
               <div style={{ padding: '16px' }}>
-                <div style={{ 
-                  display: 'flex', 
-                  flexDirection: 'column', 
+                <div style={{
+                  display: 'flex',
+                  flexDirection: 'column',
                   gap: 8,
                 }}>
                   <button