agentgui 1.0.241 → 1.0.242

package/package.json

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

package/static/index.html

@@ -1883,33 +1883,15 @@
       padding: 0.3rem 0.625rem;
       font-size: 0.75rem;
       line-height: 1.3;
-      cursor: pointer;
+      cursor: default;
       user-select: none;
-      list-style: none;
     }
     .tool-result-status::-webkit-details-marker { display: none; }
     .tool-result-status::marker { display: none; content: ''; }
-    .tool-result-status::before {
-      content: '\25b6';
-      font-size: 0.5rem;
-      margin-right: 0.125rem;
-      display: inline-block;
-      transition: transform 0.15s;
-      color: #16a34a;
-      flex-shrink: 0;
-    }
-    html.dark .tool-result-status::before { color: #4ade80; }
-    .tool-result-inline[open] > .tool-result-status::before { transform: rotate(90deg); }
-    .tool-result-status:hover { background: #bbf7d0; }
-    html.dark .tool-result-status:hover { background: #14532d; }
     .tool-result-inline > .folded-tool-body { border-top: 1px solid #bbf7d0; }
     html.dark .tool-result-inline > .folded-tool-body { border-top-color: #166534; }
     .tool-result-error { background: #fef2f2; border-top-color: #fecaca; }
     html.dark .tool-result-error { background: #1f0a0a; border-top-color: #991b1b; }
-    .tool-result-error > .tool-result-status:hover { background: #fecaca; }
-    html.dark .tool-result-error > .tool-result-status:hover { background: #2d0f0f; }
-    .tool-result-error .tool-result-status::before { color: #dc2626; }
-    html.dark .tool-result-error .tool-result-status::before { color: #f87171; }
     .tool-result-error .folded-tool-icon { color: #dc2626; }
     html.dark .tool-result-error .folded-tool-icon { color: #f87171; }
     .tool-result-error .folded-tool-name { color: #991b1b; }
@@ -2390,6 +2372,174 @@
       animation: pulse 1s ease-in-out infinite;
       background-color: var(--color-warning) !important;
     }
+
+    /* ===== IN-UI DIALOGS ===== */
+    .dialog-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 10000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .dialog-overlay.visible { opacity: 1; }
+    .dialog-backdrop {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+    }
+    .dialog-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10001;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .dialog-container.visible { opacity: 1; }
+    .dialog-box {
+      background: var(--color-bg-primary);
+      border-radius: 0.75rem;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 90vw;
+      width: 400px;
+      overflow: hidden;
+      transform: scale(0.95) translateY(-10px);
+      transition: transform 0.2s ease;
+    }
+    .dialog-container.visible .dialog-box {
+      transform: scale(1) translateY(0);
+    }
+    .dialog-box-progress { width: 450px; }
+    .dialog-header {
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--color-border);
+    }
+    .dialog-title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+    }
+    .dialog-body {
+      padding: 1.25rem;
+    }
+    .dialog-message {
+      margin: 0;
+      font-size: 0.9rem;
+      line-height: 1.5;
+      color: var(--color-text-primary);
+    }
+    .dialog-label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-size: 0.9rem;
+      color: var(--color-text-primary);
+    }
+    .dialog-input {
+      width: 100%;
+      padding: 0.625rem 0.875rem;
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      font-size: 0.9rem;
+      outline: none;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .dialog-input:focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    }
+    .dialog-footer {
+      padding: 0.75rem 1.25rem;
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-bg-secondary);
+    }
+    .dialog-btn {
+      padding: 0.5rem 1.25rem;
+      border: none;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .dialog-btn-primary {
+      background: var(--color-primary);
+      color: white;
+    }
+    .dialog-btn-primary:hover { background: var(--color-primary-dark); }
+    .dialog-btn-secondary {
+      background: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      border: 1px solid var(--color-border);
+    }
+    .dialog-btn-secondary:hover { background: var(--color-bg-secondary); }
+    .dialog-btn-danger { background: var(--color-error); }
+    .dialog-btn-danger:hover { background: #dc2626; }
+    .dialog-progress-bar {
+      height: 8px;
+      background: var(--color-bg-secondary);
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 1rem 0 0.5rem;
+    }
+    .dialog-progress-fill {
+      height: 100%;
+      background: var(--color-primary);
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+    .dialog-progress-percent {
+      margin: 0;
+      text-align: center;
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+    }
+
+    /* ===== TOAST NOTIFICATIONS ===== */
+    .toast-notification {
+      position: fixed;
+      bottom: 100px;
+      left: 50%;
+      transform: translateX(-50%) translateY(20px);
+      padding: 0.75rem 1.5rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 20000;
+      opacity: 0;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .toast-notification.visible {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    .toast-info { background: var(--color-primary); color: white; }
+    .toast-success { background: var(--color-success); color: white; }
+    .toast-error { background: var(--color-error); color: white; }
+    .toast-warning { background: var(--color-warning); color: white; }
   </style>
 </head>
 <body>
@@ -2597,6 +2747,7 @@
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/event-filter.js"></script>
   <script defer src="/gm/js/syntax-highlighter.js"></script>
+  <script defer src="/gm/js/dialogs.js"></script>
   <script defer src="/gm/js/ui-components.js"></script>
   <script defer src="/gm/js/conversations.js"></script>
   <script defer src="/gm/js/client.js"></script>

package/static/js/client.js

@@ -282,10 +282,12 @@ class AgentGUIClient {
 
     try {
       const position = localStorage.getItem(`scroll_${conversationId}`);
+      const scrollContainer = document.getElementById(this.config.scrollContainerId);
+      if (!scrollContainer) return;
+      
       if (position !== null) {
         const scrollTop = parseInt(position, 10);
-        const scrollContainer = document.getElementById(this.config.scrollContainerId);
-        if (scrollContainer && !isNaN(scrollTop)) {
+        if (!isNaN(scrollTop)) {
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
               const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
@@ -293,6 +295,12 @@ class AgentGUIClient {
             });
           });
         }
+      } else {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scrollContainer.scrollTop = 0;
+          });
+        });
       }
     } catch (e) {
       console.warn('Failed to restore scroll position:', e);
@@ -368,7 +376,7 @@ class AgentGUIClient {
     if (this.ui.injectButton) {
       this.ui.injectButton.addEventListener('click', async () => {
         if (!this.state.currentConversation) return;
-        const instructions = prompt('Enter instructions to inject into the running agent:');
+        const instructions = await window.UIDialog.prompt('Enter instructions to inject into the running agent:', '', 'Inject Instructions');
         if (!instructions) return;
         try {
           const resp = await fetch(`${window.__BASE_URL}/api/conversations/${this.state.currentConversation.id}/inject`, {
@@ -981,17 +989,17 @@ class AgentGUIClient {
         btn.addEventListener('click', async (e) => {
           const index = parseInt(e.target.dataset.index);
           const msgId = queue[index].messageId;
-          if (confirm('Delete this queued message?')) {
+          if (await window.UIDialog.confirm('Delete this queued message?', 'Delete Message')) {
             await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${msgId}`, { method: 'DELETE' });
           }
         });
       });
 
       queueEl.querySelectorAll('.queue-edit-btn').forEach(btn => {
-        btn.addEventListener('click', (e) => {
+        btn.addEventListener('click', async (e) => {
           const index = parseInt(e.target.dataset.index);
           const q = queue[index];
-          const newContent = prompt('Edit message:', q.content);
+          const newContent = await window.UIDialog.prompt('Edit message:', q.content, 'Edit Queued Message');
           if (newContent !== null && newContent !== q.content) {
             fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${q.messageId}`, {
               method: 'PATCH',
@@ -1176,7 +1184,8 @@ class AgentGUIClient {
             const dName = hasRenderer ? StreamingRenderer.getToolDisplayName(tn) : tn;
             const tTitle = hasRenderer && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
             const iconHtml = hasRenderer && this.renderer ? `<span class="folded-tool-icon">${this.renderer.getToolIcon(tn)}</span>` : '';
-            html += `<details class="block-tool-use folded-tool"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}`;
+            const colorIdx = hasRenderer && this.renderer ? this.renderer._getBlockColorIndex('tool_use') : 1;
+            html += `<details class="block-tool-use folded-tool" open style="border-left:3px solid var(--block-color-${colorIdx})"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}`;
             pendingToolUseClose = true;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
@@ -1185,7 +1194,8 @@ class AgentGUIClient {
             const resultIcon = block.is_error
               ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
               : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-            const resultHtml = `<details class="tool-result-inline${block.is_error ? ' tool-result-error' : ''}"><summary class="tool-result-status"><span class="folded-tool-icon">${resultIcon}</span><span class="folded-tool-name">${block.is_error ? 'Error' : 'Success'}</span><span class="folded-tool-desc">${this.escapeHtml(resultPreview)}</span></summary><div class="folded-tool-body">${smartHtml}</div></details>`;
+            const colorIdx = hasRenderer && this.renderer ? this.renderer._getBlockColorIndex('tool_result') : 2;
+            const resultHtml = `<div class="tool-result-inline${block.is_error ? ' tool-result-error' : ''}" style="border-left:3px solid var(--block-color-${colorIdx})"><div class="tool-result-status"><span class="folded-tool-icon">${resultIcon}</span><span class="folded-tool-name">${block.is_error ? 'Error' : 'Success'}</span><span class="folded-tool-desc">${this.escapeHtml(resultPreview)}</span></div><div class="folded-tool-body">${smartHtml}</div></div>`;
             if (pendingToolUseClose) {
               html += resultHtml + '</details>';
               pendingToolUseClose = false;
@@ -1996,6 +2006,13 @@ class AgentGUIClient {
       this._modelDownloadInProgress = false;
       console.error('[Models] Download error:', progress.error);
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+      if (window._voiceProgressDialog) {
+        window._voiceProgressDialog.close();
+        window._voiceProgressDialog = null;
+      }
+      if (window.UIDialog) {
+        window.UIDialog.alert('Failed to download voice models: ' + progress.error, 'Download Error');
+      }
       return;
     }
     
@@ -2004,12 +2021,30 @@ class AgentGUIClient {
       console.log('[Models] Download complete');
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
       this._updateVoiceTabState();
+      if (window._voiceProgressDialog) {
+        window._voiceProgressDialog.update(100, 'Voice models ready!');
+        setTimeout(function() {
+          if (window._voiceProgressDialog) {
+            window._voiceProgressDialog.close();
+            window._voiceProgressDialog = null;
+          }
+        }, 500);
+      }
       return;
     }
     
     if (progress.started || progress.downloading) {
       this._modelDownloadInProgress = true;
       this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+      
+      if (window._voiceProgressDialog && progress.totalBytes > 0) {
+        var pct = Math.round((progress.totalDownloaded / progress.totalBytes) * 100);
+        var mb = Math.round(progress.totalBytes / 1024 / 1024);
+        var downloaded = Math.round((progress.totalDownloaded || 0) / 1024 / 1024);
+        window._voiceProgressDialog.update(pct, 'Downloading ' + downloaded + 'MB / ' + mb + 'MB');
+      } else if (window._voiceProgressDialog && progress.file) {
+        window._voiceProgressDialog.update(0, 'Loading ' + progress.file + '...');
+      }
     }
   }
 
@@ -2018,8 +2053,7 @@ class AgentGUIClient {
     if (voiceBtn) {
       var isReady = this._modelDownloadProgress?.done === true || 
                     this._modelDownloadProgress?.complete === true;
-      voiceBtn.disabled = !isReady;
-      voiceBtn.title = isReady ? 'Voice' : 'Downloading voice models...';
+      voiceBtn.title = isReady ? 'Voice' : 'Voice (click to download models)';
     }
   }
 
@@ -2438,8 +2472,9 @@ class AgentGUIClient {
    */
   showError(message) {
     console.error(message);
-    // Could display in a toast or alert
-    alert(message);
+    if (window.UIDialog) {
+      window.UIDialog.alert(message, 'Error');
+    }
   }
 
   /**

package/static/js/streaming-renderer.js

@@ -399,23 +399,25 @@ class StreamingRenderer {
     div.className = 'block-text';
     if (isHtml) div.classList.add('html-content');
     div.innerHTML = html;
-    const colorIndex = this._getUniqueColorIndex(text);
+    const colorIndex = this._getBlockColorIndex('text');
     div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
     return div;
   }
 
-  _getUniqueColorIndex(text) {
-    if (!this._colorIndexMap) {
-      this._colorIndexMap = new Map();
-      this._colorCounter = 0;
-    }
-    let index = this._colorIndexMap.get(text);
-    if (index === undefined) {
-      index = this._colorCounter % 10;
-      this._colorIndexMap.set(text, index);
-      this._colorCounter++;
-    }
-    return index;
+  _getBlockColorIndex(blockType) {
+    const typeColors = {
+      'text': 0,
+      'tool_use': 1,
+      'tool_result': 2,
+      'code': 3,
+      'thinking': 4,
+      'bash': 5,
+      'system': 6,
+      'result': 7,
+      'error': 8,
+      'image': 9
+    };
+    return typeColors[blockType] !== undefined ? typeColors[blockType] : 0;
   }
 
   containsHtmlTags(text) {
@@ -733,7 +735,10 @@ class StreamingRenderer {
 
     const details = document.createElement('details');
     details.className = 'block-tool-use folded-tool';
+    details.setAttribute('open', '');
     if (block.id) details.dataset.toolUseId = block.id;
+    const colorIndex = this._getBlockColorIndex('tool_use');
+    details.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
     const summary = document.createElement('summary');
     summary.className = 'folded-tool-bar';
     const displayName = this.getToolUseDisplayName(toolName);
@@ -1199,33 +1204,34 @@ class StreamingRenderer {
     const isError = block.is_error || false;
     const content = block.content || '';
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
-    const preview = contentStr.length > 80 ? contentStr.substring(0, 77).replace(/\n/g, ' ') + '...' : contentStr.replace(/\n/g, ' ');
 
-    const details = document.createElement('details');
-    details.className = 'tool-result-inline' + (isError ? ' tool-result-error' : '');
-    details.dataset.eventType = 'tool_result';
-    if (block.tool_use_id) details.dataset.toolUseId = block.tool_use_id;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tool-result-inline' + (isError ? ' tool-result-error' : '');
+    wrapper.dataset.eventType = 'tool_result';
+    if (block.tool_use_id) wrapper.dataset.toolUseId = block.tool_use_id;
+    const colorIndex = this._getBlockColorIndex('tool_result');
+    wrapper.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
+    const header = document.createElement('div');
+    header.className = 'tool-result-status';
     const iconSvg = isError
       ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
       : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-
-    const summary = document.createElement('summary');
-    summary.className = 'tool-result-status';
-    summary.innerHTML = `
+    const preview = contentStr.length > 80 ? contentStr.substring(0, 77).replace(/\n/g, ' ') + '...' : contentStr.replace(/\n/g, ' ');
+    header.innerHTML = `
       <span class="folded-tool-icon">${iconSvg}</span>
       <span class="folded-tool-name">${isError ? 'Error' : 'Success'}</span>
       <span class="folded-tool-desc">${this.escapeHtml(preview)}</span>
     `;
-    details.appendChild(summary);
+    wrapper.appendChild(header);
 
     const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this));
     const body = document.createElement('div');
     body.className = 'folded-tool-body';
     body.innerHTML = renderedContent;
-    details.appendChild(body);
+    wrapper.appendChild(body);
 
-    return details;
+    return wrapper;
   }
 
   /**