agentgui 1.0.810 → 1.0.812

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+## [Unreleased]
+
+### Fixed
+- Thinking blocks now use theme-aware CSS vars for light/dark backgrounds (`--color-thinking-bg`)
+- All code blocks (renderBlockCode, renderCodeWithHighlight, renderFileRead, renderCommand) now use CSS vars instead of hardcoded dark hex colors
+- Removed hardcoded `#1e293b`, `#e2e8f0`, `#d1d5db` from all inline styles in streaming-renderer.js
+- tool-result-pre text color now adapts to theme via `--color-code-text`
+- Added CSS vars to :root (light) and html.dark for --color-bg-code, --color-code-text, --color-code-border, --color-thinking-bg
+- Thinking block content now renders full markdown (headers, lists, blockquotes, bold, italic, inline code, links)
+- parseAndRenderMarkdown() extended with headers (##/###), ul/ol lists, blockquotes (>), horizontal rules (---)
+- Thinking content dark mode text color set to #c4b5fd (readable purple)
+

package/database.js

@@ -621,8 +621,9 @@ try {
   if (mode !== 2) { // 2 = INCREMENTAL
     console.log('[Migration] Enabling incremental auto_vacuum (one-time VACUUM)...');
     db.exec('PRAGMA auto_vacuum = INCREMENTAL');
-    db.exec('VACUUM');
-    console.log('[Migration] VACUUM complete, auto_vacuum = INCREMENTAL enabled');
+    // VACUUM skipped intentionally — full VACUUM on large DBs blocks server startup
+    // INCREMENTAL auto_vacuum will apply to new pages going forward
+    console.log('[Migration] auto_vacuum = INCREMENTAL enabled (VACUUM skipped)');
   }
 } catch (err) {
   console.error('[Migration] auto_vacuum setup error:', err.message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.810",
+  "version": "1.0.812",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/css/main.css

@@ -5,7 +5,10 @@
       --color-primary-dark: #1e40af;
       --color-bg-primary: #ffffff;
       --color-bg-secondary: #f9fafb;
-      --color-bg-code: #1f2937;
+      --color-bg-code: #f1f5f9;
+      --color-code-text: #1e293b;
+      --color-code-border: #cbd5e1;
+      --color-thinking-bg: #f5f3ff;
       --color-text-primary: #111827;
       --color-text-secondary: #6b7280;
       --color-border: #e5e7eb;
@@ -26,6 +29,10 @@
       --color-border: #333333;
       --color-primary: #737373;
       --color-primary-dark: #525252;
+      --color-bg-code: #1e293b;
+      --color-code-text: #e2e8f0;
+      --color-code-border: #334155;
+      --color-thinking-bg: #1e1a2e;
     }
 
     html, body {
@@ -766,7 +773,7 @@
       padding: 0.5rem 0.75rem;
       font-size: 0.75rem;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      color: #d1d5db;
+      color: var(--color-code-text);
       overflow-x: auto;
       max-height: 300px;
       overflow-y: auto;
@@ -1547,11 +1554,11 @@
     .block-thinking {
       margin-bottom: 0;
       border-radius: 0.5rem;
-      background: #f5f3ff;
+      background: var(--color-thinking-bg);
       overflow: hidden;
     }
 
-    html.dark .block-thinking { }
+    html.dark .block-thinking { background: var(--color-thinking-bg); }
 
     .block-thinking summary {
       padding: 0.375rem 0.75rem;
@@ -1571,14 +1578,24 @@
     .block-thinking summary:hover { }
 
     .block-thinking .thinking-content {
-      padding: 0.375rem 0.75rem;
+      padding: 0.375rem 0.75rem 0.75rem;
       font-size: 0.85rem;
       color: #5b21b6;
-      white-space: pre-wrap;
-      line-height: 1.5;
+      line-height: 1.6;
     }
+    .block-thinking .thinking-content p { margin: 0.25rem 0; }
+    .block-thinking .thinking-content br { display: block; margin: 0.125rem 0; }
+    .block-thinking .thinking-content code { background: rgba(91,33,182,0.1); padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-family: 'Monaco','Menlo','Ubuntu Mono',monospace; font-size: 0.8rem; }
+    .block-thinking .thinking-content strong { font-weight: 700; }
+    .block-thinking .thinking-content em { font-style: italic; opacity: 0.85; }
+    .block-thinking .thinking-content h2, .block-thinking .thinking-content h3 { margin: 0.5rem 0 0.25rem; font-size: 0.9rem; font-weight: 700; }
+    .block-thinking .thinking-content ul, .block-thinking .thinking-content ol { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; }
+    .block-thinking .thinking-content li { margin: 0.125rem 0; }
+    .block-thinking .thinking-content blockquote { margin: 0.25rem 0 0.25rem 0; padding: 0.25rem 0.75rem; border-left: 3px solid #a78bfa; opacity: 0.85; }
 
     html.dark .block-thinking .thinking-content { color: #c4b5fd; }
+    html.dark .block-thinking .thinking-content code { background: rgba(196,181,253,0.15); }
+    html.dark .block-thinking .thinking-content blockquote { border-left-color: #7c3aed; }
 
     /* --- Tool Use Block --- */
     .block-tool-use {

package/static/js/streaming-renderer.js

@@ -461,25 +461,68 @@ class StreamingRenderer {
    * Parse markdown and render links, code, bold, italic
    */
   parseAndRenderMarkdown(text) {
-    let html = this.escapeHtml(text);
-
-    // Render markdown bold: **text** -> <strong>text</strong>
-    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong class="font-semibold text-base-content">$1</strong>');
-
-    // Render markdown italic: *text* or _text_
-    html = html.replace(/\*([^*]+)\*/g, '<em class="italic text-base-content/70">$1</em>');
-    html = html.replace(/_([^_]+)_/g, '<em class="italic text-base-content/70">$1</em>');
-
-    // Render inline code: `code`
-    html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
-
-    // Render markdown links: [text](url)
-    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="link link-primary" target="_blank">$1</a>');
-
-    // Convert line breaks
-    html = html.replace(/\n/g, '<br>');
+    const esc = this.escapeHtml.bind(this);
+    const lines = text.split('\n');
+    const out = [];
+    let i = 0;
+    while (i < lines.length) {
+      const line = lines[i];
+      const trimmed = line.trim();
+      if (trimmed.startsWith('### ')) {
+        out.push(`<h3 style="margin:0.4rem 0 0.2rem;font-size:0.95rem;font-weight:700">${this._mdInline(esc(trimmed.slice(4)))}</h3>`);
+        i++; continue;
+      }
+      if (trimmed.startsWith('## ')) {
+        out.push(`<h2 style="margin:0.5rem 0 0.25rem;font-size:1rem;font-weight:700">${this._mdInline(esc(trimmed.slice(3)))}</h2>`);
+        i++; continue;
+      }
+      if (trimmed.startsWith('# ')) {
+        out.push(`<h2 style="margin:0.5rem 0 0.25rem;font-size:1.05rem;font-weight:700">${this._mdInline(esc(trimmed.slice(2)))}</h2>`);
+        i++; continue;
+      }
+      if (trimmed.startsWith('> ')) {
+        out.push(`<blockquote style="margin:0.25rem 0;padding:0.2rem 0.75rem;border-left:3px solid currentColor;opacity:0.75">${this._mdInline(esc(trimmed.slice(2)))}</blockquote>`);
+        i++; continue;
+      }
+      if (trimmed === '---' || trimmed === '***' || trimmed === '___') {
+        out.push('<hr style="border:none;border-top:1px solid currentColor;opacity:0.2;margin:0.5rem 0">');
+        i++; continue;
+      }
+      if (/^[-*+] /.test(trimmed)) {
+        const items = [];
+        while (i < lines.length && /^[-*+] /.test(lines[i].trim())) {
+          items.push(`<li style="margin:0.1rem 0">${this._mdInline(esc(lines[i].trim().slice(2)))}</li>`);
+          i++;
+        }
+        out.push(`<ul style="margin:0.25rem 0;padding-left:1.25rem">${items.join('')}</ul>`);
+        continue;
+      }
+      if (/^\d+\. /.test(trimmed)) {
+        const items = [];
+        while (i < lines.length && /^\d+\. /.test(lines[i].trim())) {
+          items.push(`<li style="margin:0.1rem 0">${this._mdInline(esc(lines[i].trim().replace(/^\d+\. /, '')))}</li>`);
+          i++;
+        }
+        out.push(`<ol style="margin:0.25rem 0;padding-left:1.25rem">${items.join('')}</ol>`);
+        continue;
+      }
+      if (trimmed === '') {
+        out.push('<br>');
+        i++; continue;
+      }
+      out.push(this._mdInline(esc(line)));
+      i++;
+    }
+    return out.join('\n');
+  }
 
-    return html;
+  _mdInline(html) {
+    return html
+      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+      .replace(/_([^_]+)_/g, '<em>$1</em>')
+      .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="text-decoration:underline;opacity:0.85" target="_blank">$1</a>');
   }
 
   /**
@@ -514,7 +557,7 @@ class StreamingRenderer {
       });
     });
 
-    const preStyle = "background:#1e293b;padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;border-top:none;margin:0";
+    const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);border-top:none;margin:0";
     const codeContainer = document.createElement('div');
     codeContainer.innerHTML = `<pre style="${preStyle}"><code class="lazy-hl">${this.escapeHtml(code)}</code></pre>`;
 
@@ -548,7 +591,7 @@ class StreamingRenderer {
       + '<span>Thinking Process</span>'
       + (hasSignature ? '<span style="margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400">verified</span>' : '')
       + '</summary>'
-      + '<div class="thinking-content">' + this.escapeHtml(thinking) + '</div>'
+      + '<div class="thinking-content">' + this.parseAndRenderMarkdown(thinking) + '</div>'
       + '</details>';
     return div;
   }
@@ -847,7 +890,7 @@ class StreamingRenderer {
       }
       if (data.length > 500) {
         const lines = data.split('\n').length;
-        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:#d1d5db;padding:0.5rem;border-radius:0.375rem;line-height:1.5">${this.escapeHtml(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars, ' + lines + ' lines)' : ''}</div>`;
+        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:var(--color-code-text);padding:0.5rem;border-radius:0.375rem;line-height:1.5">${this.escapeHtml(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars, ' + lines + ' lines)' : ''}</div>`;
       }
       const looksLikePath = data.startsWith('/') || /^[A-Za-z]:[\\\/]/.test(data);
       if (looksLikePath && !data.includes(' ') && data.includes('.')) return this.renderFilePath(data);
@@ -1139,7 +1182,7 @@ class StreamingRenderer {
    * Render code with basic syntax highlighting
    */
   static renderCodeWithHighlight(code, esc, flat = false) {
-    const preStyle = "background:#1e293b;padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;margin:0";
+    const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);margin:0";
     const codeHtml = `<pre style="${preStyle}"><code class="lazy-hl">${esc(code)}</code></pre>`;
     if (flat) return codeHtml;
     const lineCount = code.split('\n').length;
@@ -1211,7 +1254,7 @@ class StreamingRenderer {
         return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, esc, true)}${suffix}</div>`;
       }
       if (data.length > 500) {
-        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:#d1d5db;padding:0.5rem;border-radius:0.375rem;line-height:1.5">${esc(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars)' : ''}</div>`;
+        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:var(--color-code-text);padding:0.5rem;border-radius:0.375rem;line-height:1.5">${esc(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars)' : ''}</div>`;
       }
       const looksLikePath = /^[A-Za-z]:[\\\/]/.test(data) || data.startsWith('/');
       if (looksLikePath && !data.includes(' ') && data.includes('.')) {
@@ -1734,10 +1777,10 @@ class StreamingRenderer {
           }
         }
         if (base64Data) {
-          html += `<div style="padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem"><img src="data:${mimeType};base64,${this.escapeHtml(base64Data)}" style="max-width:100%;max-height:600px;border-radius:0.375rem;border:1px solid #334155" loading="lazy"><div style="font-size:0.7rem;color:#64748b;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;word-break:break-all">${this.escapeHtml(event.path)}</div></div>`;
+          html += `<div style="padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem"><img src="data:${mimeType};base64,${this.escapeHtml(base64Data)}" style="max-width:100%;max-height:600px;border-radius:0.375rem;border:1px solid var(--color-code-border)" loading="lazy"><div style="font-size:0.7rem;color:var(--color-text-secondary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;word-break:break-all">${this.escapeHtml(event.path)}</div></div>`;
         } else {
           const contentStr = typeof event.content === 'string' ? event.content : JSON.stringify(event.content, null, 2);
-          html += `<pre style="background:#1e293b;padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:#e2e8f0;margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(contentStr, 2000))}</code></pre>`;
+          html += `<pre style="background:var(--color-bg-code);padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:var(--color-code-text);margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(contentStr, 2000))}</code></pre>`;
         }
       }
       body.innerHTML = html;
@@ -1835,7 +1878,7 @@ class StreamingRenderer {
     body.className = 'folded-tool-body';
     let html = `<div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(command)}</span></div>`;
     if (output) {
-      html += `<pre style="background:#1e293b;padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:#e2e8f0;margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(output, 2000))}</code></pre>`;
+      html += `<pre style="background:var(--color-bg-code);padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:var(--color-code-text);margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(output, 2000))}</code></pre>`;
     }
     if (exitCode !== null && exitCode !== 0) {
       html += `<div style="margin-top:0.375rem;font-size:0.75rem;color:#ef4444;font-weight:600">Exit code: ${exitCode}</div>`;