UI: Implement Expandable Thought Core - Reasoning blocks (Kimi/DeepSeek) are now hidden by default behind a sleek toggle

backend/public/chat.html

@@ -82,6 +82,16 @@
         .source-pill:hover { background: var(--accent); color: #000; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 243, 255, 0.3); }
         .source-pill img { width: 12px; height: 12px; border-radius: 2px; }
 
+        /* THINKING / REASONING BLOCKS */
+        .thought-core { margin-bottom: 1rem; border-left: 2px solid rgba(0, 243, 255, 0.2); background: rgba(0, 243, 255, 0.02); border-radius: 0 1rem 1rem 0; overflow: hidden; transition: 0.3s; }
+        .thought-header { padding: 8px 15px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; background: rgba(0, 243, 255, 0.05); }
+        .thought-header:hover { background: rgba(0, 243, 255, 0.1); }
+        .thought-header i { font-size: 8px; color: var(--accent); transition: transform 0.3s; }
+        .thought-header span { font-family: 'JetBrains Mono'; font-size: 8px; font-weight: 900; color: rgba(0, 243, 255, 0.5); text-transform: uppercase; letter-spacing: 0.1em; }
+        .thought-content { padding: 15px; font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; font-style: italic; display: none; border-top: 1px solid rgba(0, 243, 255, 0.05); }
+        .thought-core.expanded .thought-content { display: block; }
+        .thought-core.expanded .thought-header i { transform: rotate(90deg); }
+
         .input-anchor { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; background: linear-gradient(transparent, #000 60%); pointer-events: none; z-index: 50; }
         .input-hub { max-width: 800px; margin: 0 auto; background: rgba(15, 15, 15, 0.98); backdrop-filter: blur(50px); border: 1px solid var(--border); border-radius: 2rem; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; pointer-events: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.8); transition: border-color 0.3s; }
         .input-hub:focus-within { border-color: var(--accent); }
@@ -444,14 +454,35 @@
             const div = document.createElement('div');
             div.className = `msg-node ${role}`;
             
-            // NEURAL SOURCE PARSER
+            // NEURAL THOUGHT PARSER
+            let thoughtHtml = "";
             let cleanText = text;
+            
+            // Detect various thought patterns (DeepSeek, Kimi, etc.)
+            const thoughtMatch = text.match(/<(thought|thinking)>([\s\S]*?)<\/\1>|\[THOUGHT\]([\s\S]*?)\[\/THOUGHT\]/i);
+            if (role === 'ai' && thoughtMatch) {
+                const thoughtContent = (thoughtMatch[2] || thoughtMatch[3]).trim();
+                cleanText = text.replace(thoughtMatch[0], "").trim();
+                thoughtHtml = `
+                    <div class="thought-core">
+                        <div class="thought-header" onclick="this.parentElement.classList.toggle('expanded')">
+                            <i class="fas fa-chevron-right"></i>
+                            <span>Neural Thought Trace [DECRYPTED]</span>
+                        </div>
+                        <div class="thought-content">${marked.parse(thoughtContent)}</div>
+                    </div>
+                `;
+            }
+
+            // NEURAL SOURCE PARSER
             let sourceLinks = [];
-            const sourceMarker = text.match(/SOURCES:/i);
+            const sourceMarker = cleanText.match(/SOURCES:/i);
             if (role === 'ai' && sourceMarker) {
                 const markerIndex = sourceMarker.index;
-                cleanText = text.substring(0, markerIndex);
-                const rawLinks = text.substring(markerIndex).match(/(https?:\/\/[^\s\)]+)/g);
+                const finalReply = cleanText.substring(0, markerIndex);
+                const linkSection = cleanText.substring(markerIndex);
+                cleanText = finalReply;
+                const rawLinks = linkSection.match(/(https?:\/\/[^\s\)]+)/g);
                 if (rawLinks) sourceLinks = [...new Set(rawLinks)];
             }
 
@@ -462,7 +493,8 @@
                 </div>
                 <div class="bubble">
                     ${attachmentUrl ? `<img src="${attachmentUrl}" class="max-w-[300px] w-full rounded-xl mb-3 border border-white/10 shadow-lg cursor-zoom-in block" onclick="window.open(this.src)">` : ''}
-                    <div class="prose max-w-none">${marked.parse(cleanText)}</div>
+                    ${thoughtHtml}
+                    <div class="prose max-w-none">${marked.parse(cleanText || (thoughtHtml ? "..." : "[SIGNAL]"))}</div>
                     ${sourceLinks.length > 0 ? `<div class="sources-grid"></div>` : ''}
                 </div>
                 <div class="msg-toolkit">