Spaces:

0xKirito
/

Agent-system1

Running

App Files Files Community

0xKirito commited on Jun 18, 2025

Commit

baf4607

verified ·

1 Parent(s): ce95774

Update index.html

Browse files

Files changed (1) hide show

index.html +506 -8

index.html CHANGED Viewed

@@ -1,4 +1,5 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -179,7 +180,7 @@
         .task-header {
             display: flex;
-            justify-content: space-between; /* Fixed this */
             align-items: center;
             margin-bottom: 8px;
         }
@@ -382,7 +383,6 @@
     </style>
 </head>
 <body>
-    <!-- Your existing HTML body content stays the same -->
     <div class="container">
         <div class="header">
             <h1>🤖 Advanced Agent System</h1>
@@ -628,8 +628,506 @@
         }
         class ScheduledProcessor extends BaseProcessor {
-            async execute(task, agentSystem) {
-                agentSystem.log(`Processing scheduled task: ${task.id}`, 'info');
-                const result = await super.execute(task, agentSystem);
-                result.type = 'scheduled_task';
-                result.scheduledFor = task.parameters?.scheduledTime || 'immediate

+            }
+  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
         .task-header {
             display: flex;
+            justify-content: space-between;
             align-items: center;
             margin-bottom: 8px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <h1>🤖 Advanced Agent System</h1>
         }
         class ScheduledProcessor extends BaseProcessor {
+    async execute(task, agentSystem) {
+        agentSystem.log(`Processing scheduled task: ${task.id}`, 'info');
+        const result = await super.execute(task, agentSystem);
+        result.type = 'scheduled_task';
+        result.scheduledFor = task.parameters?.scheduledTime || 'immediate';
+        return result;
+    }
+}
+class MonitoringProcessor extends BaseProcessor {
+    async execute(task, agentSystem) {
+        agentSystem.log(`Processing monitoring task: ${task.id}`, 'info');
+        // Simulate monitoring checks
+        const checks = ['System Health', 'Database Status', 'Agent Status', 'Task Queue'];
+        const results = {};
+        for (const check of checks) {
+            await new Promise(resolve => setTimeout(resolve, 300));
+            results[check] = Math.random() > 0.8 ? 'Warning' : 'OK';
+        }
+        return {
+            processed: true,
+            result: 'Monitoring completed',
+            checks: results,
+            timestamp: new Date().toISOString()
+        };
+    }
+}
+// Enhanced Agent System with proper queue management
+class EnhancedAgentSystem {
+    constructor() {
+        this.db = new DatabaseManager();
+        this.taskEngine = null;
+        this.agents = new Map();
+        this.tasks = [];
+        this.logs = [];
+        this.isInitialized = false;
+        this.processingQueue = false; // FIXED: Added this flag
+        this.init();
+    }
+    async init() {
+        console.log('🚀 Initializing Enhanced Agent System...');
+        // Wait for database to be ready
+        await new Promise(resolve => {
+            const checkDb = () => {
+                if (this.db.connected) {
+                    resolve();
+                } else {
+                    setTimeout(checkDb, 100);
+                }
+            };
+            checkDb();
+        });
+        // FIXED: Initialize Task Processing Engine properly
+        this.taskEngine = new TaskProcessingEngine(this);
+        // Load existing data from database
+        await this.loadFromDatabase();
+        // Initialize default agents
+        this.createDefaultAgents();
+        // Start monitoring
+        this.startSystemMonitoring();
+        // Update UI
+        this.updateUI();
+        this.isInitialized = true;
+        this.log('System initialized successfully', 'success');
+    }
+    async loadFromDatabase() {
+        // Load tasks
+        const savedTasks = this.db.getAll(this.db.tables.tasks);
+        this.tasks = savedTasks.map(task => ({
+            ...task,
+            createdAt: new Date(task.created_at),
+            updatedAt: new Date(task.updated_at)
+        }));
+        // Load agents
+        const savedAgents = this.db.getAll(this.db.tables.agents);
+        savedAgents.forEach(agent => {
+            this.agents.set(agent.id, {
+                ...agent,
+                createdAt: new Date(agent.created_at),
+                status: 'idle' // Reset status on load
+            });
+        });
+        this.log(`Loaded ${this.tasks.length} tasks and ${this.agents.size} agents from database`, 'info');
+    }
+    createDefaultAgents() {
+        if (this.agents.size === 0) {
+            const defaultAgents = [
+                { name: 'Task Manager', role: 'coordinator', capabilities: ['task_management', 'workflow'] },
+                { name: 'Data Processor', role: 'worker', capabilities: ['data_processing', 'analysis'] },
+                { name: 'Web Scraper', role: 'worker', capabilities: ['web_scraping', 'data_extraction'] },
+                { name: 'Monitor Agent', role: 'observer', capabilities: ['monitoring', 'alerting'] }
+            ];
+            defaultAgents.forEach(agentData => {
+                this.createAgent(agentData);
+            });
+        }
+    }
+    async createAgent(agentData) {
+        const agent = {
+            id: this.db.generateId(),
+            name: agentData.name,
+            role: agentData.role || 'worker',
+            capabilities: agentData.capabilities || [],
+            status: 'idle',
+            tasksCompleted: 0,
+            tasksInProgress: 0,
+            createdAt: new Date()
+        };
+        this.agents.set(agent.id, agent);
+        // Save to database
+        await this.db.insert(this.db.tables.agents, {
+            ...agent,
+            createdAt: agent.createdAt.toISOString()
+        });
+        this.log(`Created agent: ${agent.name}`, 'success');
+        this.updateUI();
+        return agent;
+    }
+    async createTask(taskData) {
+        const task = {
+            id: this.db.generateId(),
+            type: taskData.type || 'single',
+            description: taskData.description,
+            priority: taskData.priority || 'normal',
+            assignedAgent: taskData.assignedAgent || null,
+            status: 'queued',
+            parameters: taskData.parameters || {},
+            dependencies: taskData.dependencies || [],
+            createdAt: new Date(),
+            retries: 0,
+            maxRetries: 3
+        };
+        this.tasks.push(task);
+        // Save to database
+        await this.db.insert(this.db.tables.tasks, {
+            ...task,
+            createdAt: task.createdAt.toISOString()
+        });
+        this.log(`Created task: ${task.id} - ${task.description}`, 'info');
+        // FIXED: Process task if engine is ready and not already processing
+        if (this.taskEngine && !this.processingQueue) {
+            setTimeout(() => this.processNextTask(), 100);
+        }
+        this.updateUI();
+        return task;
+    }
+    async processNextTask() {
+        if (this.processingQueue) return;
+        const queuedTasks = this.tasks.filter(task => task.status === 'queued');
+        if (queuedTasks.length === 0) return;
+        this.processingQueue = true;
+        // Sort by priority
+        const priorityOrder = { urgent: 4, high: 3, normal: 2, low: 1 };
+        queuedTasks.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority]);
+        const task = queuedTasks[0];
+        try {
+            // Update task status
+            task.status = 'processing';
+            await this.db.update(this.db.tables.tasks, task.id, { status: 'processing' });
+            // Process with task engine
+            const result = await this.taskEngine.processTask(task);
+            // Update task with results
+            task.status = 'completed';
+            task.result = result;
+            task.completedAt = new Date();
+            await this.db.update(this.db.tables.tasks, task.id, {
+                status: 'completed',
+                result: JSON.stringify(result),
+                completed_at: task.completedAt.toISOString()
+            });
+            this.log(`Task completed: ${task.id}`, 'success');
+        } catch (error) {
+            task.status = 'failed';
+            task.error = error.message;
+            await this.db.update(this.db.tables.tasks, task.id, {
+                status: 'failed',
+                error: error.message
+            });
+            this.log(`Task failed: ${task.id} - ${error.message}`, 'error');
+        }
+        this.processingQueue = false;
+        this.updateUI();
+        // Process next task
+        setTimeout(() => this.processNextTask(), 1000);
+    }
+    startSystemMonitoring() {
+        setInterval(() => {
+            this.updateSystemMetrics();
+            this.updateUI();
+        }, 5000);
+    }
+    updateSystemMetrics() {
+        const metrics = {
+            id: this.db.generateId(),
+            timestamp: new Date().toISOString(),
+            active_agents: Array.from(this.agents.values()).filter(a => a.status === 'active').length,
+            queued_tasks: this.tasks.filter(t => t.status === 'queued').length,
+            processing_tasks: this.tasks.filter(t => t.status === 'processing').length,
+            completed_tasks: this.tasks.filter(t => t.status === 'completed').length,
+            failed_tasks: this.tasks.filter(t => t.status === 'failed').length,
+            total_db_records: this.db.getTotalRecords()
+        };
+        // Save metrics to database (keep last 100 entries)
+        const savedMetrics = this.db.getAll(this.db.tables.metrics);
+        savedMetrics.push(metrics);
+        if (savedMetrics.length > 100) {
+            savedMetrics.splice(0, savedMetrics.length - 100);
+        }
+        localStorage.setItem(this.db.tables.metrics, JSON.stringify(savedMetrics));
+    }
+    log(message, level = 'info') {
+        const logEntry = {
+            id: this.db.generateId(),
+            timestamp: new Date(),
+            level: level,
+            message: message
+        };
+        this.logs.push(logEntry);
+        // Keep only last 100 logs in memory
+        if (this.logs.length > 100) {
+            this.logs.shift();
+        }
+        // Save to database
+        this.db.insert(this.db.tables.logs, {
+            ...logEntry,
+            timestamp: logEntry.timestamp.toISOString()
+        });
+        console.log(`[${level.toUpperCase()}] ${message}`);
+        this.updateLogsUI();
+    }
+    updateUI() {
+        this.updateStatusCards();
+        this.updateAgentsDisplay();
+        this.updateTasksList();
+        this.updateDatabaseTable();
+    }
+    updateStatusCards() {
+        const activeAgents = Array.from(this.agents.values()).filter(a => a.status === 'active').length;
+        const queuedTasks = this.tasks.filter(t => t.status === 'queued').length;
+        const processingTasks = this.tasks.filter(t => t.status === 'processing').length;
+        const completedTasks = this.tasks.filter(t => t.status === 'completed').length;
+        const dbRecords = this.db.getTotalRecords();
+        document.getElementById('active-agents').textContent = activeAgents;
+        document.getElementById('queued-tasks').textContent = queuedTasks;
+        document.getElementById('processing-tasks').textContent = processingTasks;
+        document.getElementById('completed-tasks').textContent = completedTasks;
+        document.getElementById('db-records').textContent = dbRecords;
+    }
+    updateAgentsDisplay() {
+        const container = document.getElementById('agents-container');
+        container.innerHTML = '';
+        Array.from(this.agents.values()).forEach(agent => {
+            const agentCard = document.createElement('div');
+            agentCard.className = 'agent-card';
+            agentCard.innerHTML = `
+                <div class="agent-name">${agent.name}</div>
+                <div class="agent-status status-${agent.status}">${agent.status}</div>
+                <div style="font-size: 12px; color: #666;">
+                    <div>Role: ${agent.role}</div>
+                    <div>Tasks: ${agent.tasksCompleted || 0}</div>
+                </div>
+                <button class="btn btn-danger" onclick="agentSystem.deleteAgent('${agent.id}')" style="margin-top: 10px; padding: 5px 10px; font-size: 12px;">Remove</button>
+            `;
+            container.appendChild(agentCard);
+        });
+        // Update agent dropdown
+        const agentSelect = document.getElementById('task-agent');
+        agentSelect.innerHTML = '<option value="">Auto-assign</option>';
+        Array.from(this.agents.values()).forEach(agent => {
+            const option = document.createElement('option');
+            option.value = agent.id;
+            option.textContent = agent.name;
+            agentSelect.appendChild(option);
+        });
+    }
+    updateTasksList() {
+        const container = document.getElementById('task-list');
+        container.innerHTML = '';
+        // Sort tasks by creation date (newest first)
+        const sortedTasks = [...this.tasks].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+        sortedTasks.slice(0, 20).forEach(task => { // Show only last 20 tasks
+            const taskItem = document.createElement('div');
+            taskItem.className = 'task-item';
+            const assignedAgent = task.assignedAgent ?
+                this.agents.get(task.assignedAgent)?.name || 'Unknown Agent' :
+                'Auto-assigned';
+            taskItem.innerHTML = `
+                <div class="task-header">
+                    <span class="task-id">${task.id}</span>
+                    <span class="task-status status-${task.status}">${task.status}</span>
+                </div>
+                <div style="margin-bottom: 8px;">
+                    <strong>Type:</strong> ${task.type} |
+                    <strong>Priority:</strong> ${task.priority} |
+                    <strong>Agent:</strong> ${assignedAgent}
+                </div>
+                <div style="margin-bottom: 8px;">
+                    <strong>Description:</strong> ${task.description}
+                </div>
+                <div style="font-size: 12px; color: #666;">
+                    <div>Created: ${task.createdAt.toLocaleString()}</div>
+                    ${task.completedAt ? `<div>Completed: ${task.completedAt.toLocaleString()}</div>` : ''}
+                    ${task.error ? `<div style="color: #c53030;">Error: ${task.error}</div>` : ''}
+                </div>
+                <div style="margin-top: 10px;">
+                    <button class="btn btn-danger" onclick="agentSystem.deleteTask('${task.id}')" style="padding: 5px 10px; font-size: 12px;">Delete</button>
+                    ${task.status === 'failed' ? `<button class="btn btn-primary" onclick="agentSystem.retryTask('${task.id}')" style="padding: 5px 10px; font-size: 12px; margin-left: 5px;">Retry</button>` : ''}
+                </div>
+            `;
+            container.appendChild(taskItem);
+        });
+    }
+    updateDatabaseTable() {
+        const tbody = document.getElementById('data-table-body');
+        tbody.innerHTML = '';
+        // Get recent records from all tables
+        const allRecords = [];
+        Object.entries(this.db.tables).forEach(([tableName, table]) => {
+            const records = this.db.getAll(table);
+            records.forEach(record => {
+                allRecords.push({
+                    ...record,
+                    table: tableName
+                });
+            });
+        });
+        // Sort by creation date and take last 50
+        allRecords.sort((a, b) => new Date(b.created_at || b.timestamp) - new Date(a.created_at || a.timestamp));
+        allRecords.slice(0, 50).forEach(record => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>${record.id}</td>
+                <td>${record.table}</td>
+                <td>${record.status || record.level || 'N/A'}</td>
+                <td>${new Date(record.created_at || record.timestamp).toLocaleString()}</td>
+                <td>${record.updated_at ? new Date(record.updated_at).toLocaleString() : 'N/A'}</td>
+                <td>
+                    <button class="btn-danger" onclick="agentSystem.deleteRecord('${record.table}', '${record.id}')" style="padding: 3px 6px; font-size: 11px;">Delete</button>
+                </td>
+            `;
+            tbody.appendChild(row);
+        });
+    }
+    updateLogsUI() {
+        const container = document.getElementById('logs-container');
+        container.innerHTML = '';
+        this.logs.slice(-20).forEach(log => {
+            const logEntry = document.createElement('div');
+            logEntry.className = 'log-entry';
+            logEntry.innerHTML = `
+                <span class="log-timestamp">[${log.timestamp.toLocaleTimeString()}]</span>
+                <span class="log-level-${log.level}">[${log.level.toUpperCase()}]</span>
+                <span>${log.message}</span>
+            `;
+            container.appendChild(logEntry);
+        });
+        // Auto-scroll to bottom
+        container.scrollTop = container.scrollHeight;
+    }
+    async deleteAgent(agentId) {
+        if (confirm('Are you sure you want to delete this agent?')) {
+            this.agents.delete(agentId);
+            await this.db.delete(this.db.tables.agents, agentId);
+            this.log(`Deleted agent: ${agentId}`, 'warning');
+            this.updateUI();
+        }
+    }
+    async deleteTask(taskId) {
+        if (confirm('Are you sure you want to delete this task?')) {
+            this.tasks = this.tasks.filter(t => t.id !== taskId);
+            await this.db.delete(this.db.tables.tasks, taskId);
+            this.log(`Deleted task: ${taskId}`, 'warning');
+            this.updateUI();
+        }
+    }
+    async retryTask(taskId) {
+        const task = this.tasks.find(t => t.id === taskId);
+        if (task) {
+            task.status = 'queued';
+            task.retries = 0;
+            task.error = null;
+            await this.db.update(this.db.tables.tasks, taskId, {
+                status: 'queued',
+                error: null
+            });
+            this.log(`Retrying task: ${taskId}`, 'info');
+            this.updateUI();
+            setTimeout(() => this.processNextTask(), 100);
+        }
+    }
+    async deleteRecord(table, id) {
+        if (confirm('Are you sure you want to delete this record?')) {
+            await this.db.delete(table, id);
+            this.log(`Deleted record from ${table}: ${id}`, 'warning');
+            this.updateUI();
+        }
+    }
+}
+// Global system instance
+let agentSystem;
+// UI Event Handlers - FIXED: Prevent form submission redirect
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize the system
+    agentSystem = new EnhancedAgentSystem();
+    // Task form submission
+    document.getElementById('task-form').addEventListener('submit', function(e) {
+        e.preventDefault(); // FIXED: This prevents the page redirect
+        const taskData = {
+            type: document.getElementById('task-type').value,
+            description: document.getElementById('task-description').value,
+            priority: document.getElementById('task-priority').value,
+            assignedAgent: document.getElementById('task-agent').value || null,
+            parameters: {}
+        };
+        if (taskData.description.trim()) {
+            agentSystem.createTask(taskData);
+            // Reset form
+            document.getElementById('task-form').reset();
+        } else {
+            alert('Please enter a task description');
+        }
+    });
+});