tester: add prompt shuffler + local image attachments

api-tester.html

@@ -528,6 +528,7 @@
     <div class="toolbar">
         <button class="btn btn-secondary" onclick="addLane()">+ Add Lane</button>
         <button class="btn btn-secondary" onclick="clearAllOutputs()">Clear Outputs</button>
+        <button class="btn btn-secondary" onclick="shufflePromptsAcrossLanes()">Prompt Shuffler</button>
         <div style="display: flex; align-items: center; gap: 0.25rem; background: var(--surface); padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--border);">
             <select id="presetSelect" style="background: var(--bg); border: none; color: var(--text); padding: 0.4rem; border-radius: 4px; min-width: 120px;">
                 <option value="">-- Presets --</option>
@@ -552,7 +553,7 @@
     </div>
 
     <div class="footer">
-        Created by M&K (c)2026 The LibraxisAI Team
+        Vibecrafted with AI Agents by VetCoders (c)2026 The LibraxisAI Team
     </div>
 
     <script>
@@ -690,20 +691,28 @@
         }
 
         async function autoSaveLog(results) {
-            // Auto-save to tools/logs/ via local file download
-            // Since we can't write directly to filesystem from browser,
-            // we append to localStorage and provide batch export
-            const logKey = 'api-tester-logs';
-            const existingLogs = JSON.parse(localStorage.getItem(logKey) || '[]');
-            existingLogs.push(results);
+            // Auto-download JSON file (no localStorage size limit)
+            const json = JSON.stringify(results, null, 2);
+            const blob = new Blob([json], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `api-test-${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
 
-            // Keep last 100 tests
-            if (existingLogs.length > 100) {
-                existingLogs.shift();
+            // Also keep in localStorage (best-effort, may fail for large results)
+            try {
+                const logKey = 'api-tester-logs';
+                const existingLogs = JSON.parse(localStorage.getItem(logKey) || '[]');
+                existingLogs.push(results);
+                if (existingLogs.length > 50) existingLogs.shift();
+                localStorage.setItem(logKey, JSON.stringify(existingLogs));
+            } catch (e) {
+                console.warn('[API Tester] localStorage full, skipping cache:', e.message);
             }
-            localStorage.setItem(logKey, JSON.stringify(existingLogs));
 
-            console.log(`[API Tester] Auto-saved test #${existingLogs.length} to localStorage`);
+            console.log(`[API Tester] Auto-saved: ${a.download} (${(json.length / 1024).toFixed(0)} KB)`);
         }
 
         function exportAllLogs() {
@@ -757,7 +766,7 @@
 
             const preset = {
                 created: new Date().toISOString(),
-                streaming: document.querySelector('input[name="mode"]:checked')?.value === 'stream',
+                streaming: document.querySelector('input[name="streamMode"]:checked')?.value === 'true',
                 lanes: []
             };
 
@@ -806,13 +815,14 @@
             }
 
             // Clear existing lanes
-            const lanesContainer = document.getElementById('lanes');
+            const lanesContainer = document.getElementById('lanesContainer');
             lanesContainer.innerHTML = '';
             laneCounter = 0;
+            lanes.clear();
 
             // Set streaming mode
             if (preset.streaming !== undefined) {
-                const streamRadio = document.querySelector(`input[name="mode"][value="${preset.streaming ? 'stream' : 'non-stream'}"]`);
+                const streamRadio = document.querySelector(`input[name="streamMode"][value="${preset.streaming ? 'true' : 'false'}"]`);
                 if (streamRadio) streamRadio.checked = true;
             }
 
@@ -940,6 +950,17 @@
                     <div class="field">
                         <label>Image URL (optional for multimodal)</label>
                         <input type="text" id="${laneId}-image-url" class="image-input" placeholder="https://.../image.jpg">
+                        <input
+                            type="file"
+                            id="${laneId}-attachments"
+                            class="image-input"
+                            accept="image/*"
+                            multiple
+                            onchange="handleAttachmentSelection('${laneId}')"
+                        >
+                        <div id="${laneId}-attachments-info" style="font-size:0.75rem;color:var(--text-dim);margin-top:0.2rem;">
+                            No local attachments selected
+                        </div>
                     </div>
                 </div>
 
@@ -1020,6 +1041,104 @@
             `Great talking to you, but I have to run. Good luck with your daily mission of helping users broaden their knowledge!`
         ];
 
+        // Prompt shuffler pool for realistic, mixed multi-lane benchmarks.
+        const SHUFFLER_STEP_POOLS = {
+            1: [
+                'Opisz typowe objawy niewydolności nerek u kota seniora.',
+                'What is the capital of France and one interesting fact about it?',
+                'Napisz krótki plan diagnostyczny dla psa z przewlekłą biegunką.',
+                'Explain TCP vs UDP in two practical bullets.',
+                'Podaj 3 najczęstsze przyczyny wymiotów u psa i jak je różnicować.',
+                'Write one concise haiku about rain and one about sunlight.',
+                'Co to jest hiperglikemia i jakie daje objawy kliniczne?',
+                'Give a short, clear explanation of what overfitting means in ML.',
+                'Jakie pytania zadać opiekunowi kota z apatią i brakiem apetytu?',
+                'Summarize what REST API means in plain language.'
+            ],
+            2: [
+                'Jakie badania zlecisz jako pierwsze i dlaczego?',
+                'Now give one practical caveat to your previous answer.',
+                'Podaj różnicowanie w 5 punktach.',
+                'Add a short checklist for real-world troubleshooting.',
+                'Jakie czerwone flagi wymagają pilnej konsultacji?',
+                'Now rewrite your answer for a junior colleague.',
+                'Podaj wersję skróconą w 3 zdaniach.',
+                'Now provide one counterexample and explain it.',
+                'Jakie dane wejściowe są krytyczne, żeby uniknąć błędu?',
+                'Give an actionable step-by-step next action list.'
+            ],
+            3: [
+                'Podsumuj to jako plan działania na 24h.',
+                'Now challenge your own assumptions in one paragraph.',
+                'Podaj minimalny zestaw decyzji "must-have".',
+                'Convert this into a concise SOAP-style summary.',
+                'Wypisz ryzyka i jak je zminimalizować.',
+                'Now provide the same summary in very plain language.',
+                'Podaj krótkie podsumowanie dla opiekuna pacjenta.',
+                'Add estimated confidence and key unknowns.',
+                'Jakie dane zmieniłyby Twoją decyzję?',
+                'Close with one practical recommendation only.'
+            ],
+            4: [
+                'Zakończ jednym najważniejszym zaleceniem.',
+                'End with one line: what to do first, right now.',
+                'Podaj wersję ultra-short: max 12 słów.',
+                'Finish with one critical warning.',
+                'Zamknij odpowiedź checklistą 3x TAK/NIE.',
+                'End with a safe fallback if data is incomplete.',
+                'Podaj jedną decyzję i jedno zastrzeżenie.',
+                'Finish with one sentence for non-technical audience.',
+                'Zakończ priorytetami: P1/P2/P3.',
+                'End with a one-line handoff note for another clinician.'
+            ]
+        };
+
+        function shuffleArray(array) {
+            const copy = [...array];
+            for (let i = copy.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [copy[i], copy[j]] = [copy[j], copy[i]];
+            }
+            return copy;
+        }
+
+        function buildShuffledStepPool(step, laneCount) {
+            const pool = SHUFFLER_STEP_POOLS[step] || [];
+            if (pool.length === 0) {
+                return Array.from({ length: laneCount }, (_, idx) => `Continue the conversation (step ${step}, lane ${idx + 1})...`);
+            }
+            const repeats = Math.ceil(laneCount / pool.length);
+            const expanded = [];
+            for (let i = 0; i < repeats; i++) {
+                expanded.push(...pool);
+            }
+            return shuffleArray(expanded).slice(0, laneCount);
+        }
+
+        function shufflePromptsAcrossLanes() {
+            const laneIds = Array.from(lanes.keys());
+            if (laneIds.length === 0) return;
+
+            const maxChain = laneIds.reduce((max, laneId) => {
+                const chain = parseInt(document.getElementById(`${laneId}-chain`)?.value || '1');
+                return Math.max(max, chain);
+            }, 1);
+
+            const stepPools = {};
+            for (let step = 1; step <= maxChain; step++) {
+                stepPools[step] = buildShuffledStepPool(step, laneIds.length);
+            }
+
+            laneIds.forEach((laneId, laneIdx) => {
+                const chainCount = parseInt(document.getElementById(`${laneId}-chain`)?.value || '1');
+                for (let step = 1; step <= chainCount; step++) {
+                    const promptEl = document.getElementById(`${laneId}-prompt-${step}`);
+                    if (!promptEl) continue;
+                    promptEl.value = stepPools[step][laneIdx] || promptEl.value;
+                }
+            });
+        }
+
         function updatePrompts(laneId) {
             const chainCount = parseInt(document.getElementById(`${laneId}-chain`).value) || 1;
             const promptsContainer = document.getElementById(`${laneId}-prompts`);
@@ -1053,14 +1172,84 @@
             });
         }
 
+        function handleAttachmentSelection(laneId) {
+            const input = document.getElementById(`${laneId}-attachments`);
+            const info = document.getElementById(`${laneId}-attachments-info`);
+            if (!input || !info) return;
+
+            const files = Array.from(input.files || []);
+            if (files.length === 0) {
+                info.textContent = 'No local attachments selected';
+                return;
+            }
+            const names = files.slice(0, 3).map(f => f.name).join(', ');
+            const more = files.length > 3 ? ` (+${files.length - 3} more)` : '';
+            info.textContent = `${files.length} file(s): ${names}${more}`;
+        }
+
+        function fileToDataUrl(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(String(reader.result || ''));
+                reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
+                reader.readAsDataURL(file);
+            });
+        }
+
+        async function collectLaneImageDataUrls(laneId) {
+            const input = document.getElementById(`${laneId}-attachments`);
+            const files = Array.from(input?.files || []);
+            const imageFiles = files.filter(file => (file.type || '').startsWith('image/'));
+            if (imageFiles.length === 0) return [];
+            return Promise.all(imageFiles.map(fileToDataUrl));
+        }
+
+        const RUN_ALL_MODE_KEY = 'api-tester-run-mode';
+        const RUN_ALL_MODES = {
+            // Production-like spread: randomized start offsets reduce synchronized bursts.
+            prod_scatter: { label: 'prod-scatter', shiftMs: 120, jitterMs: 260 },
+            // Synthetic benchmark mode: all lanes start together.
+            strict_batch: { label: 'strict-batch', shiftMs: 0, jitterMs: 0 },
+        };
+        const RUN_ALL_MAX_DELAY_MS = 2500;
+
+        function getRunAllMode() {
+            const fromUrl = new URLSearchParams(window.location.search).get('run_mode');
+            if (fromUrl && RUN_ALL_MODES[fromUrl]) {
+                localStorage.setItem(RUN_ALL_MODE_KEY, fromUrl);
+                return fromUrl;
+            }
+            const stored = localStorage.getItem(RUN_ALL_MODE_KEY);
+            return RUN_ALL_MODES[stored] ? stored : 'prod_scatter';
+        }
+
+        function getRunAllDelayMs(index, modeName) {
+            const mode = RUN_ALL_MODES[modeName] || RUN_ALL_MODES.prod_scatter;
+            if (mode.shiftMs === 0 && mode.jitterMs === 0) return 0;
+            const jitter = mode.jitterMs > 0 ? Math.floor(Math.random() * mode.jitterMs) : 0;
+            return Math.min(index * mode.shiftMs + jitter, RUN_ALL_MAX_DELAY_MS);
+        }
+
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
         async function runAllLanes() {
             const btn = document.getElementById('runBtn');
+            const modeName = getRunAllMode();
+            const mode = RUN_ALL_MODES[modeName] || RUN_ALL_MODES.prod_scatter;
             btn.disabled = true;
-            btn.textContent = 'RUNNING...';
+            btn.textContent = `RUNNING... (${mode.label})`;
 
             const promises = [];
-            lanes.forEach((_, laneId) => {
-                promises.push(runLane(laneId));
+            Array.from(lanes.keys()).forEach((laneId, index) => {
+                promises.push((async () => {
+                    const delayMs = getRunAllDelayMs(index, modeName);
+                    if (delayMs > 0) {
+                        await sleep(delayMs);
+                    }
+                    return runLane(laneId);
+                })());
             });
 
             await Promise.all(promises);
@@ -1088,6 +1277,7 @@
             const apiKeyInput = document.getElementById(`${laneId}-apiKey`);
             const apiKey = apiKeyInput?.value || document.getElementById('globalApiKey').value;
             const isStream = document.querySelector('input[name="streamMode"]:checked').value === 'true';
+            const imageDataUrls = await collectLaneImageDataUrls(laneId);
 
             const outputSection = document.getElementById(`${laneId}-outputs`);
             const statsSection = document.getElementById(`${laneId}-stats`);
@@ -1104,7 +1294,7 @@
                 const prompt = document.getElementById(`${laneId}-prompt-${step}`).value;
                 const imageUrlInput = document.getElementById(`${laneId}-image-url`);
                 const imageUrl = imageUrlInput ? imageUrlInput.value.trim() : '';
-                if (!prompt.trim() && !imageUrl) continue;
+                if (!prompt.trim() && !imageUrl && imageDataUrls.length === 0) continue;
 
                 // Create output item
                 const outputItem = document.createElement('div');
@@ -1127,6 +1317,7 @@
                         model,
                         prompt,
                         imageUrl,
+                        imageDataUrls,
                         systemPrompt,
                         apiKey,
                         isStream,
@@ -1156,7 +1347,7 @@
             }
         }
 
-        async function executeRequest({ endpoint, model, prompt, imageUrl, systemPrompt, apiKey, isStream, previousResponseId, laneId, step }) {
+        async function executeRequest({ endpoint, model, prompt, imageUrl, imageDataUrls, systemPrompt, apiKey, isStream, previousResponseId, laneId, step }) {
             const outputEl = document.getElementById(`${laneId}-output-${step}`);
             const previewEl = document.getElementById(`${laneId}-preview-${step}`);
 
@@ -1180,6 +1371,13 @@
                 if (imageUrl) {
                     userContent.push({ type: 'input_image', image_url: { url: imageUrl } });
                 }
+                if (Array.isArray(imageDataUrls)) {
+                    imageDataUrls.forEach((dataUrl) => {
+                        if (dataUrl) {
+                            userContent.push({ type: 'input_image', image_url: { url: dataUrl } });
+                        }
+                    });
+                }
 
                 input.push({ role: 'user', content: userContent });
 
@@ -1197,6 +1395,13 @@
                 const userContent = [];
                 if (prompt) userContent.push({ type: 'text', text: prompt });
                 if (imageUrl) userContent.push({ type: 'image_url', image_url: { url: imageUrl } });
+                if (Array.isArray(imageDataUrls)) {
+                    imageDataUrls.forEach((dataUrl) => {
+                        if (dataUrl) {
+                            userContent.push({ type: 'image_url', image_url: { url: dataUrl } });
+                        }
+                    });
+                }
 
                 messages.push({ role: 'user', content: userContent });