-
-
${JSON.stringify(msg.content, null, 2)}
-
- From: ${msg.sender || 'unknown'}
- To: ${msg.recipient || 'broadcast'}
- ${msg.signature ? `✓ Signed` : ''}
-
-
- `).join('');
+ container.innerHTML = '';
+ this.messages.forEach(msg => {
+ const item = document.createElement('div');
+ item.className = 'message-item';
+ item.dataset.id = msg.id;
+
+ const header = document.createElement('div');
+ header.className = 'message-header';
+ const typeSpan = document.createElement('span');
+ typeSpan.className = 'message-type';
+ typeSpan.textContent = msg.type;
+ const timeSpan = document.createElement('span');
+ timeSpan.className = 'message-time';
+ timeSpan.textContent = this.formatTime(msg.timestamp);
+ header.appendChild(typeSpan);
+ header.appendChild(timeSpan);
+
+ const body = document.createElement('div');
+ body.className = 'message-body';
+ body.textContent = JSON.stringify(msg.content, null, 2);
+
+ const meta = document.createElement('div');
+ meta.className = 'message-meta';
+ const fromSpan = document.createElement('span');
+ fromSpan.textContent = `From: ${msg.sender || 'unknown'}`;
+ const toSpan = document.createElement('span');
+ toSpan.textContent = `To: ${msg.recipient || 'broadcast'}`;
+ meta.appendChild(fromSpan);
+ meta.appendChild(toSpan);
+ if (msg.signature) {
+ const sigSpan = document.createElement('span');
+ sigSpan.textContent = '✓ Signed';
+ meta.appendChild(sigSpan);
+ }
+
+ item.appendChild(header);
+ item.appendChild(body);
+ item.appendChild(meta);
+ container.appendChild(item);
+ });
}
filterMessages(query) {
@@ -310,23 +352,48 @@ class AgentOSPanel {
const tbody = document.getElementById('trustTableBody');
if (this.agents.size === 0) {
- tbody.innerHTML = '