@mindexec/cli 0.2.0

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

@@ -0,0 +1,359 @@
+// 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');
+})();