agentgui 1.0.90 → 1.0.92

package/.prd

@@ -1,40 +0,0 @@
-# AgentGUI HTML Rendering Implementation - IN PROGRESS
-
-## Task
-Implement markdown code block parsing within text blocks to enable HTML rendering in conversation messages.
-
-## Work Items
-
-### 1. Implement parseMarkdownCodeBlocks() in client.js
-- Parse ```language\ncode``` patterns from text blocks
-- Use regex: /```(\w*)\n([\s\S]*?)```/g
-- Return array of parts with type ('text' or 'code') and content/language/code
-- Handle text before, after, and between code blocks
-
-### 2. Update renderMessageContent() in client.js
-- For text blocks, check if they contain markdown code blocks
-- If markdown blocks found, parse and render each part
-- For code blocks with language='html', render with innerHTML
-- For other code blocks, render as escaped text with monospace font
-- Apply "Rendered HTML" badge styling for HTML blocks
-
-### 3. Add CSS styling for rendered HTML blocks
-- .html-rendered-label: blue background, white text, small font, padding
-- .html-content: white background, border, padding, overflow handling
-- Support both light and dark modes with CSS variables
-
-### 4. Test HTML rendering
-- Open "HTML Test" conversation in agent-browser
-- Verify HTML table renders as actual table element
-- Verify "Rendered HTML" badge appears
-- Verify no escaped HTML entities visible
-- Verify no markdown delimiters visible
-- Verify CSS styling applies correctly
-
-## Files to Modify
-- /config/workspace/agentgui/static/js/client.js
-  - Add parseMarkdownCodeBlocks() method
-  - Update renderMessageContent() to use parser for text blocks
-
-## Status
-PENDING: Implementation not yet complete

package/package.json

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

package/static/index.html

@@ -661,6 +661,78 @@
       }
     }
 
+    /* HTML rendered content blocks */
+    .html-rendered-label {
+      padding: 0.5rem;
+      background: #eff6ff;
+      border: 1px solid #bfdbfe;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: #1d4ed8;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.5rem;
+    }
+
+    html.dark .html-rendered-label {
+      background: #1e3a5f;
+      border-color: #2563eb;
+      color: #93c5fd;
+    }
+
+    .html-content {
+      background: #ffffff;
+      padding: 1rem;
+      border-radius: 0.375rem;
+      border: 1px solid var(--color-border);
+      overflow-x: auto;
+    }
+
+    html.dark .html-content {
+      background: #1f2937;
+    }
+
+    .html-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 0.5rem 0;
+    }
+
+    .html-content th,
+    .html-content td {
+      border: 1px solid var(--color-border);
+      padding: 0.5rem 0.75rem;
+      text-align: left;
+      font-size: 0.875rem;
+    }
+
+    .html-content th {
+      background: var(--color-bg-secondary);
+      font-weight: 600;
+    }
+
+    .html-content ul,
+    .html-content ol {
+      padding-left: 1.5rem;
+      margin: 0.5rem 0;
+    }
+
+    .html-content li {
+      margin: 0.25rem 0;
+    }
+
+    .html-content h1,
+    .html-content h2,
+    .html-content h3,
+    .html-content h4 {
+      margin: 0.75rem 0 0.5rem;
+    }
+
+    .html-content p {
+      margin: 0.5rem 0;
+    }
+
     /* Syntax highlighting adjustments */
     pre {
       margin: 0;

package/static/js/client.js

@@ -726,7 +726,14 @@ class AgentGUIClient {
         if (msg.content.blocks && Array.isArray(msg.content.blocks)) {
           msg.content.blocks.forEach(block => {
             if (block.type === 'text') {
-              contentHtml += `<div class="message-text">${this.escapeHtml(block.text)}</div>`;
+              const parts = this.parseMarkdownCodeBlocks(block.text);
+              parts.forEach(part => {
+                if (part.type === 'text') {
+                  contentHtml += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
+                } else if (part.type === 'code') {
+                  contentHtml += this.renderCodeBlock(part.language, part.code);
+                }
+              });
             } else if (block.type === 'code_block') {
               // Render HTML code blocks as actual HTML elements
               if (block.language === 'html') {

package/static/js/streaming-renderer.js

@@ -569,6 +569,34 @@ class StreamingRenderer {
     return div;
   }
 
+  /**
+   * Parse markdown code blocks from text
+   */
+  parseMarkdownCodeBlocks(text) {
+    const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push({ type: 'text', content: text.substring(lastIndex, match.index) });
+      }
+      parts.push({ type: 'code', language: match[1] || 'plain', code: match[2] });
+      lastIndex = codeBlockRegex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+      parts.push({ type: 'text', content: text.substring(lastIndex) });
+    }
+
+    if (parts.length === 0) {
+      return [{ type: 'text', content: text }];
+    }
+
+    return parts;
+  }
+
   /**
    * Render text block event
    */
@@ -579,7 +607,21 @@ class StreamingRenderer {
     div.dataset.eventType = 'text_block';
 
     const text = event.text || event.content || '';
-    div.innerHTML = `<p class="text-sm leading-relaxed">${this.escapeHtml(text)}</p>`;
+    const parts = this.parseMarkdownCodeBlocks(text);
+    let html = '';
+    parts.forEach(part => {
+      if (part.type === 'text') {
+        html += `<p class="text-sm leading-relaxed">${this.escapeHtml(part.content)}</p>`;
+      } else if (part.type === 'code') {
+        if (part.language.toLowerCase() === 'html') {
+          html += `<div class="html-rendered-label mb-2 p-2 bg-blue-50 rounded border text-xs" style="color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe;">Rendered HTML</div>`;
+          html += `<div class="html-content bg-white p-4 rounded border overflow-x-auto" style="background:#fff;border-color:#e5e7eb;">${part.code}</div>`;
+        } else {
+          html += `<pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code>${this.escapeHtml(part.code)}</code></pre>`;
+        }
+      }
+    });
+    div.innerHTML = html;
     return div;
   }