diff --git a/src/ui.ts b/src/ui.ts
index 2b9dcd5..80f7d0a 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -971,7 +971,7 @@ const html = `
} else if (valueStr.length > 100) {
const truncated = valueStr.substring(0, 97) + '...';
const escapedValue = valueStr.replace(/"/g, '"').replace(/'/g, ''');
- result += '' + key + ': ' + truncated + ' expand';
+ result += '' + key + ': ' + truncated + ' expand';
} else {
result += '' + key + ': ' + valueStr;
}
@@ -1282,6 +1282,46 @@ const html = `
}
}
+ function toggleExpand(button) {
+ const key = button.getAttribute('data-key');
+ const value = button.getAttribute('data-value');
+
+ // Find the container that holds just this key-value pair
+ let container = button.parentNode;
+ while (container && !container.classList.contains('expandable-item')) {
+ container = container.parentNode;
+ }
+
+ if (!container) {
+ // Fallback: create a wrapper around the current line
+ const parent = button.parentNode;
+ const wrapper = document.createElement('div');
+ wrapper.className = 'expandable-item';
+ parent.insertBefore(wrapper, button.previousSibling || button);
+
+ // Move the key, value text, and button into the wrapper
+ let currentNode = wrapper.nextSibling;
+ const nodesToMove = [];
+ while (currentNode && currentNode !== button.nextSibling) {
+ nodesToMove.push(currentNode);
+ currentNode = currentNode.nextSibling;
+ }
+ nodesToMove.forEach(node => wrapper.appendChild(node));
+ container = wrapper;
+ }
+
+ if (button.textContent === 'expand') {
+ // Show full content
+ const decodedValue = value.replace(/"/g, '"').replace(/'/g, "'");
+ container.innerHTML = '' + key + ': ' + decodedValue + ' collapse';
+ } else {
+ // Show truncated content
+ const decodedValue = value.replace(/"/g, '"').replace(/'/g, "'");
+ const truncated = decodedValue.substring(0, 97) + '...';
+ container.innerHTML = '' + key + ': ' + truncated + ' expand';
+ }
+ }
+
function sendMessage() {
const text = messageInput.value.trim();
if (text) {