agentgui 1.0.127 → 1.0.129

package/package.json

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

package/static/index.html

@@ -8,6 +8,8 @@
 
   <link href="https://unpkg.com/rippleui@0.14.0/dist/ripple.css" rel="stylesheet">
   <link href="https://unpkg.com/prism@1.29.0/themes/prism-dark.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 
   <style>
     *, *::before, *::after { box-sizing: border-box; }

package/static/js/streaming-renderer.js

@@ -991,81 +991,12 @@ class StreamingRenderer {
    * Render code with basic syntax highlighting
    */
   static renderCodeWithHighlight(code, esc) {
-    // Escape HTML first
-    let highlighted = esc(code);
-
-    // Detect if this is JSON and apply JSON-specific highlighting
-    const isJSON = (code.trim().startsWith('{') || code.trim().startsWith('[')) &&
-                   code.includes('"') && (code.includes(':') || code.includes(','));
-
-    if (isJSON) {
-      // JSON-specific highlighting
-      const jsonHighlights = [
-        // Property names (keys) in quotes
-        { pattern: /"([^"]+)"\s*:/g, replacement: '"<span style="color:#3b82f6;font-weight:600">$1</span>":' },
-        // String values
-        { pattern: /:\s*"([^"]*)"/g, replacement: ': "<span style="color:#10b981">$1</span>"' },
-        // Numbers
-        { pattern: /:\s*(\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, replacement: ': <span style="color:#f59e0b">$1</span>' },
-        // Booleans and null
-        { pattern: /:\s*(true|false|null)/g, replacement: ': <span style="color:#ef4444">$1</span>' },
-        // Array/object brackets
-        { pattern: /([\[\]{}])/g, replacement: '<span style="color:#6b7280;font-weight:600">$1</span>' },
-      ];
-
-      jsonHighlights.forEach(({ pattern, replacement }) => {
-        highlighted = highlighted.replace(pattern, replacement);
-      });
-    } else {
-      // General code syntax highlighting
-      const highlights = [
-        // Comments (do these first to avoid conflicts)
-        { pattern: /(\/\/[^\n]*)/g, replacement: '<span style="color:#6b7280;font-style:italic">$1</span>' },
-        { pattern: /(\/\*[\s\S]*?\*\/)/g, replacement: '<span style="color:#6b7280;font-style:italic">$1</span>' },
-        { pattern: /(#[^\n]*)/g, replacement: '<span style="color:#6b7280;font-style:italic">$1</span>' },
-
-        // Strings (improved to handle escaped quotes)
-        { pattern: /(["'])(?:[^\\]|\\.)*?\1/g, replacement: (match) => `<span style="color:#10b981">${match}</span>` },
-
-        // Template literals (backticks)
-        { pattern: /`([^`]*)`/g, replacement: '<span style="color:#10b981">`$1`</span>' },
-
-        // Keywords
-        { pattern: /\b(function|const|let|var|class|import|export|async|await|return|if|else|for|while|try|catch|throw|new|typeof|instanceof|this|super|switch|case|default|break|continue|do)\b/g,
-          replacement: '<span style="color:#8b5cf6;font-weight:600">$1</span>' },
-        { pattern: /\b(def|class|import|from|return|if|elif|else|for|while|try|except|raise|with|as|lambda|pass|break|continue|yield|global|nonlocal)\b/g,
-          replacement: '<span style="color:#8b5cf6;font-weight:600">$1</span>' },
-        { pattern: /\b(public|private|protected|static|final|abstract|interface|extends|implements|package|void|int|string|boolean|float|double|char)\b/g,
-          replacement: '<span style="color:#8b5cf6;font-weight:600">$1</span>' },
-
-        // Type annotations
-        { pattern: /:\s*([A-Z][a-zA-Z0-9_]*)/g, replacement: ': <span style="color:#0891b2">$1</span>' },
-
-        // Numbers
-        { pattern: /\b(\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)\b/g, replacement: '<span style="color:#f59e0b">$1</span>' },
-
-        // Booleans and null
-        { pattern: /\b(true|false|null|undefined|None|True|False|nil)\b/g, replacement: '<span style="color:#ef4444">$1</span>' },
-
-        // Function/method names (improved)
-        { pattern: /\b([a-zA-Z_][a-zA-Z0-9_]*)(?=\s*\()/g, replacement: '<span style="color:#3b82f6">$1</span>' },
-
-        // Operators
-        { pattern: /(===|!==|==|!=|<=|>=|&&|\|\||\+=|-=|\*=|\/=|%=|=>|->)/g, replacement: '<span style="color:#a855f7">$1</span>' },
-      ];
-
-      // Apply highlights
-      highlights.forEach(({ pattern, replacement }) => {
-        if (typeof replacement === 'function') {
-          highlighted = highlighted.replace(pattern, replacement);
-        } else {
-          highlighted = highlighted.replace(pattern, replacement);
-        }
-      });
+    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";
+    if (typeof hljs !== 'undefined') {
+      const result = hljs.highlightAuto(code);
+      return `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
     }
-
-    // Use a dark theme that works well for code
-    return `<pre style="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;box-shadow:0 2px 4px rgba(0,0,0,0.1)">${highlighted}</pre>`;
+    return `<pre style="${preStyle}">${esc(code)}</pre>`;
   }
 
   /**