feat(docs): update contributing guide with required tools and IDE setup

feat(internal/launchpad): add iframe viewer for prototypes and update links loader

This commit introduces an iframe viewer in the launchpad to display prototypes directly within the application. It also updates the links loader to handle prototype links differently, opening them in the iframe instead of a new tab.

The contributing guide has been updated to include a list of required development tools and recommended IDE setup, ensuring that contributors have the necessary tools to work on the project.

docs/03-contributing.md

@@ -23,9 +23,26 @@ Follow these steps to set up your development environment and gain access to all
     *   Install Enpass (our team's shared password manager).
     *   Ensure you have access to the shared KROW vault for all project credentials (API keys, service accounts, etc.).
 
-5.  **Install Recommended Development Tools:**
+5.  **Install Required Development Tools:**
-    *   **IDE:** We recommend **VS Code** or **Vim/Neovim** for development.
+    
-    *   **Diagramming:** Use **MermaidChart.com** for creating and editing diagrams (Mermaid syntax).
+    Before running the project, ensure you have the following installed:
+
+    *   **Node.js (v20+):** We recommend using **[nvm](https://github.com/nvm-sh/nvm)** (Node Version Manager) to install and manage Node versions.
+    *   **pnpm:** Our preferred package manager for JavaScript projects. (`npm install -g pnpm`)
+    *   **Flutter Version Management (FVM):** We use **[FVM](https://fvm.app/)** to manage Flutter SDK versions per project. Install it via Homebrew (`brew install fvm`) or Dart (`dart pub global activate fvm`).
+    *   **Firebase CLI:** Required for emulation and deployment. (`npm install -g firebase-tools`)
+    *   **Google Cloud CLI (gcloud):** Required for backend authentication and resource management.
+
+    **Recommended IDE:**
+    *   **[Google Project IDX (Antigravity)](https://idx.google.com/)** or **VS Code**.
+    *   **Essential Extensions:**
+        *   Flutter & Dart
+        *   Firebase
+        *   Tailwind CSS IntelliSense
+        *   ESLint & Prettier
+
+    **Diagramming:**
+    *   Use **MermaidChart.com** for creating and editing diagrams (Mermaid syntax).
 
 6.  **Local Development Environment Setup:**
     *   Clone the monorepo: `git clone git@github.com:Oloodi/krow-workforce.git`

internal/launchpad/assets/js/links-loader.js

@@ -46,8 +46,13 @@ async function loadLinks() {
                 </div>
                 
                 <div class="space-y-3">
-                    ${group.links.map(link => `
+                    ${group.links.map(link => {
-                        <a href="${link.url}" target="_blank"
+                        const isPrototype = link.url.startsWith('/prototypes/');
+                        const hrefAttr = isPrototype ? 'href="#"' : `href="${link.url}" target="_blank"`;
+                        const onclickAttr = isPrototype ? `onclick="event.preventDefault(); showView('iframe', this, '${link.url}', '${link.title}')"` : '';
+                        
+                        return `
+                        <a ${hrefAttr} ${onclickAttr}
                            class="flex items-center justify-between p-4 ${link.containerClass} rounded-xl transition-all group">
                             <div class="flex items-center space-x-3">
                                 ${link.iconClass ? `<div class="${link.iconClass}"></div>` : link.iconSvg}
@@ -69,7 +74,7 @@ async function loadLinks() {
                                 </svg>
                             ` : ''}
                         </a>
-                    `).join('')}
+                    `}).join('')}
                 </div>
             </div>
         `).join('');

internal/launchpad/index.html

@@ -310,6 +310,22 @@
                 </div>
             </div>
 
+            <!-- Iframe Viewer (Prototypes) -->
+            <div id="iframe-viewer" class="hidden h-full flex flex-col p-4">
+                <div class="flex items-center justify-between mb-4 px-2">
+                    <h3 id="iframe-title" class="text-xl font-bold text-gray-900"></h3>
+                    <div class="flex items-center space-x-2">
+                        <a id="iframe-external-link" href="#" target="_blank" class="text-sm text-blue-600 hover:underline flex items-center">
+                            Open in new tab
+                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden relative">
+                    <iframe id="content-iframe" class="w-full h-full border-0" src=""></iframe>
+                </div>
+            </div>
+
         </main>
     </div>
 
@@ -454,6 +470,13 @@
         const documentViewer = document.getElementById('document-viewer');
         const documentContainer = document.getElementById('document-container');
         const documentTitle = document.getElementById('document-title');
+        
+        // Iframe Elements
+        const iframeViewer = document.getElementById('iframe-viewer');
+        const iframeContent = document.getElementById('content-iframe');
+        const iframeTitle = document.getElementById('iframe-title');
+        const iframeExternalLink = document.getElementById('iframe-external-link');
+
         const zoomInBtn = document.getElementById('zoomInBtn');
         const zoomOutBtn = document.getElementById('zoomOutBtn');
         const resetBtn = document.getElementById('resetBtn');
@@ -681,16 +704,30 @@
             }
             diagramContainer.innerHTML = '';
             documentContainer.innerHTML = '';
+            // Reset iframe
+            iframeContent.src = 'about:blank';
             currentScale = 1;
 
             if (viewName === 'home') {
                 homeView.classList.remove('hidden');
                 diagramViewer.classList.add('hidden');
                 documentViewer.classList.add('hidden');
+                iframeViewer.classList.add('hidden');
+            } else if (viewName === 'iframe') {
+                // New Iframe View
+                homeView.classList.add('hidden');
+                diagramViewer.classList.add('hidden');
+                documentViewer.classList.add('hidden');
+                iframeViewer.classList.remove('hidden');
+                
+                iframeTitle.textContent = title;
+                iframeExternalLink.href = filePath;
+                iframeContent.src = filePath;
             } else if (viewName === 'diagram') {
                 homeView.classList.add('hidden');
                 diagramViewer.classList.remove('hidden');
                 documentViewer.classList.add('hidden');
+                iframeViewer.classList.add('hidden');
                 diagramTitle.textContent = title;
                 diagramContainer.innerHTML = `
                     <div class="flex flex-col items-center space-y-3">
@@ -766,6 +803,7 @@
                 homeView.classList.add('hidden');
                 diagramViewer.classList.add('hidden');
                 documentViewer.classList.remove('hidden');
+                iframeViewer.classList.add('hidden');
                 documentTitle.textContent = title;
                 documentContainer.innerHTML = `
                     <div class="flex flex-col items-center justify-center space-y-3 py-12">