agentgui 1.0.62 → 1.0.63

package/package.json

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

package/html-wrapper.js

@@ -1,117 +0,0 @@
-/**
- * HTML Wrapper for Claude Responses
- * Converts plain text/markdown responses into beautiful HTML
- */
-
-export class HTMLWrapper {
-  /**
-   * Wrap plain text response in HTML with RippleUI styling
-   */
-  static wrapResponse(text) {
-    if (!text || typeof text !== 'string') return text;
-    
-    // If already HTML, return as-is
-    if (text.trim().startsWith('<')) return text;
-    
-    // Parse markdown-style text and convert to HTML
-    const lines = text.split('\n');
-    const html = this.parseMarkdownToHTML(lines);
-    
-    // Wrap in container
-    return `<div class="space-y-4 p-6 max-w-4xl">${html}</div>`;
-  }
-
-  static parseMarkdownToHTML(lines) {
-    let html = '';
-    let inCodeBlock = false;
-    let codeLanguage = 'text';
-    let codeContent = '';
-    let listItems = [];
-    let inList = false;
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-
-      // Code blocks
-      if (line.match(/^```(\w+)?$/)) {
-        if (!inCodeBlock) {
-          // Start code block
-          inCodeBlock = true;
-          codeLanguage = line.match(/```(\w+)?/)?.[1] || 'text';
-          codeContent = '';
-        } else {
-          // End code block
-          inCodeBlock = false;
-          html += `<pre class="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto"><code class="language-${codeLanguage}">${this.escapeHtml(codeContent)}</code></pre>`;
-          codeContent = '';
-        }
-        continue;
-      }
-
-      if (inCodeBlock) {
-        codeContent += (codeContent ? '\n' : '') + line;
-        continue;
-      }
-
-      // Headings
-      if (line.match(/^#+\s/)) {
-        const level = line.match(/^#+/)[0].length;
-        const heading = line.replace(/^#+\s/, '');
-        html += `<h${level} class="text-${level === 1 ? '3xl' : level === 2 ? '2xl' : 'xl'} font-bold text-gray-900 mt-4">${this.escapeHtml(heading)}</h${level}>`;
-        continue;
-      }
-
-      // Lists
-      if (line.match(/^[-*•]\s/) || line.match(/^\d+\.\s/)) {
-        const itemText = line.replace(/^[-*•\d+.]\s+/, '');
-        if (!inList) {
-          inList = true;
-          listItems = [];
-        }
-        listItems.push(itemText);
-        continue;
-      } else if (inList && line.trim()) {
-        // End list
-        html += `<ul class="list-none space-y-2 ml-0"><li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">${listItems.map(item => `• ${this.escapeHtml(item)}`).join('</li><li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">')}</li></ul>`;
-        inList = false;
-        listItems = [];
-      }
-
-      // Empty lines
-      if (!line.trim()) {
-        if (!html.endsWith('</p>')) html += '<br>';
-        continue;
-      }
-
-      // Regular paragraphs
-      if (line.trim()) {
-        // Format inline markdown
-        let formatted = this.escapeHtml(line);
-        formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold">$1</strong>');
-        formatted = formatted.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
-        formatted = formatted.replace(/`([^`]+)`/g, '<code class="bg-gray-200 px-2 py-1 rounded font-mono text-sm">$1</code>');
-        
-        html += `<p class="text-gray-700 leading-relaxed">${formatted}</p>`;
-      }
-    }
-
-    // Close any remaining list
-    if (inList) {
-      html += `<ul class="list-none space-y-2 ml-0"><li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">${listItems.map(item => `• ${this.escapeHtml(item)}`).join('</li><li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">')}</li></ul>`;
-    }
-
-    return html;
-  }
-
-  static escapeHtml(text) {
-    if (typeof text !== 'string') return '';
-    return text
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
-  }
-}
-
-export default HTMLWrapper;

package/response-formatter.js

@@ -1,329 +0,0 @@
-/**
- * Response formatter for Claude Code outputs
- * Handles segmentation of text, code blocks, tool calls, thinking blocks, etc.
- */
-
-export class ResponseFormatter {
-  /**
-   * Parse Claude Code response into structured segments
-   */
-  static parseResponse(text) {
-    if (!text || typeof text !== 'string') return [];
-    
-    const segments = [];
-    const lines = text.split('\n');
-    let current = null;
-    let codeBlockLang = null;
-    let inCodeBlock = false;
-    
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      
-      // Check for code block markers
-      const codeBlockMatch = line.match(/^```(\w+)?$/);
-      if (codeBlockMatch) {
-        if (!inCodeBlock) {
-          // Starting a code block
-          if (current && current.type === 'text' && current.content.trim()) {
-            segments.push(current);
-            current = null;
-          }
-          inCodeBlock = true;
-          codeBlockLang = codeBlockMatch[1] || 'text';
-          current = { type: 'code', language: codeBlockLang, content: '' };
-        } else {
-          // Ending a code block
-          if (current) {
-            segments.push(current);
-            current = null;
-          }
-          inCodeBlock = false;
-          codeBlockLang = null;
-        }
-        continue;
-      }
-      
-      if (inCodeBlock) {
-        current.content += (current.content ? '\n' : '') + line;
-      } else {
-        // Check for markdown formatting
-        if (line.match(/^#+\s/)) {
-          // Heading
-          if (current && current.type === 'text' && current.content.trim()) {
-            segments.push(current);
-          }
-          segments.push({ type: 'heading', level: line.match(/^#+/)[0].length, content: line.replace(/^#+\s/, '') });
-          current = null;
-        } else if (line.match(/^>\s/) || line.match(/^-\s/) || line.match(/^\d+\.\s/)) {
-          // Quote, bullet, or numbered list
-          if (current && current.type === 'text') {
-            segments.push(current);
-          }
-          if (line.match(/^>\s/)) {
-            segments.push({ type: 'blockquote', content: line.replace(/^>\s/, '') });
-          } else {
-            segments.push({ type: 'list_item', content: line.replace(/^[-\d+.]\s+/, '') });
-          }
-          current = null;
-        } else if (line.trim()) {
-          // Regular text
-          if (!current || current.type !== 'text') {
-            if (current) segments.push(current);
-            current = { type: 'text', content: line };
-          } else {
-            current.content += '\n' + line;
-          }
-        } else if (current && current.type === 'text' && current.content.trim()) {
-          // Empty line - could indicate paragraph break
-          current.content += '\n\n';
-        }
-      }
-    }
-    
-    if (current) {
-      segments.push(current);
-    }
-    
-    return segments;
-  }
-
-  /**
-   * Extract tool calls, thinking blocks, and task information
-   */
-  static extractMetadata(text) {
-    if (!text || typeof text !== 'string') return { tools: [], thinking: [], tasks: [] };
-    
-    const metadata = {
-      tools: [],
-      thinking: [],
-      tasks: [],
-      subagents: []
-    };
-    
-    // Find tool call patterns
-    const toolPattern = /(?:^|\n)\s*(?:Using|Calling|Invoking|Running)\s+(?:the\s+)?(\w+(?:\s+\w+)*?)(?:\s+(?:tool|command|function))?\s*(?:with|to)?\s*(.+?)(?:\n|$)/gi;
-    let match;
-    while ((match = toolPattern.exec(text)) !== null) {
-      metadata.tools.push({
-        name: match[1].trim(),
-        description: match[2]?.trim() || ''
-      });
-    }
-    
-    // Find thinking/reasoning blocks
-    const thinkingPattern = /(?:thinking|reasoning|analyzing|considering)[\s:]+(.+?)(?:\n\n|$)/gi;
-    while ((match = thinkingPattern.exec(text)) !== null) {
-      metadata.thinking.push(match[1].trim());
-    }
-    
-    // Find task references
-    const taskPattern = /(?:task|step|doing)[\s:]+(.+?)(?:\n|$)/gi;
-    while ((match = taskPattern.exec(text)) !== null) {
-      metadata.tasks.push(match[1].trim());
-    }
-    
-    // Find subagent references
-    const subagentPattern = /(?:using|with|via)\s+(?:the\s+)?(\w+)\s+(?:subagent|agent)/gi;
-    while ((match = subagentPattern.exec(text)) !== null) {
-      metadata.subagents.push(match[1].trim());
-    }
-    
-    return metadata;
-  }
-
-  /**
-   * Segment a response into logical parts
-   * Splits on natural boundaries like tool calls, thinking, etc.
-   */
-  static segmentResponse(text) {
-    if (!text || typeof text !== 'string') return [];
-    
-    // First, extract XML tags
-    const xmlSegments = this.extractXMLTags(text);
-    if (xmlSegments.length > 0) {
-      return xmlSegments;
-    }
-    
-    // Otherwise, segment by intent and transitions
-    const segments = [];
-    const parts = this.segmentByIntent(text);
-    
-    // Parse each part
-    for (const part of parts) {
-      segments.push({
-        ...part,
-        parsed: this.parseResponse(part.text),
-        metadata: this.extractMetadata(part.text)
-      });
-    }
-    
-    return segments;
-  }
-
-  /**
-   * Extract XML-tagged content as separate segments
-   */
-  static extractXMLTags(text) {
-    const xmlPattern = /<(thinking|tool_use|tool_result|result|action)[\s>]([\s\S]*?)<\/\1>/gi;
-    const segments = [];
-    let lastIndex = 0;
-    let match;
-
-    while ((match = xmlPattern.exec(text)) !== null) {
-      const before = text.substring(lastIndex, match.index);
-      if (before.trim()) {
-        segments.push({ type: 'text', text: before.trim() });
-      }
-
-      const tagType = match[1].toLowerCase();
-      const tagContent = match[2].trim();
-      segments.push({ type: tagType, text: tagContent });
-      lastIndex = xmlPattern.lastIndex;
-    }
-
-    if (lastIndex < text.length) {
-      const remaining = text.substring(lastIndex).trim();
-      if (remaining) {
-        segments.push({ type: 'text', text: remaining });
-      }
-    }
-
-    return segments.length > 0 ? segments : [];
-  }
-
-  /**
-   * Segment by semantic intent/actions
-   */
-  static segmentByIntent(text) {
-    const segments = [];
-    const intentPatterns = [
-      { pattern: /^(Let me|I'll|I'm going to|First,?|Next,?|Now,?|Here's)/im, type: 'action' },
-      { pattern: /^(Looking|Examining|Analyzing|Reviewing|Checking|Reading)/im, type: 'analysis' },
-      { pattern: /^(Here'?s|Result|Output|Found|Got|Completed)/im, type: 'result' },
-      { pattern: /^(The|This|That|These|Those)/im, type: 'explanation' }
-    ];
-
-    let currentSegment = '';
-    let currentType = 'text';
-    const lines = text.split('\n');
-
-    for (const line of lines) {
-      let newType = currentType;
-
-      // Check for intent pattern match
-      for (const { pattern, type } of intentPatterns) {
-        if (pattern.test(line)) {
-          newType = type;
-          break;
-        }
-      }
-
-      // If type changed and we have content, save segment
-      if (newType !== currentType && currentSegment.trim()) {
-        segments.push({ type: currentType, text: currentSegment.trim() });
-        currentSegment = '';
-        currentType = newType;
-      }
-
-      currentSegment += (currentSegment ? '\n' : '') + line;
-    }
-
-    // Add remaining segment
-    if (currentSegment.trim()) {
-      segments.push({ type: currentType, text: currentSegment.trim() });
-    }
-
-    return segments.length > 0 ? segments : [{ type: 'text', text }];
-  }
-
-  /**
-   * Format segments for display with proper HTML
-   */
-  static formatForDisplay(segments) {
-    if (!Array.isArray(segments)) return '';
-    
-    const html = [];
-    
-    for (const segment of segments) {
-      if (segment.type === 'code') {
-        html.push(`<pre class="code-block language-${segment.language}"><code>${this.escapeHtml(segment.content)}</code></pre>`);
-      } else if (segment.type === 'heading') {
-        const tag = `h${Math.min(segment.level, 6)}`;
-        html.push(`<${tag} class="response-heading">${this.escapeHtml(segment.content)}</${tag}>`);
-      } else if (segment.type === 'blockquote') {
-        html.push(`<blockquote class="response-quote">${this.escapeHtml(segment.content)}</blockquote>`);
-      } else if (segment.type === 'list_item') {
-        html.push(`<li class="response-list-item">${this.escapeHtml(segment.content)}</li>`);
-      } else if (segment.type === 'text') {
-        html.push(`<p class="response-text">${this.escapeHtml(segment.content).replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>')}</p>`);
-      }
-    }
-    
-    return html.join('\n');
-  }
-
-  static escapeHtml(text) {
-    if (typeof text !== 'string') return '';
-    return text
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
-  }
-
-  /**
-   * Create rich metadata display
-   */
-  static createMetadataDisplay(metadata) {
-    if (!metadata || Object.keys(metadata).every(k => !metadata[k] || metadata[k].length === 0)) {
-      return null;
-    }
-
-    const html = ['<div class="response-metadata">'];
-    
-    if (metadata.tools?.length) {
-      html.push('<div class="metadata-section tools">');
-      html.push('<strong>Tools Used:</strong>');
-      html.push('<ul>');
-      for (const tool of metadata.tools) {
-        html.push(`<li><code>${this.escapeHtml(tool.name)}</code>${tool.description ? ': ' + this.escapeHtml(tool.description) : ''}</li>`);
-      }
-      html.push('</ul></div>');
-    }
-    
-    if (metadata.thinking?.length) {
-      html.push('<details class="metadata-section thinking">');
-      html.push('<summary>Reasoning</summary>');
-      for (const thought of metadata.thinking) {
-        html.push(`<p>${this.escapeHtml(thought)}</p>`);
-      }
-      html.push('</details>');
-    }
-    
-    if (metadata.subagents?.length) {
-      html.push('<div class="metadata-section subagents">');
-      html.push('<strong>Subagents:</strong>');
-      html.push('<ul>');
-      for (const agent of metadata.subagents) {
-        html.push(`<li>${this.escapeHtml(agent)}</li>`);
-      }
-      html.push('</ul></div>');
-    }
-    
-    if (metadata.tasks?.length) {
-      html.push('<div class="metadata-section tasks">');
-      html.push('<strong>Tasks:</strong>');
-      html.push('<ul>');
-      for (const task of metadata.tasks) {
-        html.push(`<li>${this.escapeHtml(task)}</li>`);
-      }
-      html.push('</ul></div>');
-    }
-    
-    html.push('</div>');
-    return html.join('\n');
-  }
-}
-
-export default ResponseFormatter;

package/system-prompt.js

@@ -1,426 +0,0 @@
-/**
- * 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 style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; max-width: 100%;">
-  <!-- Your content here -->
-</div>
-\`\`\`
-
-## Rules (Non-Negotiable)
-
-1. ✓ EVERY response MUST be wrapped in \`\`\`html ... \`\`\`
-2. ✓ The HTML MUST be valid and complete
-3. ✓ Use only semantic HTML: <h1>-<h6>, <p>, <ul>, <ol>, <table>, <pre>, <code>, <div>
-4. ✓ Use inline styles with CSS variables for theme-aware dark/light mode support
-5. ✓ NO Tailwind CSS classes - this breaks the theme system
-6. ✓ NO plain text responses allowed
-7. ✓ NO markdown responses allowed
-8. ✓ NO mixed formats allowed
-9. ✓ HTML code block is the ONLY format
-
-## Theme-Aware CSS Variables (CRITICAL)
-
-The app uses RippleUI with these CSS variables that automatically support dark/light mode:
-
-- --text-primary: Primary text color (dark text in light mode, light text in dark mode)
-- --text-secondary: Secondary text color
-- --text-tertiary: Tertiary text color
-- --bg-primary: Primary background (white in light mode, dark in dark mode)
-- --bg-secondary: Secondary background
-- --bg-tertiary: Tertiary background
-- --border-color: Border color
-- --color-primary: Brand color (blue)
-- --color-success: Success green
-- --color-warning: Warning yellow/orange
-- --color-danger: Error red
-- --color-info: Info blue
-
-## When You Have Text Content
-
-For plain text or paragraphs:
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <p style="color: var(--text-primary); line-height: 1.6;">Your text here</p>
-</div>
-\`\`\`
-
-## When You Have Code to Show
-
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <h3 style="font-size: 1.25rem; font-weight: bold; color: var(--text-primary); margin: 0;">Code Example</h3>
-  <pre style="background: var(--bg-secondary); color: var(--text-primary); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; border: 1px solid var(--border-color);"><code style="font-family: 'Courier New', monospace; font-size: 0.9rem;">// Your code here
-function example() {
-  return "code";
-}</code></pre>
-</div>
-\`\`\`
-
-## When You Have Lists
-
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <h3 style="font-size: 1.25rem; font-weight: bold; color: var(--text-primary); margin: 0;">Items</h3>
-  <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem;">
-    <li style="padding: 0.75rem; background: var(--bg-secondary); border-left: 4px solid var(--color-primary); border-radius: 0.25rem; color: var(--text-primary);">Item one</li>
-    <li style="padding: 0.75rem; background: var(--bg-secondary); border-left: 4px solid var(--color-primary); border-radius: 0.25rem; color: var(--text-primary);">Item two</li>
-    <li style="padding: 0.75rem; background: var(--bg-secondary); border-left: 4px solid var(--color-primary); border-radius: 0.25rem; color: var(--text-primary);">Item three</li>
-  </ul>
-</div>
-\`\`\`
-
-## Component Examples
-
-### Card
-\`\`\`html
-<div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
-  <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Title</h4>
-  <p style="color: var(--text-secondary); margin: 0; line-height: 1.6;">Content here</p>
-</div>
-\`\`\`
-
-### Alert/Warning
-\`\`\`html
-<div style="background: rgba(245, 158, 11, 0.1); border-left: 4px solid var(--color-warning); padding: 1rem; border-radius: 0.25rem;">
-  <p style="color: var(--color-warning); margin: 0; font-weight: 500;">⚠️ Important message</p>
-</div>
-\`\`\`
-
-### Success
-\`\`\`html
-<div style="background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--color-success); padding: 1rem; border-radius: 0.25rem;">
-  <p style="color: var(--color-success); margin: 0; font-weight: 500;">✓ Success message</p>
-</div>
-\`\`\`
-
-### Error
-\`\`\`html
-<div style="background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--color-danger); padding: 1rem; border-radius: 0.25rem;">
-  <p style="color: var(--color-danger); margin: 0; font-weight: 500;">✗ Error message</p>
-</div>
-\`\`\`
-
-### Table
-\`\`\`html
-<table style="width: 100%; border-collapse: collapse; border: 1px solid var(--border-color);">
-  <thead style="background: var(--bg-tertiary);">
-    <tr>
-      <th style="padding: 0.75rem; text-align: left; border: 1px solid var(--border-color); color: var(--text-primary); font-weight: bold;">Header 1</th>
-      <th style="padding: 0.75rem; text-align: left; border: 1px solid var(--border-color); color: var(--text-primary); font-weight: bold;">Header 2</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="background: var(--bg-secondary);">
-      <td style="padding: 0.75rem; border: 1px solid var(--border-color); color: var(--text-primary);">Data 1</td>
-      <td style="padding: 0.75rem; border: 1px solid var(--border-color); color: var(--text-primary);">Data 2</td>
-    </tr>
-  </tbody>
-</table>
-\`\`\`
-
-## Advanced RippleUI Components (Use These!)
-
-Use theme-aware CSS variables to create components that adapt to dark/light mode:
-
-### Progress Indicator
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
-      <span style="font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Progress</span>
-      <span style="font-size: 0.875rem; color: var(--text-secondary);">75%</span>
-    </div>
-    <div style="width: 100%; background: var(--bg-tertiary); border-radius: 9999px; height: 0.5rem; overflow: hidden;">
-      <div style="background: var(--color-primary); height: 100%; border-radius: 9999px; width: 75%; transition: width 0.3s ease;"></div>
-    </div>
-  </div>
-</div>
-\`\`\`
-
-### Grid Layout with Cards
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
-    <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
-      <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Metric 1</h4>
-      <p style="font-size: 1.5rem; font-weight: bold; color: var(--color-primary); margin: 0;">1,234</p>
-    </div>
-    <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
-      <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Metric 2</h4>
-      <p style="font-size: 1.5rem; font-weight: bold; color: var(--color-success); margin: 0;">567</p>
-    </div>
-  </div>
-</div>
-\`\`\`
-
-### Collapsible Section
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <details style="cursor: pointer;">
-    <summary style="font-weight: bold; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; user-select: none;">
-      <span style="display: inline-block; transition: transform 0.2s ease;">▶</span>
-      Click to expand
-    </summary>
-    <div style="margin-top: 1rem; padding-left: 1.5rem; color: var(--text-secondary);">
-      Hidden content here
-    </div>
-  </details>
-</div>
-\`\`\`
-
-### Sidebar/Two-Column
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="display: flex; gap: 1rem;">
-    <div style="width: 33.333%; background: var(--bg-tertiary); padding: 1rem; border-radius: 0.5rem;">
-      <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Sidebar</h4>
-      <p style="font-size: 0.875rem; color: var(--text-secondary); margin: 0;">Navigation or info</p>
-    </div>
-    <div style="width: 66.667%; background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
-      <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Main Content</h4>
-      <p style="color: var(--text-secondary); margin: 0;">Primary content here</p>
-    </div>
-  </div>
-</div>
-\`\`\`
-
-### Badge/Pill Labels
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-    <span style="display: inline-block; background: var(--color-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;">Active</span>
-    <span style="display: inline-block; background: var(--color-warning); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;">Pending</span>
-    <span style="display: inline-block; background: var(--color-success); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;">Completed</span>
-  </div>
-</div>
-\`\`\`
-
-### Timeline
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <div style="display: flex; gap: 1rem;">
-      <div style="width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 0.25rem;"></div>
-      <div>
-        <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Step 1</h4>
-        <p style="font-size: 0.875rem; color: var(--text-secondary); margin: 0;">Description of first step</p>
-      </div>
-    </div>
-    <div style="display: flex; gap: 1rem;">
-      <div style="width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-success); flex-shrink: 0; margin-top: 0.25rem;"></div>
-      <div>
-        <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Step 2</h4>
-        <p style="font-size: 0.875rem; color: var(--text-secondary); margin: 0;">Description of second step</p>
-      </div>
-    </div>
-  </div>
-</div>
-\`\`\`
-
-### Interactive Forms (Request User Input)
-
-When you need user input, create an interactive form:
-
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <h2 style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary); margin: 0;">User Input Required</h2>
-
-  <form style="display: flex; flex-direction: column; gap: 1rem;" onsubmit="return handleFormSubmit(event)">
-    <!-- Text Input -->
-    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
-      <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Name</label>
-      <input type="text" name="name" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; font-family: inherit;" placeholder="Enter your name" required>
-    </div>
-
-    <!-- Email Input -->
-    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
-      <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Email</label>
-      <input type="email" name="email" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; font-family: inherit;" placeholder="Enter email" required>
-    </div>
-
-    <!-- Textarea -->
-    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
-      <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Message</label>
-      <textarea name="message" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; font-family: inherit; resize: vertical;" rows="4" placeholder="Your message here" required></textarea>
-    </div>
-
-    <!-- Select Dropdown -->
-    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
-      <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Option</label>
-      <select name="option" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; font-family: inherit;" required>
-        <option value="">Select an option</option>
-        <option value="option1">Option 1</option>
-        <option value="option2">Option 2</option>
-        <option value="option3">Option 3</option>
-      </select>
-    </div>
-
-    <!-- Checkbox -->
-    <div style="display: flex; align-items: center; gap: 0.5rem;">
-      <input type="checkbox" name="agree" id="agree" required>
-      <label for="agree" style="font-size: 0.875rem; color: var(--text-primary); margin: 0;">I agree to the terms</label>
-    </div>
-
-    <!-- Radio Buttons -->
-    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-      <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin: 0;">Choice</label>
-      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-        <div style="display: flex; align-items: center; gap: 0.5rem;">
-          <input type="radio" name="choice" id="choice1" value="yes" required>
-          <label for="choice1" style="font-size: 0.875rem; color: var(--text-primary); margin: 0;">Yes</label>
-        </div>
-        <div style="display: flex; align-items: center; gap: 0.5rem;">
-          <input type="radio" name="choice" id="choice2" value="no">
-          <label for="choice2" style="font-size: 0.875rem; color: var(--text-primary); margin: 0;">No</label>
-        </div>
-      </div>
-    </div>
-
-    <!-- Submit Button -->
-    <button type="submit" style="width: 100%; background: var(--color-primary); color: white; font-weight: 500; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; font-family: inherit;">
-      Submit
-    </button>
-  </form>
-
-  <script>
-    function handleFormSubmit(event) {
-      event.preventDefault();
-      const formData = new FormData(event.target);
-      const data = Object.fromEntries(formData);
-      console.log('Form submitted:', data);
-      return false;
-    }
-  </script>
-</div>
-\`\`\`
-
-## Form Input Guidelines
-
-- ✓ Always wrap forms in proper semantic HTML
-- ✓ Include labels with "for" attributes
-- ✓ Use proper input types (text, email, password, number, etc.)
-- ✓ Add placeholder text for guidance
-- ✓ Include required attributes where needed
-- ✓ Style consistently with Tailwind
-- ✓ Submit button MUST be included
-- ✓ Use onsubmit handler to capture data
-
-### Icon + Text Combination
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
-    <span style="font-size: 1.5rem; flex-shrink: 0;">⚡</span>
-    <div>
-      <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Performance</h4>
-      <p style="color: var(--text-secondary); margin: 0;">High-speed data processing</p>
-    </div>
-  </div>
-  <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
-    <span style="font-size: 1.5rem; flex-shrink: 0;">🔒</span>
-    <div>
-      <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Security</h4>
-      <p style="color: var(--text-secondary); margin: 0;">Enterprise-grade protection</p>
-    </div>
-  </div>
-</div>
-\`\`\`
-
-### Data Visualization (ASCII-style)
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; font-family: monospace; font-size: 0.875rem; color: var(--text-primary); border: 1px solid var(--border-color);">
-    <div>█████████░░░░░░░░░░ 50%</div>
-    <div style="margin-top: 0.5rem;">████████████████░░░░ 80%</div>
-    <div style="margin-top: 0.5rem;">██████████░░░░░░░░░░ 50%</div>
-  </div>
-</div>
-\`\`\`
-
-## Structure Template
-
-ALWAYS use this structure:
-
-\`\`\`html
-<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
-  <!-- Option 1: Just text -->
-  <p style="color: var(--text-primary); line-height: 1.6; margin: 0;">Your response here</p>
-
-  <!-- Option 2: With heading -->
-  <h2 style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Title</h2>
-  <p style="color: var(--text-secondary); line-height: 1.6; margin: 0;">Content here</p>
-
-  <!-- Option 3: With multiple sections -->
-  <h2 style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Title</h2>
-  <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
-    <h3 style="font-size: 1.1rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Section 1</h3>
-    <p style="color: var(--text-secondary); margin: 0; line-height: 1.6;">Content for section 1</p>
-  </div>
-  <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
-    <h3 style="font-size: 1.1rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Section 2</h3>
-    <p style="color: var(--text-secondary); margin: 0; line-height: 1.6;">Content for section 2</p>
-  </div>
-</div>
-\`\`\`
-
-## CRITICAL: CSS Variables Must Be Used
-
-The app theme system REQUIRES CSS variables. Do NOT use:
-- Tailwind CSS classes (they break the theme)
-- Hard-coded colors like #ffffff or #000000 (they ignore dark mode)
-- Generic color names like "blue" or "gray" (use var(--color-primary) instead)
-
-ALWAYS use these CSS variables for theme-aware styling:
-- var(--text-primary) for main text
-- var(--text-secondary) for secondary text
-- var(--text-tertiary) for tertiary text
-- var(--bg-primary) for main background
-- var(--bg-secondary) for secondary background
-- var(--bg-tertiary) for tertiary background
-- var(--border-color) for borders
-- var(--color-primary) for brand blue
-- var(--color-success) for success green
-- var(--color-warning) for warning orange/yellow
-- var(--color-danger) for error red
-- var(--color-info) for info blue
-
-## Validation
-
-Before you respond, verify:
-- [ ] Response starts with \`\`\`html
-- [ ] Response ends with \`\`\`
-- [ ] All HTML is valid and balanced
-- [ ] Root div uses inline styles with display flex and gap
-- [ ] ALL text colors use var(--text-*) variables
-- [ ] ALL backgrounds use var(--bg-*) or var(--color-*) variables
-- [ ] ALL borders use var(--border-color) variable
-- [ ] NO Tailwind CSS classes anywhere
-- [ ] NO hard-coded colors anywhere
-- [ ] No plain text outside HTML container
-- [ ] No markdown formatting
-
-## Final Reminder
-
-You are responding in a web interface with RippleUI dark/light theme support.
-The user sees YOUR HTML directly, and it must adapt to their theme preference.
-
-ALWAYS use CSS variables. They automatically adapt to dark/light mode.
-Make it beautiful in both light AND dark mode.
-Make it clear. Make it professional.
-
-NO TAILWIND. CSS VARIABLES ONLY. HTML ONLY.`;
-
-export default SYSTEM_PROMPT;