jay-code
Version:
Streamlined AI CLI orchestration engine with mathematical rigor and enterprise-grade reliability
229 lines (197 loc) • 6.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neural Networks Panel Test - Claude Flow v2.0.0</title>
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #1a1a1a;
color: #e4e4e4;
overflow: hidden;
}
#app {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.test-log {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.9);
border: 1px solid #444;
padding: 15px;
border-radius: 8px;
max-width: 400px;
max-height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
z-index: 10000;
}
.test-log h3 {
margin: 0 0 10px 0;
color: #00ff88;
}
.test-log .log-entry {
margin: 5px 0;
padding: 5px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.test-log .success {
color: #00ff88;
}
.test-log .error {
color: #ff4444;
}
.test-log .info {
color: #44aaff;
}
</style>
</head>
<body>
<div id="app"></div>
<div class="test-log" id="testLog">
<h3>Neural Panel Test Log</h3>
</div>
<script type="module">
import { EnhancedWebUI } from './EnhancedWebUI.js';
// Test logging
const testLog = document.getElementById('testLog');
function log(message, type = 'info') {
const entry = document.createElement('div');
entry.className = `log-entry ${type}`;
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
testLog.appendChild(entry);
testLog.scrollTop = testLog.scrollHeight;
// Also log to console
console.log(`[TEST ${type.toUpperCase()}] ${message}`);
}
// Initialize UI
async function initializeAndTest() {
try {
log('Initializing Enhanced Web UI...', 'info');
const ui = new EnhancedWebUI();
await ui.initialize();
log('✅ UI initialized successfully', 'success');
// Wait for UI to render
setTimeout(() => {
testNeuralPanel();
}, 1000);
} catch (error) {
log(`❌ Initialization failed: ${error.message}`, 'error');
console.error(error);
}
}
// Test the Neural Networks Panel
async function testNeuralPanel() {
log('Starting Neural Networks Panel tests...', 'info');
// Test 1: Find and click Neural button
const neuralButton = document.querySelector(
'[data-view="neural"], button:has-text("Neural"), .neural-button',
);
if (neuralButton) {
log('✅ Found Neural button', 'success');
neuralButton.click();
// Wait for panel to open
setTimeout(() => {
testPanelContents();
}, 500);
} else {
log('❌ Neural button not found', 'error');
// Try alternative approach
const allButtons = document.querySelectorAll('button');
log(`Found ${allButtons.length} buttons total`, 'info');
allButtons.forEach((btn, i) => {
if (btn.textContent.includes('Neural')) {
log(`Found Neural button at index ${i}`, 'success');
btn.click();
}
});
}
}
// Test panel contents
function testPanelContents() {
log('Testing panel contents...', 'info');
// Check if panel is visible
const panel = document.querySelector('.neural-panel, .panel-neural, [data-panel="neural"]');
if (panel) {
log('✅ Neural panel is visible', 'success');
// Test tabs
testTabs();
// Test tools
setTimeout(() => {
testTools();
}, 500);
} else {
log('❌ Neural panel not found', 'error');
}
}
// Test all tabs
function testTabs() {
log('Testing tabs...', 'info');
const tabs = ['Tools', 'Training', 'Models', 'Patterns', 'Performance'];
tabs.forEach((tabName) => {
const tab = document.querySelector(
`[data-tab="${tabName.toLowerCase()}"], button:has-text("${tabName}")`,
);
if (tab) {
log(`✅ Found ${tabName} tab`, 'success');
// Click to test
tab.click();
log(`Clicked ${tabName} tab`, 'info');
} else {
log(`❌ ${tabName} tab not found`, 'error');
}
});
}
// Test tools in Tools tab
function testTools() {
log('Testing tools...', 'info');
// Click Tools tab first
const toolsTab = document.querySelector('[data-tab="tools"], button:has-text("Tools")');
if (toolsTab) {
toolsTab.click();
setTimeout(() => {
// Count tool cards
const toolCards = document.querySelectorAll(
'.tool-card, .neural-tool-card, [data-tool]',
);
log(`Found ${toolCards.length} tool cards`, 'info');
if (toolCards.length === 15) {
log('✅ All 15 tools are displayed', 'success');
} else {
log(`⚠️ Expected 15 tools, found ${toolCards.length}`, 'error');
}
// Test execute buttons
const executeButtons = document.querySelectorAll(
'.execute-btn, button:has-text("Execute")',
);
log(`Found ${executeButtons.length} execute buttons`, 'info');
// Test configure buttons
const configButtons = document.querySelectorAll(
'.config-btn, button:has-text("Configure")',
);
log(`Found ${configButtons.length} configure buttons`, 'info');
// Complete test
completeTest();
}, 500);
}
}
// Complete test
function completeTest() {
log('=== Test Summary ===', 'info');
log('Neural panel testing complete', 'success');
log('Check console for detailed results', 'info');
}
// Start tests
initializeAndTest();
</script>
</body>
</html>