gh-here 1.0.2 → 1.0.4

package/public/app.js

@@ -1,16 +1,186 @@
-document.addEventListener('DOMContentLoaded', function() {
+// Octicons directly embedded for frontend use
+const octicons = {
+    'file-directory': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-file-directory" aria-hidden="true"><path d="M0 2.75C0 1.784.784 1 1.75 1H5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1h6.75c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H7.5c-.55 0-1.07-.26-1.4-.7l-.9-1.2a.25.25 0 0 0-.2-.1Z"></path></svg>',
+    'git-commit': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-git-commit" aria-hidden="true"><path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path></svg>',
+    'diff': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-diff" aria-hidden="true"><path d="M8.75 1.75V5H12a.75.75 0 0 1 0 1.5H8.75v3.25a.75.75 0 0 1-1.5 0V6.5H4A.75.75 0 0 1 4 5h3.25V1.75a.75.75 0 0 1 1.5 0ZM4 13h8a.75.75 0 0 1 0 1.5H4A.75.75 0 0 1 4 13Z"></path></svg>',
+    'copy': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-copy" aria-hidden="true"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>',
+    'download': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-download" aria-hidden="true"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path></svg>',
+    'pencil': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-pencil" aria-hidden="true"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path></svg>',
+    'x': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-x" aria-hidden="true"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path></svg>',
+    'check': '<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-check" aria-hidden="true"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg>',
+    
+    // Helper to get an icon with optional classes
+    get(name, options = {}) {
+      const svg = this[name];
+      if (!svg) return `<span class="missing-icon">[${name}]</span>`;
+      
+      if (options.class) {
+        return svg.replace('class="octicon', `class="${options.class} octicon`);
+      }
+      return svg;
+    }
+  };
+
+// Language detection utility - pure function, easily testable
+function getLanguageFromExtension(filename) {
+  const ext = filename.split('.').pop().toLowerCase();
+  const languageMap = {
+    // JavaScript family
+    'js': 'javascript',
+    'mjs': 'javascript', 
+    'jsx': 'javascript',
+    'ts': 'typescript',
+    'tsx': 'typescript',
+    
+    // Web languages
+    'html': 'html',
+    'htm': 'html',
+    'css': 'css',
+    'scss': 'scss',
+    'sass': 'sass',
+    'less': 'less',
+    
+    // Data formats
+    'json': 'json',
+    'xml': 'xml',
+    'yaml': 'yaml',
+    'yml': 'yaml',
+    
+    // Programming languages
+    'py': 'python',
+    'java': 'java',
+    'go': 'go',
+    'rs': 'rust',
+    'php': 'php',
+    'rb': 'ruby',
+    'swift': 'swift',
+    'kt': 'kotlin',
+    'dart': 'dart',
+    
+    // Systems languages
+    'c': 'c',
+    'cpp': 'cpp',
+    'cc': 'cpp',
+    'cxx': 'cpp',
+    'h': 'c',
+    'hpp': 'cpp',
+    
+    // Shell and scripts
+    'sh': 'shell',
+    'bash': 'shell',
+    'zsh': 'shell',
+    'fish': 'shell',
+    'ps1': 'powershell',
+    
+    // Other languages
+    'sql': 'sql',
+    'r': 'r',
+    'scala': 'scala',
+    'clj': 'clojure',
+    'lua': 'lua',
+    'pl': 'perl',
+    'groovy': 'groovy',
+    
+    // Config and text
+    'md': 'markdown',
+    'txt': 'plaintext',
+    'log': 'plaintext'
+  };
   
-  const themeToggle = document.getElementById('theme-toggle');
-  const html = document.documentElement;
-  const searchInput = document.getElementById('file-search');
-  const fileTable = document.getElementById('file-table');
-  const fileEditor = document.getElementById('file-editor');
+  // Special filename handling
+  const basename = filename.toLowerCase();
+  if (basename === 'dockerfile' || basename.startsWith('dockerfile.')) return 'dockerfile';
+  if (basename === 'makefile') return 'makefile';
+  if (basename.startsWith('.env')) return 'dotenv';
+  if (basename === 'package.json' || basename === 'composer.json') return 'json';
   
-  let currentFocusIndex = -1;
-  let fileRows = [];
+  return languageMap[ext] || 'plaintext';
+}
+
+// Draft management utilities - pure functions, easily testable
+const DraftManager = {
+  STORAGE_PREFIX: 'gh-here-draft-',
+  
+  saveDraft(filePath, content) {
+    localStorage.setItem(`${this.STORAGE_PREFIX}${filePath}`, content);
+  },
   
-  // Notification system
-  function showNotification(message, type = 'info') {
+  loadDraft(filePath) {
+    return localStorage.getItem(`${this.STORAGE_PREFIX}${filePath}`);
+  },
+  
+  clearDraft(filePath) {
+    localStorage.removeItem(`${this.STORAGE_PREFIX}${filePath}`);
+  },
+  
+  // Helper to check if draft exists and differs from content
+  hasDraftChanges(filePath, originalContent) {
+    const draft = this.loadDraft(filePath);
+    return draft !== null && draft !== originalContent;
+  },
+  
+  // Get all draft keys for cleanup/debugging
+  getAllDrafts() {
+    const drafts = {};
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key.startsWith(this.STORAGE_PREFIX)) {
+        const filePath = key.replace(this.STORAGE_PREFIX, '');
+        drafts[filePath] = localStorage.getItem(key);
+      }
+    }
+    return drafts;
+  }
+};
+
+// Path utility functions - pure functions, easily testable
+const PathUtils = {
+  // Extract current path from URL parameters
+  getCurrentPath() {
+    const currentUrl = new URL(window.location.href);
+    return currentUrl.searchParams.get('path') || '';
+  },
+
+  // Navigate to parent directory
+  getParentPath(currentPath) {
+    if (!currentPath || currentPath === '') {
+      return null; // Already at root
+    }
+    
+    const pathParts = currentPath.split('/').filter(p => p);
+    if (pathParts.length === 0) {
+      return null; // Already at root
+    }
+    
+    pathParts.pop();
+    return pathParts.join('/');
+  },
+
+  // Build file path from directory and filename
+  buildFilePath(currentPath, filename) {
+    return currentPath ? `${currentPath}/${filename}` : filename;
+  },
+
+  // Get filename from full path
+  getFileName(filePath) {
+    return filePath.split('/').pop() || 'file.txt';
+  },
+
+  // Build URL with encoded path parameter
+  buildPathUrl(basePath, targetPath) {
+    return targetPath ? `${basePath}?path=${encodeURIComponent(targetPath)}` : basePath;
+  },
+
+  // Extract directory path from file path
+  getDirectoryPath(filePath) {
+    const parts = filePath.split('/').filter(p => p);
+    if (parts.length <= 1) return '';
+    return parts.slice(0, -1).join('/');
+  }
+};
+
+// Notification system - global scope for access from commit functions
+function showNotification(message, type = 'info') {
     // Remove existing notifications
     const existingNotifications = document.querySelectorAll('.notification');
     existingNotifications.forEach(n => n.remove());
@@ -28,10 +198,89 @@ document.addEventListener('DOMContentLoaded', function() {
         setTimeout(() => notification.remove(), 300);
       }
     }, 4000);
-  }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  
+  const themeToggle = document.getElementById('theme-toggle');
+  const html = document.documentElement;
+  const searchInput = document.getElementById('file-search');
+  const fileTable = document.getElementById('file-table');
+  
+  let currentFocusIndex = -1;
+  let fileRows = [];
   
   // Removed loading state utilities - not needed for local operations
   
+  // Monaco Editor integration
+  let monacoFileEditor = null;
+  let monacoNewFileEditor = null;
+  
+  // Note: getLanguageFromExtension is now a global utility function
+  
+  // Initialize Monaco Editor
+  function initializeMonaco() {
+    if (typeof require !== 'undefined') {
+      require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.45.0/min/vs' }});
+      
+      require(['vs/editor/editor.main'], function () {
+        // Configure Monaco Editor to work without web workers (avoids CORS issues)
+        self.MonacoEnvironment = {
+          getWorker: function(workerId, label) {
+            // Return undefined to disable workers and use main thread processing
+            // This avoids CORS issues with unpkg CDN while still providing syntax highlighting
+            return undefined;
+          }
+        };
+        
+        // Set Monaco theme based on current theme
+        const currentTheme = html.getAttribute('data-theme');
+        const monacoTheme = currentTheme === 'dark' ? 'vs-dark' : 'vs';
+        monaco.editor.setTheme(monacoTheme);
+        
+        // Initialize new file editor if container exists  
+        const newFileEditorContainer = document.getElementById('new-file-content');
+        if (newFileEditorContainer) {
+          monacoNewFileEditor = monaco.editor.create(newFileEditorContainer, {
+            value: '',
+            language: 'plaintext',
+            theme: monacoTheme,
+            minimap: { enabled: false },
+            lineNumbers: 'on',
+            wordWrap: 'off',
+            scrollBeyondLastLine: false,
+            fontSize: 12,
+            lineHeight: 20,  // Match view mode breathing
+            fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+            padding: { top: 20, bottom: 20, left: 20, right: 20 },
+            renderLineHighlight: 'line',
+            selectOnLineNumbers: true,
+            automaticLayout: true,
+            folding: true,
+            foldingHighlight: true,
+            foldingStrategy: 'auto',
+            showFoldingControls: 'mouseover',
+            bracketPairColorization: { enabled: true },
+            guides: {
+              bracketPairs: true,
+              indentation: true
+            }
+          });
+        }
+        
+        // Set global flag that Monaco is ready
+        window.monacoReady = true;
+      });
+    }
+  }
+  
+  // Initialize Monaco when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeMonaco);
+  } else {
+    initializeMonaco();
+  }
+  
   // Initialize
   updateFileRows();
   
@@ -65,6 +314,12 @@ document.addEventListener('DOMContentLoaded', function() {
     html.setAttribute('data-theme', newTheme);
     localStorage.setItem('gh-here-theme', newTheme);
     updateThemeIcon(newTheme);
+    
+    // Update Monaco editor themes
+    if (typeof monaco !== 'undefined') {
+      const monacoTheme = newTheme === 'dark' ? 'vs-dark' : 'vs';
+      monaco.editor.setTheme(monacoTheme);
+    }
   });
 
   // Gitignore toggle functionality
@@ -189,6 +444,10 @@ document.addEventListener('DOMContentLoaded', function() {
                   <span class="shortcut-desc">Save file (in editor)</span>
                   <div class="shortcut-keys"><kbd>⌘</kbd> <kbd>S</kbd></div>
                 </div>
+                <div class="shortcut-item">
+                  <span class="shortcut-desc">Toggle word wrap (in editor)</span>
+                  <div class="shortcut-keys"><kbd>Alt</kbd> <kbd>Z</kbd></div>
+                </div>
                 <div class="shortcut-item">
                   <span class="shortcut-desc">Close help/cancel</span>
                   <div class="shortcut-keys"><kbd>Esc</kbd></div>
@@ -217,7 +476,7 @@ document.addEventListener('DOMContentLoaded', function() {
   // Keyboard navigation
   document.addEventListener('keydown', function(e) {
     // Handle help overlay first
-    if (e.key === '?' && document.activeElement !== searchInput && document.activeElement !== fileEditor) {
+    if (e.key === '?' && document.activeElement !== searchInput) {
       e.preventDefault();
       showKeyboardHelp();
       return;
@@ -235,7 +494,7 @@ document.addEventListener('DOMContentLoaded', function() {
     // Don't handle shortcuts when editor is active
     const editorContainer = document.getElementById('editor-container');
     if (editorContainer && editorContainer.style.display !== 'none' && 
-        (document.activeElement === fileEditor || editorContainer.contains(document.activeElement))) {
+        editorContainer.contains(document.activeElement)) {
       return;
     }
     
@@ -252,12 +511,10 @@ document.addEventListener('DOMContentLoaded', function() {
 
   if (newFileBtn) {
     newFileBtn.addEventListener('click', function() {
-      const currentUrl = new URL(window.location.href);
-      const currentPath = currentUrl.searchParams.get('path') || '';
+      const currentPath = PathUtils.getCurrentPath();
       
       // Navigate to new file creation mode
-      const newFileUrl = `/new?path=${encodeURIComponent(currentPath)}`;
-      window.location.href = newFileUrl;
+      window.location.href = PathUtils.buildPathUrl('/new', currentPath);
     });
   }
 
@@ -497,7 +754,7 @@ document.addEventListener('DOMContentLoaded', function() {
           if (rowType === 'file') {
             const filePath = focusedRow.dataset.path;
             // Navigate to the file and trigger edit mode
-            window.location.href = `/?path=${encodeURIComponent(filePath)}#edit`;
+            window.location.href = PathUtils.buildPathUrl('/', filePath) + '#edit';
           } else {
             // If we're on a file page, use the edit button
             const editBtn = document.getElementById('edit-btn');
@@ -584,24 +841,15 @@ document.addEventListener('DOMContentLoaded', function() {
   }
   
   function goUpDirectory() {
-    const currentUrl = new URL(window.location.href);
-    const currentPath = currentUrl.searchParams.get('path');
+    const currentPath = PathUtils.getCurrentPath();
+    const newPath = PathUtils.getParentPath(currentPath);
     
-    if (!currentPath || currentPath === '') {
+    if (newPath === null) {
       // Already at root, do nothing
       return;
     }
     
-    const pathParts = currentPath.split('/').filter(p => p);
-    if (pathParts.length === 0) {
-      // Go to root
-      window.location.href = '/';
-    } else {
-      // Go up one directory
-      pathParts.pop();
-      const newPath = pathParts.join('/');
-      window.location.href = `/?path=${encodeURIComponent(newPath)}`;
-    }
+    window.location.href = PathUtils.buildPathUrl('/', newPath);
   }
   
 
@@ -701,37 +949,10 @@ document.addEventListener('DOMContentLoaded', function() {
   const editorContainer = document.getElementById('editor-container');
   const saveBtn = document.getElementById('save-btn');
   const cancelBtn = document.getElementById('cancel-btn');
+  const wordWrapBtn = document.getElementById('word-wrap-btn');
   const fileContent = document.querySelector('.file-content');
 
-  // Line numbers functionality
-  function updateLineNumbers(textarea, lineNumbersDiv) {
-    if (!textarea || !lineNumbersDiv) return;
-    
-    const lines = textarea.value.split('\n');
-    const lineNumbers = lines.map((_, index) => index + 1).join('\n');
-    lineNumbersDiv.textContent = lineNumbers || '1';
-  }
-
-  // Initialize and handle line numbers for both editors
-  const editorLineNumbers = document.getElementById('editor-line-numbers');
-  const newFileContent = document.getElementById('new-file-content');
-  const newFileLineNumbers = document.getElementById('new-file-line-numbers');
-
-  // Get fileEditor reference (declared earlier in the file)
-  if (document.getElementById('file-editor') && editorLineNumbers) {
-    const fileEditorElement = document.getElementById('file-editor');
-    fileEditorElement.addEventListener('input', () => updateLineNumbers(fileEditorElement, editorLineNumbers));
-    fileEditorElement.addEventListener('scroll', () => {
-      editorLineNumbers.scrollTop = fileEditorElement.scrollTop;
-    });
-  }
-
-  if (newFileContent && newFileLineNumbers) {
-    newFileContent.addEventListener('input', () => updateLineNumbers(newFileContent, newFileLineNumbers));
-    newFileContent.addEventListener('scroll', () => {
-      newFileLineNumbers.scrollTop = newFileContent.scrollTop;
-    });
-  }
+  
 
   // Auto-open editor if hash is #edit
   if (window.location.hash === '#edit' && editBtn) {
@@ -740,8 +961,30 @@ document.addEventListener('DOMContentLoaded', function() {
     setTimeout(() => editBtn.click(), 100);
   }
 
-  if (editBtn && editorContainer && fileEditor) {
+  if (editBtn && editorContainer) {
     let originalContent = '';
+    let wordWrapEnabled = false; // Default to disabled
+
+    // Word wrap toggle functionality
+    function toggleWordWrap() {
+      if (monacoFileEditor) {
+        wordWrapEnabled = !wordWrapEnabled;
+        monacoFileEditor.updateOptions({ wordWrap: wordWrapEnabled ? 'on' : 'off' });
+        
+        // Update button appearance
+        if (wordWrapBtn) {
+          wordWrapBtn.classList.toggle('btn-primary', wordWrapEnabled);
+          wordWrapBtn.classList.toggle('btn-secondary', !wordWrapEnabled);
+          wordWrapBtn.textContent = wordWrapEnabled ? '↩ Wrap ON' : '↩ Wrap OFF';
+          wordWrapBtn.title = `Toggle word wrap (Alt+Z) - ${wordWrapEnabled ? 'ON' : 'OFF'}`;
+        }
+      }
+    }
+
+    // Word wrap button click
+    if (wordWrapBtn) {
+      wordWrapBtn.addEventListener('click', toggleWordWrap);
+    }
 
     // Editor keyboard shortcuts
     document.addEventListener('keydown', function(e) {
@@ -751,6 +994,11 @@ document.addEventListener('DOMContentLoaded', function() {
           e.preventDefault();
           saveBtn.click();
         }
+        // Alt+Z to toggle word wrap
+        if (e.altKey && e.key === 'z') {
+          e.preventDefault();
+          toggleWordWrap();
+        }
         // Escape to cancel
         if (e.key === 'Escape') {
           e.preventDefault();
@@ -759,73 +1007,177 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     });
 
-    // Auto-save functionality
-    function saveDraft(filePath, content) {
-      localStorage.setItem(`gh-here-draft-${filePath}`, content);
-    }
+    // Note: Draft management functions are now in global DraftManager object
     
-    function loadDraft(filePath) {
-      return localStorage.getItem(`gh-here-draft-${filePath}`);
-    }
-    
-    function clearDraft(filePath) {
-      localStorage.removeItem(`gh-here-draft-${filePath}`);
+    // Show draft dialog with Load/Discard/Cancel options
+    function showDraftDialog(filePath) {
+      return new Promise((resolve) => {
+        const modal = document.createElement('div');
+        modal.className = 'modal-overlay';
+        modal.innerHTML = `
+          <div class="modal-content draft-modal">
+            <h3>Unsaved Changes Found</h3>
+            <p>You have unsaved changes for this file. What would you like to do?</p>
+            <div class="draft-actions">
+              <button class="btn btn-primary" data-action="load">Load Draft</button>
+              <button class="btn btn-secondary" data-action="discard">Discard Draft</button>
+              <button class="btn btn-secondary" data-action="cancel">Cancel</button>
+            </div>
+          </div>
+        `;
+        
+        modal.addEventListener('click', (e) => {
+          if (e.target.matches('[data-action]') || e.target === modal) {
+            const action = e.target.dataset?.action || 'cancel';
+            modal.remove();
+            resolve(action);
+          }
+        });
+        
+        document.body.appendChild(modal);
+      });
     }
 
-    editBtn.addEventListener('click', function() {
+    editBtn.addEventListener('click', async function() {
       // Get current file path
       const currentUrl = new URL(window.location.href);
       const filePath = currentUrl.searchParams.get('path') || '';
       
       
       // Fetch original file content
-      fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`)
-        .then(response => {
-          if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      try {
+        const response = await fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`);
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const content = await response.text();
+        originalContent = content;
+        
+        // Check for draft
+        const draft = DraftManager.loadDraft(filePath);
+        let contentToLoad = content;
+        
+        if (DraftManager.hasDraftChanges(filePath, content)) {
+          // Show custom draft dialog with 3 options
+          const draftChoice = await showDraftDialog(filePath);
+          if (draftChoice === 'load') {
+            contentToLoad = draft;
+          } else if (draftChoice === 'discard') {
+            DraftManager.clearDraft(filePath);
+            contentToLoad = content;
+          } else {
+            // User cancelled, use original content
+            contentToLoad = content;
           }
-          return response.text();
-        })
-        .then(content => {
-          originalContent = content;
-          
-          // Check for draft
-          const draft = loadDraft(filePath);
-          if (draft && draft !== content) {
-            if (confirm('You have unsaved changes for this file. Load draft?')) {
-              fileEditor.value = draft;
-            } else {
-              fileEditor.value = content;
-              clearDraft(filePath);
+        }
+        
+        if (draft && draft === content) {
+          DraftManager.clearDraft(filePath);
+        }
+        
+        // Create Monaco editor if it doesn't exist
+        if (!monacoFileEditor && window.monacoReady) {
+            const fileEditorContainer = document.getElementById('file-editor');
+            if (fileEditorContainer) {
+              // Get filename reliably from the current URL path parameter
+              const currentUrl = new URL(window.location.href);
+              const filePath = currentUrl.searchParams.get('path') || '';
+              const filename = PathUtils.getFileName(filePath);
+              
+              const language = getLanguageFromExtension(filename);
+              
+              // Validate language exists in Monaco  
+              const availableLanguages = monaco.languages.getLanguages().map(lang => lang.id);
+              const validLanguage = availableLanguages.includes(language) ? language : 'plaintext';
+              
+              const currentTheme = html.getAttribute('data-theme');
+              const monacoTheme = currentTheme === 'dark' ? 'vs-dark' : 'vs';
+              
+              // Ensure Monaco is fully ready before creating editor
+              const createEditorWhenReady = () => {
+                if (monaco && monaco.editor && monaco.languages) {
+                  monacoFileEditor = monaco.editor.create(fileEditorContainer, {
+                value: '',
+                language: validLanguage,
+                theme: monacoTheme,
+                minimap: { enabled: false },
+                lineNumbers: 'on',
+                wordWrap: 'off',
+                scrollBeyondLastLine: false,
+                fontSize: 12,
+                lineHeight: 20,  // Match view mode (12px * 1.5 = 18, but Monaco uses pixels)
+                fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+                padding: { top: 20, bottom: 20, left: 20, right: 20 },
+                renderLineHighlight: 'line',
+                selectOnLineNumbers: true,
+                automaticLayout: true,
+                folding: true,
+                foldingHighlight: true,
+                foldingStrategy: 'auto',
+                showFoldingControls: 'mouseover',
+                bracketPairColorization: { enabled: true },
+                guides: {
+                  bracketPairs: true,
+                  indentation: true
+                }
+              });
+                } else {
+                  // Monaco not fully ready yet, retry
+                  setTimeout(createEditorWhenReady, 10);
+                }
+              };
+              
+              // Start the ready check
+              createEditorWhenReady();
             }
-          } else {
-            fileEditor.value = content;
           }
           
-          fileContent.style.display = 'none';
-          editorContainer.style.display = 'block';
-          fileEditor.focus();
-          
-          // Set up auto-save and update line numbers
-          fileEditor.addEventListener('input', function() {
-            saveDraft(filePath, fileEditor.value);
-          });
-          
-          // Update line numbers for loaded content
-          updateLineNumbers(fileEditor, editorLineNumbers);
-        })
-        .catch(error => {
-          console.error('Error fetching file content:', error);
-          let errorMessage = 'Failed to load file content for editing';
-          if (error.message.includes('HTTP 403')) {
-            errorMessage = 'Access denied: Cannot read this file';
-          } else if (error.message.includes('HTTP 404')) {
-            errorMessage = 'File not found';
-          } else if (error.message.includes('NetworkError') || error.message.includes('Failed to fetch')) {
-            errorMessage = 'Network error: Please check your connection';
-          }
-          showNotification(errorMessage, 'error');
-        });
+          // Set content in Monaco editor - wait for Monaco to be ready
+          const setContentWhenReady = () => {
+            if (monacoFileEditor && window.monacoReady) {
+              // Make sure the editor is visible and properly sized
+              monacoFileEditor.layout();
+              monacoFileEditor.setValue(contentToLoad);
+              
+              // Force another layout after a brief delay to ensure proper sizing
+              setTimeout(() => {
+                monacoFileEditor.layout();
+              }, 50);
+              
+              // Language is already set during editor creation, no need to set it again
+              
+              // Set up auto-save
+              monacoFileEditor.onDidChangeModelContent(() => {
+                DraftManager.saveDraft(filePath, monacoFileEditor.getValue());
+              });
+            } else {
+              // Monaco not ready yet, wait and try again
+              setTimeout(setContentWhenReady, 100);
+            }
+          };
+          setContentWhenReady();
+        
+        // Show editor UI
+        fileContent.style.display = 'none';
+        editorContainer.style.display = 'block';
+        
+        // Focus Monaco editor
+        if (monacoFileEditor) {
+          monacoFileEditor.focus();
+        }
+        
+      } catch (error) {
+        console.error('Error fetching file content:', error);
+        let errorMessage = 'Failed to load file content for editing';
+        if (error.message.includes('HTTP 403')) {
+          errorMessage = 'Access denied: Cannot read this file';
+        } else if (error.message.includes('HTTP 404')) {
+          errorMessage = 'File not found';
+        } else if (error.message.includes('NetworkError') || error.message.includes('Failed to fetch')) {
+          errorMessage = 'Network error: Please check your connection';
+        }
+        showNotification(errorMessage, 'error');
+      }
     });
 
     cancelBtn.addEventListener('click', function() {
@@ -845,7 +1197,7 @@ document.addEventListener('DOMContentLoaded', function() {
         },
         body: JSON.stringify({
           path: filePath,
-          content: fileEditor.value
+          content: monacoFileEditor ? monacoFileEditor.getValue() : ''
         })
       })
       .then(response => {
@@ -857,10 +1209,9 @@ document.addEventListener('DOMContentLoaded', function() {
       .then(data => {
         if (data.success) {
           // Clear draft on successful save
-          clearDraft(filePath);
-          showNotification('File saved successfully', 'success');
+          DraftManager.clearDraft(filePath);
           // Refresh the page to show updated content
-          setTimeout(() => window.location.reload(), 800);
+          window.location.reload();
         } else {
           showNotification('Failed to save file: ' + data.error, 'error');
         }
@@ -888,7 +1239,7 @@ document.addEventListener('DOMContentLoaded', function() {
       const button = e.target.closest('.edit-file-btn');
       const filePath = button.dataset.path;
       // Navigate to the file and trigger edit mode
-      window.location.href = `/?path=${encodeURIComponent(filePath)}#edit`;
+      window.location.href = PathUtils.buildPathUrl('/', filePath) + '#edit';
     }
     
     // Git diff viewer functionality
@@ -1194,13 +1545,27 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // New file interface functionality
   const newFilenameInput = document.getElementById('new-filename-input');
+  
+  // Update Monaco language when filename changes
+  if (newFilenameInput) {
+    newFilenameInput.addEventListener('input', function() {
+      const filename = this.value.trim();
+      if (monacoNewFileEditor && filename) {
+        const language = getLanguageFromExtension(filename);
+        const model = monacoNewFileEditor.getModel();
+        if (model) {
+          monaco.editor.setModelLanguage(model, language);
+        }
+      }
+    });
+  }
   const createNewFileBtn = document.getElementById('create-new-file');
   const cancelNewFileBtn = document.getElementById('cancel-new-file');
 
   if (createNewFileBtn) {
     createNewFileBtn.addEventListener('click', function() {
       const filename = newFilenameInput.value.trim();
-      const content = newFileContent.value;
+      const content = monacoNewFileEditor ? monacoNewFileEditor.getValue() : '';
       
       if (!filename) {
         showNotification('Please enter a filename', 'error');
@@ -1209,8 +1574,7 @@ document.addEventListener('DOMContentLoaded', function() {
       }
       
       
-      const currentUrl = new URL(window.location.href);
-      const currentPath = currentUrl.searchParams.get('path') || '';
+      const currentPath = PathUtils.getCurrentPath();
       
       fetch('/api/create-file', {
         method: 'POST',
@@ -1232,7 +1596,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (data.success) {
           // If there's content, save it
           if (content.trim()) {
-            const filePath = currentPath ? `${currentPath}/${filename}` : filename;
+            const filePath = PathUtils.buildFilePath(currentPath, filename);
             return fetch('/api/save-file', {
               method: 'POST',
               headers: {
@@ -1254,7 +1618,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (data.success) {
           showNotification(`File "${filename}" created successfully`, 'success');
           // Navigate back to the directory or to the new file
-          const redirectPath = currentPath ? `/?path=${encodeURIComponent(currentPath)}` : '/';
+          const redirectPath = PathUtils.buildPathUrl('/', currentPath);
           setTimeout(() => window.location.href = redirectPath, 800);
         } else {
           throw new Error(data.error);
@@ -1277,9 +1641,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
   if (cancelNewFileBtn) {
     cancelNewFileBtn.addEventListener('click', function() {
-      const currentUrl = new URL(window.location.href);
-      const currentPath = currentUrl.searchParams.get('path') || '';
-      const redirectPath = currentPath ? `/?path=${encodeURIComponent(currentPath)}` : '/';
+      const currentPath = PathUtils.getCurrentPath();
+      const redirectPath = PathUtils.buildPathUrl('/', currentPath);
       window.location.href = redirectPath;
     });
   }
@@ -1330,4 +1693,204 @@ document.addEventListener('DOMContentLoaded', function() {
       document.body.removeChild(textArea);
     }
   }
-});
+});
+
+// Simple commit modal functionality
+document.addEventListener('click', (e) => {
+  if (e.target.matches('#commit-btn') || e.target.closest('#commit-btn')) {
+    e.preventDefault();
+    showCommitModal();
+  }
+});
+
+async function showCommitModal() {
+  try {
+    // Get current path from URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentPath = urlParams.get('path') || '';
+    
+    // Fetch git changes from current directory and subdirectories only
+    const response = await fetch(`/api/git-status?currentPath=${encodeURIComponent(currentPath)}`);
+    const data = await response.json();
+    
+    if (!data.success) {
+      showNotification('❌ Failed to load git changes', 'error');
+      return;
+    }
+    
+    const changedFiles = data.changes;
+    
+    if (changedFiles.length === 0) {
+      showNotification('ℹ️ No changes to commit', 'info');
+      return;
+    }
+    
+    showCommitModalWithFiles(changedFiles);
+  } catch (error) {
+    console.error('Error fetching git status:', error);
+    showNotification('❌ Failed to load git changes', 'error');
+  }
+}
+
+function groupFilesByDirectory(files) {
+  const groups = new Map();
+  
+  files.forEach(file => {
+    const parts = file.name.split('/');
+    if (parts.length === 1) {
+      // Root level file
+      if (!groups.has('')) {
+        groups.set('', { directory: null, files: [] });
+      }
+      groups.get('').files.push(file);
+    } else {
+      // File in subdirectory
+      const directory = PathUtils.getDirectoryPath(file.name);
+      if (!groups.has(directory)) {
+        groups.set(directory, { directory, files: [] });
+      }
+      groups.get(directory).files.push(file);
+    }
+  });
+  
+  // Convert to array and sort
+  const result = Array.from(groups.values());
+  result.sort((a, b) => {
+    if (!a.directory && b.directory) return -1; // Root files first
+    if (a.directory && !b.directory) return 1;
+    if (!a.directory && !b.directory) return 0;
+    return a.directory.localeCompare(b.directory);
+  });
+  
+  return result;
+}
+
+async function showCommitModalWithFiles(changedFiles) {
+  // Group files by directory for better display
+  const groupedFiles = groupFilesByDirectory(changedFiles);
+  
+  // Get octicons for the modal
+  const folderIcon = octicons.get('file-directory', { class: 'folder-icon' });
+
+  // Create modal
+  const modal = document.createElement('div');
+  modal.className = 'commit-modal-overlay';
+  modal.innerHTML = `
+    <div class="commit-modal">
+      <div class="commit-modal-header">
+        <h3>Commit Changes</h3>
+        <button class="modal-close">&times;</button>
+      </div>
+      <div class="commit-modal-body">
+        <div class="changed-files">
+          <h4>Changed Files (${changedFiles.length})</h4>
+          <ul class="file-list">
+            ${groupedFiles.map(group => `
+              ${group.directory ? `<li class="directory-group"><strong>${folderIcon} ${group.directory}/</strong></li>` : ''}
+              ${group.files.map(file => `
+                <li class="file-item ${group.directory ? 'indented' : ''}">
+                  <label class="file-checkbox-label">
+                    <input type="checkbox" class="file-checkbox" data-file="${file.name}" checked>
+                    <span class="file-status">${file.status}</span>
+                    <span class="file-name">${group.directory ? file.name.split('/').pop() : file.name}</span>
+                  </label>
+                </li>
+              `).join('')}
+            `).join('')}
+          </ul>
+        </div>
+        <div class="commit-message-section">
+          <textarea id="modal-commit-message" placeholder="Enter commit message..." rows="4"></textarea>
+        </div>
+      </div>
+      <div class="commit-modal-footer">
+        <button class="btn-cancel">Cancel</button>
+        <button class="btn-commit" disabled>Commit Changes</button>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(modal);
+
+  // Handle modal interactions
+  const messageInput = modal.querySelector('#modal-commit-message');
+  const commitBtn = modal.querySelector('.btn-commit');
+  const cancelBtn = modal.querySelector('.btn-cancel');
+  const closeBtn = modal.querySelector('.modal-close');
+
+  // Update commit button based on message and selected files
+  const updateCommitButton = () => {
+    const hasMessage = messageInput.value.trim();
+    const selectedFiles = modal.querySelectorAll('.file-checkbox:checked').length;
+    commitBtn.disabled = !hasMessage || selectedFiles === 0;
+    commitBtn.textContent = selectedFiles > 0 
+      ? `Commit ${selectedFiles} file${selectedFiles === 1 ? '' : 's'}` 
+      : 'No files selected';
+  };
+
+  messageInput.addEventListener('input', updateCommitButton);
+  
+  // Handle checkbox changes
+  modal.querySelectorAll('.file-checkbox').forEach(checkbox => {
+    checkbox.addEventListener('change', updateCommitButton);
+  });
+  
+  // Initial button state
+  updateCommitButton();
+
+  // Close modal handlers
+  const closeModal = () => {
+    document.body.removeChild(modal);
+  };
+
+  cancelBtn.addEventListener('click', closeModal);
+  closeBtn.addEventListener('click', closeModal);
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) closeModal();
+  });
+
+  // Prevent keyboard shortcuts from interfering with the modal
+  modal.addEventListener('keydown', (e) => {
+    e.stopPropagation();
+  });
+
+  // Commit handler
+  commitBtn.addEventListener('click', async () => {
+    const message = messageInput.value.trim();
+    const selectedCheckboxes = modal.querySelectorAll('.file-checkbox:checked');
+    const selectedFiles = Array.from(selectedCheckboxes).map(cb => cb.dataset.file);
+    
+    if (!message || selectedFiles.length === 0) return;
+
+    const originalText = commitBtn.textContent;
+    commitBtn.textContent = 'Committing...';
+    commitBtn.disabled = true;
+
+    try {
+      // Commit selected files
+      const response = await fetch('/api/git-commit-selected', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message, files: selectedFiles })
+      });
+
+      if (response.ok) {
+        showNotification(`✅ Successfully committed ${selectedFiles.length} file${selectedFiles.length === 1 ? '' : 's'}!`, 'success');
+        closeModal();
+        setTimeout(() => location.reload(), 1000);
+      } else {
+        const error = await response.text();
+        showNotification(`❌ Commit failed: ${error}`, 'error');
+        commitBtn.textContent = originalText;
+        commitBtn.disabled = false;
+      }
+    } catch (err) {
+      showNotification('❌ Commit failed', 'error');
+      commitBtn.textContent = originalText;
+      commitBtn.disabled = false;
+    }
+  });
+
+  // Focus the message input
+  messageInput.focus();
+}