agentgui 1.0.610 → 1.0.611

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 (5) hide show
  1. package/package.json +1 -1
  2. package/static/index.html +26 -1
  3. package/static/js/client.js +8 -8
  4. package/static/js/streaming-renderer.js +7 -7
  5. package/static/js/ui-components.js +29 -40
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agentgui",
3
- "version": "1.0.610",
3
+ "version": "1.0.611",
4
4
  "description": "Multi-agent ACP client with real-time communication",
5
5
  "type": "module",
6
6
  "main": "server.js",
package/static/index.html CHANGED
@@ -3007,7 +3007,32 @@
3007
3007
  .toast-success { background: var(--color-success); color: white; }
3008
3008
  .toast-error { background: var(--color-error); color: white; }
3009
3009
  .toast-warning { background: var(--color-warning); color: white; }
3010
- </style>
3010
+
3011
+ .inline-code {
3012
+ background: #f3f4f6;
3013
+ padding: 0.125rem 0.375rem;
3014
+ border-radius: 0.25rem;
3015
+ font-size: 0.875rem;
3016
+ font-family: ui-monospace, monospace;
3017
+ color: #dc2626;
3018
+ }
3019
+
3020
+ html.dark .inline-code {
3021
+ background: #1f2937;
3022
+ color: #f87171;
3023
+ }
3024
+
3025
+ .html-rendered-container {
3026
+ border-radius: 0.5rem;
3027
+ overflow: hidden;
3028
+ border: 1px solid #e5e7eb;
3029
+ }
3030
+
3031
+ html.dark .html-rendered-container {
3032
+ border-color: #1f2937;
3033
+ }
3034
+
3035
+ </style>
3011
3036
  <link rel="stylesheet" href="/gm/css/tools-popup.css">
3012
3037
  </head>
3013
3038
  <body>
package/static/js/client.js CHANGED
@@ -960,7 +960,7 @@ class AgentGUIClient {
960
960
  if (block.type === 'text' && block.text) {
961
961
  const text = block.text;
962
962
  if (this.isHtmlContent(text)) {
963
- return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(text)}</div>`;
963
+ return `<div class="html-content">${this.sanitizeHtml(text)}</div>`;
964
964
  }
965
965
  const parts = this.parseMarkdownCodeBlocks(text);
966
966
  if (parts.length === 1 && parts[0].type === 'text') {
@@ -968,7 +968,7 @@ class AgentGUIClient {
968
968
  }
969
969
  return parts.map(part => {
970
970
  if (part.type === 'html') {
971
- return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(part.content)}</div>`;
971
+ return `<div class="html-content">${this.sanitizeHtml(part.content)}</div>`;
972
972
  } else if (part.type === 'code') {
973
973
  return this.renderCodeBlock(part.language, part.code);
974
974
  }
@@ -1422,10 +1422,10 @@ class AgentGUIClient {
1422
1422
  if (language.toLowerCase() === 'html') {
1423
1423
  return `
1424
1424
  <div class="message-code">
1425
- <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
1425
+ <div class="html-rendered-label">
1426
1426
  Rendered HTML
1427
1427
  </div>
1428
- <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
1428
+ <div class="html-content">
1429
1429
  ${this.sanitizeHtml(code)}
1430
1430
  </div>
1431
1431
  </div>
@@ -1442,7 +1442,7 @@ class AgentGUIClient {
1442
1442
  renderMessageContent(content) {
1443
1443
  if (typeof content === 'string') {
1444
1444
  if (this.isHtmlContent(content)) {
1445
- return `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(content)}</div></div>`;
1445
+ return `<div class="message-text"><div class="html-content">${this.sanitizeHtml(content)}</div></div>`;
1446
1446
  }
1447
1447
  return `<div class="message-text">${this.escapeHtml(content)}</div>`;
1448
1448
  } else if (content && typeof content === 'object' && content.type === 'claude_execution') {
@@ -1458,7 +1458,7 @@ class AgentGUIClient {
1458
1458
  const parts = this.parseMarkdownCodeBlocks(block.text);
1459
1459
  parts.forEach(part => {
1460
1460
  if (part.type === 'html') {
1461
- html += `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(part.content)}</div></div>`;
1461
+ html += `<div class="message-text"><div class="html-content">${this.sanitizeHtml(part.content)}</div></div>`;
1462
1462
  } else if (part.type === 'text') {
1463
1463
  html += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
1464
1464
  } else if (part.type === 'code') {
@@ -1470,10 +1470,10 @@ class AgentGUIClient {
1470
1470
  if (block.language === 'html') {
1471
1471
  html += `
1472
1472
  <div class="message-code">
1473
- <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
1473
+ <div class="html-rendered-label">
1474
1474
  Rendered HTML
1475
1475
  </div>
1476
- <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
1476
+ <div class="html-content">
1477
1477
  ${this.sanitizeHtml(block.code)}
1478
1478
  </div>
1479
1479
  </div>
package/static/js/streaming-renderer.js CHANGED
@@ -460,7 +460,7 @@ class StreamingRenderer {
460
460
  html = html.replace(/_([^_]+)_/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
461
461
 
462
462
  // Render inline code: `code`
463
- html = html.replace(/`([^`]+)`/g, '<code class="inline-code bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-red-600 dark:text-red-400">$1</code>');
463
+ html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
464
464
 
465
465
  // Render markdown links: [text](url)
466
466
  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank">$1</a>');
@@ -1895,13 +1895,13 @@ class StreamingRenderer {
1895
1895
  let html = '';
1896
1896
  parts.forEach(part => {
1897
1897
  if (part.type === 'html') {
1898
- html += `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto mb-3">${part.content}</div>`;
1898
+ html += `<div class="html-content mb-3">${part.content}</div>`;
1899
1899
  } else if (part.type === 'text') {
1900
1900
  html += `<div class="p-4 bg-white dark:bg-gray-950 rounded-lg border border-gray-200 dark:border-gray-800 mb-3 leading-relaxed text-sm">${this.parseAndRenderMarkdown(part.content)}</div>`;
1901
1901
  } else if (part.type === 'code') {
1902
1902
  if (part.language.toLowerCase() === 'html') {
1903
- html += `<div class="html-rendered-container mb-3 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
1904
- <div class="html-rendered-label px-4 py-2 bg-blue-100 dark:bg-blue-900 text-xs font-semibold text-blue-900 dark:text-blue-200">Rendered HTML</div>
1903
+ html += `<div class="html-rendered-container mb-3">
1904
+ <div class="html-rendered-label">Rendered HTML</div>
1905
1905
  <div class="html-content bg-white dark:bg-gray-800 p-4 overflow-x-auto">${part.code}</div>
1906
1906
  </div>`;
1907
1907
  } else {
@@ -1910,7 +1910,7 @@ class StreamingRenderer {
1910
1910
  <details class="collapsible-code">
1911
1911
  <summary class="collapsible-code-summary">
1912
1912
  <span>${this.escapeHtml(part.language)} - ${partLineCount} line${partLineCount !== 1 ? 's' : ''}</span>
1913
- <button class="copy-code-btn text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" title="Copy code" onclick="event.preventDefault();event.stopPropagation();navigator.clipboard.writeText(this.closest('.collapsible-code').querySelector('code').textContent)">
1913
+ <button class="copy-code-btn" title="Copy code" onclick="event.preventDefault();event.stopPropagation();navigator.clipboard.writeText(this.closest('.collapsible-code').querySelector('code').textContent)">
1914
1914
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1915
1915
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
1916
1916
  </svg>
@@ -1957,10 +1957,10 @@ class StreamingRenderer {
1957
1957
  // Render HTML code blocks as actual HTML elements
1958
1958
  if (language === 'html') {
1959
1959
  div.innerHTML = `
1960
- <div class="html-rendered-container mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
1960
+ <div class="html-rendered-container alert-info text-xs mb-2 text-blue-700 dark:text-blue-300">
1961
1961
  Rendered HTML
1962
1962
  </div>
1963
- <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
1963
+ <div class="html-content">
1964
1964
  ${code}
1965
1965
  </div>
1966
1966
  `;
package/static/js/ui-components.js CHANGED
@@ -27,15 +27,15 @@ class UIComponents {
27
27
  };
28
28
 
29
29
  modal.innerHTML = `
30
- <div class="modal-content ${sizeClasses[size] || sizeClasses['medium']} bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
31
- <div class="modal-header flex justify-between items-center mb-4 pb-4 border-b">
30
+ <div class="modal-content card ${sizeClasses[size] || sizeClasses['medium']}">
31
+ <div class="card-header flex justify-between items-center">
32
32
  <h2 class="text-xl font-bold">${UIComponents.escapeHtml(title)}</h2>
33
- <button class="modal-close text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 text-2xl leading-none">&times;</button>
33
+ <button class="btn btn-ghost btn-sm modal-close">&times;</button>
34
34
  </div>
35
- <div class="modal-body mb-4">
35
+ <div class="card-body modal-body">
36
36
  ${typeof content === 'string' ? UIComponents.escapeHtml(content) : ''}
37
37
  </div>
38
- <div class="modal-footer flex gap-2 justify-end">
38
+ <div class="card-footer flex gap-2 justify-end">
39
39
  ${buttons.map(btn => `
40
40
  <button class="btn btn-${btn.variant || 'secondary'}" data-action="${btn.action || 'close'}">
41
41
  ${UIComponents.escapeHtml(btn.label)}
@@ -93,11 +93,7 @@ class UIComponents {
93
93
 
94
94
  tabs.forEach((tab, index) => {
95
95
  const btn = document.createElement('button');
96
- btn.className = `tab-button px-4 py-2 font-medium transition-colors ${
97
- index === activeTab
98
- ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
99
- : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
100
- }`;
96
+ btn.className = `tab tab-underline tab-button ${index === activeTab ? 'tab-active' : ''}`;
101
97
  btn.textContent = tab.label;
102
98
  btn.dataset.tabIndex = index;
103
99
 
@@ -105,11 +101,9 @@ class UIComponents {
105
101
  // Update active button
106
102
  tabButtons.querySelectorAll('.tab-button').forEach((b, i) => {
107
103
  if (i === index) {
108
- b.classList.add('border-b-2', 'border-blue-500', 'text-blue-600', 'dark:text-blue-400');
109
- b.classList.remove('text-gray-600', 'dark:text-gray-400');
104
+ b.classList.add('tab-active');
110
105
  } else {
111
- b.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600', 'dark:text-blue-400');
112
- b.classList.add('text-gray-600', 'dark:text-gray-400');
106
+ b.classList.remove('tab-active');
113
107
  }
114
108
  });
115
109
 
@@ -155,13 +149,13 @@ class UIComponents {
155
149
 
156
150
  const alert = document.createElement('div');
157
151
  const typeClasses = {
158
- 'info': 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200',
159
- 'success': 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900 dark:border-green-700 dark:text-green-200',
160
- 'warning': 'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-200',
161
- 'error': 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900 dark:border-red-700 dark:text-red-200'
152
+ 'info': 'alert-info',
153
+ 'success': 'alert-success',
154
+ 'warning': 'alert-warning',
155
+ 'error': 'alert-error'
162
156
  };
163
157
 
164
- alert.className = `alert border-l-4 p-4 mb-4 rounded ${typeClasses[type] || typeClasses['info']}`;
158
+ alert.className = `alert ${typeClasses[type] || typeClasses['info']}`;
165
159
  alert.innerHTML = `
166
160
  <div class="flex justify-between items-center">
167
161
  <span>${UIComponents.escapeHtml(message)}</span>
@@ -191,18 +185,15 @@ class UIComponents {
191
185
  } = config;
192
186
 
193
187
  const sizeClasses = {
194
- 'small': 'w-4 h-4',
195
- 'medium': 'w-8 h-8',
196
- 'large': 'w-12 h-12'
188
+ 'small': 'spinner-xs',
189
+ 'medium': 'spinner-sm',
190
+ 'large': 'spinner-md'
197
191
  };
198
192
 
199
193
  const container = document.createElement('div');
200
194
  container.className = 'flex items-center gap-3 justify-center p-4';
201
195
  container.innerHTML = `
202
- <svg class="animate-spin ${sizeClasses[size] || sizeClasses['medium']} text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24">
203
- <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" opacity="0.25"></circle>
204
- <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
205
- </svg>
196
+ <div class="spinner-simple spinner-primary ${sizeClasses[size] || sizeClasses['medium']}"></div>
206
197
  <span class="text-gray-700 dark:text-gray-300">${UIComponents.escapeHtml(text)}</span>
207
198
  `;
208
199
  return container;
@@ -227,9 +218,7 @@ class UIComponents {
227
218
  }
228
219
 
229
220
  html += `
230
- <div class="progress-bar bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
231
- <div class="progress-fill bg-blue-500 h-full transition-all" style="width: ${Math.min(100, Math.max(0, percentage))}%"></div>
232
- </div>
221
+ <progress class="progress progress-primary progress-xs w-full" value="${Math.min(100, Math.max(0, percentage))}" max="100"></progress>
233
222
  `;
234
223
 
235
224
  container.innerHTML = html;
@@ -291,7 +280,7 @@ class UIComponents {
291
280
  placeholder="${UIComponents.escapeHtml(placeholder)}"
292
281
  value="${UIComponents.escapeHtml(value)}"
293
282
  ${required ? 'required' : ''}
294
- class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
283
+ class="input input-block input-solid"
295
284
  />
296
285
  `;
297
286
 
@@ -323,7 +312,7 @@ class UIComponents {
323
312
  <select
324
313
  name="${name}"
325
314
  ${required ? 'required' : ''}
326
- class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
315
+ class="select select-block select-solid"
327
316
  >
328
317
  ${options.map(opt => `
329
318
  <option value="${opt.value}" ${opt.value === value ? 'selected' : ''}>
@@ -373,21 +362,21 @@ class UIComponents {
373
362
  } = config;
374
363
 
375
364
  const sizeClasses = {
376
- 'small': 'text-xs px-2 py-1',
377
- 'medium': 'text-sm px-3 py-1',
378
- 'large': 'text-base px-4 py-2'
365
+ 'small': 'badge-sm',
366
+ 'medium': 'badge-md',
367
+ 'large': 'badge-lg'
379
368
  };
380
369
 
381
370
  const variantClasses = {
382
- 'default': 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
383
- 'primary': 'bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-200',
384
- 'success': 'bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-200',
385
- 'warning': 'bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-200',
386
- 'error': 'bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200'
371
+ 'default': 'badge-flat',
372
+ 'primary': 'badge-flat-primary',
373
+ 'success': 'badge-flat-success',
374
+ 'warning': 'badge-flat-warning',
375
+ 'error': 'badge-flat-error'
387
376
  };
388
377
 
389
378
  const badge = document.createElement('span');
390
- badge.className = `badge rounded-full font-medium ${sizeClasses[size] || sizeClasses['medium']} ${variantClasses[variant] || variantClasses['default']}`;
379
+ badge.className = `badge ${sizeClasses[size] || sizeClasses['medium']} ${variantClasses[variant] || variantClasses['default']}`;
391
380
  badge.textContent = label;
392
381
  return badge;
393
382
  }