refactor: Unified HTML rendering with theme-aware RippleUI

Single source of truth for agent response format:
- Agents MUST respond with HTML code blocks (```html ... ```)
- Removed duplicate ResponseFormatter and HTMLWrapper mechanisms
- System prompt now enforces HTML-only responses
- Theme-aware styling respects dark/light mode
- RippleUI integration prevents theme clashing
- OpenCode gets same CLI config support as Claude Code
- HTML extracted directly from code blocks
- No intermediate conversion steps

Author: lanmower

acp-launcher.js

@@ -2,96 +2,40 @@ 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) {
       // Config file doesn't exist or is invalid, continue
     }
   }
 
+  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'
     });
   }

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