show reasoning in frontend

public/app/api.js

@@ -58,6 +58,7 @@ export async function stream(url, data, handlers = {}) {
             const event = eventLine.slice(6).trim();
             const payload = JSON.parse(dataLine.slice(5).trim());
             if (event === "chunk" && handlers.onChunk) handlers.onChunk(payload);
+            if (event === "thinking" && handlers.onThinking) handlers.onThinking(payload);
             if (event === "status" && handlers.onStatus) handlers.onStatus(payload);
             if (event === "done" && handlers.onDone) handlers.onDone(payload);
             if (event === "error" && handlers.onError) handlers.onError(payload);

public/script.js

@@ -1,5 +1,6 @@
 import {del, get, post, put, stream} from "./app/api.js?v=20260909-account-controls";
 import {appendSources, createWebSearchToggle} from "./app/webSearch.js";
+import {updateReasoning} from "./app/reasoning.js";
 import {closeChatDrawer, openChatDrawer} from "./app/chatDrawer.js?v=20260909-account-controls";
 import {onboardingPrompts, requestedChatId} from "./app/constants.js?v=20260909-account-controls";
 import {getModelProfile} from "./app/modelProfiles.js?v=20260909-account-controls";
@@ -741,6 +742,7 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
         }
 
         msgDiv.append(header, body);
+        if (!isMessageUser) updateReasoning(msgDiv, message.thinking);
         if (!isMessageUser) appendSources(msgDiv, message.sources);
         if (message.deliveryStatus === "failed" && message.errorMessage) {
             const error = document.createElement("p");
@@ -1832,7 +1834,13 @@ async function sendMessage() {
                 loadingLabel.textContent = status === "searching" ? "Searching the web..."
                     : sourceCount === 0 ? "No web results found. Generating response..." : "Generating response...";
             },
+            onThinking: ({fullThinking}) => {
+                updateReasoning(loadingMsg, fullThinking, true);
+                loadingLabel.textContent = "Thinking…";
+            },
             onChunk: ({fullReply}) => {
+                const reasoningSummary = loadingMsg.querySelector(".msg-reasoning summary");
+                if (reasoningSummary) reasoningSummary.textContent = "Reasoning";
                 if (loadingBody) {
                     loadingShell?.classList.add("hidden");
                     loadingBody.classList.add("has-content");

public/style.css

@@ -1,5 +1,25 @@
 /* Elsewhere design system. */
 
+.msg-reasoning {
+    margin: 0 0 12px;
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-soft);
+    color: var(--text-soft);
+    font-size: .875rem;
+}
+.msg-reasoning summary { cursor: pointer; font-weight: 600; }
+.msg-reasoning summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
+.msg-reasoning-content {
+    margin-top: 10px;
+    max-height: 320px;
+    overflow: auto;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    line-height: 1.6;
+}
+
 /* ---------- Foundation ---------- */
 :root {
     color-scheme: light;