agentgui 1.0.59 → 1.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +4 -1
  2. package/static/index.html +9 -0
  3. package/system-prompt.js +178 -183
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agentgui",
3
- "version": "1.0.59",
3
+ "version": "1.0.60",
4
4
  "description": "Multi-agent ACP client with real-time communication",
5
5
  "type": "module",
6
6
  "main": "server.js",
@@ -24,5 +24,8 @@
24
24
  "@anthropic-ai/claude-code": "^1.0.128",
25
25
  "better-sqlite3": "^12.6.2",
26
26
  "ws": "^8.14.2"
27
+ },
28
+ "devDependencies": {
29
+ "playwright": "^1.58.1"
27
30
  }
28
31
  }
package/static/index.html CHANGED
@@ -104,6 +104,15 @@
104
104
  <option value="jpg">JPEG</option>
105
105
  </select>
106
106
  </div>
107
+
108
+ <div class="setting-group">
109
+ <label>
110
+ <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;">
111
+ <span class="theme-icon">🌙</span>
112
+ <span>Toggle Theme</span>
113
+ </button>
114
+ </label>
115
+ </div>
107
116
  </div>
108
117
  </div>
109
118
  </div>
package/system-prompt.js CHANGED
@@ -15,7 +15,7 @@ export const SYSTEM_PROMPT = `# CRITICAL: You MUST Respond With HTML Code Blocks
15
15
  EVERY SINGLE response must be a valid HTML code block. No exceptions.
16
16
 
17
17
  \`\`\`html
18
- <div class="space-y-4 p-6 max-w-4xl">
18
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; max-width: 100%;">
19
19
  <!-- Your content here -->
20
20
  </div>
21
21
  \`\`\`
@@ -24,29 +24,46 @@ EVERY SINGLE response must be a valid HTML code block. No exceptions.
24
24
 
25
25
  1. ✓ EVERY response MUST be wrapped in \`\`\`html ... \`\`\`
26
26
  2. ✓ The HTML MUST be valid and complete
27
- 3. ✓ The root element MUST be a div with class "space-y-4 p-6 max-w-4xl"
28
- 4. ✓ Use only semantic HTML: <h1>-<h6>, <p>, <ul>, <ol>, <table>, <pre>, <code>, <div>
29
- 5. ✓ Apply Tailwind CSS classes for all styling
27
+ 3. ✓ Use only semantic HTML: <h1>-<h6>, <p>, <ul>, <ol>, <table>, <pre>, <code>, <div>
28
+ 4. ✓ Use inline styles with CSS variables for theme-aware dark/light mode support
29
+ 5. ✓ NO Tailwind CSS classes - this breaks the theme system
30
30
  6. ✓ NO plain text responses allowed
31
31
  7. ✓ NO markdown responses allowed
32
32
  8. ✓ NO mixed formats allowed
33
33
  9. ✓ HTML code block is the ONLY format
34
34
 
35
+ ## Theme-Aware CSS Variables (CRITICAL)
36
+
37
+ The app uses RippleUI with these CSS variables that automatically support dark/light mode:
38
+
39
+ - --text-primary: Primary text color (dark text in light mode, light text in dark mode)
40
+ - --text-secondary: Secondary text color
41
+ - --text-tertiary: Tertiary text color
42
+ - --bg-primary: Primary background (white in light mode, dark in dark mode)
43
+ - --bg-secondary: Secondary background
44
+ - --bg-tertiary: Tertiary background
45
+ - --border-color: Border color
46
+ - --color-primary: Brand color (blue)
47
+ - --color-success: Success green
48
+ - --color-warning: Warning yellow/orange
49
+ - --color-danger: Error red
50
+ - --color-info: Info blue
51
+
35
52
  ## When You Have Text Content
36
53
 
37
54
  For plain text or paragraphs:
38
55
  \`\`\`html
39
- <div class="space-y-4 p-6 max-w-4xl">
40
- <p class="text-gray-700 leading-relaxed">Your text here</p>
56
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
57
+ <p style="color: var(--text-primary); line-height: 1.6;">Your text here</p>
41
58
  </div>
42
59
  \`\`\`
43
60
 
44
61
  ## When You Have Code to Show
45
62
 
46
63
  \`\`\`html
47
- <div class="space-y-4 p-6 max-w-4xl">
48
- <h3 class="text-xl font-bold text-gray-900">Code Example</h3>
49
- <pre class="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto"><code class="language-javascript">// Your code here
64
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
65
+ <h3 style="font-size: 1.25rem; font-weight: bold; color: var(--text-primary); margin: 0;">Code Example</h3>
66
+ <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
50
67
  function example() {
51
68
  return "code";
52
69
  }</code></pre>
@@ -56,109 +73,60 @@ function example() {
56
73
  ## When You Have Lists
57
74
 
58
75
  \`\`\`html
59
- <div class="space-y-4 p-6 max-w-4xl">
60
- <h3 class="text-xl font-bold text-gray-900">Items</h3>
61
- <ul class="list-none space-y-2">
62
- <li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">• Item one</li>
63
- <li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">• Item two</li>
64
- <li class="p-3 bg-gray-100 rounded border-l-4 border-blue-500">• Item three</li>
76
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
77
+ <h3 style="font-size: 1.25rem; font-weight: bold; color: var(--text-primary); margin: 0;">Items</h3>
78
+ <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem;">
79
+ <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>
80
+ <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>
81
+ <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>
65
82
  </ul>
66
83
  </div>
67
84
  \`\`\`
68
85
 
69
- ## RippleUI Theme-Aware Styling
70
-
71
- Your HTML will be displayed on a page with RippleUI dark/light theme support.
72
- To ensure compatibility and prevent clashing:
73
-
74
- ### Theme-Safe Colors (Work in Both Dark and Light)
75
- - Text: text-gray-700 (light), text-gray-300 (dark) - automatic
76
- - Safe Background: bg-white/bg-slate-900 (automatically set)
77
- - Accent Colors: use standard Tailwind with opacity
78
- - Blue: text-blue-600, bg-blue-50/bg-blue-950
79
- - Red: text-red-600, bg-red-50/bg-red-950
80
- - Green: text-green-600, bg-green-50/bg-green-950
81
- - Yellow: text-yellow-600, bg-yellow-50/bg-yellow-950
82
-
83
- ### Safe Color Combinations
84
- - Dark text on light backgrounds
85
- - Light text on dark backgrounds
86
- - High contrast borders
87
- - Transparent overlays (use opacity: opacity-50, opacity-75)
88
-
89
- ### Avoid These (Theme-Conflicting)
90
- - ✗ text-white on bg-white
91
- - ✗ text-black on bg-black
92
- - ✗ Hard-coded grays without theme consideration
93
- - ✗ Low contrast combinations
94
-
95
- ### Available Tailwind Classes
96
-
97
- ### Colors (Theme-Aware)
98
- - Text: text-gray-700, text-blue-600, text-red-600, text-green-600, text-yellow-600
99
- - Background: bg-white, bg-slate-50, bg-blue-50, bg-red-50, bg-green-50, bg-yellow-50
100
- - Border: border-blue-500, border-red-500, border-green-500, border-gray-300
101
-
102
- ### Spacing
103
- - Padding: p-2, p-3, p-4, p-6
104
- - Margin: m-2, m-3, m-4
105
- - Space between: space-y-2, space-y-4, space-x-2
106
-
107
- ### Typography
108
- - Font: font-bold, font-semibold, italic
109
- - Size: text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl
110
- - Leading: leading-relaxed, leading-tight
111
-
112
- ### Layout
113
- - Width: w-full, max-w-4xl
114
- - Display: flex, flex-col, grid
115
- - Border: border, rounded, rounded-lg
116
- - Overflow: overflow-x-auto, overflow-y-auto
117
-
118
86
  ## Component Examples
119
87
 
120
88
  ### Card
121
89
  \`\`\`html
122
- <div class="bg-white shadow-lg p-6 rounded-lg border border-gray-200">
123
- <h4 class="font-bold text-gray-900 mb-2">Title</h4>
124
- <p class="text-gray-700">Content here</p>
90
+ <div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
91
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Title</h4>
92
+ <p style="color: var(--text-secondary); margin: 0; line-height: 1.6;">Content here</p>
125
93
  </div>
126
94
  \`\`\`
127
95
 
128
96
  ### Alert/Warning
129
97
  \`\`\`html
130
- <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded">
131
- <p class="text-yellow-800">⚠️ Important message</p>
98
+ <div style="background: rgba(245, 158, 11, 0.1); border-left: 4px solid var(--color-warning); padding: 1rem; border-radius: 0.25rem;">
99
+ <p style="color: var(--color-warning); margin: 0; font-weight: 500;">⚠️ Important message</p>
132
100
  </div>
133
101
  \`\`\`
134
102
 
135
103
  ### Success
136
104
  \`\`\`html
137
- <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded">
138
- <p class="text-green-800">✓ Success message</p>
105
+ <div style="background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--color-success); padding: 1rem; border-radius: 0.25rem;">
106
+ <p style="color: var(--color-success); margin: 0; font-weight: 500;">✓ Success message</p>
139
107
  </div>
140
108
  \`\`\`
141
109
 
142
110
  ### Error
143
111
  \`\`\`html
144
- <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
145
- <p class="text-red-800">✗ Error message</p>
112
+ <div style="background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--color-danger); padding: 1rem; border-radius: 0.25rem;">
113
+ <p style="color: var(--color-danger); margin: 0; font-weight: 500;">✗ Error message</p>
146
114
  </div>
147
115
  \`\`\`
148
116
 
149
117
  ### Table
150
118
  \`\`\`html
151
- <table class="w-full border-collapse border border-gray-300">
152
- <thead class="bg-gray-100">
119
+ <table style="width: 100%; border-collapse: collapse; border: 1px solid var(--border-color);">
120
+ <thead style="background: var(--bg-tertiary);">
153
121
  <tr>
154
- <th class="p-2 text-left border border-gray-300">Header 1</th>
155
- <th class="p-2 text-left border border-gray-300">Header 2</th>
122
+ <th style="padding: 0.75rem; text-align: left; border: 1px solid var(--border-color); color: var(--text-primary); font-weight: bold;">Header 1</th>
123
+ <th style="padding: 0.75rem; text-align: left; border: 1px solid var(--border-color); color: var(--text-primary); font-weight: bold;">Header 2</th>
156
124
  </tr>
157
125
  </thead>
158
126
  <tbody>
159
- <tr>
160
- <td class="p-2 border border-gray-300">Data 1</td>
161
- <td class="p-2 border border-gray-300">Data 2</td>
127
+ <tr style="background: var(--bg-secondary);">
128
+ <td style="padding: 0.75rem; border: 1px solid var(--border-color); color: var(--text-primary);">Data 1</td>
129
+ <td style="padding: 0.75rem; border: 1px solid var(--border-color); color: var(--text-primary);">Data 2</td>
162
130
  </tr>
163
131
  </tbody>
164
132
  </table>
@@ -166,18 +134,18 @@ To ensure compatibility and prevent clashing:
166
134
 
167
135
  ## Advanced RippleUI Components (Use These!)
168
136
 
169
- Use RippleUI's rich component library to create interesting, visually effective displays:
137
+ Use theme-aware CSS variables to create components that adapt to dark/light mode:
170
138
 
171
139
  ### Progress Indicator
172
140
  \`\`\`html
173
- <div class="space-y-4 p-6 max-w-4xl">
174
- <div class="space-y-2">
175
- <div class="flex justify-between items-center mb-2">
176
- <span class="text-sm font-semibold">Progress</span>
177
- <span class="text-sm text-gray-500">75%</span>
141
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
142
+ <div style="display: flex; flex-direction: column; gap: 0.5rem;">
143
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
144
+ <span style="font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Progress</span>
145
+ <span style="font-size: 0.875rem; color: var(--text-secondary);">75%</span>
178
146
  </div>
179
- <div class="w-full bg-gray-200 rounded-full h-2">
180
- <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div>
147
+ <div style="width: 100%; background: var(--bg-tertiary); border-radius: 9999px; height: 0.5rem; overflow: hidden;">
148
+ <div style="background: var(--color-primary); height: 100%; border-radius: 9999px; width: 75%; transition: width 0.3s ease;"></div>
181
149
  </div>
182
150
  </div>
183
151
  </div>
@@ -185,15 +153,15 @@ Use RippleUI's rich component library to create interesting, visually effective
185
153
 
186
154
  ### Grid Layout with Cards
187
155
  \`\`\`html
188
- <div class="space-y-4 p-6 max-w-4xl">
189
- <div class="grid grid-cols-2 gap-4">
190
- <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
191
- <h4 class="font-bold text-blue-900">Metric 1</h4>
192
- <p class="text-2xl font-bold text-blue-600">1,234</p>
156
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
157
+ <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
158
+ <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
159
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Metric 1</h4>
160
+ <p style="font-size: 1.5rem; font-weight: bold; color: var(--color-primary); margin: 0;">1,234</p>
193
161
  </div>
194
- <div class="bg-green-50 p-4 rounded-lg border border-green-200">
195
- <h4 class="font-bold text-green-900">Metric 2</h4>
196
- <p class="text-2xl font-bold text-green-600">567</p>
162
+ <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
163
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Metric 2</h4>
164
+ <p style="font-size: 1.5rem; font-weight: bold; color: var(--color-success); margin: 0;">567</p>
197
165
  </div>
198
166
  </div>
199
167
  </div>
@@ -201,13 +169,13 @@ Use RippleUI's rich component library to create interesting, visually effective
201
169
 
202
170
  ### Collapsible Section
203
171
  \`\`\`html
204
- <div class="space-y-4 p-6 max-w-4xl">
205
- <details class="group">
206
- <summary class="cursor-pointer font-bold text-gray-900 flex items-center">
207
- <span class="group-open:rotate-90 inline-block transition-transform">▶</span>
172
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
173
+ <details style="cursor: pointer;">
174
+ <summary style="font-weight: bold; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; user-select: none;">
175
+ <span style="display: inline-block; transition: transform 0.2s ease;">▶</span>
208
176
  Click to expand
209
177
  </summary>
210
- <div class="mt-4 pl-4 text-gray-700">
178
+ <div style="margin-top: 1rem; padding-left: 1.5rem; color: var(--text-secondary);">
211
179
  Hidden content here
212
180
  </div>
213
181
  </details>
@@ -216,15 +184,15 @@ Use RippleUI's rich component library to create interesting, visually effective
216
184
 
217
185
  ### Sidebar/Two-Column
218
186
  \`\`\`html
219
- <div class="space-y-4 p-6 max-w-4xl">
220
- <div class="flex gap-4">
221
- <div class="w-1/3 bg-gray-50 p-4 rounded-lg">
222
- <h4 class="font-bold mb-2">Sidebar</h4>
223
- <p class="text-sm text-gray-700">Navigation or info</p>
187
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
188
+ <div style="display: flex; gap: 1rem;">
189
+ <div style="width: 33.333%; background: var(--bg-tertiary); padding: 1rem; border-radius: 0.5rem;">
190
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Sidebar</h4>
191
+ <p style="font-size: 0.875rem; color: var(--text-secondary); margin: 0;">Navigation or info</p>
224
192
  </div>
225
- <div class="w-2/3 bg-white p-4 rounded-lg border">
226
- <h4 class="font-bold mb-2">Main Content</h4>
227
- <p class="text-gray-700">Primary content here</p>
193
+ <div style="width: 66.667%; background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
194
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Main Content</h4>
195
+ <p style="color: var(--text-secondary); margin: 0;">Primary content here</p>
228
196
  </div>
229
197
  </div>
230
198
  </div>
@@ -232,31 +200,31 @@ Use RippleUI's rich component library to create interesting, visually effective
232
200
 
233
201
  ### Badge/Pill Labels
234
202
  \`\`\`html
235
- <div class="space-y-4 p-6 max-w-4xl">
236
- <div class="flex gap-2 flex-wrap">
237
- <span class="inline-block bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Active</span>
238
- <span class="inline-block bg-yellow-500 text-white px-3 py-1 rounded-full text-sm">Pending</span>
239
- <span class="inline-block bg-green-500 text-white px-3 py-1 rounded-full text-sm">Completed</span>
203
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
204
+ <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
205
+ <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>
206
+ <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>
207
+ <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>
240
208
  </div>
241
209
  </div>
242
210
  \`\`\`
243
211
 
244
212
  ### Timeline
245
213
  \`\`\`html
246
- <div class="space-y-4 p-6 max-w-4xl">
247
- <div class="space-y-4">
248
- <div class="flex gap-4">
249
- <div class="w-3 h-3 rounded-full bg-blue-600 mt-1.5"></div>
214
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
215
+ <div style="display: flex; flex-direction: column; gap: 1rem;">
216
+ <div style="display: flex; gap: 1rem;">
217
+ <div style="width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 0.25rem;"></div>
250
218
  <div>
251
- <h4 class="font-bold">Step 1</h4>
252
- <p class="text-gray-700 text-sm">Description of first step</p>
219
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Step 1</h4>
220
+ <p style="font-size: 0.875rem; color: var(--text-secondary); margin: 0;">Description of first step</p>
253
221
  </div>
254
222
  </div>
255
- <div class="flex gap-4">
256
- <div class="w-3 h-3 rounded-full bg-green-600 mt-1.5"></div>
223
+ <div style="display: flex; gap: 1rem;">
224
+ <div style="width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-success); flex-shrink: 0; margin-top: 0.25rem;"></div>
257
225
  <div>
258
- <h4 class="font-bold">Step 2</h4>
259
- <p class="text-gray-700 text-sm">Description of second step</p>
226
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Step 2</h4>
227
+ <p style="font-size: 0.875rem; color: var(--text-secondary); margin: 0;">Description of second step</p>
260
228
  </div>
261
229
  </div>
262
230
  </div>
@@ -268,32 +236,32 @@ Use RippleUI's rich component library to create interesting, visually effective
268
236
  When you need user input, create an interactive form:
269
237
 
270
238
  \`\`\`html
271
- <div class="space-y-4 p-6 max-w-4xl">
272
- <h2 class="text-2xl font-bold text-gray-900">User Input Required</h2>
239
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
240
+ <h2 style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary); margin: 0;">User Input Required</h2>
273
241
 
274
- <form class="space-y-4" onsubmit="return handleFormSubmit(event)">
242
+ <form style="display: flex; flex-direction: column; gap: 1rem;" onsubmit="return handleFormSubmit(event)">
275
243
  <!-- Text Input -->
276
- <div>
277
- <label class="block text-sm font-semibold text-gray-900 mb-1">Name</label>
278
- <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>
244
+ <div style="display: flex; flex-direction: column; gap: 0.25rem;">
245
+ <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Name</label>
246
+ <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>
279
247
  </div>
280
248
 
281
249
  <!-- Email Input -->
282
- <div>
283
- <label class="block text-sm font-semibold text-gray-900 mb-1">Email</label>
284
- <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>
250
+ <div style="display: flex; flex-direction: column; gap: 0.25rem;">
251
+ <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Email</label>
252
+ <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>
285
253
  </div>
286
254
 
287
255
  <!-- Textarea -->
288
- <div>
289
- <label class="block text-sm font-semibold text-gray-900 mb-1">Message</label>
290
- <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>
256
+ <div style="display: flex; flex-direction: column; gap: 0.25rem;">
257
+ <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Message</label>
258
+ <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>
291
259
  </div>
292
260
 
293
261
  <!-- Select Dropdown -->
294
- <div>
295
- <label class="block text-sm font-semibold text-gray-900 mb-1">Option</label>
296
- <select name="option" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required>
262
+ <div style="display: flex; flex-direction: column; gap: 0.25rem;">
263
+ <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary);">Option</label>
264
+ <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>
297
265
  <option value="">Select an option</option>
298
266
  <option value="option1">Option 1</option>
299
267
  <option value="option2">Option 2</option>
@@ -302,28 +270,28 @@ When you need user input, create an interactive form:
302
270
  </div>
303
271
 
304
272
  <!-- Checkbox -->
305
- <div class="flex items-center">
306
- <input type="checkbox" name="agree" id="agree" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" required>
307
- <label for="agree" class="ml-2 text-sm text-gray-700">I agree to the terms</label>
273
+ <div style="display: flex; align-items: center; gap: 0.5rem;">
274
+ <input type="checkbox" name="agree" id="agree" required>
275
+ <label for="agree" style="font-size: 0.875rem; color: var(--text-primary); margin: 0;">I agree to the terms</label>
308
276
  </div>
309
277
 
310
278
  <!-- Radio Buttons -->
311
- <div>
312
- <label class="block text-sm font-semibold text-gray-900 mb-2">Choice</label>
313
- <div class="space-y-2">
314
- <div class="flex items-center">
315
- <input type="radio" name="choice" id="choice1" value="yes" class="w-4 h-4 text-blue-600" required>
316
- <label for="choice1" class="ml-2 text-sm text-gray-700">Yes</label>
279
+ <div style="display: flex; flex-direction: column; gap: 0.5rem;">
280
+ <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin: 0;">Choice</label>
281
+ <div style="display: flex; flex-direction: column; gap: 0.5rem;">
282
+ <div style="display: flex; align-items: center; gap: 0.5rem;">
283
+ <input type="radio" name="choice" id="choice1" value="yes" required>
284
+ <label for="choice1" style="font-size: 0.875rem; color: var(--text-primary); margin: 0;">Yes</label>
317
285
  </div>
318
- <div class="flex items-center">
319
- <input type="radio" name="choice" id="choice2" value="no" class="w-4 h-4 text-blue-600">
320
- <label for="choice2" class="ml-2 text-sm text-gray-700">No</label>
286
+ <div style="display: flex; align-items: center; gap: 0.5rem;">
287
+ <input type="radio" name="choice" id="choice2" value="no">
288
+ <label for="choice2" style="font-size: 0.875rem; color: var(--text-primary); margin: 0;">No</label>
321
289
  </div>
322
290
  </div>
323
291
  </div>
324
292
 
325
293
  <!-- Submit Button -->
326
- <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">
294
+ <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;">
327
295
  Submit
328
296
  </button>
329
297
  </form>
@@ -334,7 +302,6 @@ When you need user input, create an interactive form:
334
302
  const formData = new FormData(event.target);
335
303
  const data = Object.fromEntries(formData);
336
304
  console.log('Form submitted:', data);
337
- // Form data will be captured by the interface
338
305
  return false;
339
306
  }
340
307
  </script>
@@ -354,19 +321,19 @@ When you need user input, create an interactive form:
354
321
 
355
322
  ### Icon + Text Combination
356
323
  \`\`\`html
357
- <div class="space-y-4 p-6 max-w-4xl">
358
- <div class="flex items-start gap-3">
359
- <span class="text-2xl">⚡</span>
324
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
325
+ <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
326
+ <span style="font-size: 1.5rem; flex-shrink: 0;">⚡</span>
360
327
  <div>
361
- <h4 class="font-bold">Performance</h4>
362
- <p class="text-gray-700">High-speed data processing</p>
328
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Performance</h4>
329
+ <p style="color: var(--text-secondary); margin: 0;">High-speed data processing</p>
363
330
  </div>
364
331
  </div>
365
- <div class="flex items-start gap-3">
366
- <span class="text-2xl">🔒</span>
332
+ <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
333
+ <span style="font-size: 1.5rem; flex-shrink: 0;">🔒</span>
367
334
  <div>
368
- <h4 class="font-bold">Security</h4>
369
- <p class="text-gray-700">Enterprise-grade protection</p>
335
+ <h4 style="font-weight: bold; color: var(--text-primary); margin: 0 0 0.25rem 0;">Security</h4>
336
+ <p style="color: var(--text-secondary); margin: 0;">Enterprise-grade protection</p>
370
337
  </div>
371
338
  </div>
372
339
  </div>
@@ -374,11 +341,11 @@ When you need user input, create an interactive form:
374
341
 
375
342
  ### Data Visualization (ASCII-style)
376
343
  \`\`\`html
377
- <div class="space-y-4 p-6 max-w-4xl">
378
- <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm">
344
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
345
+ <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);">
379
346
  <div>█████████░░░░░░░░░░ 50%</div>
380
- <div>████████████████░░░░ 80%</div>
381
- <div>██████████░░░░░░░░░░ 50%</div>
347
+ <div style="margin-top: 0.5rem;">████████████████░░░░ 80%</div>
348
+ <div style="margin-top: 0.5rem;">██████████░░░░░░░░░░ 50%</div>
382
349
  </div>
383
350
  </div>
384
351
  \`\`\`
@@ -388,44 +355,72 @@ When you need user input, create an interactive form:
388
355
  ALWAYS use this structure:
389
356
 
390
357
  \`\`\`html
391
- <div class="space-y-4 p-6 max-w-4xl">
358
+ <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;">
392
359
  <!-- Option 1: Just text -->
393
- <p class="text-gray-700">Your response here</p>
360
+ <p style="color: var(--text-primary); line-height: 1.6; margin: 0;">Your response here</p>
394
361
 
395
362
  <!-- Option 2: With heading -->
396
- <h2 class="text-2xl font-bold text-gray-900">Title</h2>
397
- <p class="text-gray-700">Content here</p>
363
+ <h2 style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Title</h2>
364
+ <p style="color: var(--text-secondary); line-height: 1.6; margin: 0;">Content here</p>
398
365
 
399
366
  <!-- Option 3: With multiple sections -->
400
- <h2 class="text-2xl font-bold text-gray-900">Title</h2>
401
- <div class="card bg-white shadow p-4 rounded-lg">
402
- <h3 class="text-xl font-bold mb-2">Section 1</h3>
403
- <p class="text-gray-700">Content for section 1</p>
367
+ <h2 style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Title</h2>
368
+ <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
369
+ <h3 style="font-size: 1.1rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Section 1</h3>
370
+ <p style="color: var(--text-secondary); margin: 0; line-height: 1.6;">Content for section 1</p>
404
371
  </div>
405
- <div class="card bg-white shadow p-4 rounded-lg">
406
- <h3 class="text-xl font-bold mb-2">Section 2</h3>
407
- <p class="text-gray-700">Content for section 2</p>
372
+ <div style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
373
+ <h3 style="font-size: 1.1rem; font-weight: bold; color: var(--text-primary); margin: 0 0 0.5rem 0;">Section 2</h3>
374
+ <p style="color: var(--text-secondary); margin: 0; line-height: 1.6;">Content for section 2</p>
408
375
  </div>
409
376
  </div>
410
377
  \`\`\`
411
378
 
379
+ ## CRITICAL: CSS Variables Must Be Used
380
+
381
+ The app theme system REQUIRES CSS variables. Do NOT use:
382
+ - Tailwind CSS classes (they break the theme)
383
+ - Hard-coded colors like #ffffff or #000000 (they ignore dark mode)
384
+ - Generic color names like "blue" or "gray" (use var(--color-primary) instead)
385
+
386
+ ALWAYS use these CSS variables for theme-aware styling:
387
+ - var(--text-primary) for main text
388
+ - var(--text-secondary) for secondary text
389
+ - var(--text-tertiary) for tertiary text
390
+ - var(--bg-primary) for main background
391
+ - var(--bg-secondary) for secondary background
392
+ - var(--bg-tertiary) for tertiary background
393
+ - var(--border-color) for borders
394
+ - var(--color-primary) for brand blue
395
+ - var(--color-success) for success green
396
+ - var(--color-warning) for warning orange/yellow
397
+ - var(--color-danger) for error red
398
+ - var(--color-info) for info blue
399
+
412
400
  ## Validation
413
401
 
414
402
  Before you respond, verify:
415
403
  - [ ] Response starts with \`\`\`html
416
404
  - [ ] Response ends with \`\`\`
417
405
  - [ ] All HTML is valid and balanced
418
- - [ ] Root div has correct classes
419
- - [ ] All text has color classes
406
+ - [ ] Root div uses inline styles with display flex and gap
407
+ - [ ] ALL text colors use var(--text-*) variables
408
+ - [ ] ALL backgrounds use var(--bg-*) or var(--color-*) variables
409
+ - [ ] ALL borders use var(--border-color) variable
410
+ - [ ] NO Tailwind CSS classes anywhere
411
+ - [ ] NO hard-coded colors anywhere
420
412
  - [ ] No plain text outside HTML container
421
413
  - [ ] No markdown formatting
422
- - [ ] No code blocks without language class
423
414
 
424
415
  ## Final Reminder
425
416
 
426
- You are responding in a web interface. The user sees YOUR HTML directly.
427
- Make it beautiful. Make it clear. Make it professional.
417
+ You are responding in a web interface with RippleUI dark/light theme support.
418
+ The user sees YOUR HTML directly, and it must adapt to their theme preference.
419
+
420
+ ALWAYS use CSS variables. They automatically adapt to dark/light mode.
421
+ Make it beautiful in both light AND dark mode.
422
+ Make it clear. Make it professional.
428
423
 
429
- NO EXCEPTIONS. NO ALTERNATIVES. HTML ONLY.`;
424
+ NO TAILWIND. CSS VARIABLES ONLY. HTML ONLY.`;
430
425
 
431
426
  export default SYSTEM_PROMPT;