feat: integrate codebase overview modal into main application

steps/index.html

@@ -249,6 +249,10 @@
         class="bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100 border border-green-300 dark:border-green-600 shadow-sm hover:bg-green-200 dark:hover:bg-green-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
         Quick-Start<br>Guide
       </button>
+      <button id="codebase-btn" type="button"
+        class="bg-purple-100 dark:bg-purple-700 text-purple-800 dark:text-purple-100 border border-purple-300 dark:border-purple-600 shadow-sm hover:bg-purple-200 dark:hover:bg-purple-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
+        Codebase<br>Overview
+      </button>
       <button id="shortcuts-btn" type="button"
         class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 border border-blue-300 dark:border-blue-600 shadow-sm hover:bg-blue-200 dark:hover:bg-blue-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
         Keyboard<br>Shortcuts
@@ -624,6 +628,27 @@
     </div>
   </div>
 
+  <!-- CODEBASE OVERVIEW MODAL -->
+  <div id="codebase-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80 backdrop-blur-sm p-4">
+    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full h-full mx-8 my-4 relative flex flex-col">
+      
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-1 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
+        <div class="flex items-center gap-3">
+          <span class="text-3xl"></span>
+          <div>
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white"></h2>
+          </div>
+        </div>
+        <button id="codebase-modal-close-btn"
+          class="px-6 py-2 rounded-lg bg-purple-600 text-white hover:bg-purple-700 font-semibold text-lg">Close</button>
+      </div>
+
+      <!-- Iframe Content -->
+      <iframe id="codebase-iframe" src="code-base-overview.html" class="flex-grow w-full border-0 rounded-b-2xl" style="min-height: 400px;"></iframe>
+    </div>
+  </div>
+
   <div id="modal-container" class="fixed inset-0 z-50 flex items-center justify-center hidden">
     <div id="modal-overlay" class="absolute inset-0 bg-black bg-opacity-50"></div>
     <div id="modal-content"

steps/src/dom.js

@@ -107,6 +107,9 @@ export const shortcutsModalCloseBtn = document.getElementById("shortcuts-modal-c
 export const userManualBtn = document.getElementById("user-manual-btn");
 export const guideModal = document.getElementById("guide-modal");
 export const guideModalCloseBtn = document.getElementById("guide-modal-close-btn");
+export const codebaseBtn = document.getElementById("codebase-btn");
+export const codebaseModal = document.getElementById("codebase-modal");
+export const codebaseModalCloseBtn = document.getElementById("codebase-modal-close-btn");
 
 
 

steps/src/ui.js

@@ -39,6 +39,9 @@ import {
   userManualBtn,
   guideModal,
   guideModalCloseBtn,
+  codebaseBtn,
+  codebaseModal,
+  codebaseModalCloseBtn,
 } from "./dom.js";
 
 function toggleMenu(show) {
@@ -67,6 +70,19 @@ function toggleGuideModal(show) {
   }
 }
 
+function toggleCodebaseModal(show) {
+  if (show) {
+    codebaseModal.classList.remove("hidden");
+    // Reset iframe to ensure it starts at the top
+    const iframe = codebaseModal.querySelector("iframe");
+    if (iframe) {
+        iframe.src = iframe.src;
+    }
+  } else {
+    codebaseModal.classList.add("hidden");
+  }
+}
+
 function handleColorToggles(e) {
   const colorToggles = [
     toggleSnrColor,
@@ -109,6 +125,18 @@ export function initUIEventListeners() {
     }
   });
 
+  // --- Codebase Modal ---
+  codebaseBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    toggleCodebaseModal(true);
+  });
+  codebaseModalCloseBtn.addEventListener("click", () => toggleCodebaseModal(false));
+  codebaseModal.addEventListener("click", (e) => {
+    if (e.target === codebaseModal) {
+        toggleCodebaseModal(false);
+    }
+  });
+  
   // Global Key Listener for 'k' and 'ESC'
   document.addEventListener("keydown", (e) => {
     if (e.key.toLowerCase() === "k") {
@@ -116,10 +144,12 @@ export function initUIEventListeners() {
       const isHidden = shortcutsModal.classList.contains("hidden");
       toggleShortcutsModal(isHidden);
     }
-    // Prioritize closing the guide modal if open, then shortcuts modal
+    // Prioritize closing the guide modal if open, then codebase, then shortcuts
     if (e.key === "Escape") {
         if (!guideModal.classList.contains("hidden")) {
             toggleGuideModal(false);
+        } else if (!codebaseModal.classList.contains("hidden")) {
+            toggleCodebaseModal(false);
         } else if (!shortcutsModal.classList.contains("hidden")) {
             toggleShortcutsModal(false);
         }