agentgui 1.0.59 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -24,5 +24,8 @@
     "@anthropic-ai/claude-code": "^1.0.128",
     "better-sqlite3": "^12.6.2",
     "ws": "^8.14.2"
+  },
+  "devDependencies": {
+    "playwright": "^1.58.1"
   }
 }

package/server.js

@@ -455,19 +455,16 @@ async function processMessage(conversationId, messageId, sessionId, content, age
         data: { promptSentTime: Date.now(), responseReceivedTime: Date.now() }
       });
 
-      console.log(`[processMessage] ACP returned: stopReason=${result?.stopReason}, streamUpdates=${streamHandler.getUpdateCount()}`);
-
-      // 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: htmlContent,
-        html: true,
-        streamUpdatesCount: streamHandler.getUpdateCount()
-      };
+       console.log(`[processMessage] ACP returned: stopReason=${result?.stopReason}, streamUpdates=${streamHandler.getUpdateCount()}`);
+
+       // Save agent's complete response as-is, without any processing
+       // The agent workflow must flow naturally - no HTML extraction or interference
+       const responseText = fullText || result?.result || 'No response.';
+
+       const messageContent = {
+         text: responseText,
+         streamUpdatesCount: streamHandler.getUpdateCount()
+       };
 
       // Save consolidated response to database
       const assistantMessage = queries.createMessage(conversationId, 'assistant', messageContent);

package/static/index.html

@@ -104,6 +104,15 @@
             <option value="jpg">JPEG</option>
           </select>
         </div>
+
+        <div class="setting-group">
+          <label>
+            <button id="themeToggle" style="background: var(--color-primary); color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; font-family: inherit; display: flex; align-items: center; gap: 0.5rem;">
+              <span class="theme-icon">🌙</span>
+              <span>Toggle Theme</span>
+            </button>
+          </label>
+        </div>
       </div>
     </div>
   </div>

package/system-prompt.js

@@ -15,7 +15,7 @@ export const SYSTEM_PROMPT = `# CRITICAL: You MUST Respond With HTML Code Blocks
 EVERY SINGLE response must be a valid HTML code block. No exceptions.
 
 \`\`\`html
-<div class="space-y-4 p-6 max-w-4xl">
+<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; max-width: 100%;">
   <!-- Your content here -->
 </div>
 \`\`\`
@@ -24,29 +24,46 @@ EVERY SINGLE response must be a valid HTML code block. No exceptions.
 
 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
+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 class="space-y-4 p-6 max-w-4xl">
-  <p class="text-gray-700 leading-relaxed">Your text here</p>
+<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 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
+<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>
@@ -56,109 +73,60 @@ function example() {
 ## 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>
+<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>
 \`\`\`
 
-## 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 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 class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded">
-  <p class="text-yellow-800">⚠️ Important message</p>
+<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 class="bg-green-50 border-l-4 border-green-500 p-4 rounded">
-  <p class="text-green-800">✓ Success message</p>
+<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 class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
-  <p class="text-red-800">✗ Error message</p>
+<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 class="w-full border-collapse border border-gray-300">
-  <thead class="bg-gray-100">
+<table style="width: 100%; border-collapse: collapse; border: 1px solid var(--border-color);">
+  <thead style="background: var(--bg-tertiary);">
     <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>
+      <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>
-      <td class="p-2 border border-gray-300">Data 1</td>
-      <td class="p-2 border border-gray-300">Data 2</td>
+    <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>
@@ -166,18 +134,18 @@ To ensure compatibility and prevent clashing:
 
 ## Advanced RippleUI Components (Use These!)
 
-Use RippleUI's rich component library to create interesting, visually effective displays:
+Use theme-aware CSS variables to create components that adapt to dark/light mode:
 
 ### 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 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 class="w-full bg-gray-200 rounded-full h-2">
-      <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></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>
@@ -185,15 +153,15 @@ Use RippleUI's rich component library to create interesting, visually effective
 
 ### 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 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 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 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>
@@ -201,13 +169,13 @@ Use RippleUI's rich component library to create interesting, visually effective
 
 ### 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>
+<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 class="mt-4 pl-4 text-gray-700">
+    <div style="margin-top: 1rem; padding-left: 1.5rem; color: var(--text-secondary);">
       Hidden content here
     </div>
   </details>
@@ -216,15 +184,15 @@ Use RippleUI's rich component library to create interesting, visually effective
 
 ### 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 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 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 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>
@@ -232,31 +200,31 @@ Use RippleUI's rich component library to create interesting, visually effective
 
 ### 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 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 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 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 class="font-bold">Step 1</h4>
-        <p class="text-gray-700 text-sm">Description of first step</p>
+        <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 class="flex gap-4">
-      <div class="w-3 h-3 rounded-full bg-green-600 mt-1.5"></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 class="font-bold">Step 2</h4>
-        <p class="text-gray-700 text-sm">Description of second step</p>
+        <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>
@@ -268,32 +236,32 @@ Use RippleUI's rich component library to create interesting, visually effective
 When you need user input, create an interactive form:
 
 \`\`\`html
-<div class="space-y-4 p-6 max-w-4xl">
-  <h2 class="text-2xl font-bold text-gray-900">User Input Required</h2>
+<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 class="space-y-4" onsubmit="return handleFormSubmit(event)">
+  <form style="display: flex; flex-direction: column; gap: 1rem;" onsubmit="return handleFormSubmit(event)">
     <!-- Text Input -->
-    <div>
-      <label class="block text-sm font-semibold text-gray-900 mb-1">Name</label>
-      <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Enter your name" required>
+    <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>
-      <label class="block text-sm font-semibold text-gray-900 mb-1">Email</label>
-      <input type="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Enter email" required>
+    <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>
-      <label class="block text-sm font-semibold text-gray-900 mb-1">Message</label>
-      <textarea name="message" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" rows="4" placeholder="Your message here" required></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>
-      <label class="block text-sm font-semibold text-gray-900 mb-1">Option</label>
-      <select name="option" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required>
+    <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>
@@ -302,28 +270,28 @@ When you need user input, create an interactive form:
     </div>
 
     <!-- Checkbox -->
-    <div class="flex items-center">
-      <input type="checkbox" name="agree" id="agree" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" required>
-      <label for="agree" class="ml-2 text-sm text-gray-700">I agree to the terms</label>
+    <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>
-      <label class="block text-sm font-semibold text-gray-900 mb-2">Choice</label>
-      <div class="space-y-2">
-        <div class="flex items-center">
-          <input type="radio" name="choice" id="choice1" value="yes" class="w-4 h-4 text-blue-600" required>
-          <label for="choice1" class="ml-2 text-sm text-gray-700">Yes</label>
+    <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 class="flex items-center">
-          <input type="radio" name="choice" id="choice2" value="no" class="w-4 h-4 text-blue-600">
-          <label for="choice2" class="ml-2 text-sm text-gray-700">No</label>
+        <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" class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+    <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>
@@ -334,7 +302,6 @@ When you need user input, create an interactive form:
       const formData = new FormData(event.target);
       const data = Object.fromEntries(formData);
       console.log('Form submitted:', data);
-      // Form data will be captured by the interface
       return false;
     }
   </script>
@@ -354,19 +321,19 @@ When you need user input, create an interactive form:
 
 ### 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 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 class="font-bold">Performance</h4>
-      <p class="text-gray-700">High-speed data processing</p>
+      <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 class="flex items-start gap-3">
-    <span class="text-2xl">🔒</span>
+  <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
+    <span style="font-size: 1.5rem; flex-shrink: 0;">🔒</span>
     <div>
-      <h4 class="font-bold">Security</h4>
-      <p class="text-gray-700">Enterprise-grade protection</p>
+      <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>
@@ -374,11 +341,11 @@ When you need user input, create an interactive form:
 
 ### 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 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>████████████████░░░░ 80%</div>
-    <div>██████████░░░░░░░░░░ 50%</div>
+    <div style="margin-top: 0.5rem;">████████████████░░░░ 80%</div>
+    <div style="margin-top: 0.5rem;">██████████░░░░░░░░░░ 50%</div>
   </div>
 </div>
 \`\`\`
@@ -388,44 +355,72 @@ When you need user input, create an interactive form:
 ALWAYS use this structure:
 
 \`\`\`html
-<div class="space-y-4 p-6 max-w-4xl">
+<div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
   <!-- Option 1: Just text -->
-  <p class="text-gray-700">Your response here</p>
+  <p style="color: var(--text-primary); line-height: 1.6; margin: 0;">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>
+  <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 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>
+  <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 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 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 has correct classes
-- [ ] All text has color classes
+- [ ] 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
-- [ ] 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.
+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 EXCEPTIONS. NO ALTERNATIVES. HTML ONLY.`;
+NO TAILWIND. CSS VARIABLES ONLY. HTML ONLY.`;
 
 export default SYSTEM_PROMPT;