agentgui 1.0.15 → 1.0.16

package/acp-launcher.js

@@ -33,19 +33,62 @@ function findBinary(paths) {
   return null;
 }
 
-const RIPPLEUI_SYSTEM_PROMPT = `ALWAYS respond with HTML using RippleUI components. The chat renders HTML. Use: cards (class='card'), alerts (class='alert alert-info'), tables (class='table table-zebra'), badges (class='badge badge-primary'), buttons (class='btn btn-primary'). Wrap all responses in styled HTML with Tailwind CSS utility classes for layout.
-
-RIPPLEUI COMPONENTS:
-Cards: <div class="card bg-base-100 shadow-lg p-6"><h2 class="text-xl font-bold mb-2">Title</h2><p>Content</p></div>
-Alerts: <div class="alert alert-info"><span>Message</span></div>
-Tables: <div class="overflow-x-auto"><table class="table table-zebra"><thead><tr><th>Col</th></tr></thead><tbody><tr><td>Val</td></tr></tbody></table></div>
-Badges: <span class="badge badge-primary">Tag</span>
-Buttons: <button class="btn btn-primary">Action</button>
-Code: <pre class="bg-base-200 p-4 rounded-lg overflow-x-auto"><code>code here</code></pre>
-Lists: <ul class="list-none space-y-2"><li class="p-3 bg-base-200 rounded-lg">Item</li></ul>
-
-Use Tailwind CSS utility classes for layout (flex, grid, gap-4, p-4, rounded, shadow).
-ALWAYS wrap responses in styled HTML. Never send plain unstyled text.`;
+const RIPPLEUI_SYSTEM_PROMPT = `CRITICAL: ALWAYS respond with styled HTML using RippleUI components. This is a web-based chat interface that ONLY renders HTML beautifully. NEVER respond with plain text.
+
+FOR EVERY RESPONSE:
+1. Wrap your ENTIRE response in a container div with proper styling
+2. Use semantic HTML (h1-h6 for headings, p for paragraphs, ul/ol for lists)
+3. Format code in <pre><code> blocks with language class
+4. Use cards for organized information blocks
+5. Use alerts for important information
+6. Use tables for tabular data
+7. Style everything with Tailwind CSS classes
+
+RESPONSE STRUCTURE TEMPLATE:
+\`\`\`html
+<div class="space-y-4 p-4">
+  <h2 class="text-2xl font-bold">Main Heading</h2>
+  <p class="text-gray-700">Introductory text here.</p>
+  
+  <div class="card bg-base-100 shadow-lg p-4">
+    <h3 class="text-lg font-semibold mb-2">Section Title</h3>
+    <p>Content goes here.</p>
+  </div>
+  
+  <pre class="bg-base-200 p-4 rounded-lg overflow-x-auto"><code class="language-javascript">// Code example
+const example = () => { };</code></pre>
+  
+  <ul class="list-none space-y-2 ml-4">
+    <li class="p-2 bg-base-200 rounded">• Item one</li>
+    <li class="p-2 bg-base-200 rounded">• Item two</li>
+  </ul>
+</div>
+\`\`\`
+
+COMPONENT REFERENCE:
+- Cards: <div class="card bg-base-100 shadow-lg p-6"><h3 class="font-bold">Title</h3><p>Content</p></div>
+- Alerts: <div class="alert alert-info"><span>Message</span></div>
+- Tables: <table class="table table-zebra"><thead><tr><th>Header</th></tr></thead><tbody><tr><td>Data</td></tr></tbody></table>
+- Badges: <span class="badge badge-primary">Label</span>
+- Code: <pre class="bg-base-200 p-4 rounded-lg overflow-x-auto"><code class="language-{lang}">{code}</code></pre>
+- Lists: <ul class="list-none space-y-2"><li class="p-2 bg-base-200 rounded">Item</li></ul>
+
+REQUIRED FOR ALL RESPONSES:
+✓ Wrap response in HTML (usually a div with space-y-4 for vertical spacing)
+✓ Use Tailwind classes: text-xl, font-bold, p-4, mb-3, rounded-lg, shadow, etc.
+✓ Always use proper semantic HTML tags
+✓ Format code blocks with language class for syntax highlighting
+✓ Use colors: bg-blue-50, text-gray-700, border-blue-200 for visual hierarchy
+✓ NEVER respond with raw text - ALWAYS wrap in HTML container
+
+EXAMPLES OF GOOD RESPONSES:
+- Questions: Wrap answer in a card with bold question and styled answer
+- Code: Use <pre><code> with language class
+- Lists: Use <ul> or <ol> with proper styling
+- Instructions: Use numbered or bulleted lists in cards
+- Explanations: Use cards for each concept, bold headings, clear spacing
+
+Remember: The user sees raw HTML output. Make it beautiful and readable.`;
 
 export default class ACPConnection {
   constructor() {
@@ -255,13 +298,44 @@ export default class ACPConnection {
     return this.sendRequest('session/set_mode', { sessionId: this.sessionId, modeId });
   }
 
-  async injectSkills() {
+  async injectSkills(additionalContext = '') {
     if (this.printMode) return {};
-    return this.sendRequest('session/skill_inject', {
-      sessionId: this.sessionId,
-      skills: [],
-      notification: [{ type: 'text', text: RIPPLEUI_SYSTEM_PROMPT }]
-    }).catch(() => null);
+    
+    // Combine the system prompt with any additional context
+    const systemPrompt = additionalContext ? `${RIPPLEUI_SYSTEM_PROMPT}\n\n---\n\n${additionalContext}` : RIPPLEUI_SYSTEM_PROMPT;
+    
+    try {
+      const result = await this.sendRequest('session/skill_inject', {
+        sessionId: this.sessionId,
+        skills: [],
+        notification: [{ type: 'text', text: systemPrompt }]
+      });
+      return result;
+    } catch (e) {
+      // skill_inject may not be supported, try alternative methods
+      console.log(`[ACP] skill_inject failed (may not be supported): ${e.message}`);
+      return null;
+    }
+  }
+
+  /**
+   * Inject system prompt as initial context
+   */
+  async injectSystemContext() {
+    if (this.printMode) return {};
+    
+    // Some versions may need the system prompt sent as the first message context
+    try {
+      await this.sendRequest('session/context', {
+        sessionId: this.sessionId,
+        context: RIPPLEUI_SYSTEM_PROMPT,
+        role: 'system'
+      });
+      return { success: true };
+    } catch (e) {
+      // This method may not be supported, silently fail
+      return null;
+    }
   }
 
   async sendPrompt(prompt) {

package/hot-reload-manager.js

@@ -0,0 +1,186 @@
+/**
+ * Hot Reload Manager
+ * Enables live reloading of client code and graceful server restarts without losing connections
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export class HotReloadManager {
+  constructor(staticDir, options = {}) {
+    this.staticDir = staticDir;
+    this.watchedFiles = new Map();
+    this.hotReloadClients = [];
+    this.debounceTimers = new Map();
+    this.debounceDelay = options.debounceDelay || 300;
+    this.enabled = options.enabled !== false;
+  }
+
+  /**
+   * Start watching files for changes
+   */
+  start() {
+    if (!this.enabled) return;
+    
+    try {
+      this.watchDirectory(this.staticDir);
+      console.log('[HotReload] Watching for changes:', this.staticDir);
+    } catch (e) {
+      console.error('[HotReload] Failed to start:', e.message);
+    }
+  }
+
+  /**
+   * Watch directory recursively
+   */
+  watchDirectory(dir) {
+    try {
+      const files = fs.readdirSync(dir, { withFileTypes: true });
+      
+      for (const file of files) {
+        const fullPath = path.join(dir, file.name);
+        
+        if (file.isDirectory()) {
+          this.watchDirectory(fullPath);
+        } else {
+          this.watchFile(fullPath);
+        }
+      }
+    } catch (e) {
+      console.error('[HotReload] Error watching directory:', e.message);
+    }
+  }
+
+  /**
+   * Watch individual file for changes
+   */
+  watchFile(filePath) {
+    if (this.watchedFiles.has(filePath)) return;
+
+    try {
+      fs.watchFile(filePath, { interval: 100 }, (curr, prev) => {
+        if (curr.mtime > prev.mtime) {
+          this.onFileChanged(filePath);
+        }
+      });
+
+      this.watchedFiles.set(filePath, true);
+    } catch (e) {
+      console.error('[HotReload] Error watching file:', e.message);
+    }
+  }
+
+  /**
+   * Handle file change with debouncing
+   */
+  onFileChanged(filePath) {
+    // Clear existing timer for this file
+    if (this.debounceTimers.has(filePath)) {
+      clearTimeout(this.debounceTimers.get(filePath));
+    }
+
+    // Set new debounced timer
+    const timer = setTimeout(() => {
+      this.debounceTimers.delete(filePath);
+      const relPath = path.relative(this.staticDir, filePath);
+      
+      console.log(`[HotReload] File changed: ${relPath}`);
+      this.broadcastReload();
+    }, this.debounceDelay);
+
+    this.debounceTimers.set(filePath, timer);
+  }
+
+  /**
+   * Register a WebSocket client for hot reload
+   */
+  registerClient(ws) {
+    if (!this.enabled) return;
+    this.hotReloadClients.push(ws);
+    
+    ws.on('close', () => {
+      const idx = this.hotReloadClients.indexOf(ws);
+      if (idx > -1) this.hotReloadClients.splice(idx, 1);
+    });
+  }
+
+  /**
+   * Broadcast reload signal to all connected clients
+   */
+  broadcastReload() {
+    const message = JSON.stringify({ type: 'reload', timestamp: Date.now() });
+    
+    for (const ws of this.hotReloadClients) {
+      if (ws.readyState === 1) { // WebSocket.OPEN
+        try {
+          ws.send(message);
+        } catch (e) {
+          // Client may have disconnected
+        }
+      }
+    }
+  }
+
+  /**
+   * Cleanup watchers
+   */
+  stop() {
+    for (const filePath of this.watchedFiles.keys()) {
+      try {
+        fs.unwatchFile(filePath);
+      } catch (e) {}
+    }
+    
+    for (const timer of this.debounceTimers.values()) {
+      clearTimeout(timer);
+    }
+    
+    this.watchedFiles.clear();
+    this.debounceTimers.clear();
+    this.hotReloadClients = [];
+  }
+
+  /**
+   * Get HTML snippet to inject for hot reload
+   */
+  getClientScript(baseUrl = '') {
+    if (!this.enabled) return '';
+
+    return `
+<script>
+(function() {
+  const baseUrl = '${baseUrl}';
+  const ws = new WebSocket((location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + location.host + baseUrl + '/hot-reload');
+  
+  ws.onmessage = function(event) {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === 'reload') {
+        console.log('[HotReload] Reloading page...');
+        location.reload();
+      }
+    } catch (e) {
+      console.error('[HotReload] Error parsing message:', e);
+    }
+  };
+  
+  ws.onerror = function(e) {
+    console.log('[HotReload] WebSocket error:', e);
+  };
+  
+  ws.onclose = function() {
+    console.log('[HotReload] Connection closed, will attempt to reconnect...');
+    setTimeout(function() {
+      location.reload();
+    }, 2000);
+  };
+})();
+</script>
+    `;
+  }
+}
+
+export default HotReloadManager;

package/package.json

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

package/server.js

@@ -32,7 +32,9 @@ async function getACP(agentId, cwd) {
     await conn.initialize();
     await conn.newSession(cwd);
     await conn.setSessionMode('bypassPermissions');
-    await conn.injectSkills(['html_rendering', 'image_display', 'scrot', 'fs_access']);
+    // Inject system prompt to ensure HTML/RippleUI formatting
+    await conn.injectSkills();
+    await conn.injectSystemContext();
     acpPool.set(agentId, conn);
     console.log(`ACP connection ready for ${agentId} in ${cwd}`);
     return conn;

package/static/app.js

@@ -525,10 +525,15 @@ class GMGUIApp {
 
   looksLikeHtml(text) {
     const trimmed = text.trim();
+    // Check for HTML tags at the start
     if (/^<[a-z][\s\S]*>/i.test(trimmed)) return true;
-    if (/<\/(div|span|p|table|ul|ol|h[1-6]|section|article|header|footer|nav|main|aside|details|summary|figure|figcaption|blockquote|pre|code|a|strong|em|img|br|hr)>/i.test(trimmed)) return true;
+    // Check for closing tags of common HTML elements
+    if (/<\/(div|span|p|table|ul|ol|h[1-6]|section|article|header|footer|nav|main|aside|details|summary|figure|figcaption|blockquote|pre|code|a|strong|em|img|br|hr|button|input|form|label)>/i.test(trimmed)) return true;
+    // Check for Tailwind/RippleUI classes (strong indicator of HTML)
+    if (/class\s*=\s*["'][^"']*(?:card|alert|badge|btn|table|space-y|p-\d+|text-|bg-|rounded|shadow)/.test(trimmed)) return true;
+    // Count HTML tags
     const tagCount = (trimmed.match(/<[a-z][^>]*>/gi) || []).length;
-    if (tagCount >= 3) return true;
+    if (tagCount >= 2) return true; // Lower threshold for HTML detection
     return false;
   }