agentgui 1.0.87 → 1.0.88

package/.prd

@@ -0,0 +1,44 @@
+HTML Code Block Rendering Implementation
+
+GOAL: Render HTML code blocks as actual HTML elements instead of escaped text
+
+DEPENDENCIES:
+- streaming-renderer.js renderCode() method modification
+- client.js renderMessageContent() method modification
+- client.js renderMessages() method modification
+
+COMPLETED ITEMS:
+
+1. DONE: Update streaming-renderer.js renderCode() to detect HTML blocks
+   - Check if language === 'html' ✓
+   - If HTML: render content with innerHTML (Claude responses trusted) ✓
+   - If not HTML: keep existing escaped text rendering ✓
+   - Wrap HTML output in styled container ✓
+
+2. DONE: Update client.js renderMessageContent() to handle HTML code blocks
+   - Detect block.type === 'code_block' AND block.language === 'html' ✓
+   - If HTML: render with innerHTML in wrapper div ✓
+   - If not HTML: escape and display as text ✓
+
+3. DONE: Update client.js renderMessages() to handle HTML code blocks
+   - Detect block.type === 'code_block' AND block.language === 'html' ✓
+   - If HTML: render with innerHTML in wrapper div ✓
+   - If not HTML: escape and display as text ✓
+
+4. DONE: Style HTML rendered blocks appropriately
+   - Add CSS classes for container styling ✓
+   - Ensure proper padding and borders ✓
+   - Add label indicating "Rendered HTML" ✓
+
+5. DONE: Test implementation
+   - Created test cases for HTML detection logic ✓
+   - Verified HTML detection correctly identifies html language ✓
+   - Verified non-HTML code blocks use escaped rendering ✓
+   - Confirmed no breaking changes to existing logic ✓
+
+6. DONE: Commit changes
+   - Stage modified files ✓
+   - Create meaningful commit message ✓
+   - Commit hash: 13ee551 ✓
+
+ALL WORK COMPLETED ✓

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.87",
+  "version": "1.0.88",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/static/js/client.js

@@ -376,7 +376,21 @@ class AgentGUIClient {
           if (block.type === 'text') {
             html += `<div class="message-text">${this.escapeHtml(block.text)}</div>`;
           } else if (block.type === 'code_block') {
-            html += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+            // Render HTML code blocks as actual HTML elements
+            if (block.language === 'html') {
+              html += `
+                <div class="message-code">
+                  <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+                    Rendered HTML
+                  </div>
+                  <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+                    ${block.code}
+                  </div>
+                </div>
+              `;
+            } else {
+              html += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+            }
           } else if (block.type === 'tool_use') {
             html += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
           }
@@ -643,7 +657,21 @@ class AgentGUIClient {
             if (block.type === 'text') {
               contentHtml += `<div class="message-text">${this.escapeHtml(block.text)}</div>`;
             } else if (block.type === 'code_block') {
-              contentHtml += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+              // Render HTML code blocks as actual HTML elements
+              if (block.language === 'html') {
+                contentHtml += `
+                  <div class="message-code">
+                    <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+                      Rendered HTML
+                    </div>
+                    <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+                      ${block.code}
+                    </div>
+                  </div>
+                `;
+              } else {
+                contentHtml += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+              }
             } else if (block.type === 'tool_use') {
               contentHtml += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
             }

package/static/js/streaming-renderer.js

@@ -595,9 +595,21 @@ class StreamingRenderer {
     const code = event.code || event.content || '';
     const language = event.language || 'plaintext';
 
-    div.innerHTML = `
-      <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
-    `;
+    // Render HTML code blocks as actual HTML elements
+    if (language === 'html') {
+      div.innerHTML = `
+        <div class="html-rendered-container mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+          Rendered HTML
+        </div>
+        <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+          ${code}
+        </div>
+      `;
+    } else {
+      div.innerHTML = `
+        <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
+      `;
+    }
     return div;
   }