Add lane API key + image URL fields

api-tester.html

@@ -464,6 +464,12 @@
             display: none;
         }
 
+        .image-input {
+            margin-top: 0.35rem;
+            font-size: 0.8rem;
+            color: var(--text-dim);
+        }
+
         .notice {
             margin: 0 0 1rem 0;
             padding: 0.75rem 1rem;
@@ -925,7 +931,15 @@
                     </div>
                     <div class="field">
                         <label>System Prompt (optional)</label>
-                        <textarea id="${laneId}-system" placeholder="Jesteś pomocnym asystentem..."></textarea>
+                        <textarea id="${laneId}-system" placeholder="You are a helpful assistant..."></textarea>
+                    </div>
+                    <div class="field">
+                        <label>Lane API Key (overrides global)</label>
+                        <input type="password" id="${laneId}-apiKey" placeholder="optional lane key">
+                    </div>
+                    <div class="field">
+                        <label>Image URL (optional for multimodal)</label>
+                        <input type="text" id="${laneId}-image-url" class="image-input" placeholder="https://.../image.jpg">
                     </div>
                 </div>
 
@@ -1088,7 +1102,9 @@
 
             for (let step = 1; step <= chainCount; step++) {
                 const prompt = document.getElementById(`${laneId}-prompt-${step}`).value;
-                if (!prompt.trim()) continue;
+                const imageUrlInput = document.getElementById(`${laneId}-image-url`);
+                const imageUrl = imageUrlInput ? imageUrlInput.value.trim() : '';
+                if (!prompt.trim() && !imageUrl) continue;
 
                 // Create output item
                 const outputItem = document.createElement('div');
@@ -1110,6 +1126,7 @@
                         endpoint,
                         model,
                         prompt,
+                        imageUrl,
                         systemPrompt,
                         apiKey,
                         isStream,
@@ -1139,7 +1156,7 @@
             }
         }
 
-        async function executeRequest({ endpoint, model, prompt, systemPrompt, apiKey, isStream, previousResponseId, laneId, step }) {
+        async function executeRequest({ endpoint, model, prompt, imageUrl, systemPrompt, apiKey, isStream, previousResponseId, laneId, step }) {
             const outputEl = document.getElementById(`${laneId}-output-${step}`);
             const previewEl = document.getElementById(`${laneId}-preview-${step}`);
 
@@ -1155,10 +1172,16 @@
                 if (systemPrompt) {
                     input.push({ role: 'system', content: systemPrompt });
                 }
-                input.push({
-                    role: 'user',
-                    content: [{ type: 'input_text', text: prompt }]
-                });
+
+                const userContent = [];
+                if (prompt) {
+                    userContent.push({ type: 'input_text', text: prompt });
+                }
+                if (imageUrl) {
+                    userContent.push({ type: 'input_image', image_url: { url: imageUrl } });
+                }
+
+                input.push({ role: 'user', content: userContent });
 
                 body = { model, input, stream: isStream };
                 if (previousResponseId) {
@@ -1170,7 +1193,12 @@
                 if (systemPrompt) {
                     messages.push({ role: 'system', content: systemPrompt });
                 }
-                messages.push({ role: 'user', content: prompt });
+
+                const userContent = [];
+                if (prompt) userContent.push({ type: 'text', text: prompt });
+                if (imageUrl) userContent.push({ type: 'image_url', image_url: { url: imageUrl } });
+
+                messages.push({ role: 'user', content: userContent });
 
                 body = { model, messages, stream: isStream };
             }