agentgui 1.0.106 → 1.0.108

package/.prd

@@ -0,0 +1,66 @@
+# Response Block Rendering Analysis & Fix
+
+## Problem Statement
+Response blocks in GUI are not being beautified/rendered correctly. Issues:
+- Blocks may be separated incorrectly
+- Detection logic may be failing
+- Rendering may not match intended HTML structure
+- Need perfect rendering with no edge cases or surprises
+
+## Investigation Phase (Completed)
+- [x] Search for response block rendering code in app.js
+- [x] Search for block type definitions and separators
+- [x] Review message bubble structure and flex/layout CSS
+- [x] Examine response block detection logic in app.js
+- [x] Check HTML/CSS rendering for response blocks
+- [x] Review message rendering pipeline
+
+## Root Cause Analysis (Findings)
+- [x] Traced message flow: Claude outputs (stream-json) → claude-runner.js parses JSON → processMessage collects blocks
+- [x] server.js line 738: extracts output.message.content blocks from assistant responses
+- [x] app.js lines 194-209: renderMessageBlock handles each block based on type field
+- [x] Block types: 'text', 'tool_use', 'tool_result', 'file_operation'
+- [x] Text blocks parsed for markdown code blocks with regex
+- [x] Found potential issue: blocks may not be properly formatted/beautified
+- [x] HTML structure looks correct but need to verify actual output
+
+## Edge Cases & Issues
+- [ ] Multiple consecutive blocks of same type
+- [ ] Empty blocks or whitespace handling
+- [ ] Mixed block types in same message
+- [ ] Long content overflow in blocks
+- [ ] Special characters in block content
+- [ ] Code/pre tag interaction with beautification
+
+## Root Cause Identified
+ROOT CAUSE: Text blocks from Claude contain MARKDOWN but are being rendered as plain escaped text
+- Claude outputs blocks with type:'text' containing markdown (headings, lists, bold, code, links)
+- Current code only extracts code blocks with regex, escapes everything else
+- Markdown structure (headings, lists, etc.) is lost
+
+## Solution: Implement Markdown Parser (Completed)
+- [x] Create markdown to HTML converter (markdownToHtml method)
+- [x] Handle markdown syntax: # headings, - lists, **bold**, `code`, ```code blocks```, links
+- [x] Integrate parser into renderMessageBlock for text type
+- [x] Ensure HTML is properly escaped to prevent XSS
+- [x] Tested all markdown features: h1-h6, ul/ol lists, bold/italic, inline code, code blocks, links
+- [x] Verify blocks render with proper semantic HTML
+
+## CSS Updates (Completed)
+- [x] Added styling for markdown elements (h1-h3, ul/ol, lists, inline code, links)
+- [x] Remove duplicate .code-block definition (removed old version at lines 1454-1470)
+- [x] Keep modern version at line 842 with CSS variables
+
+## Execution & Verification (Ready)
+- [ ] Commit changes to git
+- [ ] Test with real Claude Code execution output via browser
+- [ ] Verify blocks render with perfect formatting
+- [ ] Verify no edge cases or surprises
+- [ ] Verify layout doesn't break on wide screens
+
+## Completion Criteria
+- Response blocks detect correctly
+- Blocks render with proper styling
+- All block types display correctly
+- No edge cases or surprises
+- Verified through real execution

package/package.json

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

package/static/app.js

@@ -222,16 +222,8 @@ class GMGUIApp {
     switch (block.type) {
       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>';
+        const beautified = this.markdownToHtml(text);
+        html += `<div class="block-text">${beautified}</div>`;
         break;
       }
 
@@ -454,6 +446,122 @@ class GMGUIApp {
     return parts.length > 0 ? parts : [{ type: 'text', content: text }];
   }
 
+  markdownToHtml(markdown) {
+    const lines = markdown.split('\n');
+    let html = '';
+    let inList = false;
+    let listType = null;
+    let i = 0;
+
+    while (i < lines.length) {
+      const line = lines[i];
+      const trimmed = line.trim();
+
+      // Code blocks
+      if (trimmed.startsWith('```')) {
+        if (inList) {
+          html += listType === 'ul' ? '</ul>' : '</ol>';
+          inList = false;
+        }
+        const match = trimmed.match(/^```(\w*)/);
+        const lang = (match && match[1]) || 'text';
+        i++;
+        const codeLines = [];
+        while (i < lines.length && !lines[i].trim().startsWith('```')) {
+          codeLines.push(lines[i]);
+          i++;
+        }
+        html += `<div class="code-block" data-language="${this.escapeHtml(lang)}"><pre><code>${this.escapeHtml(codeLines.join('\n'))}</code></pre></div>`;
+        i++;
+        continue;
+      }
+
+      // Headings
+      if (trimmed.startsWith('#')) {
+        if (inList) {
+          html += listType === 'ul' ? '</ul>' : '</ol>';
+          inList = false;
+        }
+        const match = trimmed.match(/^(#+)\s+(.*)/);
+        if (match) {
+          const level = match[1].length;
+          const text = this.escapeAndFormatInline(match[2]);
+          html += `<h${level}>${text}</h${level}>`;
+          i++;
+          continue;
+        }
+      }
+
+      // Lists
+      if (trimmed.match(/^[-*+]\s/)) {
+        if (!inList) {
+          html += '<ul>';
+          inList = true;
+          listType = 'ul';
+        }
+        const match = trimmed.match(/^[-*+]\s+(.*)/);
+        if (match) {
+          const text = this.escapeAndFormatInline(match[1]);
+          html += `<li>${text}</li>`;
+        }
+        i++;
+        continue;
+      }
+
+      if (trimmed.match(/^\d+\.\s/)) {
+        if (!inList || listType !== 'ol') {
+          if (inList) html += '</ul>';
+          html += '<ol>';
+          inList = true;
+          listType = 'ol';
+        }
+        const match = trimmed.match(/^\d+\.\s+(.*)/);
+        if (match) {
+          const text = this.escapeAndFormatInline(match[1]);
+          html += `<li>${text}</li>`;
+        }
+        i++;
+        continue;
+      }
+
+      // End list if not a list item
+      if (inList && trimmed && !trimmed.match(/^[-*+]\s/) && !trimmed.match(/^\d+\.\s/)) {
+        html += listType === 'ul' ? '</ul>' : '</ol>';
+        inList = false;
+      }
+
+      // Paragraphs
+      if (trimmed) {
+        const text = this.escapeAndFormatInline(trimmed);
+        html += `<p>${text}</p>`;
+      }
+
+      i++;
+    }
+
+    // Close any open list
+    if (inList) {
+      html += listType === 'ul' ? '</ul>' : '</ol>';
+    }
+
+    return html;
+  }
+
+  escapeAndFormatInline(text) {
+    text = this.escapeHtml(text);
+    // Bold and italic (must be before single asterisk)
+    text = text.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/\*(.*?)\*/g, '<em>$1</em>');
+    text = text.replace(/__(.*?)__/g, '<strong>$1</strong>');
+    text = text.replace(/_(.*?)_/g, '<em>$1</em>');
+    // Inline code
+    text = text.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+    // Links
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    return text;
+  }
+
   renderCodeBlock(language, code) {
     if (language === 'html') {
       return `<div class="html-block">

package/static/index.html

@@ -26,7 +26,7 @@
       --color-warning: #f59e0b;
       --sidebar-width: 300px;
       --header-height: 52px;
-      --msg-max-width: 768px;
+      --msg-max-width: 100%;
     }
 
     html.dark {
@@ -318,10 +318,12 @@
       max-width: var(--msg-max-width);
       margin: 0 auto;
       width: 100%;
-      padding: 1.5rem 1rem;
+      padding: 1.5rem 2rem;
       display: flex;
       flex-direction: column;
       min-height: 100%;
+      padding-left: calc(max(2rem, (100vw - 900px) / 2));
+      padding-right: calc(max(2rem, (100vw - 900px) / 2));
     }
 
     #output {
@@ -817,6 +819,49 @@
       .agent-selector { display: none; }
     }
 
+    /* ===== SCROLLBAR STYLING ===== */
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 8px;
+      border: 3px solid transparent;
+      background-clip: padding-box;
+      transition: background-color 0.2s;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #94a3b8;
+      background-clip: padding-box;
+    }
+
+    html.dark ::-webkit-scrollbar-thumb {
+      background: #475569;
+      background-clip: padding-box;
+    }
+
+    html.dark ::-webkit-scrollbar-thumb:hover {
+      background-color: #64748b;
+      background-clip: padding-box;
+    }
+
+    /* Firefox scrollbar */
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #cbd5e1 transparent;
+    }
+
+    html.dark * {
+      scrollbar-color: #475569 transparent;
+    }
+
     /* ===== RESPONSIVE: TABLET ===== */
     @media (min-width: 769px) and (max-width: 1024px) {
       :root { --sidebar-width: 260px; }

package/static/styles.css

@@ -1451,24 +1451,6 @@ html, body {
   margin: 1rem 0;
 }
 
-.code-block {
-  background: #f5f5f5;
-  border-left: 4px solid #007acc;
-  padding: 1rem;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-family: 'Courier New', monospace;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  color: #333;
-}
-
-.code-block code {
-  color: inherit;
-  background: none;
-  padding: 0;
-}
-
 /* Inline code */
 p code {
   background: #f0f0f0;
@@ -1734,8 +1716,65 @@ p code {
 
 .block-text {
   color: var(--text-primary);
-  white-space: pre-wrap;
-  line-height: 1.5;
+  line-height: 1.6;
+}
+
+.block-text h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 1rem 0 0.5rem 0;
+  color: var(--text-primary);
+}
+
+.block-text h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0.875rem 0 0.5rem 0;
+  color: var(--text-primary);
+}
+
+.block-text h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0.75rem 0 0.375rem 0;
+  color: var(--text-primary);
+}
+
+.block-text p {
+  margin: 0.5rem 0;
+  white-space: normal;
+}
+
+.block-text ul,
+.block-text ol {
+  margin: 0.5rem 0 0.5rem 1.5rem;
+  padding-left: 1rem;
+}
+
+.block-text li {
+  margin: 0.25rem 0;
+}
+
+.block-text code.inline-code {
+  background: var(--bg-tertiary);
+  color: var(--color-info);
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.25rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.block-text a {
+  color: var(--color-primary);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: var(--transition-fast);
+}
+
+.block-text a:hover {
+  border-bottom-color: var(--color-primary);
+  text-decoration: underline;
 }
 
 .block-tool-use {