@@ -773,6 +775,7 @@
equipped: -
Last Message: ${lastMessage}
@@ -783,30 +786,118 @@
oninput="onMsgInputChange('${agent.name}')"
onkeydown="if(event.key === 'Enter') document.getElementById('sendBtn-${agent.name}').click()"
${!agent.in_game ? 'disabled' : ''}>
-
-
-
+
+
+
`;
- }).join('') :
- '
No agents connected
';
-
- // Update viewers after DOM has updated
- setTimeout(updateViewers, 0);
}
- socket.on('agents-update', async (agents) => {
- // Fetch settings for any newly connected agents
- const newlyConnected = agents.filter(a => a.in_game && (!agentSettings[a.name] || !agentSettings[a.name].fetched));
- await Promise.all(newlyConnected.map(async (a) => {
- const settings = await fetchAgentSettings(a.name);
- if (settings) {
- agentSettings[a.name] = { ...settings, fetched: true };
+ async function renderAgents(agents) {
+ if (!agents.length) {
+ agentsDiv.innerHTML = '
No agents connected
';
+ return;
+ }
+
+ // If agentsDiv is empty, do a full render
+ if (!agentsDiv.children.length) {
+ agentsDiv.innerHTML = agents.map(agent => renderAgentCard(agent)).join('');
+ // Update all viewers after initial render
+ setTimeout(() => {
+ agents.forEach(a => {
+ if (a.in_game) updateAgentViewer(a.name);
+ });
+ }, 0);
+ return;
+ }
+
+ // Compare with current agents to find changes
+ const prevAgents = currentAgents.reduce((acc, a) => ({ ...acc, [a.name]: a }), {});
+ const changedAgents = agents.filter(a => {
+ const prev = prevAgents[a.name];
+ return !prev || prev.in_game !== a.in_game || prev.viewerPort !== a.viewerPort;
+ });
+
+ // Update only changed agents
+ changedAgents.forEach(agent => {
+ const el = document.getElementById(`agent-${agent.name}`);
+ if (el) {
+ // Update existing card
+ el.outerHTML = renderAgentCard(agent);
+ if (agent.in_game) updateAgentViewer(agent.name);
+ } else {
+ // Add new card
+ agentsDiv.insertAdjacentHTML('beforeend', renderAgentCard(agent));
+ if (agent.in_game) updateAgentViewer(agent.name);
}
- }));
- renderAgents(agents);
+ });
+
+ // Remove cards for agents that no longer exist
+ Array.from(agentsDiv.children).forEach(el => {
+ const name = el.id.replace('agent-', '');
+ if (!agents.find(a => a.name === name)) {
+ el.remove();
+ }
+ });
+ }
+
+ socket.on('agents-status', async (agents) => {
+ // Fetch settings for all agents that don't have current settings
+ const needSettings = agents.filter(a => !agentSettings[a.name]);
+ if (needSettings.length > 0) {
+ await Promise.all(needSettings.map(async (a) => {
+ const settings = await fetchAgentSettings(a.name);
+ if (settings) {
+ agentSettings[a.name] = settings;
+ }
+ }));
+ }
+
+ // Compare with current agents to find changes
+ const prevAgents = currentAgents.reduce((acc, a) => ({ ...acc, [a.name]: a }), {});
+ const changedAgents = agents.filter(a => {
+ const prev = prevAgents[a.name];
+ return !prev || prev.in_game !== a.in_game || prev.viewerPort !== a.viewerPort;
+ });
+
+ // Update current agents list
+ currentAgents = agents;
+
+ // If agentsDiv is empty, do a full render
+ if (!agentsDiv.children.length) {
+ agentsDiv.innerHTML = agents.map(agent => renderAgentCard(agent)).join('');
+ // Update all viewers after initial render
+ setTimeout(() => {
+ agents.forEach(a => {
+ if (a.in_game) updateAgentViewer(a.name);
+ });
+ }, 0);
+ return;
+ }
+
+ // Update only changed agents
+ changedAgents.forEach(agent => {
+ const el = document.getElementById(`agent-${agent.name}`);
+ if (el) {
+ // Update existing card
+ el.outerHTML = renderAgentCard(agent);
+ if (agent.in_game) updateAgentViewer(agent.name);
+ } else {
+ // Add new card
+ agentsDiv.insertAdjacentHTML('beforeend', renderAgentCard(agent));
+ if (agent.in_game) updateAgentViewer(agent.name);
+ }
+ });
+
+ // Remove cards for agents that no longer exist
+ Array.from(agentsDiv.children).forEach(el => {
+ const name = el.id.replace('agent-', '');
+ if (!agents.find(a => a.name === name)) {
+ el.remove();
+ }
+ });
});
function restartAgent(n) { socket.emit('restart-agent', n); }
@@ -820,6 +911,7 @@
socket.emit('start-agent', n);
}
function stopAgent(n) { socket.emit('stop-agent', n); }
+ function destroyAgent(n) { socket.emit('destroy-agent', n); }
function disconnectAllAgents() {
socket.emit('stop-all-agents');
}