llm-testrunner-components 1.0.4 → 1.0.6

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance } from './index-DBp-rMPb.js';
+import { h, r as registerInstance, c as createEvent } from './index-cncubhtM.js';
 
 class LLMEvaluationEngine {
     constructor() { }
@@ -121,13 +121,54 @@ const ErrorMessage = ({ message, onClear }) => {
     return (h("div", { class: "error-message" }, h("span", null, message), onClear && (h("button", { class: "error-close", title: "Close", onClick: onClear }, "\u00D7"))));
 };
 
+class RateLimitedFetcher {
+    queue = [];
+    delay; // delay in milliseconds
+    intervalId;
+    constructor(delayMs) {
+        this.delay = delayMs;
+    }
+    startQueue() {
+        if (this.intervalId)
+            return;
+        this.intervalId = setInterval(() => {
+            const task = this.queue.shift();
+            if (task)
+                task();
+            if (this.queue.length === 0) {
+                this.stop();
+            }
+        }, this.delay);
+    }
+    schedule(task) {
+        return new Promise((resolve, reject) => {
+            this.queue.push(() => {
+                task().then(resolve).catch(reject);
+            });
+            this.startQueue();
+        });
+    }
+    stop() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = undefined;
+        }
+    }
+    async runAll(tasks) {
+        const promises = tasks.map(task => this.schedule(task));
+        return Promise.all(promises);
+    }
+}
+
 const llmTestRunnerCss = ":host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  background-color: #f8fafc;\n  min-height: 100vh;\n}\n\n.test-runner-container {\n  padding: 20px;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  margin: 20px 0;\n}\n\n.simple-test {\n  margin: 20px 0;\n  padding: 20px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.test-cases {\n  margin: 20px 0;\n}\n\n.test-case {\n  margin: 20px 0;\n  padding: 20px;\n  border: 1px solid #eee;\n  border-radius: 4px;\n  background: #f9f9f9;\n}\n\n.test-case h3 {\n  margin-top: 0;\n  color: #333;\n}\n\n.test-case textarea {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-family: inherit;\n  margin: 10px 0;\n}\n\n.test-case button {\n  background: #007bff;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n  margin: 10px 5px 10px 0;\n}\n\n.test-case button:disabled {\n  background: #ccc;\n  cursor: not-allowed;\n}\n\n.output, .error {\n  margin: 10px 0;\n  padding: 10px;\n  border-radius: 4px;\n}\n\n.output {\n  background: #d4edda;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.error {\n  background: #f8d7da;\n  border: 1px solid #f5c6cb;\n  color: #721c24;\n}\n\n.test-runner-container {\n  max-width: 1400px;\n  margin: 0 auto;\n  background: white;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n}\n\n/* Header Styles */\n.test-runner-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 24px;\n  background: /*linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/ white;\n  color: white;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.header-left, .header-right {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.header-center {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.api-status {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.api-status-text {\n  color: #28a745;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n/* Button Styles */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-decoration: none;\n  position: relative;\n}\n\n.btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none !important;\n}\n\n.btn-primary {\n  color: black;\n  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n}\n\n.btn-primary:hover:not(:disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.2);\n  color: blue;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.3);\n  transform: translateY(-1px);\n}\n\n.btn-outline {\n  background: transparent;\n  color: #6b7280;\n  border: 2px solid #e5e7eb;\n}\n\n.btn-outline:hover {\n  background: #f9fafb;\n  border-color: #d1d5db;\n  transform: translateY(-1px);\n}\n\n.btn-icon {\n  padding: 8px;\n  min-width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n}\n\n.btn-run {\n  color: white;\n}\n\n.btn-run:hover:not(:disabled) {\n  transform: translateY(-1px);\n}\n\n.btn-delete {\n  color: white;\n}\n\n.btn-delete:hover:not(:disabled) {\n  transform: translateY(-1px);\n}\n\n.icon {\n  font-size: 16px;\n}\n\n/* Main Content */\n.test-runner-content {\n  padding: 0;\n}\n\n/* Column Headers */\n.column-headers {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr 0.5fr 120px;\n  gap: 1px;\n  background: #e5e7eb;\n  border-bottom: 2px solid #d1d5db;\n}\n\n.column-header {\n  background: #f8fafc;\n  padding: 16px 20px;\n  font-weight: 600;\n  color: #374151;\n  font-size: 14px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Test Cases */\n.test-cases {\n  background: white;\n}\n\n.test-case-row {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr 0.5fr 120px;\n  gap: 1px;\n  border-bottom: 1px solid #e5e7eb;\n  min-height: 200px;\n}\n\n.test-case-row:hover {\n  background: #f9fafb;\n}\n\n/* Input Column */\n.input-column {\n  padding: 20px;\n  background: white;\n  border-right: 1px solid #e5e7eb;\n}\n\n.input-group {\n  margin-bottom: 16px;\n}\n\n.input-group label {\n  display: block;\n  margin-bottom: 8px;\n  font-weight: 500;\n  color: #374151;\n  font-size: 14px;\n}\n\n.input-group textarea {\n  width: 95%;\n  padding: 12px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 14px;\n  resize: vertical;\n  outline: none;\n  transition: border-color 0.2s ease;\n  font-family: inherit;\n}\n\n.input-group textarea:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Keywords and Links */\n.keywords-group, .links-group {\n  margin-bottom: 16px;\n}\n\n.keywords-group label, .links-group label {\n  display: block;\n  margin-bottom: 8px;\n  font-weight: 500;\n  color: #374151;\n  font-size: 14px;\n}\n\n.tags-container, .links-container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: #dbeafe;\n  color: #1e40af;\n  padding: 4px 8px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.tag-remove {\n  background: none;\n  border: none;\n  color: #1e40af;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.tag-remove:hover {\n  background: rgba(30, 64, 175, 0.1);\n}\n\n.link-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #f0f9ff;\n  padding: 4px 8px;\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.link-item a {\n  color: #0369a1;\n  text-decoration: none;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.link-item a:hover {\n  text-decoration: underline;\n}\n\n.link-remove {\n  background: none;\n  border: none;\n  color: #0369a1;\n  cursor: pointer;\n  font-size: 12px;\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.link-remove:hover {\n  background: rgba(3, 105, 161, 0.1);\n}\n\n.tags-container input, .links-container input {\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  padding: 6px 8px;\n  font-size: 12px;\n  outline: none;\n  min-width: 120px;\n}\n\n.tags-container input:focus, .links-container input:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n\n/* Output Column */\n.output-column {\n  padding: 20px;\n  background: white;\n  border-right: 1px solid #e5e7eb;\n  display: flex;\n  flex-direction: column;\n}\n\n.output-content {\n  background: #f8fafc;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  padding: 16px;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #374151;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  flex: 1;\n  overflow-y: auto;\n  max-height: 250px;\n  overflow-x: scroll;\n}\n\n.output-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9ca3af;\n  font-style: italic;\n  flex: 1;\n  background: #f9fafb;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n}\n\n/* Evaluation Column */\n.evaluation-column {\n  padding: 20px;\n  background: white;\n  border-right: 1px solid #e5e7eb;\n  display: flex;\n  flex-direction: column;\n}\n\n.evaluation-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  flex: 1;\n}\n\n.score-display {\n  text-align: center;\n}\n\n.score-number {\n  font-size: 24px;\n  font-weight: 700;\n  color: #111827;\n  display: block;\n  margin-bottom: 8px;\n}\n\n.score-bar {\n  width: 100%;\n  height: 8px;\n  background: #e5e7eb;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.score-fill {\n  height: 100%;\n  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);\n  transition: width 0.3s ease;\n}\n\n.evaluation-details {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.status {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: bold;\n}\n\n.status.pass {\n  background: #dcfce7;\n  color: #166534;\n}\n\n.status.fail {\n  background: #fef2f2;\n  color: #dc2626;\n}\n\n.evaluation-text {\n  font-size: 12px;\n  color: #6b7280;\n  line-height: 1.4;\n  background: #f9fafb;\n  padding: 8px;\n  border-radius: 6px;\n  border: 1px solid #e5e7eb;\n}\n\n.evaluation-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9ca3af;\n  font-style: italic;\n  flex: 1;\n  background: #f9fafb;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n}\n\n/* New evaluation result styles */\n.evaluation-result {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.evaluation-status {\n  font-weight: 600;\n  font-size: 14px;\n  padding: 8px 12px;\n  border-radius: 4px;\n  text-align: center;\n}\n\n.evaluation-status.passed {\n  background: #d4edda;\n  color: #155724;\n  border: 1px solid #c3e6cb;\n}\n\n.evaluation-status.failed {\n  background: #f8d7da;\n  color: #721c24;\n  border: 1px solid #f5c6cb;\n}\n\n.evaluation-score {\n  font-size: 12px;\n  color: #495057;\n  text-align: center;\n  font-weight: 500;\n}\n\n.evaluation-feedback {\n  font-size: 12px;\n  color: #6c757d;\n  background: #f8f9fa;\n  padding: 8px;\n  border-radius: 4px;\n  border: 1px solid #dee2e6;\n}\n\n/* Actions Column */\n.actions-column {\n  padding: 20px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: flex-start;\n}\n\n/* Add Test Case */\n.add-test-case {\n  padding: 24px;\n  text-align: center;\n  background: #f9fafb;\n  border-top: 1px solid #e5e7eb;\n}\n\n.hidden {\n  display: none;\n}\n\n.error-message {\n  background: #ffeaea;\n  color: #b71c1c;\n  border: 1px solid #f44336;\n  padding: 0.75em 2.5em 0.75em 1em;\n  border-radius: 4px;\n  margin: 1em 0;\n  position: relative;\n  font-size: 1em;\n  display: flex;\n  align-items: center;\n  gap: 1em;\n}\n\n.error-close {\n  background: none;\n  border: none;\n  color: #b71c1c;\n  font-size: 1.25em;\n  font-weight: bold;\n  cursor: pointer;\n  position: absolute;\n  right: 0.75em;\n  top: 50%;\n  transform: translateY(-50%);\n  line-height: 1;\n  padding: 0;\n}\n\n/* Responsive Design */\n@media (max-width: 1200px) {\n  .test-case-row {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n  \n  .column-headers {\n    display: none;\n  }\n  \n  .input-column, .output-column, .evaluation-column, .actions-column {\n    border-right: none;\n    border-bottom: 1px solid #e5e7eb;\n  }\n  \n  .actions-column {\n    flex-direction: row;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 768px) {\n  .test-runner-header {\n    flex-direction: column;\n    gap: 16px;\n    padding: 16px;\n  }\n  \n  .header-left, .header-right {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  \n  .btn {\n    font-size: 12px;\n    padding: 8px 12px;\n  }\n  \n  .input-column, .output-column, .evaluation-column, .actions-column {\n    padding: 16px;\n  }\n  \n  .test-case-row {\n    min-height: auto;\n  }\n}";
 
 const LLMTestRunner = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.llmRequest = createEvent(this, "llmRequest");
     }
-    apiKey;
+    llmRequest;
+    delayMs = 500;
     testCases = [
         {
             id: '1',
@@ -141,15 +182,10 @@ const LLMTestRunner = class {
     error = '';
     fileInput;
     isExportingTestSuite = false;
+    isExportingTestResults = false;
     evaluationEngine;
-    apiUrl = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent';
-    async componentWillLoad() {
+    componentWillLoad() {
         this.evaluationEngine = new LLMEvaluationEngine();
-        console.log('🔍 componentWillLoad - apiKey:', this.apiKey ? 'SET' : 'NOT SET');
-        console.log('🔍 componentWillLoad - apiKey value:', this.apiKey);
-        if (!this.apiKey) {
-            throw new Error('API key is required. Please provide the apiKey prop: <llm-test-runner apiKey="your-api-key" />');
-        }
     }
     componentDidLoad() {
     }
@@ -170,28 +206,39 @@ const LLMTestRunner = class {
     }
     async runSingleTest(testCase) {
         console.log('🚀 Starting test for question:', testCase.question);
+        const startTime = Date.now();
         this.updateTestCase(testCase.id, { isRunning: true });
-        try {
-            const aiResponse = await this.callGeminiAPI(testCase.question);
-            console.log('✅ AI call completed for test case:', testCase.id);
-            this.updateTestCase(testCase.id, {
-                isRunning: false,
-                output: aiResponse,
-                error: null
-            });
-            await this.evaluateResponse({
-                ...testCase,
-                output: aiResponse
-            });
-        }
-        catch (error) {
-            console.error('❌ Error in runSingleTest:', error);
-            this.updateTestCase(testCase.id, {
-                isRunning: false,
-                output: null,
-                error: error instanceof Error ? error.message : 'Unknown error'
+        return new Promise((resolve, reject) => {
+            this.llmRequest.emit({
+                prompt: testCase.question,
+                resolve: async (aiResponse) => {
+                    console.log('✅ AI call completed for test case:', testCase.id);
+                    const endTime = Date.now();
+                    const responseTime = endTime - startTime;
+                    this.updateTestCase(testCase.id, {
+                        isRunning: false,
+                        output: aiResponse,
+                        error: null,
+                        responseTime: responseTime
+                    });
+                    await this.evaluateResponse({
+                        ...testCase,
+                        output: aiResponse,
+                        responseTime: responseTime
+                    });
+                    resolve();
+                },
+                reject: (error) => {
+                    console.error('❌ Error in runSingleTest:', error);
+                    this.updateTestCase(testCase.id, {
+                        isRunning: false,
+                        output: null,
+                        error: error instanceof Error ? error.message : 'Unknown error'
+                    });
+                    reject(error);
+                }
             });
-        }
+        });
     }
     deleteTestCase(id) {
         this.testCases = this.testCases.filter(tc => tc.id !== id);
@@ -230,38 +277,6 @@ const LLMTestRunner = class {
             this.updateTestCase(testCaseId, { expectedSourceLinks: newLinks });
         }
     }
-    async callGeminiAPI(prompt) {
-        console.log('🔍 callGeminiAPI - apiKey:', this.apiKey ? 'SET' : 'NOT SET');
-        console.log('🔍 callGeminiAPI - apiKey value:', this.apiKey ? `${this.apiKey.substring(0, 10)}...` : 'undefined');
-        if (!this.apiKey) {
-            throw new Error('API key is required. Please provide the apiKey prop.');
-        }
-        const requestBody = {
-            contents: [{
-                    parts: [{
-                            text: prompt
-                        }]
-                }]
-        };
-        const response = await fetch(`${this.apiUrl}?key=${this.apiKey}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(requestBody)
-        });
-        if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        if (data.candidates && data.candidates[0] && data.candidates[0].content) {
-            return data.candidates[0].content.parts[0].text;
-        }
-        else {
-            throw new Error('Unexpected response format from Gemini API');
-        }
-    }
     async evaluateResponse(testCase) {
         if (!testCase.output) {
             console.warn('⚠️ No output to evaluate for test case:', testCase.id);
@@ -283,13 +298,21 @@ const LLMTestRunner = class {
     }
     async runAllTests() {
         this.isRunningAll = true;
+        const tasks = [];
         for (const testCase of this.testCases) {
             if (!testCase.isRunning && testCase.question.trim()) {
-                await this.runSingleTest(testCase);
-                // Delay between tests to avoid rate limiting
-                await new Promise(resolve => setTimeout(resolve, 1000));
+                tasks.push(() => this.runSingleTest(testCase).catch(err => {
+                    console.error(`⚠️ Test case ${testCase.id} failed`, err);
+                }));
             }
         }
+        try {
+            const fetcher = new RateLimitedFetcher(this.delayMs);
+            await fetcher.runAll(tasks);
+        }
+        catch (err) {
+            console.error('⚠️ Error running all tests:', err);
+        }
         this.isRunningAll = false;
     }
     generateId() {
@@ -372,8 +395,78 @@ const LLMTestRunner = class {
             this.isExportingTestSuite = false;
         }
     }
+    async handleExportTestResults() {
+        this.isExportingTestResults = true;
+        try {
+            // Create CSV content with the required fields
+            const csvRows = [];
+            // Add header row
+            const headers = [
+                'Question',
+                'Expected Keywords',
+                'Generated Keywords',
+                'Keywords Match',
+                'Expected Source Links',
+                'Generated Source Links',
+                'Source Links Match',
+                'Response Time (s)'
+            ];
+            csvRows.push(headers.join(','));
+            // Add data rows
+            this.testCases.forEach(testCase => {
+                const expectedKeywords = testCase.expectedKeywords.join('; ');
+                const expectedSourceLinks = testCase.expectedSourceLinks.join('; ');
+                let generatedKeywords = '';
+                let generatedSourceLinks = '';
+                let keywordsMatch = '';
+                let sourceLinksMatch = '';
+                if (testCase.evaluationResult) {
+                    const foundKeywords = testCase.evaluationResult.keywordMatches
+                        .filter(match => match.found)
+                        .map(match => match.keyword);
+                    const foundSourceLinks = testCase.evaluationResult.sourceLinkMatches
+                        .filter(match => match.found)
+                        .map(match => match.link);
+                    generatedKeywords = foundKeywords.join('; ');
+                    generatedSourceLinks = foundSourceLinks.join('; ');
+                    // Calculate match percentages
+                    const keywordMatchCount = testCase.evaluationResult.keywordMatches.filter(m => m.found).length;
+                    const totalKeywords = testCase.evaluationResult.keywordMatches.length;
+                    const sourceLinkMatchCount = testCase.evaluationResult.sourceLinkMatches.filter(m => m.found).length;
+                    const totalSourceLinks = testCase.evaluationResult.sourceLinkMatches.length;
+                    keywordsMatch = totalKeywords > 0 ? `${keywordMatchCount}/${totalKeywords}` : 'N/A';
+                    sourceLinksMatch = totalSourceLinks > 0 ? `${sourceLinkMatchCount}/${totalSourceLinks}` : 'N/A';
+                }
+                const responseTime = testCase.responseTime ? (testCase.responseTime / 1000).toFixed(3) : 'N/A';
+                const row = [
+                    this.escapeCsvField(testCase.question),
+                    this.escapeCsvField(expectedKeywords),
+                    this.escapeCsvField(generatedKeywords),
+                    keywordsMatch,
+                    this.escapeCsvField(expectedSourceLinks),
+                    this.escapeCsvField(generatedSourceLinks),
+                    sourceLinksMatch,
+                    responseTime
+                ];
+                csvRows.push(row.join(','));
+            });
+            const csvContent = csvRows.join('\n');
+            // Added a small delay to show the loading state
+            await new Promise(resolve => setTimeout(resolve, 500));
+            this.downloadFile(csvContent, 'test-results.csv', 'text/csv');
+        }
+        finally {
+            this.isExportingTestResults = false;
+        }
+    }
+    escapeCsvField(field) {
+        if (field.includes(',') || field.includes('"') || field.includes('\n')) {
+            return `"${field.replace(/"/g, '""')}"`;
+        }
+        return field;
+    }
     render() {
-        return (h("div", { key: 'dc5b661334cb4d4bb9bf51fb25363fe08ad938e3', class: "test-runner-container" }, h("header", { key: 'eede0d7f00c0bf5ff794fe2e53bad7a239f2d4d4', class: "test-runner-header" }, h("div", { key: '19327ae6f7408843110a10f791e00ffdf3da6d64', class: "header-left" }, h("input", { key: 'b24227b27dc0f562318a67ca9c38b8793b55c644', class: "hidden", type: "file", ref: (el) => (this.fileInput = el), onChange: (e) => this.handleFileChange(e), accept: ".json,application/json" }), h("button", { key: '65adec40d3787115546c9b59e8691bc89c55c688', class: "btn btn-secondary", onClick: () => this.handleFileSelect() }, h("span", { key: '6fd40e85b4c99232330242b41199df1c4f947351', class: "icon" }, "\u2191"), "Import Test Suite"), h("button", { key: 'd7c4d6b7e3e9bb6951395a3c2c10b964ef2d2fca', class: "btn btn-secondary", onClick: () => this.handleExportTestSuite(), disabled: this.isExportingTestSuite }, h("span", { key: 'bab67984c37b2744f35b4b2c34bfa3a500d196fb', class: "icon" }, this.isExportingTestSuite ? '⏳' : '↓'), this.isExportingTestSuite ? 'Exporting...' : 'Export Test Suite')), h("div", { key: '74a7d6e148311151de86a66d7b146bd0d01c215c', class: "header-right" }, h("button", { key: '3e9c33ef795755ebdf11fafa68801294b61a03d1', class: "btn btn-secondary" }, h("span", { key: '89b3582178782392cbea1309ba32b5edc57f9392', class: "icon" }, "\u2699\uFE0F"), "Prompt Editor"), h("button", { key: 'e68e8edd5f532c7a8ec87746fa6d393c4297bc36', class: "btn btn-secondary" }, h("span", { key: '7298d968bbc108cf060a0c309c9a8b2bce88aa90', class: "icon" }, "\u2193"), "Export Test Results"), h("button", { key: 'fb7d10cf9abda9968a2502bd8b4bf8e4cade11e8', class: "btn btn-primary", onClick: () => this.runAllTests(), disabled: this.isRunningAll }, this.isRunningAll ? 'Running...' : 'Run All'))), h(ErrorMessage, { key: '71eb4e561018a176a8c944107d734c32cd74334b', message: this.error, onClear: () => (this.error = '') }), h("div", { key: 'c120a8e40c6c6721dacd400266d4cd6270057c66', class: "test-runner-content" }, h("div", { key: '7b864c6e0671d8be117b001fd87047fabdc851c0', class: "column-headers" }, h("div", { key: 'fcd6ae26d7b98422d800c4e3a4bcec587187be2b', class: "column-header" }, "Input"), h("div", { key: '2855a067b11f8f9ddaf489daffb8a9fd2a317a44', class: "column-header" }, "Output"), h("div", { key: '8b6d75b16005d19bacd8fa6d2008fa64c268e1ef', class: "column-header" }, "Evaluation"), h("div", { key: 'd14ea8cecb426c9692b16044124f3d23ddae671d', class: "column-header" }, "Actions")), h("div", { key: '958aaba85391f7aadabd86c0395d0fe18b942ed4', class: "test-cases" }, this.testCases.map((testCase) => (h("div", { class: "test-case-row", key: testCase.id }, h("div", { class: "input-column" }, h("div", { class: "input-group" }, h("label", null, "Question"), h("textarea", { value: testCase.question, onInput: (e) => this.updateTestCase(testCase.id, {
+        return (h("div", { key: 'beb2ab78108fede00c5d759d1ac5c98ae7f037d0', class: "test-runner-container" }, h("header", { key: 'd09b424069227500ffffcab8724b48d91705baab', class: "test-runner-header" }, h("div", { key: '368ef117a1c2cc0be0446e2d373e38e0af1c2040', class: "header-left" }, h("input", { key: '74346a634b36e9d04f75817495834983d970306c', class: "hidden", type: "file", ref: (el) => (this.fileInput = el), onChange: (e) => this.handleFileChange(e), accept: ".json,application/json" }), h("button", { key: 'e095ff9de105cb281e60f70de02fb0de8a0f6478', class: "btn btn-secondary", onClick: () => this.handleFileSelect() }, h("span", { key: '6f828f297867ae54baf1f89c9dbce611eba2056a', class: "icon" }, "\u2191"), "Import Test Suite"), h("button", { key: '5682dc8f70edac9fdf33b394677a6859555c039b', class: "btn btn-secondary", onClick: () => this.handleExportTestSuite(), disabled: this.isExportingTestSuite }, h("span", { key: 'a1e8d3170ce39e499160e578e3e02d39cd0da9d7', class: "icon" }, this.isExportingTestSuite ? '⏳' : '↓'), this.isExportingTestSuite ? 'Exporting...' : 'Export Test Suite')), h("div", { key: 'af96ea230b04f4f6ce8e3488a1f8f7f2a01e74c0', class: "header-right" }, h("button", { key: 'a90bfb3421f5e2e5112b3642ddf81cf19372e0ad', class: "btn btn-secondary" }, h("span", { key: '79611828e5dc1ad53998a74fca10a1a05c5d2a4e', class: "icon" }, "\u2699\uFE0F"), "Prompt Editor"), h("button", { key: '451367ce26183a58add0902e1de2d29b4933add4', class: "btn btn-secondary", onClick: () => this.handleExportTestResults(), disabled: this.isExportingTestResults }, h("span", { key: '11f791f2071b58e0800d14ac7e6bebba67421449', class: "icon" }, this.isExportingTestResults ? '⏳' : '↓'), this.isExportingTestResults ? 'Exporting...' : 'Export Test Results'), h("button", { key: '3cbf7626ccc5f171cdc6fd7ce3750ea3786218aa', class: "btn btn-primary", onClick: () => this.runAllTests(), disabled: this.isRunningAll }, this.isRunningAll ? 'Running...' : 'Run All'))), h(ErrorMessage, { key: 'ffdd72a1db1f45c5db158d2df0be64dc978fa930', message: this.error, onClear: () => (this.error = '') }), h("div", { key: '64edd5c84c4b566f90d1860f6d6bf5aeafb7ae0f', class: "test-runner-content" }, h("div", { key: '4be27d07a13d88611b5fc54b05e826c790fd2145', class: "column-headers" }, h("div", { key: 'eeb9ace5e63b80359d2decb1b42461f77cfe98cf', class: "column-header" }, "Input"), h("div", { key: 'c70cc5af0aaca2636eee298dfaa4da81799df6cf', class: "column-header" }, "Output"), h("div", { key: '9ca69fddafe7267bf5b8b12601e2cf64d65a58e1', class: "column-header" }, "Evaluation"), h("div", { key: 'b800841828c22a6aad0345e58b47f71469594792', class: "column-header" }, "Actions")), h("div", { key: 'da186e25c2111474f65b89a017158bffdbc83e03', class: "test-cases" }, this.testCases.map((testCase) => (h("div", { class: "test-case-row", key: testCase.id }, h("div", { class: "input-column" }, h("div", { class: "input-group" }, h("label", null, "Question"), h("textarea", { value: testCase.question, onInput: (e) => this.updateTestCase(testCase.id, {
                 question: e.target.value
             }), placeholder: "Enter your question here...", rows: 3 })), h("div", { class: "keywords-group" }, h("label", null, "Expected keywords"), h("div", { class: "tags-container" }, testCase.expectedKeywords.map((keyword, index) => (h("span", { class: "tag", key: index }, keyword, h("button", { class: "tag-remove", onClick: () => this.removeKeyword(testCase.id, index) }, "\u00D7")))), h("input", { type: "text", placeholder: "New item...", onKeyDown: (e) => {
                 if (e.key === 'Enter') {
@@ -385,7 +478,7 @@ const LLMTestRunner = class {
                     this.addSourceLink(testCase.id, e.target.value);
                     e.target.value = '';
                 }
-            } })))), h("div", { class: "output-column" }, testCase.output ? (h("div", { class: "output-content" }, testCase.output)) : (h("div", { class: "output-placeholder" }, testCase.isRunning ? 'Running...' : ''))), h("div", { class: "evaluation-column" }, testCase.evaluationResult ? (h("div", { class: "evaluation-result" }, h("div", { class: `evaluation-status ${testCase.evaluationResult.passed ? 'passed' : 'failed'}` }, testCase.evaluationResult.passed ? '✅ PASSED' : '❌ FAILED'), h("div", { class: "evaluation-details" }, "Keywords: ", testCase.evaluationResult.keywordMatches.filter(m => m.found).length, "/", testCase.evaluationResult.keywordMatches.length, " found"))) : (h("div", { class: "evaluation-placeholder" }, testCase.isRunning ? 'Evaluating...' : ''))), h("div", { class: "actions-column" }, h("button", { class: "btn btn-icon btn-run", onClick: () => this.runSingleTest(testCase), disabled: testCase.isRunning || !testCase.question.trim(), title: !testCase.question.trim() ? "Enter a question first" : "Run this test" }, testCase.isRunning ? '⏳' : '▶️'), h("button", { class: "btn btn-icon btn-delete", onClick: () => this.deleteTestCase(testCase.id), title: "Delete this test" }, "\uD83D\uDDD1\uFE0F")))))), h("div", { key: '678932d3554c7ef2c86373bc4c972eb0f9894916', class: "add-test-case" }, h("button", { key: '7f8447a4681214320647c55e06d1cfc0fc87b3fb', class: "btn btn-outline", onClick: () => this.addNewTestCase() }, "+ Add Question")))));
+            } })))), h("div", { class: "output-column" }, testCase.output ? (h("div", { class: "output-content" }, testCase.output)) : (h("div", { class: "output-placeholder" }, testCase.isRunning ? 'Running...' : ''))), h("div", { class: "evaluation-column" }, testCase.evaluationResult ? (h("div", { class: "evaluation-result" }, h("div", { class: `evaluation-status ${testCase.evaluationResult.passed ? 'passed' : 'failed'}` }, testCase.evaluationResult.passed ? '✅ PASSED' : '❌ FAILED'), h("div", { class: "evaluation-details" }, "Keywords: ", testCase.evaluationResult.keywordMatches.filter(m => m.found).length, "/", testCase.evaluationResult.keywordMatches.length, " found"))) : (h("div", { class: "evaluation-placeholder" }, testCase.isRunning ? 'Evaluating...' : ''))), h("div", { class: "actions-column" }, h("button", { class: "btn btn-icon btn-run", onClick: () => this.runSingleTest(testCase), disabled: testCase.isRunning || !testCase.question.trim(), title: !testCase.question.trim() ? "Enter a question first" : "Run this test" }, testCase.isRunning ? '⏳' : '▶️'), h("button", { class: "btn btn-icon btn-delete", onClick: () => this.deleteTestCase(testCase.id), title: "Delete this test" }, "\uD83D\uDDD1\uFE0F")))))), h("div", { key: '2d4446b15a31adfbaf88b3d46fcbb3cf314f8861', class: "add-test-case" }, h("button", { key: '737e9d856db0f9090923bef718bb9bfde974b950', class: "btn btn-outline", onClick: () => this.addNewTestCase() }, "+ Add Question")))));
     }
 };
 LLMTestRunner.style = llmTestRunnerCss;