@mindexec/cli 0.2.340 → 0.2.342

package/wwwroot/_content/MindExecution.Shared/js/agent-visualization.js

@@ -1,359 +0,0 @@
-// Agent Visualization for 3D Mind Map Canvas
-// Visualizes the agent execution flow.
-
-(function () {
-    'use strict';
-
-    // Agent state colors
-    const AgentStateColors = {
-        Idle: '#888888',
-        Thinking: '#FFD700',    // Gold - thinking
-        Acting: '#00FF88',      // Green - acting
-        Waiting: '#FF6B6B',     // Red - waiting for approval
-        Completed: '#4CAF50',   // Completed
-        Failed: '#F44336'       // Failed
-    };
-
-    // Agent visualization class
-    class AgentVisualization {
-        constructor(mindMapInstance) {
-            this.mindMap = mindMapInstance;
-            this.agentNodes = new Map();  // stepId -> nodeId
-            this.connectionLines = [];
-            this.currentAgentId = null;
-            this.animationFrameId = null;
-        }
-
-        // Create the root node when an agent starts
-        createAgentRootNode(agent) {
-            this.currentAgentId = agent.id;
-
-            const nodeData = {
-                id: `agent_${agent.id}`,
-                prompt: `🤖 Agent: ${agent.name}`,
-                response: `Goal: ${agent.goal}`,
-                x: 0,
-                y: 0,
-                width: 350,
-                height: 150,
-                isAiEnabled: false,
-                nodeType: 'agent_root',
-                metadata: {
-                    agentId: agent.id,
-                    state: agent.state
-                }
-            };
-
-            if (this.mindMap && this.mindMap.addNodes) {
-                this.mindMap.addNodes([nodeData]);
-            }
-
-            return nodeData.id;
-        }
-
-        // Create a step node
-        createStepNode(agent, step, parentNodeId) {
-            const stepNodeId = `agent_${agent.id}_step_${step.stepNumber}`;
-
-            // Layout (place under the parent node)
-            const xOffset = (step.stepNumber % 2 === 0 ? 1 : -1) * 200;
-            const yOffset = step.stepNumber * 180;
-
-            const nodeData = {
-                id: stepNodeId,
-                prompt: `Step ${step.stepNumber}: ${step.displayToolName || step.toolName || 'Thinking'}`,
-                response: step.thought || '',
-                x: xOffset,
-                y: yOffset,
-                width: 300,
-                height: 120,
-                isAiEnabled: false,
-                nodeType: 'agent_step',
-                metadata: {
-                    agentId: agent.id,
-                    stepNumber: step.stepNumber,
-                    toolName: step.toolName,
-                    displayToolName: step.displayToolName || step.toolName || 'Thinking',
-                    state: 'executing'
-                }
-            };
-
-            if (this.mindMap && this.mindMap.addNodes) {
-                this.mindMap.addNodes([nodeData]);
-            }
-
-            this.agentNodes.set(step.stepNumber, stepNodeId);
-
-            // Create a link
-            this.createConnection(parentNodeId, stepNodeId);
-
-            return stepNodeId;
-        }
-
-        // Update when a step completes
-        updateStepNode(step) {
-            const nodeId = this.agentNodes.get(step.stepNumber);
-            if (!nodeId) return;
-
-            const observation = step.observation || '';
-            const truncatedObs = observation.length > 200
-                ? observation.substring(0, 200) + '...'
-                : observation;
-
-            // Update node content
-            if (this.mindMap && this.mindMap.updateNodeContent) {
-                this.mindMap.updateNodeContent(nodeId, {
-                    response: `${step.thought}\n\n📝 Result:\n${truncatedObs}`
-                });
-            }
-
-            // Change color by state
-            this.updateNodeState(nodeId, step.requiresApproval ? 'Waiting' : 'Completed');
-        }
-
-        // Update node state (color/animation)
-        updateNodeState(nodeId, state) {
-            const color = AgentStateColors[state] || AgentStateColors.Idle;
-
-            if (this.mindMap && this.mindMap.setNodeGlowColor) {
-                this.mindMap.setNodeGlowColor(nodeId, color);
-            }
-
-            // Pulse while running
-            if (state === 'Thinking' || state === 'Acting') {
-                this.startPulseAnimation(nodeId);
-            } else {
-                this.stopPulseAnimation(nodeId);
-            }
-        }
-
-        // Start pulse animation
-        startPulseAnimation(nodeId) {
-            if (this.animationFrameId) return;
-
-            let scale = 1;
-            let growing = true;
-
-            const animate = () => {
-                if (growing) {
-                    scale += 0.005;
-                    if (scale >= 1.05) growing = false;
-                } else {
-                    scale -= 0.005;
-                    if (scale <= 1) growing = true;
-                }
-
-                if (this.mindMap && this.mindMap.setNodeScale) {
-                    this.mindMap.setNodeScale(nodeId, scale);
-                }
-
-                this.animationFrameId = requestAnimationFrame(animate);
-            };
-
-            animate();
-        }
-
-        // Stop pulse animation
-        stopPulseAnimation(nodeId) {
-            if (this.animationFrameId) {
-                cancelAnimationFrame(this.animationFrameId);
-                this.animationFrameId = null;
-            }
-
-            if (this.mindMap && this.mindMap.setNodeScale) {
-                this.mindMap.setNodeScale(nodeId, 1);
-            }
-        }
-
-        // Create a link
-        createConnection(fromNodeId, toNodeId) {
-            if (this.mindMap && this.mindMap.createLink) {
-                this.mindMap.createLink(fromNodeId, toNodeId);
-                this.connectionLines.push({ from: fromNodeId, to: toNodeId });
-            }
-        }
-
-        // Show approval UI
-        showApprovalDialog(step, onApprove, onReject) {
-            const dialog = document.createElement('div');
-            dialog.className = 'agent-approval-dialog';
-            dialog.innerHTML = `
-                <div class="approval-content">
-                    <h3>⚠️ Action Requires Approval</h3>
-                    <p><strong>Tool:</strong> ${step.displayToolName || step.toolName || 'Thinking'}</p>
-                    <p><strong>Thought:</strong> ${step.thought}</p>
-                    <div class="approval-args">
-                        <strong>Arguments:</strong>
-                        <pre>${JSON.stringify(step.toolArguments, null, 2)}</pre>
-                    </div>
-                    <div class="approval-buttons">
-                        <button class="approve-btn">✅ Approve</button>
-                        <button class="reject-btn">❌ Reject</button>
-                    </div>
-                </div>
-            `;
-
-            dialog.querySelector('.approve-btn').onclick = () => {
-                dialog.remove();
-                onApprove();
-            };
-
-            dialog.querySelector('.reject-btn').onclick = () => {
-                dialog.remove();
-                onReject();
-            };
-
-            document.body.appendChild(dialog);
-        }
-
-        // When the agent finishes
-        onAgentCompleted(agent) {
-            const rootNodeId = `agent_${agent.id}`;
-            this.updateNodeState(rootNodeId, 'Completed');
-
-            // Add a final result node
-            const lastStep = agent.steps[agent.steps.length - 1];
-            if (lastStep && lastStep.observation) {
-                this.createResultNode(agent, lastStep.observation);
-            }
-        }
-
-        // Create the final result node
-        createResultNode(agent, result) {
-            const nodeData = {
-                id: `agent_${agent.id}_result`,
-                prompt: '✅ Final Result',
-                response: result,
-                x: 0,
-                y: (agent.steps.length + 1) * 180,
-                width: 400,
-                height: 200,
-                isAiEnabled: false,
-                nodeType: 'agent_result',
-                metadata: {
-                    agentId: agent.id,
-                    isResult: true
-                }
-            };
-
-            if (this.mindMap && this.mindMap.addNodes) {
-                this.mindMap.addNodes([nodeData]);
-            }
-
-            const lastStepNodeId = this.agentNodes.get(agent.steps.length);
-            if (lastStepNodeId) {
-                this.createConnection(lastStepNodeId, nodeData.id);
-            }
-        }
-
-        // Cleanup
-        cleanup() {
-            this.stopPulseAnimation();
-            this.agentNodes.clear();
-            this.connectionLines = [];
-            this.currentAgentId = null;
-        }
-    }
-
-    // Inject CSS
-    function injectStyles() {
-        if (document.getElementById('agent-visualization-styles')) return;
-
-        const style = document.createElement('style');
-        style.id = 'agent-visualization-styles';
-        style.textContent = `
-            .agent-approval-dialog {
-                position: fixed;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                background: rgba(30, 30, 40, 0.95);
-                border: 2px solid #FFD700;
-                border-radius: 12px;
-                padding: 24px;
-                z-index: 10000;
-                max-width: 500px;
-                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-                backdrop-filter: blur(10px);
-            }
-
-            .agent-approval-dialog h3 {
-                color: #FFD700;
-                margin: 0 0 16px 0;
-            }
-
-            .agent-approval-dialog p {
-                color: #eee;
-                margin: 8px 0;
-            }
-
-            .approval-args {
-                background: rgba(0, 0, 0, 0.3);
-                padding: 12px;
-                border-radius: 8px;
-                margin: 12px 0;
-            }
-
-            .approval-args pre {
-                color: #88ff88;
-                font-size: 12px;
-                overflow-x: auto;
-                max-height: 150px;
-            }
-
-            .approval-buttons {
-                display: flex;
-                gap: 12px;
-                margin-top: 20px;
-            }
-
-            .approval-buttons button {
-                flex: 1;
-                padding: 12px 24px;
-                border: none;
-                border-radius: 8px;
-                font-size: 16px;
-                cursor: pointer;
-                transition: transform 0.2s;
-            }
-
-            .approval-buttons button:hover {
-                transform: scale(1.05);
-            }
-
-            .approve-btn {
-                background: #4CAF50;
-                color: white;
-            }
-
-            .reject-btn {
-                background: #F44336;
-                color: white;
-            }
-
-            /* Agent node styling */
-            .agent-node-thinking {
-                animation: agent-pulse 1s ease-in-out infinite;
-            }
-
-            @keyframes agent-pulse {
-                0%, 100% { box-shadow: 0 0 10px #FFD700; }
-                50% { box-shadow: 0 0 30px #FFD700; }
-            }
-        `;
-        document.head.appendChild(style);
-    }
-
-    // Init
-    injectStyles();
-
-    // Export
-    window.AgentVisualization = AgentVisualization;
-    window.AgentStateColors = AgentStateColors;
-    window.agentVisualization = window.agentVisualization || {
-        onAgentStart() { },
-        handleEvent() { }
-    };
-
-    console.log('[AgentVisualization] Module loaded');
-})();