vision-navigator 1.0.0

package/public/app.js

@@ -0,0 +1,155 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const runBtn = document.getElementById('runBtn');
+    const yamlInput = document.getElementById('yamlInput');
+    const btnText = document.getElementById('btnText');
+    const loader = document.getElementById('loader');
+    const statusMessage = document.getElementById('statusMessage');
+    const resultsContainer = document.getElementById('resultsContainer');
+    const basePath = window.location.pathname.endsWith('/') ? window.location.pathname : window.location.pathname + '/';
+    const urlFor = (p) => basePath + String(p || '').replace(/^\//, '');
+
+    // Default placeholder
+    yamlInput.value = `steps:
+  - instruction: "Navigate to https://quotes.toscrape.com"
+  - instruction: "Click the 'Login' link"
+  - instruction: "Type 'admin' into the username field"
+  - instruction: "Type 'password' into the password field"
+  - instruction: "Click the 'Login' button"`;
+
+    runBtn.addEventListener('click', async () => {
+        const yamlContent = yamlInput.value.trim();
+        
+        if (!yamlContent) {
+            alert('Please enter a YAML workflow.');
+            return;
+        }
+
+        // Set Loading State
+        runBtn.disabled = true;
+        runBtn.classList.add('opacity-75', 'cursor-not-allowed');
+        btnText.innerText = 'Executing...';
+        loader.classList.remove('hidden');
+        
+        statusMessage.innerText = 'Workflow is currently running. The AI is processing your instructions in a headless browser...';
+        statusMessage.classList.remove('hidden');
+        resultsContainer.innerHTML = '';
+        resultsContainer.classList.add('hidden');
+
+        try {
+            const response = await fetch(urlFor('workflow'), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'text/yaml'
+                },
+                body: yamlContent
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Unknown error occurred');
+            }
+
+            renderResults(data.run?.results || data.results);
+            
+        } catch (error) {
+            statusMessage.innerHTML = `<span class="text-red-600 font-semibold">Error:</span> ${error.message}`;
+        } finally {
+            // Reset Loading State
+            runBtn.disabled = false;
+            runBtn.classList.remove('opacity-75', 'cursor-not-allowed');
+            btnText.innerText = 'Run Workflow';
+            loader.classList.add('hidden');
+        }
+    });
+
+    function renderResults(results) {
+        if (!results || results.length === 0) {
+            statusMessage.innerText = 'Workflow executed but returned no results.';
+            return;
+        }
+
+        statusMessage.classList.add('hidden');
+        resultsContainer.classList.remove('hidden');
+
+        results.forEach((step, index) => {
+            const stepDiv = document.createElement('div');
+            stepDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
+
+            // Header
+            const header = document.createElement('h3');
+            header.className = 'text-lg font-bold text-blue-700 mb-2';
+            header.innerText = `Step ${index + 1}: ${step.step}`;
+            stepDiv.appendChild(header);
+
+            // Action taken
+            if (step.action) {
+                const actionDiv = document.createElement('div');
+                actionDiv.className = 'bg-gray-800 text-green-400 p-3 rounded text-sm font-mono mb-4 whitespace-pre-wrap';
+                
+                // Try to parse action if it's JSON string
+                let displayAction = step.action;
+                try {
+                    const parsed = JSON.parse(step.action);
+                    displayAction = JSON.stringify(parsed, null, 2);
+                } catch(e) {}
+
+                actionDiv.innerText = displayAction;
+                stepDiv.appendChild(actionDiv);
+            }
+
+            // Console Logs
+            if (step.logs && step.logs.length > 0) {
+                const logsDiv = document.createElement('div');
+                logsDiv.className = 'bg-black text-gray-300 p-3 rounded text-xs font-mono mb-4 h-32 overflow-y-auto';
+                
+                const logsTitle = document.createElement('div');
+                logsTitle.className = 'text-gray-500 mb-1 border-b border-gray-700 pb-1';
+                logsTitle.innerText = 'Browser Console Logs:';
+                logsDiv.appendChild(logsTitle);
+
+                step.logs.forEach(log => {
+                    const logLine = document.createElement('div');
+                    logLine.innerText = log;
+                    if (log.includes('ERROR')) logLine.className = 'text-red-400';
+                    else if (log.includes('WARN')) logLine.className = 'text-yellow-400';
+                    logsDiv.appendChild(logLine);
+                });
+                
+                stepDiv.appendChild(logsDiv);
+            }
+
+            // Screenshots
+            if (step.screenshots) {
+                const imgGrid = document.createElement('div');
+                imgGrid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4 mt-4';
+
+                if (step.screenshots.before) {
+                    const beforeDiv = document.createElement('div');
+                    beforeDiv.innerHTML = `
+                        <p class="text-sm font-semibold text-gray-600 mb-1">Before Action</p>
+                        <a href="${urlFor(step.screenshots.before)}" target="_blank">
+                            <img src="${urlFor(step.screenshots.before)}" class="w-full border border-gray-300 rounded shadow-sm hover:opacity-90 transition cursor-pointer" alt="Before">
+                        </a>
+                    `;
+                    imgGrid.appendChild(beforeDiv);
+                }
+
+                if (step.screenshots.after) {
+                    const afterDiv = document.createElement('div');
+                    afterDiv.innerHTML = `
+                        <p class="text-sm font-semibold text-gray-600 mb-1">After Action</p>
+                        <a href="${urlFor(step.screenshots.after)}" target="_blank">
+                            <img src="${urlFor(step.screenshots.after)}" class="w-full border border-gray-300 rounded shadow-sm hover:opacity-90 transition cursor-pointer" alt="After">
+                        </a>
+                    `;
+                    imgGrid.appendChild(afterDiv);
+                }
+
+                stepDiv.appendChild(imgGrid);
+            }
+
+            resultsContainer.appendChild(stepDiv);
+        });
+    }
+});