Upload 2 files

index.html

@@ -42,6 +42,7 @@
             background-color: var(--bg-color);
             color: var(--text-main);
             height: 100vh;
+            height: 100dvh;
             display: flex;
             flex-direction: column;
             overflow: hidden;
@@ -83,11 +84,12 @@
         main {
             flex: 1;
             overflow-y: auto;
+            overflow-anchor: none;
+            -webkit-overflow-scrolling: touch;
             padding: 1rem;
             display: flex;
             flex-direction: column;
             gap: 1rem;
-            scroll-behavior: smooth;
         }
 
         /* --- CHAT MESSAGES --- */
@@ -289,12 +291,65 @@
             background-color: var(--surface-color);
             width: 90%;
             max-width: 400px;
+            max-height: 85vh;
+            max-height: 85dvh;
             border-radius: 12px;
             padding: 1.5rem;
             border: 1px solid var(--border-color);
             transform: scale(0.9);
             transition: transform 0.3s;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .modal-body {
+            overflow-y: auto;
+            overflow-x: hidden;
+            padding-right: 0.3rem;
+            margin-right: -0.3rem;
+        }
+
+        .modal-footer {
+            flex-shrink: 0;
+            padding-top: 0.75rem;
+        }
+
+        /* --- MCP SERVERI --- */
+        .mcp-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.6rem;
+            padding: 0.7rem 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .mcp-row:last-child { border-bottom: none; }
+        .mcp-row-toggle {
+            display: flex;
+            align-items: center;
+            gap: 0.7rem;
+            cursor: pointer;
+            flex: 1;
+            min-width: 0;
+        }
+        .mcp-row-toggle input[type="checkbox"] { width: auto; flex-shrink: 0; }
+        .mcp-row-name { font-size: 0.92rem; font-weight: 500; }
+        .mcp-row-note { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; }
+        .mcp-row-status { font-size: 0.72rem; margin-top: 0.15rem; color: var(--text-secondary); }
+        .mcp-row-status.connected { color: #4ade80; }
+        .mcp-row-status.error { color: #f87171; }
+        .mcp-row-status.connecting { color: #fbbf24; }
+        .mcp-remove {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.95rem;
+            flex-shrink: 0;
+            padding: 0.3rem;
         }
+        .mcp-remove:hover { color: #f87171; }
 
         .modal-overlay.open .modal {
             transform: scale(1);
@@ -416,6 +471,70 @@
             background-color: var(--primary-hover);
         }
 
+        /* --- EXECUTE_CODE REZULTAT (formatiran prikaz umjesto sirovog JSON-a) --- */
+        .exec-result {
+            align-self: stretch;
+            width: 100%;
+            max-width: 100%;
+            border-radius: 8px;
+            padding: 0.65rem 0.8rem;
+            margin: 0.15rem 0;
+            font-family: 'Courier New', monospace;
+            font-size: 0.8rem;
+            border: 1px solid var(--border-color);
+            background: var(--surface-color);
+        }
+
+        .exec-result-header {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            font-family: 'Inter', sans-serif;
+            font-weight: 600;
+            font-size: 0.78rem;
+            margin-bottom: 0.4rem;
+        }
+
+        .exec-result.success .exec-result-header { color: #4ade80; }
+        .exec-result.error .exec-result-header { color: #f87171; }
+
+        .exec-result.error {
+            background: rgba(239, 68, 68, 0.08);
+            border-color: rgba(239, 68, 68, 0.35);
+        }
+
+        .exec-result.success {
+            background: rgba(34, 197, 94, 0.06);
+            border-color: rgba(34, 197, 94, 0.3);
+        }
+
+        .exec-error-meta {
+            margin-left: auto;
+            font-weight: 400;
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+            font-family: 'Courier New', monospace;
+        }
+
+        .exec-result-body {
+            white-space: pre-wrap;
+            word-break: break-word;
+            color: var(--text-main);
+        }
+
+        .exec-result-body.error-text {
+            color: #fca5a5;
+        }
+
+        .exec-logs {
+            margin-top: 0.4rem;
+            padding-top: 0.4rem;
+            border-top: 1px solid var(--border-color);
+            color: var(--text-secondary);
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+
         #preview-modal .modal {
             max-width: 95%;
             width: 95%;
@@ -441,9 +560,14 @@
             <i class="fa-solid fa-robot" style="color: var(--primary-color);"></i>
             AgentScope AI
         </div>
-        <button class="settings-btn" id="open-settings" aria-label="Postavke">
-            <i class="fa-solid fa-gear"></i>
-        </button>
+        <div style="display:flex; align-items:center; gap:0.2rem;">
+            <button class="settings-btn" id="open-mcp" aria-label="MCP Serveri" title="MCP Serveri">
+                <i class="fa-solid fa-plug"></i>
+            </button>
+            <button class="settings-btn" id="open-settings" aria-label="Postavke">
+                <i class="fa-solid fa-gear"></i>
+            </button>
+        </div>
     </header>
 
     <!-- Main Chat Area -->
@@ -485,72 +609,107 @@
                 <button class="close-modal" id="close-settings">&times;</button>
             </div>
             
-            <div class="form-group">
-                <label for="provider-select">Provider (API)</label>
-                <select id="provider-select">
-                    <option value="huggingface">Hugging Face (Inference Providers)</option>
-                    <option value="openai">OpenAI</option>
-                    <option value="mistral">Mistral AI</option>
-                    <option value="samba">SambaNova Cloud</option>
-                    <option value="gemini">Google Gemini</option>
-                    <option value="nvidia">NVIDIA NIM</option>
-                    <option value="pollinations">Pollinations AI</option>
-                    <option value="kimi">Kimi (Moonshot AI)</option>
-                    <option value="qwen">Qwen (Alibaba DashScope)</option>
-                </select>
-            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="provider-select">Provider (API)</label>
+                    <select id="provider-select">
+                        <option value="huggingface">Hugging Face (Inference Providers)</option>
+                        <option value="openai">OpenAI</option>
+                        <option value="mistral">Mistral AI</option>
+                        <option value="samba">SambaNova Cloud</option>
+                        <option value="gemini">Google Gemini</option>
+                        <option value="nvidia">NVIDIA NIM</option>
+                        <option value="pollinations">Pollinations AI</option>
+                        <option value="kimi">Kimi (Moonshot AI)</option>
+                        <option value="qwen">Qwen (Alibaba DashScope)</option>
+                    </select>
+                </div>
 
-            <div class="form-group" id="api-key-group">
-                <label for="api-key">API Ključ (Bearer Token)</label>
-                <input type="password" id="api-key" placeholder="Nh... your-key-here">
-                <small style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;">
-                    Ključ se čuva samo lokalno u ovom browseru (localStorage) i šalje se direktno API provideru. Ne deli ovaj uređaj/link s drugima dok je ključ upisan. Kod Pollinations AI ključ je opcionalan za javne modele.
-                </small>
-            </div>
+                <div class="form-group" id="api-key-group">
+                    <label for="api-key">API Ključ (Bearer Token)</label>
+                    <input type="password" id="api-key" placeholder="Nh... your-key-here">
+                    <small style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;">
+                        Ključ se čuva samo lokalno u ovom browseru (localStorage) i šalje se direktno API provideru. Ne deli ovaj uređaj/link s drugima dok je ključ upisan. Kod Pollinations AI ključ je opcionalan za javne modele.
+                    </small>
+                </div>
 
-            <div class="form-group">
-                <label for="model-select">Model</label>
-                <div style="display: flex; gap: 0.5rem;">
-                    <select id="model-select" style="flex: 1;">
-                        <!-- Options will be populated dynamically -->
-                        <option value="" disabled selected>Učitavanje...</option>
-                    </select>
-                    <button type="button" id="refresh-models" title="Osvježi listu modela (dinamički fetch)" style="background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 6px; width: 44px; cursor: pointer;">
-                        <i class="fa-solid fa-rotate"></i>
-                    </button>
+                <div class="form-group">
+                    <label for="model-select">Model</label>
+                    <div style="display: flex; gap: 0.5rem;">
+                        <select id="model-select" style="flex: 1;">
+                            <!-- Options will be populated dynamically -->
+                            <option value="" disabled selected>Učitavanje...</option>
+                        </select>
+                        <button type="button" id="refresh-models" title="Osvježi listu modela (dinamički fetch)" style="background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 6px; width: 44px; cursor: pointer;">
+                            <i class="fa-solid fa-rotate"></i>
+                        </button>
+                    </div>
+                    <small id="model-status" style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;"></small>
+                </div>
+
+                <div class="form-group">
+                    <label for="system-prompt">System Prompt</label>
+                    <input type="text" id="system-prompt" value="Ti si pomoćni asistent. Kada korisnik traži da napraviš nešto vizuelno ili interaktivno (3D scenu, animaciju, igru, sat i sl.), odmah vrati KOMPLETAN izvršiv kod u jednom ```html code bloku (uključi <script> tagove, po potrebi Three.js sa cdnjs.cloudflare.com CDN-a) — nemoj samo najavljivati šta ćeš uraditi, nego odmah generiši gotov kod." placeholder="System instruction...">
+                </div>
+
+                <div class="form-group">
+                    <label for="max-tokens">Max Tokens (odgovor)</label>
+                    <input type="number" id="max-tokens" min="16" max="128000" step="1" value="4096">
+                    <small style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;">
+                        Nema više fiksnog limita od 500 - postavi koliko ti provider/model dozvoljava.
+                    </small>
+                </div>
+
+                <div class="form-group">
+                    <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
+                        <input type="checkbox" id="tools-enabled" checked style="width:auto;">
+                        Omogući Tool Calling & Code Execution
+                    </label>
+                    <small style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;">
+                        Model može pozvati alate: izvršavanje JavaScript koda (sandbox) i kreiranje artifacta (live preview). Ako provider/model ne podržava "tools", aplikacija automatski pokušava ponovo bez njih.
+                    </small>
                 </div>
-                <small id="model-status" style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;"></small>
             </div>
 
-            <div class="form-group">
-                <label for="system-prompt">System Prompt</label>
-                <input type="text" id="system-prompt" value="Ti si pomoćni asistent. Kada korisnik traži da napraviš nešto vizuelno ili interaktivno (3D scenu, animaciju, igru, sat i sl.), odmah vrati KOMPLETAN izvršiv kod u jednom ```html code bloku (uključi <script> tagove, po potrebi Three.js sa cdnjs.cloudflare.com CDN-a) — nemoj samo najavljivati šta ćeš uraditi, nego odmah generiši gotov kod." placeholder="System instruction...">
+            <div class="modal-footer">
+                <button class="save-btn" id="save-settings">Spremi</button>
+                <button class="save-btn" id="clear-settings" style="background-color: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); margin-top: 0.5rem;">Obriši sačuvani API ključ</button>
             </div>
+        </div>
+    </div>
 
-            <div class="form-group">
-                <label for="max-tokens">Max Tokens (odgovor)</label>
-                <input type="number" id="max-tokens" min="16" max="128000" step="1" value="4096">
-                <small style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;">
-                    Nema više fiksnog limita od 500 - postavi koliko ti provider/model dozvoljava.
-                </small>
+    <!-- MCP Servers Modal -->
+    <div class="modal-overlay" id="mcp-modal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title">MCP Serveri</h3>
+                <button class="close-modal" id="close-mcp">&times;</button>
             </div>
 
-            <div class="form-group">
-                <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
-                    <input type="checkbox" id="tools-enabled" checked style="width:auto;">
-                    Omogući Tool Calling & Code Execution
-                </label>
-                <small style="color: var(--text-secondary); display: block; margin-top: 0.4rem; font-size: 0.75rem;">
-                    Model može pozvati alate: izvršavanje JavaScript koda (sandbox) i kreiranje artifacta (live preview). Ako provider/model ne podržava "tools", aplikacija automatski pokušava ponovo bez njih.
+            <div class="modal-body">
+                <div id="mcp-list"></div>
+
+                <div class="form-group" style="margin-top:1rem; border-top:1px solid var(--border-color); padding-top:1rem;">
+                    <label>Dodaj custom MCP server</label>
+                    <input type="text" id="mcp-new-name" placeholder="Naziv (npr. Moj server)">
+                    <input type="text" id="mcp-new-url" placeholder="https://.../mcp" style="margin-top:0.5rem;">
+                    <div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
+                        <input type="text" id="mcp-new-header-name" placeholder="Header naziv (opciono, npr. Authorization)" style="flex:1;">
+                        <input type="password" id="mcp-new-header-value" placeholder="Vrijednost / API ključ" style="flex:1;">
+                    </div>
+                    <button type="button" class="save-btn" id="mcp-add-btn" style="margin-top:0.6rem;">+ Dodaj server</button>
+                </div>
+
+                <small style="color: var(--text-secondary); display: block; margin-top: 0.8rem; font-size: 0.75rem;">
+                    Napomena: aplikacija se povezuje na MCP servere direktno iz browsera (nema backend proxy-ja). Neki serveri ne dozvoljavaju cross-origin (CORS) pozive iz browsera pa mogu prijaviti grešku konekcije - to je ograničenje samog servera, ne aplikacije. Ključevi/tokeni se čuvaju samo lokalno (localStorage).
                 </small>
             </div>
 
-            <button class="save-btn" id="save-settings">Spremi</button>
-            <button class="save-btn" id="clear-settings" style="background-color: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); margin-top: 0.5rem;">Obriši sačuvani API ključ</button>
+            <div class="modal-footer">
+                <button class="save-btn" id="close-mcp-footer">Zatvori</button>
+            </div>
         </div>
     </div>
-
-    <!-- Preview Modal (prikaz generisanog koda: HTML/JS/Three.js itd.) -->
     <div class="modal-overlay" id="preview-modal">
         <div class="modal">
             <div class="modal-header">
@@ -601,7 +760,7 @@
         // --- 2. SERVICE WORKER (Offline Support) ---
         if ('serviceWorker' in navigator) {
             navigator.serviceWorker.register('./sw.js')
-                .then(reg => console.log('SW Registered'))
+                .then(reg => { console.log('SW Registered'); reg.update(); })
                 .catch(err => console.log('SW Failed:', err));
         }
 
@@ -641,9 +800,35 @@
             attachmentChip: document.getElementById('attachment-chip'),
 
             // Sandbox za izvršavanje koda (execute_code alat)
-            execFrame: document.getElementById('exec-frame')
+            execFrame: document.getElementById('exec-frame'),
+
+            // MCP Serveri modal
+            mcpBtn: document.getElementById('open-mcp'),
+            mcpModal: document.getElementById('mcp-modal'),
+            closeMcpBtn: document.getElementById('close-mcp'),
+            closeMcpFooterBtn: document.getElementById('close-mcp-footer'),
+            mcpList: document.getElementById('mcp-list'),
+            mcpNewName: document.getElementById('mcp-new-name'),
+            mcpNewUrl: document.getElementById('mcp-new-url'),
+            mcpNewHeaderName: document.getElementById('mcp-new-header-name'),
+            mcpNewHeaderValue: document.getElementById('mcp-new-header-value'),
+            mcpAddBtn: document.getElementById('mcp-add-btn')
         };
 
+        // --- MCP SERVERI (podrazumijevana lista) ---
+        // Ovo su stvarni, javno dokumentovani remote MCP serveri (Streamable HTTP + JSON-RPC).
+        // NAPOMENA: pošto ova app poziva servere direktno iz browsera (bez backend proxy-ja),
+        // konekcija radi samo ako server eksplicitno dozvoljava cross-origin (CORS) pozive.
+        // Prva 3 rade bez ključa; posljednja 2 traže vlastiti (besplatan) token/ključ koji se
+        // upisuje u polje ispod - ključ ostaje samo u localStorage ovog browsera.
+        const MCP_DEFAULTS = [
+            { id: 'deepwiki', name: 'DeepWiki', url: 'https://mcp.deepwiki.com/mcp', headerName: '', headerValue: '', builtin: true, note: 'Pitanja o javnim GitHub repozitorijima - bez ključa' },
+            { id: 'context7', name: 'Context7', url: 'https://mcp.context7.com/mcp', headerName: 'CONTEXT7_API_KEY', headerValue: '', builtin: true, note: 'Aktuelna dokumentacija biblioteka/frameworka - radi bez ključa (opcioni ključ za veći limit)' },
+            { id: 'usefulai', name: 'Useful AI Tools', url: 'https://api.usefulai.fun/mcp', headerName: '', headerValue: '', builtin: true, note: '340+ pomoćnih alata (konverzije, tekst, kriptografija...) - bez ključa' },
+            { id: 'huggingface', name: 'Hugging Face', url: 'https://huggingface.co/mcp', headerName: 'Authorization', headerValue: '', builtin: true, note: 'Pretraga modela/dataseta/paperа - traži besplatan HF token' },
+            { id: 'github', name: 'GitHub', url: 'https://api.githubcopilot.com/mcp/', headerName: 'Authorization', headerValue: '', builtin: true, note: 'Repo/issues/PR uvid - traži GitHub Personal Access Token' }
+        ];
+
         const App = {
             config: {
                 provider: 'huggingface',
@@ -659,6 +844,9 @@
             // prirodno sa razgovorom (provider/model API sam prijavi grešku ako se pređe kontekst).
             messages: [],
 
+            // MCP serveri (runtime lista, sa statusom konekcije i keširanim tools/list po serveru)
+            mcpServers: [],
+
             // Trenutno priložen fajl (slika ili tekst) čeka da bude poslan uz sljedeću poruku
             pendingAttachment: null,
 
@@ -820,11 +1008,214 @@
 
             init() {
                 this.loadSettings();
+                this.mcpInit();
                 this.loadModelsIntoSelect(this.config.provider, this.config.apiKey);
                 this.bindEvents();
                 this.setupPWAInstall();
             },
 
+            // --- MCP SERVERI ---
+            mcpInit() {
+                let saved = null;
+                try { saved = JSON.parse(localStorage.getItem('agentscope_mcp_servers') || 'null'); } catch (e) { /* ignoriši neispravan JSON */ }
+
+                if (saved && Array.isArray(saved) && saved.length) {
+                    const savedIds = new Set(saved.map(s => s.id));
+                    this.mcpServers = saved.slice();
+                    MCP_DEFAULTS.forEach(d => { if (!savedIds.has(d.id)) this.mcpServers.push({ ...d, enabled: false }); });
+                } else {
+                    this.mcpServers = MCP_DEFAULTS.map(d => ({ ...d, enabled: false }));
+                }
+                this.mcpServers.forEach(s => { s.status = 'idle'; s.tools = null; s.error = null; });
+                this.mcpRenderList();
+
+                // Serveri koji su bili uključeni u prošloj sesiji - tiho pokušaj ponovnu konekciju
+                this.mcpServers.filter(s => s.enabled).forEach(s => this.mcpConnect(s));
+            },
+
+            mcpSave() {
+                const toSave = this.mcpServers.map(({ tools, status, error, ...rest }) => rest);
+                localStorage.setItem('agentscope_mcp_servers', JSON.stringify(toSave));
+            },
+
+            mcpRenderList() {
+                UI.mcpList.innerHTML = '';
+                this.mcpServers.forEach(s => {
+                    const row = document.createElement('div');
+                    row.className = 'mcp-row';
+
+                    const statusText = {
+                        idle: s.enabled ? 'Čeka konekciju...' : 'Isključen',
+                        connecting: 'Povezivanje...',
+                        connected: `Povezan - ${(s.tools || []).length} alat(a)`,
+                        error: 'Greška: ' + (s.error || 'nepoznata')
+                    }[s.status] || '';
+
+                    const label = document.createElement('label');
+                    label.className = 'mcp-row-toggle';
+                    label.innerHTML = `
+                        <input type="checkbox" ${s.enabled ? 'checked' : ''}>
+                        <div>
+                            <div class="mcp-row-name">${this.escapeHtml(s.name)}</div>
+                            ${s.note ? `<div class="mcp-row-note">${this.escapeHtml(s.note)}</div>` : ''}
+                            <div class="mcp-row-status ${s.status}">${this.escapeHtml(statusText)}</div>
+                        </div>`;
+                    label.querySelector('input').addEventListener('change', (e) => this.mcpToggle(s.id, e.target.checked));
+                    if (s.headerName) {
+                        const keyRow = document.createElement('div');
+                        keyRow.style.cssText = 'display:flex; gap:0.4rem; margin-top:0.4rem; width:100%;';
+                        keyRow.innerHTML = `
+                            <input type="password" placeholder="${this.escapeHtml(s.headerName)} (tvoj ključ/token)" value="${this.escapeHtml(s.headerValue || '')}" style="flex:1; padding:0.5rem; font-size:0.8rem;">
+                            <button type="button" class="save-btn" style="width:auto; padding:0.5rem 0.8rem; font-size:0.8rem;">Spremi</button>`;
+                        const keyInput = keyRow.querySelector('input');
+                        keyRow.querySelector('button').addEventListener('click', () => {
+                            s.headerValue = keyInput.value.trim();
+                            this.mcpSave();
+                            if (s.enabled) this.mcpConnect(s);
+                        });
+                        label.querySelector('div').appendChild(keyRow);
+                    }
+                    row.appendChild(label);
+
+                    if (!s.builtin) {
+                        const removeBtn = document.createElement('button');
+                        removeBtn.className = 'mcp-remove';
+                        removeBtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
+                        removeBtn.title = 'Ukloni server';
+                        removeBtn.addEventListener('click', () => this.mcpRemove(s.id));
+                        row.appendChild(removeBtn);
+                    }
+
+                    UI.mcpList.appendChild(row);
+                });
+            },
+
+            mcpToggle(id, checked) {
+                const s = this.mcpServers.find(x => x.id === id);
+                if (!s) return;
+                s.enabled = checked;
+                this.mcpSave();
+                if (checked) {
+                    this.mcpConnect(s);
+                } else {
+                    s.status = 'idle';
+                    s.tools = null;
+                    this.mcpRenderList();
+                }
+            },
+
+            mcpRemove(id) {
+                this.mcpServers = this.mcpServers.filter(s => s.id !== id);
+                this.mcpSave();
+                this.mcpRenderList();
+            },
+
+            mcpAddCustom() {
+                const name = UI.mcpNewName.value.trim();
+                const url = UI.mcpNewUrl.value.trim();
+                const headerName = UI.mcpNewHeaderName.value.trim();
+                const headerValue = UI.mcpNewHeaderValue.value.trim();
+
+                if (!name || !url) {
+                    this.addSystemMessage('⚠️ Unesi barem naziv i URL MCP servera.');
+                    return;
+                }
+
+                this.mcpServers.push({
+                    id: 'custom_' + Date.now(),
+                    name, url, headerName, headerValue,
+                    builtin: false, enabled: false, status: 'idle', tools: null, error: null
+                });
+                UI.mcpNewName.value = '';
+                UI.mcpNewUrl.value = '';
+                UI.mcpNewHeaderName.value = '';
+                UI.mcpNewHeaderValue.value = '';
+                this.mcpSave();
+                this.mcpRenderList();
+            },
+
+            // Šalje jedan JSON-RPC 2.0 zahtjev MCP serveru (Streamable HTTP transport) i vraća
+            // "result" polje odgovora. Podržava i JSON i SSE (text/event-stream) format odgovora,
+            // pošto neki serveri vraćaju jedno, a neki drugo za isti endpoint.
+            async mcpRequest(server, method, params) {
+                const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream' };
+                if (server.headerName && server.headerValue) {
+                    let val = server.headerValue;
+                    if (/^authorization$/i.test(server.headerName) && !/^(bearer|basic)\s/i.test(val)) {
+                        val = 'Bearer ' + val;
+                    }
+                    headers[server.headerName] = val;
+                }
+
+                let response;
+                try {
+                    response = await fetch(server.url, {
+                        method: 'POST',
+                        headers,
+                        body: JSON.stringify({ jsonrpc: '2.0', id: Date.now(), method, params: params || {} })
+                    });
+                } catch (e) {
+                    throw new Error('Konekcija nije uspjela (CORS ili mrežna greška): ' + e.message);
+                }
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+
+                const contentType = response.headers.get('content-type') || '';
+                let payload;
+                if (contentType.includes('text/event-stream')) {
+                    const text = await response.text();
+                    const dataLine = text.split('\n').reverse().find(l => l.startsWith('data:'));
+                    payload = dataLine ? JSON.parse(dataLine.slice(5).trim()) : null;
+                } else {
+                    payload = await response.json().catch(() => null);
+                }
+
+                if (!payload) throw new Error('Prazan ili neočekivan odgovor sa servera.');
+                if (payload.error) throw new Error(payload.error.message || 'MCP greška');
+                return payload.result;
+            },
+
+            async mcpConnect(server) {
+                server.status = 'connecting';
+                server.error = null;
+                this.mcpRenderList();
+                try {
+                    await this.mcpRequest(server, 'initialize', {
+                        protocolVersion: '2024-11-05',
+                        capabilities: {},
+                        clientInfo: { name: 'AgentScope AI', version: '1.0' }
+                    });
+                    const toolsRes = await this.mcpRequest(server, 'tools/list', {});
+                    server.tools = (toolsRes && toolsRes.tools) || [];
+                    server.status = 'connected';
+                } catch (e) {
+                    server.status = 'error';
+                    server.error = e.message;
+                }
+                this.mcpRenderList();
+            },
+
+            // Vraća "tools" definicije (OpenAI-kompatibilan format) za sve povezane MCP servere,
+            // da bi se spojile sa ugrađenim toolDefinitions prije slanja modelu.
+            getMcpToolDefinitions() {
+                const defs = [];
+                this.mcpServers.filter(s => s.enabled && s.status === 'connected' && s.tools).forEach(s => {
+                    s.tools.forEach(t => {
+                        defs.push({
+                            type: 'function',
+                            function: {
+                                name: `mcp__${s.id}__${t.name}`,
+                                description: `[MCP: ${s.name}] ${t.description || ''}`.slice(0, 1000),
+                                parameters: t.inputSchema || { type: 'object', properties: {} }
+                            }
+                        });
+                    });
+                });
+                return defs;
+            },
+
             loadSettings() {
                 const saved = localStorage.getItem('agentscope_settings');
                 if (saved) {
@@ -1004,6 +1395,15 @@
                 });
                 UI.closeSettingsBtn.addEventListener('click', () => UI.modal.classList.remove('open'));
 
+                // MCP Serveri modal
+                UI.mcpBtn.addEventListener('click', () => {
+                    this.mcpRenderList();
+                    UI.mcpModal.classList.add('open');
+                });
+                UI.closeMcpBtn.addEventListener('click', () => UI.mcpModal.classList.remove('open'));
+                UI.closeMcpFooterBtn.addEventListener('click', () => UI.mcpModal.classList.remove('open'));
+                UI.mcpAddBtn.addEventListener('click', () => this.mcpAddCustom());
+
                 // Preview modal (zatvaranje + čišćenje iframe-a da se zaustavi izvršavanje/animacije)
                 UI.closePreviewBtn.addEventListener('click', () => {
                     UI.previewModal.classList.remove('open');
@@ -1162,6 +1562,53 @@ ${code}
                 this.scrollToBottom();
             },
 
+            // Formatiran prikaz rezultata execute_code alata (umjesto sirovog JSON stringa).
+            addExecResultMessage(execResult) {
+                const wrapper = document.createElement('div');
+                wrapper.className = 'exec-result ' + (execResult.success ? 'success' : 'error');
+
+                const header = document.createElement('div');
+                header.className = 'exec-result-header';
+
+                if (execResult.success) {
+                    header.innerHTML = `<i class="fa-solid fa-circle-check"></i><span>Kod izvršen</span>`;
+                } else {
+                    const { type, line } = execResult.error || {};
+                    header.innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i><span>${this.escapeHtml(type || 'Greška')}</span>` +
+                        (line ? `<span class="exec-error-meta">linija ${line}</span>` : '');
+                }
+                wrapper.appendChild(header);
+
+                const body = document.createElement('div');
+                if (execResult.success) {
+                    body.className = 'exec-result-body';
+                    const resultText = execResult.result === null || execResult.result === undefined
+                        ? '(nema povratne vrijednosti)'
+                        : (typeof execResult.result === 'string' ? execResult.result : JSON.stringify(execResult.result, null, 2));
+                    body.textContent = resultText;
+                } else {
+                    body.className = 'exec-result-body error-text';
+                    body.textContent = execResult.error?.message || 'Nepoznata greška.';
+                }
+                wrapper.appendChild(body);
+
+                if (execResult.logs && execResult.logs.length) {
+                    const logs = document.createElement('div');
+                    logs.className = 'exec-logs';
+                    logs.textContent = execResult.logs.join('\n');
+                    wrapper.appendChild(logs);
+                }
+
+                UI.chatContainer.appendChild(wrapper);
+                this.scrollToBottom();
+            },
+
+            escapeHtml(str) {
+                const div = document.createElement('div');
+                div.textContent = str;
+                return div.innerHTML;
+            },
+
             scrollToBottom() {
                 UI.chatContainer.scrollTop = UI.chatContainer.scrollHeight;
             },
@@ -1249,7 +1696,7 @@ ${code}
                 if (toolsEnabled) {
                     data = await this.callChatAPI(cfg, headers, {
                         ...basePayload,
-                        tools: this.toolDefinitions,
+                        tools: [...this.toolDefinitions, ...this.getMcpToolDefinitions()],
                         tool_choice: 'auto'
                     });
                     // Neki provideri/modeli ne podržavaju "tools" parametar uopšte -
@@ -1326,18 +1773,37 @@ ${code}
             // Izvršava alat koji je model pozvao i vraća string/objekat koji se šalje nazad modelu
             async executeTool(name, args) {
                 if (name === 'execute_code') {
-                    return this.runSandboxedCode(args.code || '');
+                    const execResult = await this.runSandboxedCode(args.code || '');
+                    this.addExecResultMessage(execResult);
+                    // Modelu i dalje šaljemo JSON string (kompatibilno sa ranijim ponašanjem)
+                    return JSON.stringify(execResult);
                 }
                 if (name === 'create_artifact') {
                     this.showPreview(args.code || '', args.language || 'html');
                     this.addAIMessage(`🎨 Artifact "${args.title || 'bez naziva'}" je kreiran i prikazan u pregledu.\n\n\`\`\`${args.language || 'html'}\n${args.code || ''}\n\`\`\``);
                     return 'Artifact je uspješno kreiran i prikazan korisniku u live pregledu.';
                 }
+                if (name.startsWith('mcp__')) {
+                    const [, serverId, ...rest] = name.split('__');
+                    const toolName = rest.join('__');
+                    const server = this.mcpServers.find(s => s.id === serverId);
+                    if (!server) return JSON.stringify({ error: 'MCP server nije pronađen.' });
+
+                    this.addSystemMessage(`🔌 MCP poziv: ${server.name} → ${toolName}`);
+                    try {
+                        const result = await this.mcpRequest(server, 'tools/call', { name: toolName, arguments: args });
+                        return typeof result === 'string' ? result : JSON.stringify(result);
+                    } catch (e) {
+                        return JSON.stringify({ error: e.message });
+                    }
+                }
                 return `Nepoznat alat: ${name}`;
             },
 
             // Izvršava proizvoljan JS kod u izolovanom, sandboxed iframe-u (bez pristupa
-            // App/DOM-u glavne stranice) i vraća console.log izlaz + rezultat.
+            // App/DOM-u glavne stranice) i vraća strukturiran objekat:
+            // uspjeh: { success: true, logs: [...], result: ... }
+            // greška: { success: false, logs: [...], error: { type, message, line } }
             runSandboxedCode(code) {
                 return new Promise((resolve) => {
                     const requestId = 'exec_' + Date.now() + '_' + Math.random().toString(36).slice(2);
@@ -1355,17 +1821,26 @@ ${code}
                     const wrapped = `<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>
 <script>
 const __logs = [];
-const __origLog = console.log;
 console.log = (...args) => { __logs.push(args.map(a => { try { return typeof a === 'string' ? a : JSON.stringify(a); } catch(e) { return String(a); } }).join(' ')); };
-let __result;
+let __payload;
 try {
-    __result = (function() {
+    const __result = (function() {
 ${escapedCode}
     })();
+    __payload = { success: true, logs: __logs, result: __result === undefined ? null : __result };
 } catch (e) {
-    __result = 'GREŠKA: ' + e.message;
+    const __lineMatch = e.stack && e.stack.match(/<anonymous>:(\\d+):(\\d+)/);
+    __payload = {
+        success: false,
+        logs: __logs,
+        error: {
+            type: e.name || 'RuntimeError',
+            message: e.message,
+            line: __lineMatch ? parseInt(__lineMatch[1], 10) : null
+        }
+    };
 }
-parent.postMessage({ requestId: '${requestId}', result: JSON.stringify({ logs: __logs, result: __result === undefined ? null : __result }) }, '*');
+parent.postMessage({ requestId: '${requestId}', result: __payload }, '*');
 <\/script>
 </body></html>`;
 
@@ -1374,7 +1849,11 @@ parent.postMessage({ requestId: '${requestId}', result: JSON.stringify({ logs: _
                     setTimeout(() => {
                         if (settled) return;
                         window.removeEventListener('message', handler);
-                        resolve(JSON.stringify({ logs: [], result: 'TIMEOUT: Izvršavanje je trajalo predugo (>5s).' }));
+                        resolve({
+                            success: false,
+                            logs: [],
+                            error: { type: 'TimeoutError', message: 'Izvršavanje je trajalo predugo (>5s).', line: null }
+                        });
                     }, 5000);
                 });
             },

sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'agentscope-v1';
+const CACHE_NAME = 'agentscope-v2';
 const urlsToCache = ['/', './index.html'];
 
 self.addEventListener('install', event => {
@@ -10,12 +10,32 @@ self.addEventListener('install', event => {
 });
 
 self.addEventListener('activate', event => {
-    event.waitUntil(self.clients.claim());
+    event.waitUntil(
+        caches.keys().then(keys =>
+            Promise.all(keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key)))
+        ).then(() => self.clients.claim())
+    );
 });
 
+// Network-first (sa cache fallback-om) za sve GET zahtjeve.
+// Zašto: sa "cache-first" strategijom (stara verzija), jednom keširan
+// index.html bi ostao zauvijek serviran iz cache-a dok se ručno ne
+// promijeni CACHE_NAME ili korisnik ne obriše podatke sajta u browseru -
+// novi upload index.html fajla se ne bi vidio bez toga. Network-first
+// rješava to prirodno: svaki put kad je uređaj online, traži se svježa
+// verzija sa servera; ako fetch uspije, odgovor se i kešira (za offline
+// slučaj); ako fetch ne uspije (offline), vraća se posljednja keširana
+// verzija.
 self.addEventListener('fetch', event => {
+    if (event.request.method !== 'GET') return;
+
     event.respondWith(
-        caches.match(event.request)
-            .then(response => response || fetch(event.request))
+        fetch(event.request)
+            .then(networkResponse => {
+                const responseClone = networkResponse.clone();
+                caches.open(CACHE_NAME).then(cache => cache.put(event.request, responseClone));
+                return networkResponse;
+            })
+            .catch(() => caches.match(event.request).then(cached => cached || caches.match('./index.html')))
     );
 });