agentgui 1.0.611 → 1.0.613

package/package.json

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

package/server.js

@@ -39,7 +39,13 @@ process.on('unhandledRejection', (reason, promise) => {
   if (reason instanceof Error) console.error(reason.stack);
 });
 
-process.on('SIGINT', () => { console.log('[SIGNAL] SIGINT received (ignored - uncrashable)'); });
+process.on('SIGINT', () => {
+  console.log('[SIGNAL] SIGINT received - graceful shutdown');
+  try { pm2Manager.disconnect(); } catch (_) {}
+  stopACPTools().catch(() => {}).finally(() => {
+    try { wss.close(() => server.close(() => process.exit(0))); } catch (_) { process.exit(0); }
+  });
+});
 process.on('SIGHUP', () => { console.log('[SIGNAL] SIGHUP received (ignored - uncrashable)'); });
 process.on('beforeExit', (code) => { console.log('[PROCESS] beforeExit with code:', code); });
 process.on('exit', (code) => { console.log('[PROCESS] exit with code:', code); });
@@ -4493,18 +4499,8 @@ if (watch) {
 process.on('SIGTERM', () => {
   console.log('[SIGNAL] SIGTERM received - graceful shutdown');
   try { pm2Manager.disconnect(); } catch (_) {}
-  Promise.resolve().then(() => {
-    stopACPTools().then(() => {
-      wss.close(() => server.close(() => process.exit(0)));
-    }).catch(() => {
-      wss.close(() => server.close(() => process.exit(0)));
-    });
-  }).catch(() => {
-    stopACPTools().then(() => {
-      wss.close(() => server.close(() => process.exit(0)));
-    }).catch(() => {
-      wss.close(() => server.close(() => process.exit(0)));
-    });
+  stopACPTools().catch(() => {}).finally(() => {
+    try { wss.close(() => server.close(() => process.exit(0))); } catch (_) { process.exit(0); }
   });
 });
 

package/static/index.html

@@ -43,13 +43,13 @@
     }
 
     html.dark {
-      --color-bg-primary: #111827;
-      --color-bg-secondary: #1f2937;
-      --color-text-primary: #f9fafb;
-      --color-text-secondary: #d1d5db;
-      --color-border: #374151;
-      --color-primary: #6b7280;
-      --color-primary-dark: #4b5563;
+      --color-bg-primary: #1a1a1a;
+      --color-bg-secondary: #242424;
+      --color-text-primary: #e5e5e5;
+      --color-text-secondary: #a3a3a3;
+      --color-border: #333333;
+      --color-primary: #737373;
+      --color-primary-dark: #525252;
     }
 
     html, body {
@@ -1007,7 +1007,7 @@
       overflow-x: auto;
     }
 
-    html.dark .html-content { background: #1f2937; }
+    html.dark .html-content { background: #262626; }
 
     .html-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
     .html-content th, .html-content td { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
@@ -1777,7 +1777,7 @@
       background: #f3f4f6;
     }
     html.dark .folded-tool {
-      background: #1f2937;
+      background: #262626;
     }
     .folded-tool-bar {
       display: flex;
@@ -1793,7 +1793,7 @@
       transition: background 0.15s;
     }
     html.dark .folded-tool-bar {
-      background: #374151;
+      background: #404040;
     }
     .folded-tool-bar::-webkit-details-marker { display: none; }
     .folded-tool-bar::marker { display: none; content: ''; }
@@ -1806,10 +1806,10 @@
       color: #6b7280;
       flex-shrink: 0;
     }
-    html.dark .folded-tool-bar::before { color: #9ca3af; }
+    html.dark .folded-tool-bar::before { color: #a3a3a3; }
     .folded-tool[open] > .folded-tool-bar::before { transform: rotate(90deg); }
     .folded-tool-bar:hover { background: #d1d5db; }
-    html.dark .folded-tool-bar:hover { background: #4b5563; }
+    html.dark .folded-tool-bar:hover { background: #525252; }
     .folded-tool-icon {
       display: flex;
       align-items: center;
@@ -1818,7 +1818,7 @@
       height: 1rem;
       flex-shrink: 0;
     }
-    html.dark .folded-tool-icon { color: #9ca3af; }
+    html.dark .folded-tool-icon { color: #a3a3a3; }
     .folded-tool-icon svg { width: 1rem; height: 1rem; }
     .folded-tool-name {
       font-weight: 600;
@@ -1827,7 +1827,7 @@
       font-size: 0.8rem;
       flex-shrink: 0;
     }
-    html.dark .folded-tool-name { color: #d1d5db; }
+    html.dark .folded-tool-name { color: #d4d4d4; }
     .folded-tool-desc {
       color: #6b7280;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
@@ -1839,13 +1839,13 @@
       min-width: 0;
       opacity: 0.8;
     }
-    html.dark .folded-tool-desc { color: #9ca3af; }
+    html.dark .folded-tool-desc { color: #a3a3a3; }
     .folded-tool-body {
       padding: 0.5rem 0.75rem;
       font-size: 0.75rem;
       border-top: 1px solid #d1d5db;
     }
-    html.dark .folded-tool-body { border-top-color: #4b5563; }
+    html.dark .folded-tool-body { border-top-color: #525252; }
     .folded-tool-body .tool-input-pre {
       margin: 0;
       padding: 0.375rem 0.5rem;
@@ -2126,9 +2126,9 @@
     .block-type-tool_result .folded-tool-icon { color: #16a34a; }
     html.dark .block-type-tool_result .folded-tool-icon { color: #4ade80; }
     .block-type-tool_result .folded-tool-name { color: #374151; }
-    html.dark .block-type-tool_result .folded-tool-name { color: #d1d5db; }
+    html.dark .block-type-tool_result .folded-tool-name { color: #d4d4d4; }
     .block-type-tool_result > .folded-tool-body { border-top-color: #d1d5db; }
-    html.dark .block-type-tool_result > .folded-tool-body { border-top-color: #4b5563; }
+    html.dark .block-type-tool_result > .folded-tool-body { border-top-color: #525252; }
     .block-type-tool_result.tool-result-error { }
     html.dark .block-type-tool_result.tool-result-error { }
     .block-type-tool_result.tool-result-error .tool-result-status { }
@@ -2136,7 +2136,7 @@
     .block-type-tool_result.tool-result-error .folded-tool-icon { color: #dc2626; }
     html.dark .block-type-tool_result.tool-result-error .folded-tool-icon { color: #f87171; }
     .block-type-tool_result.tool-result-error .folded-tool-name { color: #374151; }
-    html.dark .block-type-tool_result.tool-result-error .folded-tool-name { color: #d1d5db; }
+    html.dark .block-type-tool_result.tool-result-error .folded-tool-name { color: #d4d4d4; }
 
 
 
@@ -2230,12 +2230,12 @@
       padding: 0.4rem 0.75rem;
     }
     html.dark .tool-result-success .tool-result-status {
-      background: #374151;
+      background: #404040;
     }
     .tool-result-success .folded-tool-icon { color: #16a34a; }
     html.dark .tool-result-success .folded-tool-icon { color: #4ade80; }
     .tool-result-success .folded-tool-name { color: #374151; font-weight: 600; }
-    html.dark .tool-result-success .folded-tool-name { color: #d1d5db; }
+    html.dark .tool-result-success .folded-tool-name { color: #d4d4d4; }
 
     /* --- Tool_use parent: has-success / has-error indicators (icon/arrow only, preserves tool colors) --- */
     .folded-tool.has-success > .folded-tool-bar::before { color: #16a34a; }
@@ -3007,31 +3007,31 @@
     .toast-success { background: var(--color-success); color: white; }
     .toast-error { background: var(--color-error); color: white; }
     .toast-warning { background: var(--color-warning); color: white; }
-  
-    .inline-code {
-      background: #f3f4f6;
-      padding: 0.125rem 0.375rem;
-      border-radius: 0.25rem;
-      font-size: 0.875rem;
-      font-family: ui-monospace, monospace;
-      color: #dc2626;
-    }
-
-    html.dark .inline-code {
-      background: #1f2937;
-      color: #f87171;
-    }
-
-    .html-rendered-container {
-      border-radius: 0.5rem;
-      overflow: hidden;
-      border: 1px solid #e5e7eb;
-    }
-
-    html.dark .html-rendered-container {
-      border-color: #1f2937;
-    }
-
+  
+    .inline-code {
+      background: #f3f4f6;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.875rem;
+      font-family: ui-monospace, monospace;
+      color: #dc2626;
+    }
+
+    html.dark .inline-code {
+      background: #262626;
+      color: #f87171;
+    }
+
+    .html-rendered-container {
+      border-radius: 0.5rem;
+      overflow: hidden;
+      border: 1px solid #e5e7eb;
+    }
+
+    html.dark .html-rendered-container {
+      border-color: #262626;
+    }
+
     </style>
   <link rel="stylesheet" href="/gm/css/tools-popup.css">
 </head>

package/static/js/streaming-renderer.js

@@ -453,17 +453,17 @@ class StreamingRenderer {
     let html = this.escapeHtml(text);
 
     // Render markdown bold: **text** -> <strong>text</strong>
-    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong class="font-semibold text-gray-900 dark:text-gray-100">$1</strong>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong class="font-semibold text-base-content">$1</strong>');
 
     // Render markdown italic: *text* or _text_
-    html = html.replace(/\*([^*]+)\*/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
-    html = html.replace(/_([^_]+)_/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
+    html = html.replace(/\*([^*]+)\*/g, '<em class="italic text-base-content/70">$1</em>');
+    html = html.replace(/_([^_]+)_/g, '<em class="italic text-base-content/70">$1</em>');
 
     // Render inline code: `code`
     html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
 
     // Render markdown links: [text](url)
-    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank">$1</a>');
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="link link-primary" target="_blank">$1</a>');
 
     // Convert line breaks
     html = html.replace(/\n/g, '<br>');
@@ -1565,20 +1565,20 @@ class StreamingRenderer {
    */
   renderStreamingStart(event) {
     const div = document.createElement('div');
-    div.className = 'event-streaming-start card mb-3 p-4 bg-blue-50 dark:bg-blue-900';
+    div.className = 'event-streaming-start card mb-3 p-4 alert alert-info';
     div.dataset.eventId = event.id || event.sessionId || '';
     div.dataset.eventType = 'streaming_start';
 
     const time = new Date(event.timestamp).toLocaleTimeString();
     div.innerHTML = `
       <div class="flex items-center gap-2">
-        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg class="w-5 h-5 text-info animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" opacity="0.25"></circle>
           <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
         </svg>
         <div class="flex-1">
-          <h4 class="font-semibold text-blue-900 dark:text-blue-200">Streaming Started</h4>
-          <p class="text-sm text-blue-700 dark:text-blue-300">${time}</p>
+          <h4 class="font-semibold text-info-content">Streaming Started</h4>
+          <p class="text-sm text-info-content/70">${time}</p>
         </div>
       </div>
     `;
@@ -1604,8 +1604,8 @@ class StreamingRenderer {
     div.innerHTML = `
       <div class="flex items-center gap-2 text-sm">
         <span class="text-secondary">${percentage}%</span>
-        <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
-          <div class="bg-blue-500 h-full transition-all" style="width: ${percentage}%"></div>
+        <div class="progress progress-primary flex-1">
+          <div class="progress-bar" style="width: ${percentage}%"></div>
         </div>
       </div>
     `;
@@ -1617,7 +1617,7 @@ class StreamingRenderer {
    */
   renderStreamingComplete(event) {
     const div = document.createElement('div');
-    div.className = 'event-streaming-complete card mb-3 p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 rounded-lg';
+    div.className = 'event-streaming-complete card mb-3 p-4 alert alert-success rounded-lg';
     div.dataset.eventId = event.id || event.sessionId || '';
     div.dataset.eventType = 'streaming_complete';
 
@@ -1627,19 +1627,19 @@ class StreamingRenderer {
     div.innerHTML = `
       <div class="flex items-start gap-3">
         <div class="flex-shrink-0 mt-0.5">
-          <svg class="w-6 h-6 text-green-600 dark:text-green-400 animate-bounce" fill="currentColor" viewBox="0 0 20 20">
+          <svg class="w-6 h-6 text-success animate-bounce" fill="currentColor" viewBox="0 0 20 20">
             <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"></path>
           </svg>
         </div>
         <div class="flex-1">
-          <h4 class="font-bold text-lg text-green-900 dark:text-green-200">✨ Execution Complete</h4>
+          <h4 class="font-bold text-lg text-success-content">✨ Execution Complete</h4>
           <div class="mt-2 grid grid-cols-2 gap-3 text-sm">
             <div>
-              <span class="text-green-700 dark:text-green-400 font-semibold">${eventCount}</span>
-              <span class="text-green-600 dark:text-green-500">events processed</span>
+              <span class="text-success font-semibold">${eventCount}</span>
+              <span class="text-success/70">events processed</span>
             </div>
             <div class="text-right">
-              <span class="text-green-600 dark:text-green-500">${time}</span>
+              <span class="text-success/70">${time}</span>
             </div>
           </div>
         </div>
@@ -1764,7 +1764,7 @@ class StreamingRenderer {
 
     div.innerHTML = `
       <div class="flex items-center gap-3 mb-2">
-        <svg class="w-4 h-4 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20">
+        <svg class="w-4 h-4 text-warning" fill="currentColor" viewBox="0 0 20 20">
           <path fill-rule="evenodd" d="M9.243 3.03a1 1 0 01.727 1.155L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-.5 2H17a1 1 0 110 2h-3.03l-.56 2.243a1 1 0 11-1.94-.486L12.47 14H9.53l-.56 2.243a1 1 0 11-1.94-.486L7.47 14H4a1 1 0 110-2h3.03l.5-2H4a1 1 0 110-2h2.97l.56-2.243a1 1 0 011.155-.727zM9.03 8l.5 2h2.94l-.5-2H9.03z" clip-rule="evenodd"></path>
         </svg>
         <div class="flex-1">
@@ -1773,9 +1773,9 @@ class StreamingRenderer {
         </div>
       </div>
       <div class="flex gap-4 text-xs">
-        ${changes.added ? `<span class="text-green-600 dark:text-green-400">+${changes.added}</span>` : ''}
-        ${changes.modified ? `<span class="text-blue-600 dark:text-blue-400">~${changes.modified}</span>` : ''}
-        ${changes.deleted ? `<span class="text-red-600 dark:text-red-400">-${changes.deleted}</span>` : ''}
+        ${changes.added ? `<span class="text-success">+${changes.added}</span>` : ''}
+        ${changes.modified ? `<span class="text-info">~${changes.modified}</span>` : ''}
+        ${changes.deleted ? `<span class="text-error">-${changes.deleted}</span>` : ''}
         ${total === 0 ? '<span class="text-secondary">no changes</span>' : ''}
       </div>
     `;
@@ -1897,16 +1897,16 @@ class StreamingRenderer {
       if (part.type === 'html') {
         html += `<div class="html-content mb-3">${part.content}</div>`;
       } else if (part.type === 'text') {
-        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>`;
+        html += `<div class="card card-body mb-3 leading-relaxed text-sm">${this.parseAndRenderMarkdown(part.content)}</div>`;
       } else if (part.type === 'code') {
         if (part.language.toLowerCase() === 'html') {
           html += `<div class="html-rendered-container mb-3">
             <div class="html-rendered-label">Rendered HTML</div>
-            <div class="html-content bg-white dark:bg-gray-800 p-4 overflow-x-auto">${part.code}</div>
+            <div class="html-content bg-base-100 p-4 overflow-x-auto">${part.code}</div>
           </div>`;
         } else {
           const partLineCount = part.code.split('\n').length;
-          html += `<div class="mb-3 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
+          html += `<div class="card mb-3 rounded-lg overflow-hidden">
             <details class="collapsible-code">
               <summary class="collapsible-code-summary">
                 <span>${this.escapeHtml(part.language)} - ${partLineCount} line${partLineCount !== 1 ? 's' : ''}</span>
@@ -1916,7 +1916,7 @@ class StreamingRenderer {
                   </svg>
                 </button>
               </summary>
-              <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
+              <pre class="bg-base-300 text-base-content p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
             </details>
           </div>`;
         }
@@ -1957,7 +1957,7 @@ class StreamingRenderer {
     // Render HTML code blocks as actual HTML elements
     if (language === 'html') {
       div.innerHTML = `
-        <div class="html-rendered-container alert-info text-xs mb-2 text-blue-700 dark:text-blue-300">
+        <div class="html-rendered-container alert alert-info text-xs mb-2">
           Rendered HTML
         </div>
         <div class="html-content">
@@ -1969,7 +1969,7 @@ class StreamingRenderer {
       div.innerHTML = `
         <details class="collapsible-code">
           <summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${codeLineCount} line${codeLineCount !== 1 ? 's' : ''}</summary>
-          <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
+          <pre class="bg-base-300 text-base-content p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
         </details>
       `;
     }
@@ -1981,15 +1981,15 @@ class StreamingRenderer {
    */
   renderThinking(event) {
     const div = document.createElement('div');
-    div.className = 'event-thinking mb-3 p-4 bg-purple-50 dark:bg-purple-900 rounded';
+    div.className = 'event-thinking mb-3 p-4 alert rounded';
     div.dataset.eventId = event.id || '';
     div.dataset.eventType = 'thinking_block';
 
     const text = event.thinking || event.content || '';
     div.innerHTML = `
       <details>
-        <summary class="cursor-pointer font-semibold text-purple-900 dark:text-purple-200">Thinking</summary>
-        <p class="mt-3 text-sm text-purple-800 dark:text-purple-300 whitespace-pre-wrap">${this.escapeHtml(text)}</p>
+        <summary class="cursor-pointer font-semibold text-base-content">Thinking</summary>
+        <p class="mt-3 text-sm text-base-content/80 whitespace-pre-wrap">${this.escapeHtml(text)}</p>
       </details>
     `;
     return div;
@@ -2024,7 +2024,7 @@ class StreamingRenderer {
     }
 
     const div = document.createElement('div');
-    div.className = 'event-generic mb-3 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm';
+    div.className = 'event-generic mb-3 p-3 bg-base-200 rounded text-sm';
     div.dataset.eventId = event.id || '';
     div.dataset.eventType = event.type;
 

package/static/js/ui-components.js

@@ -194,7 +194,7 @@ class UIComponents {
     container.className = 'flex items-center gap-3 justify-center p-4';
     container.innerHTML = `
       <div class="spinner-simple spinner-primary ${sizeClasses[size] || sizeClasses['medium']}"></div>
-      <span class="text-gray-700 dark:text-gray-300">${UIComponents.escapeHtml(text)}</span>
+      <span class="text-base-content">${UIComponents.escapeHtml(text)}</span>
     `;
     return container;
   }
@@ -240,7 +240,7 @@ class UIComponents {
 
     container.innerHTML = `
       <details ${isOpen ? 'open' : ''}>
-        <summary class="cursor-pointer font-semibold hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1 rounded transition-colors">
+        <summary class="cursor-pointer font-semibold hover:bg-base-200 px-2 py-1 rounded transition-colors">
           ${UIComponents.escapeHtml(title)}
         </summary>
         <div class="content mt-2 ml-4">

package/static/templates/agent-metadata-panel.html

@@ -1,8 +1,8 @@
 <!-- Agent Metadata Panel with Status Badge -->
 <div class="agent-metadata-card card" role="region" aria-label="Agent Status and Metadata">
-  <div class="card-header flex items-center justify-between gap-3">
+  <div class="card-header gap-3">
     <div class="flex items-center gap-3">
-      <div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg" aria-hidden="true">
+      <div class="avatar avatar-ring avatar-square bg-primary text-white" aria-hidden="true">
         {{ agentIcon }}
       </div>
       <div>

package/static/templates/code-suggestion-panel.html

@@ -1,6 +1,6 @@
 <!-- Code Suggestion Panel with Before/After -->
 <div class="code-suggestion-panel card" role="region" aria-label="Code suggestion">
-  <div class="card-header flex items-start justify-between mb-3 pb-3 border-b">
+  <div class="card-header mb-3 pb-3 border-b">
     <div class="flex-1">
       <h4 class="font-semibold">{{ suggestionTitle }}</h4>
       <p class="text-xs text-secondary mt-1">In {{ fileName }} at line {{ lineNumber }}</p>

package/static/templates/error-recovery-options.html

@@ -40,7 +40,7 @@
   </div>
 
   <!-- Recovery Info -->
-  <div class="recovery-info text-xs text-secondary mt-3 pt-3 border-t space-y-1">
+  <div class="recovery-info text-xs text-secondary mt-3 pt-3 divider-y space-y-1">
     <p><strong>Error ID:</strong> <code class="font-mono">{{ errorId }}</code></p>
     <p><strong>Last Checkpoint:</strong> {{ checkpointTime }}</p>
     {{ if suggestedAction }}

package/static/templates/error-stack-trace.html

@@ -1,7 +1,7 @@
 <!-- Error Stack Trace Display (Collapsible) -->
 <div class="error-stack-trace">
   <details class="stack-trace-accordion card">
-    <summary class="cursor-pointer font-semibold py-3 px-4 border-b flex items-center gap-2 hover:bg-hover-bg">
+    <summary class="cursor-pointer font-semibold py-3 px-4 border-b flex items-center gap-2 hover:bg-base-200">
       <svg class="w-4 h-4 chevron" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
       </svg>

package/static/templates/error-summary.html

@@ -1,6 +1,6 @@
 <!-- Error Summary Card -->
 <div class="error-summary card" role="region" aria-label="Error summary">
-  <div class="card-header flex items-start justify-between mb-3 pb-3 border-b">
+  <div class="card-header mb-3 pb-3 border-b">
     <div class="flex-1">
       <h4 class="font-semibold">Error: {{ errorType }}</h4>
       <p class="text-sm text-secondary mt-1">{{ errorCode }}</p>

package/static/templates/file-diff-viewer.html

@@ -1,6 +1,6 @@
 <!-- File Diff Visualization Panel -->
 <div class="file-diff-viewer card" role="region" aria-label="Code diff viewer">
-  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+  <div class="card-header mb-3 pb-3 border-b">
     <h4 class="font-semibold">Changes in {{ fileName }}</h4>
     <div class="flex gap-2">
       <button class="btn-icon" data-view="unified" title="Unified diff view" aria-label="Show unified diff">

package/static/templates/file-read-panel.html

@@ -1,6 +1,6 @@
 <!-- File Read Operation Display -->
 <div class="file-read-panel card" role="region" aria-label="File read operation: {{ filePath }}">
-  <div class="card-header flex items-start justify-between gap-3 mb-3 pb-3 border-b">
+  <div class="card-header gap-3 mb-3 pb-3 border-b">
     <div class="flex items-center gap-2 flex-1 min-w-0">
       <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
         <path d="M5.5 13a3 3 0 01.369-1.618l1.83-1.83a3 3 0 015.604 0l.83 1.83A3 3 0 0113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/>

package/static/templates/file-write-panel.html

@@ -1,6 +1,6 @@
 <!-- File Write Operation Display with Before/After Comparison -->
 <div class="file-write-panel card" role="region" aria-label="File write operation: {{ filePath }}">
-  <div class="card-header flex items-start justify-between gap-3 mb-3 pb-3 border-b">
+  <div class="card-header gap-3 mb-3 pb-3 border-b">
     <div class="flex items-center gap-2 flex-1 min-w-0">
       <svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
         <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM15.657 14.243a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM11 17a1 1 0 102 0v-1a1 1 0 10-2 0v1zM5.757 15.657a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707zM2 10a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.757 4.343a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414l-.707-.707z"/>

package/static/templates/git-diff-list.html

@@ -8,7 +8,7 @@
   <div class="diff-items space-y-3">
     {{ for file in diffs }}
     <details class="diff-item">
-      <summary class="cursor-pointer font-medium py-2 px-3 bg-secondary hover:bg-hover-bg rounded flex items-center justify-between">
+      <summary class="cursor-pointer font-medium py-2 px-3 bg-base-200 hover:bg-base-300 rounded flex items-center justify-between">
         <div class="flex items-center gap-2 flex-1 min-w-0">
           <svg class="w-4 h-4 chevron" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
             <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>

package/static/templates/git-status-panel.html

@@ -1,6 +1,6 @@
 <!-- Git Status Panel -->
 <div class="git-status-panel card" role="region" aria-label="Git repository status">
-  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+  <div class="card-header mb-3 pb-3 border-b">
     <div>
       <h4 class="font-semibold">{{ repoName }}</h4>
       <p class="text-xs text-secondary">{{ currentBranch }} @ {{ commitHash }}</p>

package/static/templates/terminal-output-panel.html

@@ -1,6 +1,6 @@
 <!-- Terminal-like Output Panel with ANSI Color Support -->
 <div class="terminal-output-panel card" role="region" aria-label="Terminal output">
-  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+  <div class="card-header mb-3 pb-3 border-b">
     <div>
       <h4 class="font-semibold text-sm">{{ commandName }}</h4>
       <p class="text-xs text-secondary font-mono">$ {{ command }}</p>

package/static/templates/test-results-display.html

@@ -1,6 +1,6 @@
 <!-- Test Results Display -->
 <div class="test-results-display card" role="region" aria-label="Test execution results">
-  <div class="card-header flex items-center justify-between mb-3 pb-3 border-b">
+  <div class="card-header mb-3 pb-3 border-b">
     <h4 class="font-semibold">Test Results</h4>
     <div class="test-summary flex gap-2">
       <span class="badge-result passed" aria-label="Passed tests">{{ passedCount }}</span>
@@ -33,7 +33,7 @@
   <div class="test-list space-y-1">
     {{ for suite in testSuites }}
     <details class="test-suite">
-      <summary class="cursor-pointer py-2 px-3 rounded hover:bg-hover-bg flex items-center gap-2">
+      <summary class="cursor-pointer py-2 px-3 rounded hover:bg-base-200 flex items-center gap-2">
         <svg class="w-4 h-4 chevron" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
           <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
         </svg>

package/static/theme.js

@@ -40,6 +40,8 @@ class ThemeManager {
     }
 
     document.documentElement.setAttribute('data-theme', theme);
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
     localStorage.setItem(this.THEME_KEY, theme);
     this.updateThemeIcon(theme);
   }