feat: search thinking block — collapsible search results before AI response

- Search results appear in a collapsible <details> thinking block before AI response
- Two-phase UX: spinner shows instantly, populates with results or 'no results' on complete
- Source citation pills displayed below thinking block
- Removed duplicate inline search details from addAiMessage/handleGroqComplete
- Fixed duplicate user message bug in sendToAi() dedup check (querySelectorAll fix)
- Added .ai-thinking-block CSS with animations, spinner, no-results state, dark mode

Author: ijbo

CHANGELOG-search-thinking-block.md

@@ -0,0 +1,49 @@
+# Search Thinking Block — Collapsible Search Results Before AI Response
+
+- Search results now appear in a collapsible "thinking" `<details>` block before the AI response streams
+- Thinking block shows immediately with a spinning "Searching…" indicator when search is triggered
+- Block populates with actual results (title, snippet, URL) or "No results found" message when search completes
+- Source citation pills displayed below the thinking block for quick access to sources
+- Removed duplicate inline search details from AI response bubbles (`addAiMessage`, `handleGroqComplete`)
+- Fixed: duplicate user message ("YOU" bubble shown twice) when search is enabled — `sendToAi()` dedup check now uses `querySelectorAll` instead of broken `:last-of-type` CSS pseudo-class
+- Added `.ai-thinking-block` CSS with green-accented border, slide-in animation, dark mode support
+- Added `.ai-thinking-spin` CSS keyframe animation for the search-in-progress spinner
+- Added `.ai-thinking-searching` and `.ai-thinking-no-results` styled states
+
+---
+
+## Summary
+
+Refactors the AI chat search flow to show web search results in a collapsible "thinking" block **before** the AI generates its response, providing a transparent agent-like workflow. Also fixes a duplicate user message bug caused by a broken DOM dedup check in `sendToAi()`.
+
+---
+
+## 1. Two-Phase Search Thinking Block
+**Files:** `js/ai-chat.js`
+**What:** Replaced the old single-shot `renderSearchThinkingBlock()` with a two-phase system: `createSearchThinkingBlock(query)` shows a collapsible block with an animated spinner immediately when search starts, then `populateSearchThinkingBlock(results, query)` fills it with actual results or a "no results" fallback message when the search promise resolves/rejects. The old `ai-search-indicator` element is no longer used — the thinking block replaces it entirely.
+**Impact:** Users see immediate visual feedback that search is running, and always see the thinking block regardless of whether DDG returns results.
+
+## 2. Removed Duplicate Search Details from AI Responses
+**Files:** `js/ai-chat.js`
+**What:** Removed inline search result rendering from `addAiMessage()` and `handleGroqComplete()`, which previously duplicated the search details inside the AI message bubble.
+**Impact:** Search results appear only once (in the thinking block above), not twice.
+
+## 3. Fixed Duplicate User Message
+**Files:** `js/ai-assistant.js`
+**What:** The `sendToAi()` function checked for existing user messages using `.ai-message-user:last-of-type`, which is a CSS pseudo-class that matches the last element of a given tag type (`div`), not the last element with a class. When the thinking block `div` was inserted between the user message and sendToAi's check, the dedup always failed. Fixed by using `querySelectorAll('.ai-message-user .ai-msg-bubble')` and comparing the last element's text content.
+**Impact:** User query now appears exactly once in the chat.
+
+## 4. Thinking Block CSS
+**Files:** `css/ai-panel.css`
+**What:** Added `.ai-thinking-block` container with green-accented border and fade-in animation, `.ai-thinking-spin` rotation keyframe for the search spinner, `.ai-thinking-searching` for the loading state, and `.ai-thinking-no-results` for the empty state with amber info icon. Dark mode variants included.
+**Impact:** Consistent, polished visual treatment matching the existing AI panel design.
+
+---
+
+## Files Changed (3 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `js/ai-chat.js` | +217 −48 | Two-phase thinking block, removed inline search duplication |
+| `js/ai-assistant.js` | +4 −3 | Fixed user message dedup check |
+| `css/ai-panel.css` | +194 −0 | Thinking block styles, spinner, no-results state |

README.md

@@ -459,6 +459,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------|
+| **2026-03-13** | | 🔍 **Search thinking block** — web search results now appear in a collapsible "thinking" `<details>` block *before* the AI response streams; two-phase UX: spinner appears instantly when search starts, populates with results (or "no results") when complete; source citation pills below; removed duplicate inline search details from AI response bubbles; fixed duplicate user message bug in `sendToAi()` dedup check |
 | **2026-03-13** | | 📐 **LaTeX coding block** — new `📐 LaTeX` toolbar button in Coding dropdown inserts `$$...$$` display math blocks; default template `\frac{\sqrt{2025} + \sqrt{3025}}{\sqrt{25}}` evaluates to 20 via Nerdamer; MathJax renders in preview; Playwright test added |
 | **2026-03-13** | | 🐛 **Run All output fix** — `▶ Run All` now renders output for every block (bash, JS, SQL, math); fixed `findBlockContainer` producing wrong CSS selectors for bash/JS containers; added `renderBlockOutput()` for DOM rendering during Run All; SQL default template changed to `CREATE TABLE IF NOT EXISTS` for idempotent re-runs; math default template now pre-assigns `x = 5` before `x^2 + 2*x + 1` |
 | **2026-03-13** | | 📄 **Feature Showcase update** — synced in-app Feature Showcase template with all recent features; added 7 new rows to Features at a Glance table (Media Embedding, TTS, Game Builder, Finance Dashboard, Disk Workspace, Email to Self, Context Memory); 9 new dedicated sections with examples and tips; AI Document Tags table expanded to 9 tag types; AI model table expanded with Kokoro/Voxtral/Docling/Florence-2; Voice Dictation updated to dual-engine; 14 new task list items; Dev Tooling test count updated to 484 |

css/ai-panel.css

@@ -618,11 +618,13 @@
   margin-bottom: 4px;
   background: var(--bg-color);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
-  padding: 4px;
+  padding: 3px;
   z-index: 10;
   animation: aiModelDropIn 0.15s ease;
+  max-height: 50vh;
+  overflow-y: auto;
 }
 
 .ai-model-selector.open .ai-model-dropdown {
@@ -644,14 +646,14 @@
 .ai-model-option {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 6px;
   width: 100%;
-  padding: 10px 12px;
+  padding: 3px 8px;
   border: none;
   background: none;
   color: var(--text-color);
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: 5px;
   transition: all 0.15s;
   text-align: left;
 }
@@ -671,9 +673,9 @@
 }
 
 .ai-model-option>i {
-  font-size: 18px;
+  font-size: 13px;
   color: #667eea;
-  width: 22px;
+  width: 16px;
   text-align: center;
   flex-shrink: 0;
 }
@@ -684,14 +686,16 @@
 
 .ai-model-option strong {
   display: block;
-  font-size: 13px;
-  margin-bottom: 1px;
+  font-size: 11px;
+  margin-bottom: 0;
+  line-height: 1.3;
 }
 
 .ai-model-option small {
   display: block;
-  font-size: 11px;
+  font-size: 9.5px;
   opacity: 0.6;
+  line-height: 1.2;
 }
 
 /* --- API Key Modal --- */
@@ -1818,6 +1822,68 @@
   background: rgba(16, 185, 129, 0.08);
 }
 
+/* Thinking block — collapsible search results shown before AI response */
+.ai-thinking-block {
+  margin: 6px 0 4px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: rgba(16, 185, 129, 0.04);
+  border: 1px solid rgba(16, 185, 129, 0.12);
+  animation: aiThinkIn 0.25s ease;
+}
+
+[data-theme="dark"] .ai-thinking-block {
+  background: rgba(16, 185, 129, 0.06);
+  border-color: rgba(52, 211, 153, 0.15);
+}
+
+@keyframes aiThinkIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.ai-thinking-block .ai-search-details {
+  margin-top: 0;
+}
+
+.ai-thinking-block .ai-source-citations {
+  margin-top: 4px;
+}
+
+/* Thinking block — spinner for "Searching…" state */
+.ai-thinking-spin {
+  display: inline-block;
+  animation: aiSpin 1s linear infinite;
+}
+
+.ai-thinking-searching {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  font-size: 11.5px;
+  color: #10b981;
+  font-weight: 500;
+}
+
+[data-theme="dark"] .ai-thinking-searching {
+  color: #34d399;
+}
+
+.ai-thinking-no-results {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 8px;
+  font-size: 11px;
+  color: var(--text-color);
+  opacity: 0.6;
+}
+
+.ai-thinking-no-results i {
+  color: #f59e0b;
+}
+
 /* Search indicator in chat */
 .ai-search-indicator {
   display: flex;
@@ -1864,6 +1930,114 @@
   }
 }
 
+/* Collapsible search results details */
+.ai-search-details {
+  margin-top: 6px;
+  padding: 0 4px;
+  font-size: 12px;
+}
+
+.ai-search-details summary {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.15s;
+  user-select: none;
+  list-style: none;
+}
+
+.ai-search-details summary::-webkit-details-marker { display: none; }
+
+.ai-search-details summary::before {
+  content: '▶';
+  font-size: 8px;
+  transition: transform 0.15s;
+}
+
+.ai-search-details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.ai-search-details summary:hover {
+  opacity: 1;
+  background: rgba(16, 185, 129, 0.06);
+}
+
+.ai-search-details summary i {
+  color: #10b981;
+  font-size: 12px;
+}
+
+.ai-search-count {
+  margin-left: auto;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+
+[data-theme="dark"] .ai-search-count {
+  color: #34d399;
+  background: rgba(52, 211, 153, 0.12);
+}
+
+.ai-search-results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.ai-search-result-item {
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
+}
+
+.ai-search-result-title a {
+  font-size: 11px;
+  font-weight: 600;
+  color: #667eea;
+  text-decoration: none;
+}
+
+.ai-search-result-title a:hover {
+  text-decoration: underline;
+}
+
+[data-theme="dark"] .ai-search-result-title a {
+  color: #a5b4fc;
+}
+
+.ai-search-result-snippet {
+  font-size: 10.5px;
+  color: var(--text-color);
+  opacity: 0.65;
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+.ai-search-result-url {
+  font-size: 9.5px;
+  color: #10b981;
+  margin-top: 2px;
+}
+
+[data-theme="dark"] .ai-search-result-url {
+  color: #34d399;
+}
+
 /* Source citations under AI response */
 .ai-source-citations {
   display: flex;

js/ai-assistant.js

@@ -1051,10 +1051,11 @@
     const thinkingToggle = document.getElementById('ai-thinking-toggle');
     const enableThinking = thinkingToggle ? thinkingToggle.checked : false;
 
-    // Show user message in chat (if not already shown)
+    // Show user message in chat (if not already shown by sendChatMessage)
     const displayText = userPrompt || `[${taskType}] ${context ? context.substring(0, 80) + '...' : ''}`;
-    if (!document.querySelector('.ai-message-user:last-child') ||
-      aiChatArea.lastElementChild?.querySelector('.ai-msg-bubble')?.textContent !== displayText) {
+    const allUserBubbles = aiChatArea.querySelectorAll('.ai-message-user .ai-msg-bubble');
+    const lastUserBubble = allUserBubbles.length > 0 ? allUserBubbles[allUserBubbles.length - 1] : null;
+    if (!lastUserBubble || lastUserBubble.textContent.trim() !== displayText.trim()) {
       M._ai.addUserMessage(displayText);
     }
     M._ai.addTypingIndicator();