agentgui 1.0.42 → 1.0.44

package/acp-launcher.js

@@ -2,22 +2,29 @@ import { createClient } from 'claude-code-acp';
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
+import { default as SYSTEM_PROMPT } from './system-prompt.js';
 
 /**
  * Load CLI configuration to ensure identical behavior
+ * Supports both Claude Code and OpenCode
  */
-function loadCLIConfig() {
+function loadCLIConfig(agentType) {
   const configPaths = [
+    // Claude Code paths
     path.join(os.homedir(), '.claude', 'config.json'),
     path.join(os.homedir(), '.claude-code', 'config.json'),
-    path.join(process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config'), 'claude', 'config.json')
+    path.join(process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config'), 'claude', 'config.json'),
+    // OpenCode paths
+    path.join(os.homedir(), '.opencode', 'config.json'),
+    path.join(os.homedir(), '.config', 'opencode', 'config.json'),
+    path.join(process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config'), 'opencode', 'config.json')
   ];
 
   for (const configPath of configPaths) {
     try {
       if (fs.existsSync(configPath)) {
         const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
-        console.log(`[ACP] Loaded CLI config from ${configPath}`);
+        console.log(`[ACP] Loaded ${agentType} CLI config from ${configPath}`);
         return config;
       }
     } catch (e) {
@@ -25,73 +32,10 @@ function loadCLIConfig() {
     }
   }
 
+  console.log(`[ACP] No ${agentType} config found, using defaults`);
   return {};
 }
 
-const RIPPLEUI_SYSTEM_PROMPT = `CRITICAL INSTRUCTION: You are responding in a web-based HTML interface. EVERY response must be formatted as beautiful, styled HTML using RippleUI and Tailwind CSS. This is NOT a text-based interface - users see raw HTML rendered in their browser.
-
-YOUR RESPONSE FORMAT MUST BE:
-Wrap your ENTIRE response in a single HTML container with these elements:
-
-\`\`\`html
-<div class="space-y-4 p-6 max-w-4xl">
-  <!-- Main content goes here -->
-</div>
-\`\`\`
-
-STRUCTURE YOUR RESPONSES LIKE THIS:
-
-For questions/answers:
-\`\`\`html
-<div class="space-y-4 p-6">
-  <h2 class="text-2xl font-bold text-gray-900">Your Answer</h2>
-  <div class="card bg-blue-50 border-l-4 border-blue-500 p-4">
-    <p class="text-gray-700">Your detailed answer here</p>
-  </div>
-</div>
-\`\`\`
-
-For code:
-\`\`\`html
-<div class="space-y-4 p-6">
-  <h3 class="text-xl font-bold">Code Example</h3>
-  <pre class="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto"><code>// Your code here
-function example() { }</code></pre>
-</div>
-\`\`\`
-
-For lists:
-\`\`\`html
-<div class="space-y-4 p-6">
-  <h3 class="text-xl font-bold">Items</h3>
-  <ul class="list-none space-y-2">
-    <li class="p-3 bg-gray-100 rounded border-l-4 border-gray-400">• Item one</li>
-    <li class="p-3 bg-gray-100 rounded border-l-4 border-gray-400">• Item two</li>
-  </ul>
-</div>
-\`\`\`
-
-COMPONENT LIBRARY:
-- Card: <div class="card bg-white shadow-lg p-6 rounded-lg"><h4 class="font-bold">Title</h4><p>Content</p></div>
-- Alert: <div class="alert bg-red-100 border-l-4 border-red-500 p-4"><span class="text-red-800">Warning message</span></div>
-- Success: <div class="alert bg-green-100 border-l-4 border-green-500 p-4"><span class="text-green-800">Success</span></div>
-- Table: <table class="w-full border-collapse border border-gray-300"><thead class="bg-gray-100"><tr><th class="p-2 text-left">Col</th></tr></thead><tbody><tr><td class="p-2 border border-gray-300">Data</td></tr></tbody></table>
-- Badge: <span class="inline-block bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Label</span>
-- Code inline: <code class="bg-gray-200 px-2 py-1 rounded text-red-600 font-mono">code</code>
-
-MANDATORY RULES:
-✓ EVERY response MUST be wrapped in a div with class "space-y-4 p-6"
-✓ Use semantic HTML: <h1>-<h6>, <p>, <ul>, <ol>, <table>, <pre>
-✓ Always add Tailwind classes for styling: colors, padding, margins, rounded corners
-✓ Code blocks MUST use <pre><code> with language class like \`class="language-javascript"\`
-✓ NEVER send plain text without HTML wrapping
-✓ NEVER respond outside of HTML container
-✓ Use color classes: text-gray-700, bg-blue-50, border-blue-500
-✓ Make visual hierarchy clear: use different font sizes, colors, cards
-
-YOU MUST ALWAYS OUTPUT VALID, COMPLETE HTML.
-The user's interface shows YOUR HTML directly - make it beautiful, well-organized, and professional.`;
-
 export default class ACPConnection {
   constructor() {
     this.client = null;
@@ -108,7 +52,7 @@ export default class ACPConnection {
       console.log(`[ACP] Connecting to ${agentType}...`);
 
       // Load CLI configuration for identical behavior
-      const cliConfig = loadCLIConfig();
+      const cliConfig = loadCLIConfig(agentType);
 
       // Create client with CLI-identical configuration
       // Pass through all environment for OAuth and plugin support
@@ -181,14 +125,14 @@ export default class ACPConnection {
   }
 
   /**
-   * Inject skills and system prompt
+   * Inject unified HTML enforcement system prompt
    */
   async injectSkills(additionalContext = '') {
     if (!this.client) throw new Error('ACP not connected');
 
     const systemPrompt = additionalContext
-      ? `${RIPPLEUI_SYSTEM_PROMPT}\n\n---\n\n${additionalContext}`
-      : RIPPLEUI_SYSTEM_PROMPT;
+      ? `${SYSTEM_PROMPT}\n\n---\n\n${additionalContext}`
+      : SYSTEM_PROMPT;
 
     return this.client.request('session/skill_inject', {
       sessionId: this.sessionId,
@@ -198,14 +142,14 @@ export default class ACPConnection {
   }
 
   /**
-   * Inject system context
+   * Inject system context with unified HTML enforcement
    */
   async injectSystemContext() {
     if (!this.client) throw new Error('ACP not connected');
 
     return this.client.request('session/context', {
       sessionId: this.sessionId,
-      context: RIPPLEUI_SYSTEM_PROMPT,
+      context: SYSTEM_PROMPT,
       role: 'system'
     });
   }

package/package.json

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

package/server.js

@@ -7,8 +7,6 @@ import os from 'os';
 import { execSync } from 'child_process';
 import { queries } from './database.js';
 import ACPConnection from './acp-launcher.js';
-import { ResponseFormatter } from './response-formatter.js';
-import { HTMLWrapper } from './html-wrapper.js';
 import { SessionStateStore } from './state-manager.js';
 import { StreamHandler } from './stream-handler.js';
 import { StateValidator } from './state-validator.js';
@@ -454,27 +452,16 @@ async function processMessage(conversationId, messageId, sessionId, content, age
 
       console.log(`[processMessage] ACP returned: stopReason=${result?.stopReason}, streamUpdates=${streamHandler.getUpdateCount()}`);
 
-      // Use full text if available, otherwise use result
-      let responseText = fullText || result?.result || (result?.stopReason ? `Completed: ${result.stopReason}` : 'No response.');
-
-      // Only wrap plain text in HTML - don't wrap if already HTML
-      const isHTML = responseText.trim().startsWith('<');
-      if (!isHTML) {
-        responseText = HTMLWrapper.wrapResponse(responseText);
-      }
-
-      // Segment and format
-      const segments = ResponseFormatter.segmentResponse(responseText);
-      const metadata = ResponseFormatter.extractMetadata(responseText);
-      const blocks = streamHandler.getBlocks();
+      // Agent sends HTML directly - no conversion needed
+      // Extract HTML code block from response
+      const responseText = fullText || result?.result || 'No response.';
+      const htmlMatch = responseText.match(/```html\n([\s\S]*?)\n```/);
+      const htmlContent = htmlMatch ? htmlMatch[1] : responseText;
 
       const messageContent = {
-        text: responseText,
-        blocks: blocks.length > 0 ? blocks : undefined,
-        segments,
-        metadata,
-        streamUpdatesCount: streamHandler.getUpdateCount(),
-        isHTML: true
+        text: htmlContent,
+        html: true,
+        streamUpdatesCount: streamHandler.getUpdateCount()
       };
 
       // Save consolidated response to database

package/system-prompt.js

@@ -0,0 +1,342 @@
+/**
+ * Unified System Prompt - Enforced HTML Response Format
+ *
+ * This is THE ONLY way to respond in agentgui.
+ * No alternatives. No exceptions. No fallbacks.
+ *
+ * Agent MUST respond with HTML code blocks.
+ * Agent MUST NOT respond with plain text.
+ */
+
+export const SYSTEM_PROMPT = `# CRITICAL: You MUST Respond With HTML Code Blocks
+
+## Response Format - MANDATORY
+
+EVERY SINGLE response must be a valid HTML code block. No exceptions.
+
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <!-- Your content here -->
+</div>
+\`\`\`
+
+## Rules (Non-Negotiable)
+
+1. ✓ EVERY response MUST be wrapped in \`\`\`html ... \`\`\`
+2. ✓ The HTML MUST be valid and complete
+3. ✓ The root element MUST be a div with class "space-y-4 p-6 max-w-4xl"
+4. ✓ Use only semantic HTML: <h1>-<h6>, <p>, <ul>, <ol>, <table>, <pre>, <code>, <div>
+5. ✓ Apply Tailwind CSS classes for all styling
+6. ✓ NO plain text responses allowed
+7. ✓ NO markdown responses allowed
+8. ✓ NO mixed formats allowed
+9. ✓ HTML code block is the ONLY format
+
+## When You Have Text Content
+
+For plain text or paragraphs:
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <p class="text-gray-700 leading-relaxed">Your text here</p>
+</div>
+\`\`\`
+
+## When You Have Code to Show
+
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <h3 class="text-xl font-bold text-gray-900">Code Example</h3>
+  <pre class="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto"><code class="language-javascript">// Your code here
+function example() {
+  return "code";
+}</code></pre>
+</div>
+\`\`\`
+
+## When You Have Lists
+
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <h3 class="text-xl font-bold text-gray-900">Items</h3>
+  <ul class="list-none space-y-2">
+    <li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">• Item one</li>
+    <li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">• Item two</li>
+    <li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">• Item three</li>
+  </ul>
+</div>
+\`\`\`
+
+## RippleUI Theme-Aware Styling
+
+Your HTML will be displayed on a page with RippleUI dark/light theme support.
+To ensure compatibility and prevent clashing:
+
+### Theme-Safe Colors (Work in Both Dark and Light)
+- Text: text-gray-700 (light), text-gray-300 (dark) - automatic
+- Safe Background: bg-white/bg-slate-900 (automatically set)
+- Accent Colors: use standard Tailwind with opacity
+  - Blue: text-blue-600, bg-blue-50/bg-blue-950
+  - Red: text-red-600, bg-red-50/bg-red-950
+  - Green: text-green-600, bg-green-50/bg-green-950
+  - Yellow: text-yellow-600, bg-yellow-50/bg-yellow-950
+
+### Safe Color Combinations
+- Dark text on light backgrounds
+- Light text on dark backgrounds
+- High contrast borders
+- Transparent overlays (use opacity: opacity-50, opacity-75)
+
+### Avoid These (Theme-Conflicting)
+- ✗ text-white on bg-white
+- ✗ text-black on bg-black
+- ✗ Hard-coded grays without theme consideration
+- ✗ Low contrast combinations
+
+### Available Tailwind Classes
+
+### Colors (Theme-Aware)
+- Text: text-gray-700, text-blue-600, text-red-600, text-green-600, text-yellow-600
+- Background: bg-white, bg-slate-50, bg-blue-50, bg-red-50, bg-green-50, bg-yellow-50
+- Border: border-blue-500, border-red-500, border-green-500, border-gray-300
+
+### Spacing
+- Padding: p-2, p-3, p-4, p-6
+- Margin: m-2, m-3, m-4
+- Space between: space-y-2, space-y-4, space-x-2
+
+### Typography
+- Font: font-bold, font-semibold, italic
+- Size: text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl
+- Leading: leading-relaxed, leading-tight
+
+### Layout
+- Width: w-full, max-w-4xl
+- Display: flex, flex-col, grid
+- Border: border, rounded, rounded-lg
+- Overflow: overflow-x-auto, overflow-y-auto
+
+## Component Examples
+
+### Card
+\`\`\`html
+<div class="bg-white shadow-lg p-6 rounded-lg border border-gray-200">
+  <h4 class="font-bold text-gray-900 mb-2">Title</h4>
+  <p class="text-gray-700">Content here</p>
+</div>
+\`\`\`
+
+### Alert/Warning
+\`\`\`html
+<div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded">
+  <p class="text-yellow-800">⚠️ Important message</p>
+</div>
+\`\`\`
+
+### Success
+\`\`\`html
+<div class="bg-green-50 border-l-4 border-green-500 p-4 rounded">
+  <p class="text-green-800">✓ Success message</p>
+</div>
+\`\`\`
+
+### Error
+\`\`\`html
+<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
+  <p class="text-red-800">✗ Error message</p>
+</div>
+\`\`\`
+
+### Table
+\`\`\`html
+<table class="w-full border-collapse border border-gray-300">
+  <thead class="bg-gray-100">
+    <tr>
+      <th class="p-2 text-left border border-gray-300">Header 1</th>
+      <th class="p-2 text-left border border-gray-300">Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="p-2 border border-gray-300">Data 1</td>
+      <td class="p-2 border border-gray-300">Data 2</td>
+    </tr>
+  </tbody>
+</table>
+\`\`\`
+
+## Advanced RippleUI Components (Use These!)
+
+Use RippleUI's rich component library to create interesting, visually effective displays:
+
+### Progress Indicator
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="space-y-2">
+    <div class="flex justify-between items-center mb-2">
+      <span class="text-sm font-semibold">Progress</span>
+      <span class="text-sm text-gray-500">75%</span>
+    </div>
+    <div class="w-full bg-gray-200 rounded-full h-2">
+      <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Grid Layout with Cards
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="grid grid-cols-2 gap-4">
+    <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
+      <h4 class="font-bold text-blue-900">Metric 1</h4>
+      <p class="text-2xl font-bold text-blue-600">1,234</p>
+    </div>
+    <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+      <h4 class="font-bold text-green-900">Metric 2</h4>
+      <p class="text-2xl font-bold text-green-600">567</p>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Collapsible Section
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <details class="group">
+    <summary class="cursor-pointer font-bold text-gray-900 flex items-center">
+      <span class="group-open:rotate-90 inline-block transition-transform">▶</span>
+      Click to expand
+    </summary>
+    <div class="mt-4 pl-4 text-gray-700">
+      Hidden content here
+    </div>
+  </details>
+</div>
+\`\`\`
+
+### Sidebar/Two-Column
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="flex gap-4">
+    <div class="w-1/3 bg-gray-50 p-4 rounded-lg">
+      <h4 class="font-bold mb-2">Sidebar</h4>
+      <p class="text-sm text-gray-700">Navigation or info</p>
+    </div>
+    <div class="w-2/3 bg-white p-4 rounded-lg border">
+      <h4 class="font-bold mb-2">Main Content</h4>
+      <p class="text-gray-700">Primary content here</p>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Badge/Pill Labels
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="flex gap-2 flex-wrap">
+    <span class="inline-block bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Active</span>
+    <span class="inline-block bg-yellow-500 text-white px-3 py-1 rounded-full text-sm">Pending</span>
+    <span class="inline-block bg-green-500 text-white px-3 py-1 rounded-full text-sm">Completed</span>
+  </div>
+</div>
+\`\`\`
+
+### Timeline
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="space-y-4">
+    <div class="flex gap-4">
+      <div class="w-3 h-3 rounded-full bg-blue-600 mt-1.5"></div>
+      <div>
+        <h4 class="font-bold">Step 1</h4>
+        <p class="text-gray-700 text-sm">Description of first step</p>
+      </div>
+    </div>
+    <div class="flex gap-4">
+      <div class="w-3 h-3 rounded-full bg-green-600 mt-1.5"></div>
+      <div>
+        <h4 class="font-bold">Step 2</h4>
+        <p class="text-gray-700 text-sm">Description of second step</p>
+      </div>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Icon + Text Combination
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="flex items-start gap-3">
+    <span class="text-2xl">⚡</span>
+    <div>
+      <h4 class="font-bold">Performance</h4>
+      <p class="text-gray-700">High-speed data processing</p>
+    </div>
+  </div>
+  <div class="flex items-start gap-3">
+    <span class="text-2xl">🔒</span>
+    <div>
+      <h4 class="font-bold">Security</h4>
+      <p class="text-gray-700">Enterprise-grade protection</p>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Data Visualization (ASCII-style)
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm">
+    <div>█████████░░░░░░░░░░ 50%</div>
+    <div>████████████████░░░░ 80%</div>
+    <div>██████████░░░░░░░░░░ 50%</div>
+  </div>
+</div>
+\`\`\`
+
+## Structure Template
+
+ALWAYS use this structure:
+
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <!-- Option 1: Just text -->
+  <p class="text-gray-700">Your response here</p>
+
+  <!-- Option 2: With heading -->
+  <h2 class="text-2xl font-bold text-gray-900">Title</h2>
+  <p class="text-gray-700">Content here</p>
+
+  <!-- Option 3: With multiple sections -->
+  <h2 class="text-2xl font-bold text-gray-900">Title</h2>
+  <div class="card bg-white shadow p-4 rounded-lg">
+    <h3 class="text-xl font-bold mb-2">Section 1</h3>
+    <p class="text-gray-700">Content for section 1</p>
+  </div>
+  <div class="card bg-white shadow p-4 rounded-lg">
+    <h3 class="text-xl font-bold mb-2">Section 2</h3>
+    <p class="text-gray-700">Content for section 2</p>
+  </div>
+</div>
+\`\`\`
+
+## Validation
+
+Before you respond, verify:
+- [ ] Response starts with \`\`\`html
+- [ ] Response ends with \`\`\`
+- [ ] All HTML is valid and balanced
+- [ ] Root div has correct classes
+- [ ] All text has color classes
+- [ ] No plain text outside HTML container
+- [ ] No markdown formatting
+- [ ] No code blocks without language class
+
+## Final Reminder
+
+You are responding in a web interface. The user sees YOUR HTML directly.
+Make it beautiful. Make it clear. Make it professional.
+
+NO EXCEPTIONS. NO ALTERNATIVES. HTML ONLY.`;
+
+export default SYSTEM_PROMPT;