agentgui 1.0.89 → 1.0.90

package/.prd

@@ -0,0 +1,40 @@
+# 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.89",
+  "version": "1.0.90",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -508,9 +508,15 @@ async function processMessage(conversationId, messageId, content, agentId) {
     const cwd = '/config';
     const actualAgentId = agentId || 'claude-code';
 
-    debugLog(`[processMessage] Calling runClaudeWithStreaming with prompt: "${content.substring(0, 50)}..."`);
+    // Handle both string content and object content (for structured messages)
+    let contentStr = content;
+    if (typeof content === 'object') {
+      contentStr = JSON.stringify(content);
+    }
+
+    debugLog(`[processMessage] Calling runClaudeWithStreaming with prompt: "${contentStr.substring(0, 50)}..."`);
     // Prepend system prompt to user content
-    const promptWithSystem = `${SYSTEM_PROMPT}\n\n${content}`;
+    const promptWithSystem = `${SYSTEM_PROMPT}\n\n${contentStr}`;
     const outputs = await runClaudeWithStreaming(promptWithSystem, cwd, actualAgentId);
     debugLog(`[processMessage] Claude returned ${outputs.length} outputs`);
 

package/static/app.js

@@ -220,9 +220,20 @@ class GMGUIApp {
     let html = '<div class="message-block">';
 
     switch (block.type) {
-      case 'text':
-        html += `<div class="block-text">${this.escapeHtml(block.text || '')}</div>`;
+      case 'text': {
+        const text = block.text || '';
+        const parts = this.parseMarkdownCodeBlocks(text);
+        html += '<div class="block-text">';
+        for (const part of parts) {
+          if (part.type === 'text') {
+            html += `<div>${this.escapeHtml(part.content)}</div>`;
+          } else if (part.type === 'code') {
+            html += this.renderCodeBlock(part.language, part.content);
+          }
+        }
+        html += '</div>';
         break;
+      }
 
       case 'tool_use':
         html += `<div class="block-tool-use">`;
@@ -405,6 +416,57 @@ class GMGUIApp {
     }
   }
 
+  parseMarkdownCodeBlocks(text) {
+    const parts = [];
+    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+    let lastIndex = 0;
+    let match;
+
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+      // Add text before code block
+      if (match.index > lastIndex) {
+        parts.push({
+          type: 'text',
+          content: text.substring(lastIndex, match.index)
+        });
+      }
+
+      // Add code block
+      const language = match[1] || 'text';
+      const code = match[2];
+      parts.push({
+        type: 'code',
+        language,
+        content: code
+      });
+
+      lastIndex = codeBlockRegex.lastIndex;
+    }
+
+    // Add remaining text
+    if (lastIndex < text.length) {
+      parts.push({
+        type: 'text',
+        content: text.substring(lastIndex)
+      });
+    }
+
+    return parts.length > 0 ? parts : [{ type: 'text', content: text }];
+  }
+
+  renderCodeBlock(language, code) {
+    if (language === 'html') {
+      return `<div class="html-block">
+        <div class="html-header">Rendered HTML</div>
+        <div class="html-content">${code}</div>
+      </div>`;
+    } else {
+      return `<div class="code-block" data-language="${this.escapeHtml(language)}">
+        <pre><code>${this.escapeHtml(code)}</code></pre>
+      </div>`;
+    }
+  }
+
   escapeHtml(text) {
     const div = document.createElement('div');
     div.textContent = text;

package/static/js/client.js

@@ -363,6 +363,69 @@ class AgentGUIClient {
     this.emit('message:created', data);
   }
 
+  /**
+   * Parse markdown code blocks from text
+   * Returns array of parts with type ('text' or 'code') and content/language/code
+   */
+  parseMarkdownCodeBlocks(text) {
+    const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+      // Add text before the code block
+      if (match.index > lastIndex) {
+        parts.push({
+          type: 'text',
+          content: text.substring(lastIndex, match.index)
+        });
+      }
+      // Add the code block
+      parts.push({
+        type: 'code',
+        language: match[1] || 'plain',
+        code: match[2]
+      });
+      lastIndex = codeBlockRegex.lastIndex;
+    }
+
+    // Add remaining text after last code block
+    if (lastIndex < text.length) {
+      parts.push({
+        type: 'text',
+        content: text.substring(lastIndex)
+      });
+    }
+
+    // If no code blocks found, return the text as-is
+    if (parts.length === 0) {
+      return [{ type: 'text', content: text }];
+    }
+
+    return parts;
+  }
+
+  /**
+   * Render a markdown code block part
+   */
+  renderCodeBlock(language, code) {
+    if (language.toLowerCase() === 'html') {
+      return `
+        <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">
+            ${code}
+          </div>
+        </div>
+      `;
+    } else {
+      return `<div class="message-code"><pre>${this.escapeHtml(code)}</pre></div>`;
+    }
+  }
+
   /**
    * Render message content based on type
    */
@@ -374,7 +437,15 @@ class AgentGUIClient {
       if (content.blocks && Array.isArray(content.blocks)) {
         content.blocks.forEach(block => {
           if (block.type === 'text') {
-            html += `<div class="message-text">${this.escapeHtml(block.text)}</div>`;
+            // Parse markdown code blocks from text
+            const parts = this.parseMarkdownCodeBlocks(block.text);
+            parts.forEach(part => {
+              if (part.type === 'text') {
+                html += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
+              } else if (part.type === 'code') {
+                html += 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/styles.css

@@ -816,21 +816,22 @@ html, body {
 }
 
 .html-block {
-  flex: 0 1 100%;
   border: 1px solid var(--border-color);
   border-radius: 0.5rem;
   overflow: visible;
   background: var(--bg-secondary);
-  max-width: 100%;
+  margin: 0.75rem 0;
 }
 
 .html-header {
   padding: 0.5rem 0.75rem;
-  background: var(--bg-tertiary);
+  background: #3b82f6;
   font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--text-primary);
+  font-size: 0.75rem;
+  color: white;
   border-bottom: 1px solid var(--border-color);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .html-content {
@@ -838,6 +839,26 @@ html, body {
   overflow-x: auto;
 }
 
+.code-block {
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  background: var(--bg-tertiary);
+  margin: 0.75rem 0;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 0.8rem;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.code-block code {
+  color: var(--text-secondary);
+}
+
 
 
 .image-block {