Update templates/index.html

templates/index.html

@@ -1227,23 +1227,20 @@
      * Returns HTML with <details> dropdowns for each thinking block.
      * `thinkingDuration` is the number of seconds to display (null = still thinking).
      */
-    function renderMarkdownWithThinking(md, thinkingDuration = null) {
+    function renderMarkdownWithThinking(md) {
       const segments = extractThinkingBlocks(md);
       return segments.map(seg => {
         if (seg.type === 'thinking') {
-          const durLabel = thinkingDuration != null
-            ? `thinking for ${thinkingDuration}s`
-            : `thinking…`;
-          const spinnerOrArrow = thinkingDuration != null
-            ? `<span class="thinking-arrow" aria-hidden="true">▶</span>`
-            : `<span class="thinking-spinner" aria-hidden="true"></span>`;
-          const thinkingHtml = renderMarkdown(seg.content.trim());
+          const trimmed = seg.content.trim();
+          if (!trimmed) return '';
+          const thinkingHtml = renderMarkdown(trimmed);
           return `<details class="thinking-dropdown">
-            <summary class="thinking-summary">${spinnerOrArrow} <span>${esc(durLabel)}</span></summary>
+            <summary class="thinking-summary"><span class="thinking-arrow" aria-hidden="true">▶</span> <span>thought</span></summary>
             <div class="thinking-content">${thinkingHtml}</div>
           </details>`;
         }
-        return renderMarkdown(seg.content);
+        const trimmed = seg.content.trim();
+        return trimmed ? renderMarkdown(trimmed) : '';
       }).join('');
     }
 
@@ -1355,6 +1352,7 @@
     async function animateThinkingBlock(parentEl, thinkingText, delay) {
       const details = document.createElement('details');
       details.className = 'thinking-dropdown';
+      details.open = true; // start opened
 
       const summary = document.createElement('summary');
       summary.className = 'thinking-summary';
@@ -1370,13 +1368,12 @@
 
       const startTime = performance.now();
 
-      // Stream the thinking content in chunks
       await animateMarkdownChunked(contentDiv, thinkingText.trim(), delay);
 
       const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
 
-      // Replace spinner with arrow + final time
       summary.innerHTML = `<span class="thinking-arrow" aria-hidden="true">▶</span> <span>thinking for ${elapsed}s</span>`;
+      details.open = false; // auto-close after finishing
     }
 
     /**