From b6a8fa267149e88df466be581875ad9f720491b7 Mon Sep 17 00:00:00 2001
From: Jaakko Vanhala <jaakko.vanhala@kamk.fi>
Date: Thu, 9 Apr 2026 17:04:59 +0300
Subject: [PATCH] =?UTF-8?q?Monaco=20Editor=20-v=C3=A4lilehti:=20selainpohj?=
 =?UTF-8?q?ainen=20koodieditori=20agenttien=20tuottamalle=20koodille?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Uusi "Editor"-välilehti jossa:
- Monaco Editor (VS Coden ydin) CDN:stä, dark-teema
- Tiedostopuu vasemmalla (klikataan tiedostoa)
- Välilehdet ylhäällä (useita tiedostoja auki)
- Kielitunnistus tiedostopäätteestä (Python, Rust, JS, ...)
- "Avaa editorissa" -nappi projektikorteissa

Monaco ladataan taustalla requestIdleCallback:llä — ei hidasta
sivun käynnistymistä. Editor alustetaan vasta kun sitä tarvitaan.

Projektikortin "Avaa editorissa" -nappi:
1. Avaa Editor-välilehden
2. Luo Monaco-mallit jokaiselle tiedostolle
3. Renderöi tiedostopuun ja välilehdet
4. Avaa ensimmäisen tiedoston editoriin

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 network-poc/frontend/src/pages/index.astro | 142 +++++++++++++++++++++
 1 file changed, 142 insertions(+)

diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 80d76a8..47e9cd4 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -15,6 +15,7 @@ import AgentChat from "../components/AgentChat.astro";
         import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
         window.mermaid = mermaid;
     </script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css">
     <link rel="stylesheet" href="/src/styles/global.css">
 <style>
   /* Scoped styles can go here */
@@ -42,6 +43,7 @@ import AgentChat from "../components/AgentChat.astro";
                 <div class="main-tab" onclick="switchMainTab('builder')" data-i18n="tab_builder">Agent Builder</div>
                 <div class="main-tab" onclick="switchMainTab('gallery')" data-i18n="tab_gallery">Galleria</div>
                 <div class="main-tab" onclick="switchMainTab('guide')" data-i18n="tab_guide">Opas</div>
+                <div class="main-tab" onclick="switchMainTab('editor')" data-i18n="tab_editor">Editor</div>
             </div>
             <div style="display: flex; gap: 8px; opacity: 0.65; transform: scale(0.9); transform-origin: bottom right;">
                 <div class="main-tab" onclick="switchMainTab('network')" data-i18n="tab_network">Laskentaverkko</div>
@@ -580,6 +582,24 @@ ZIP-paketti sisältäen:
             </div>
         </div>
 
+        <!-- PANEELI: Editor -->
+        <div id="panel-editor" class="main-panel">
+            <div style="display:flex;height:calc(100vh - 160px);gap:0;border:1px solid var(--border-color);border-radius:6px;overflow:hidden">
+                <!-- Tiedostopuu -->
+                <div id="editor-filetree" style="width:200px;min-width:150px;background:#0d1117;border-right:1px solid var(--border-color);overflow-y:auto;font-family:'Courier New',monospace;font-size:13px">
+                    <div style="padding:10px 12px;color:#8b949e;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border-color)">Tiedostot</div>
+                    <div id="editor-file-list" style="padding:4px 0">
+                        <div style="padding:8px 16px;color:#8b949e;font-size:12px">Ei tiedostoja.<br><br>Generoi projekti:<br><code style="color:#58a6ff">kpn project "..."</code><br>ja klikkaa "Avaa editorissa"</div>
+                    </div>
+                </div>
+                <!-- Monaco Editor -->
+                <div style="flex:1;display:flex;flex-direction:column">
+                    <div id="editor-tabs" style="display:flex;background:#0d1117;border-bottom:1px solid var(--border-color);min-height:35px;align-items:flex-end;padding:0 8px;gap:2px;overflow-x:auto"></div>
+                    <div id="monaco-container" style="flex:1"></div>
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <script type="module" is:inline>
@@ -1683,6 +1703,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
                         <span style="display:flex;gap:6px">
                             <button onclick="copyAllFiles('${cardId}')" style="background:none;border:1px solid #30363d;color:#8b949e;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer" title="Kopioi kaikki tiedostot leikepöydälle">Kopioi kaikki</button>
                             <button onclick="downloadZip('${cardId}')" style="background:none;border:1px solid #30363d;color:#58a6ff;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer" title="Lataa projekti ZIP-tiedostona">Lataa ZIP</button>
+                            <button onclick="openInEditor(JSON.parse(document.getElementById('${cardId}').dataset.files))" style="background:none;border:1px solid #3fb950;color:#3fb950;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer" title="Avaa Monaco-editorissa">Avaa editorissa</button>
                             ${reportUrl ? `<a href="${reportUrl}" target="_blank" style="background:none;border:1px solid #a371f7;color:#a371f7;font-size:11px;padding:2px 8px;border-radius:3px;cursor:pointer;text-decoration:none">📄 Raportti</a>` : ''}
                         </span>
                     </div>
@@ -4525,5 +4546,126 @@ uv run python crew.py "FastAPI + SQLite CRUD API"
             </div>
         </div>
     </div>
+    <!-- Monaco Editor loader -->
+    <script is:inline>
+        // AMD-loader Monacolle
+        window.MonacoEnvironment = {
+            getWorkerUrl: function(workerId, label) {
+                return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
+                    self.MonacoEnvironment = { baseUrl: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/' };
+                    importScripts('https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/base/worker/workerMain.js');
+                `)}`;
+            }
+        };
+
+        // Kielitunnistus tiedostopäätteestä
+        function langFromFilename(name) {
+            const ext = name.split('.').pop().toLowerCase();
+            const map = { py: 'python', rs: 'rust', js: 'javascript', ts: 'typescript', toml: 'toml', json: 'json', html: 'html', css: 'css', md: 'markdown', txt: 'plaintext', yaml: 'yaml', yml: 'yaml', sh: 'shell', sql: 'sql' };
+            return map[ext] || 'plaintext';
+        }
+
+        // Globaali editor-state
+        window._editorFiles = {};   // { "main.py": "code...", ... }
+        window._editorModels = {};  // Monaco-mallit per tiedosto
+        window._activeFile = null;
+        window._monacoEditor = null;
+        window._monacoLoaded = false;
+
+        // Ladataan Monaco taustalla idle-aikana — ei blockata sivun latautumista
+        if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => window.initMonaco(), { timeout: 5000 });
+        } else {
+            setTimeout(() => window.initMonaco(), 3000);
+        }
+
+        window.initMonaco = async function() {
+            if (window._monacoLoaded) return;
+            window._monacoLoaded = true;
+
+            await new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/loader.js';
+                script.onload = () => {
+                    require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs' }});
+                    require(['vs/editor/editor.main'], () => resolve());
+                };
+                document.head.appendChild(script);
+            });
+
+            window._monacoEditor = monaco.editor.create(document.getElementById('monaco-container'), {
+                value: '// Valitse tiedosto vasemmalta tai generoi projekti agentilla\n',
+                language: 'plaintext',
+                theme: 'vs-dark',
+                fontSize: 14,
+                minimap: { enabled: false },
+                lineNumbers: 'on',
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                padding: { top: 10 },
+            });
+        };
+
+        // Avaa tiedostot editoriin (kutsutaan projektikortin "Avaa editorissa" -napista)
+        window.openInEditor = function(files) {
+            window._editorFiles = { ...files };
+
+            // Vaihda Editor-välilehteen
+            if (typeof switchMainTab === 'function') switchMainTab('editor');
+
+            // Alusta Monaco tarvittaessa
+            window.initMonaco().then(() => {
+                // Luo Monaco-mallit
+                for (const [name, code] of Object.entries(files)) {
+                    const lang = langFromFilename(name);
+                    if (window._editorModels[name]) {
+                        window._editorModels[name].setValue(code);
+                    } else {
+                        window._editorModels[name] = monaco.editor.createModel(code, lang);
+                    }
+                }
+
+                // Renderöi tiedostopuu
+                const fileList = document.getElementById('editor-file-list');
+                fileList.innerHTML = Object.keys(files).map(name =>
+                    `<div class="editor-file-item" data-file="${name}" onclick="openEditorFile('${name}')" style="padding:6px 16px;cursor:pointer;color:#c9d1d9;font-size:13px;display:flex;align-items:center;gap:6px;border-left:2px solid transparent">`
+                    + `<span style="color:#8b949e;font-size:11px">${langFromFilename(name) === 'python' ? '🐍' : langFromFilename(name) === 'rust' ? '🦀' : '📄'}</span>`
+                    + `${name}</div>`
+                ).join('');
+
+                // Renderöi välilehdet
+                const tabs = document.getElementById('editor-tabs');
+                tabs.innerHTML = Object.keys(files).map(name =>
+                    `<div class="editor-tab" data-file="${name}" onclick="openEditorFile('${name}')" style="padding:6px 12px;cursor:pointer;font-size:12px;color:#8b949e;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;white-space:nowrap">${name}</div>`
+                ).join('');
+
+                // Avaa ensimmäinen tiedosto
+                const firstName = Object.keys(files)[0];
+                if (firstName) openEditorFile(firstName);
+            });
+        };
+
+        // Vaihda aktiivinen tiedosto
+        window.openEditorFile = function(name) {
+            if (!window._editorModels[name] || !window._monacoEditor) return;
+            window._activeFile = name;
+            window._monacoEditor.setModel(window._editorModels[name]);
+
+            // Päivitä visuaalinen tila
+            document.querySelectorAll('.editor-file-item').forEach(el => {
+                const active = el.dataset.file === name;
+                el.style.background = active ? '#161b22' : 'transparent';
+                el.style.borderLeftColor = active ? '#58a6ff' : 'transparent';
+                el.style.color = active ? '#e6edf3' : '#c9d1d9';
+            });
+            document.querySelectorAll('.editor-tab').forEach(el => {
+                const active = el.dataset.file === name;
+                el.style.background = active ? '#161b22' : 'transparent';
+                el.style.color = active ? '#58a6ff' : '#8b949e';
+                el.style.borderColor = active ? '#30363d' : 'transparent';
+                el.style.borderBottomColor = active ? '#161b22' : 'transparent';
+            });
+        };
+    </script>
 </body>
 </html>