agentgui 1.0.751 → 1.0.753

package/static/app.js

@@ -749,4 +749,82 @@ function downloadScreenshot() {
   console.log('Download screenshot not yet implemented');
 }
 
+function showShortcutsOverlay() {
+  if (document.querySelector('.shortcuts-overlay')) return;
+  const overlay = document.createElement('div');
+  overlay.className = 'shortcuts-overlay';
+  overlay.innerHTML = `<div class="shortcuts-panel">
+    <h3>Keyboard Shortcuts</h3>
+    <table>
+      <tr><td><kbd>Ctrl</kbd>+<kbd>N</kbd></td><td>New conversation</td></tr>
+      <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Toggle sidebar</td></tr>
+      <tr><td><kbd>Ctrl</kbd>+<kbd>Enter</kbd></td><td>Send message</td></tr>
+      <tr><td><kbd>Escape</kbd></td><td>Cancel stream / blur input</td></tr>
+      <tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
+    </table>
+    <p style="margin:1rem 0 0;font-size:0.75rem;color:#9ca3af;">Press Escape to close</p>
+  </div>`;
+  overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+  document.body.appendChild(overlay);
+}
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
+    const tag = document.activeElement?.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+    e.preventDefault();
+    showShortcutsOverlay();
+  }
+  if (e.key === 'Escape' && document.querySelector('.shortcuts-overlay')) {
+    document.querySelector('.shortcuts-overlay').remove();
+  }
+});
+
+(function initSidebarSearch() {
+  const input = document.getElementById('sidebarSearchInput');
+  if (!input) return;
+  let debounceTimer;
+  input.addEventListener('input', () => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      const query = input.value.trim();
+      const list = document.querySelector('[data-conversation-list]');
+      if (!list) return;
+      const items = list.querySelectorAll('li[data-conv-id]');
+      if (!query) {
+        items.forEach(li => li.style.display = '');
+        return;
+      }
+      const lower = query.toLowerCase();
+      items.forEach(li => {
+        const text = li.textContent.toLowerCase();
+        li.style.display = text.includes(lower) ? '' : 'none';
+      });
+    }, 150);
+  });
+})();
+
+(function initErrorBoundary() {
+  let toastEl = null;
+  let hideTimer = null;
+  function showErrorToast(title, detail) {
+    if (toastEl) toastEl.remove();
+    toastEl = document.createElement('div');
+    toastEl.className = 'error-toast';
+    toastEl.innerHTML = `<div class="error-toast-title">${title}</div><div class="error-toast-detail">${detail}</div>`;
+    toastEl.addEventListener('click', () => { toastEl.remove(); toastEl = null; });
+    document.body.appendChild(toastEl);
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 8000);
+  }
+  window.addEventListener('error', (e) => {
+    if (e.filename) showErrorToast('JavaScript Error', `${e.message} at ${e.filename.split('/').pop()}:${e.lineno}`);
+  });
+  window.addEventListener('unhandledrejection', (e) => {
+    const msg = e.reason?.message || String(e.reason || 'Unknown');
+    showErrorToast('Unhandled Promise Rejection', msg);
+  });
+  window.showErrorToast = showErrorToast;
+})();
+
 window.addEventListener('load', initializeApp);

package/static/css/main.css

@@ -3054,4 +3054,108 @@
     html.dark .html-rendered-container {
       border-color: #262626;
     }
+
+    .sidebar-search-bar {
+      padding: 0.25rem 0.75rem 0.5rem;
+    }
+    .sidebar-search-input {
+      width: 100%;
+      padding: 0.375rem 0.5rem;
+      border: 1px solid #d1d5db;
+      border-radius: 0.375rem;
+      background: #f9fafb;
+      color: #111827;
+      font-size: 0.8125rem;
+      outline: none;
+      box-sizing: border-box;
+    }
+    .sidebar-search-input:focus {
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
+    }
+    html.dark .sidebar-search-input {
+      background: #1f2937;
+      border-color: #374151;
+      color: #e5e7eb;
+    }
+
+    .shortcuts-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    }
+    .shortcuts-panel {
+      background: white;
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      max-width: 400px;
+      width: 90%;
+      box-shadow: 0 25px 50px rgba(0,0,0,0.25);
+    }
+    html.dark .shortcuts-panel {
+      background: #1f2937;
+      color: #e5e7eb;
+    }
+    .shortcuts-panel h3 {
+      margin: 0 0 1rem;
+      font-size: 1.125rem;
+    }
+    .shortcuts-panel table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .shortcuts-panel td {
+      padding: 0.375rem 0;
+      font-size: 0.875rem;
+    }
+    .shortcuts-panel td:first-child {
+      font-weight: 600;
+      white-space: nowrap;
+      padding-right: 1rem;
+    }
+    .shortcuts-panel kbd {
+      background: #f3f4f6;
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+      padding: 0.125rem 0.375rem;
+      font-size: 0.75rem;
+      font-family: inherit;
+    }
+    html.dark .shortcuts-panel kbd {
+      background: #374151;
+      border-color: #4b5563;
+    }
+
+    .error-toast {
+      position: fixed;
+      bottom: 1rem;
+      right: 1rem;
+      background: #dc2626;
+      color: white;
+      padding: 0.75rem 1rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      max-width: 400px;
+      z-index: 9998;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+      cursor: pointer;
+      animation: slideInRight 0.2s ease-out;
+    }
+    .error-toast-title {
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+    .error-toast-detail {
+      opacity: 0.85;
+      font-size: 0.8125rem;
+      word-break: break-word;
+    }
+    @keyframes slideInRight {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
 

package/static/index.html

@@ -21,7 +21,7 @@
     })();
   </script>
 
-    <link rel="stylesheet" href="/gm/css/main.css">
+    <link rel="stylesheet" href="/gm/css/main.css">
   <link rel="stylesheet" href="/gm/css/tools-popup.css">
 </head>
 <body>
@@ -39,6 +39,9 @@
           <button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation">+ New</button>
         </div>
       </div>
+      <div class="sidebar-search-bar" id="sidebarSearchBar">
+        <input type="text" class="sidebar-search-input" id="sidebarSearchInput" placeholder="Search conversations..." autocomplete="off" spellcheck="false">
+      </div>
       <div class="clone-input-bar" id="cloneInputBar" style="display:none;">
         <input type="text" class="clone-input" id="cloneRepoInput" placeholder="org/repo" autocomplete="off" spellcheck="false">
         <button class="clone-go-btn" id="cloneGoBtn" title="Clone">Go</button>