Show Qwen3 thinking output in chat as collapsible Reasoning block

Ollama streams message.thinking tokens alongside message.content when
think=True — previously silently dropped. Now forwarded end-to-end.

Backend:
- llm.py: ChatChunk type gains "thinking" variant; stream_chat_with_tools
  yields ChatChunk(type="thinking") for msg.thinking chunks before content
- generation_task.py: thinking chunks emit "thinking_chunk" SSE events
  (not added to content_so_far — not persisted to DB)

Frontend:
- types/chat.ts: Message.thinking?: string (session-only, not from DB)
- stores/chat.ts: streamingThinking ref; thinking_chunk handler accumulates
  chunks; on done, thinking carried into committed Message object then cleared
- ChatMessage.vue: collapsible <details class="thinking-block"> shown for
  messages that have .thinking content (collapsed by default)
- ChatView.vue + ChatPanel.vue: live thinking block in streaming bubble —
  open while only thinking is flowing, auto-collapses when content arrives;
  typing indicator hidden while thinking is active

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/ChatMessage.vue

@@ -68,6 +68,10 @@ const timingParts = computed((): string[] => {
             </button>
           </div>
         </div>
+        <details v-if="message.thinking" class="thinking-block">
+          <summary class="thinking-summary">Reasoning</summary>
+          <pre class="thinking-text">{{ message.thinking }}</pre>
+        </details>
         <div class="message-content prose" v-html="rendered"></div>
         <div v-if="message.tool_calls?.length" class="tool-calls">
           <ToolCallCard
@@ -147,6 +151,49 @@ const timingParts = computed((): string[] => {
   color: var(--color-text-muted);
 }
 
+.thinking-block {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.thinking-summary {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: var(--color-bg-secondary);
+}
+.thinking-summary::-webkit-details-marker { display: none; }
+.thinking-summary::before {
+  content: "▶";
+  font-size: 0.6rem;
+  transition: transform 0.15s;
+}
+details[open] .thinking-summary::before {
+  transform: rotate(90deg);
+}
+.thinking-text {
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border);
+}
 .message-content {
   font-size: 0.95rem;
   line-height: 1.55;

frontend/src/components/ChatPanel.vue

@@ -197,8 +197,16 @@ function promoteAutoNote(note: { id: number; title: string }) {
               <div class="message-header">
                 <span class="role-label">{{ settingsStore.assistantName }}</span>
               </div>
+              <details
+                v-if="store.streamingThinking"
+                class="thinking-block"
+                :open="!store.streamingContent"
+              >
+                <summary class="thinking-summary">Reasoning</summary>
+                <pre class="thinking-text">{{ store.streamingThinking }}</pre>
+              </details>
               <div class="message-content prose" v-html="streamingRendered"></div>
-              <span class="typing-indicator"></span>
+              <span v-if="!store.streamingThinking" class="typing-indicator"></span>
             </div>
           </div>
 
@@ -375,7 +383,49 @@ function promoteAutoNote(note: { id: number; title: string }) {
   line-height: 1.55;
   word-break: break-word;
 }
-
+.thinking-block {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.thinking-summary {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: var(--color-bg-secondary);
+}
+.thinking-summary::-webkit-details-marker { display: none; }
+.thinking-summary::before {
+  content: "▶";
+  font-size: 0.6rem;
+  transition: transform 0.15s;
+}
+details[open] .thinking-summary::before {
+  transform: rotate(90deg);
+}
+.thinking-text {
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border);
+}
 .typing-indicator {
   display: inline-block;
   width: 6px;

frontend/src/stores/chat.ts

@@ -27,6 +27,7 @@ export const useChatStore = defineStore("chat", () => {
   const loading = ref(false);
   const streaming = ref(false);
   const streamingContent = ref("");
+  const streamingThinking = ref("");
   const streamingToolCalls = ref<ToolCallRecord[]>([]);
   const streamingStatus = ref("");
   const streamingPendingTool = ref<ToolPendingRecord | null>(null);
@@ -206,6 +207,9 @@ export const useChatStore = defineStore("chat", () => {
           case "status":
             streamingStatus.value = event.data.status as string;
             break;
+          case "thinking_chunk":
+            streamingThinking.value += event.data.chunk as string;
+            break;
           case "chunk":
             streamingContent.value += event.data.chunk as string;
             streamingStatus.value = "";
@@ -235,11 +239,13 @@ export const useChatStore = defineStore("chat", () => {
                   : null,
                 created_at: new Date().toISOString(),
                 timing: event.data.timing as GenerationTiming | undefined,
+                thinking: streamingThinking.value || undefined,
               };
               if (currentConversation.value?.id === convId) {
                 currentConversation.value.messages.push(assistantMsg);
               }
               streamingContent.value = "";
+              streamingThinking.value = "";
               streamingToolCalls.value = [];
               streamingStatus.value = "";
               streamingPendingTool.value = null;
@@ -257,6 +263,7 @@ export const useChatStore = defineStore("chat", () => {
             gotDone = true;
             streaming.value = false;
             streamingContent.value = "";
+            streamingThinking.value = "";
             streamingToolCalls.value = [];
             streamingStatus.value = "";
             streamingPendingTool.value = null;
@@ -296,6 +303,7 @@ export const useChatStore = defineStore("chat", () => {
 
     streaming.value = false;
     streamingContent.value = "";
+    streamingThinking.value = "";
     streamingToolCalls.value = [];
     streamingStatus.value = "";
     streamingPendingTool.value = null;
@@ -397,6 +405,7 @@ export const useChatStore = defineStore("chat", () => {
     loading,
     streaming,
     streamingContent,
+    streamingThinking,
     streamingToolCalls,
     streamingStatus,
     streamingPendingTool,

frontend/src/types/chat.ts

@@ -30,6 +30,7 @@ export interface Message {
   tool_calls?: ToolCallRecord[] | null;
   created_at: string;
   timing?: GenerationTiming;
+  thinking?: string;
 }
 
 export interface SendMessageResponse {

frontend/src/views/ChatView.vue

@@ -418,8 +418,16 @@ onUnmounted(() => {
                     <span class="streaming-status-dot"></span>
                     {{ store.streamingStatus }}
                   </div>
+                  <details
+                    v-if="store.streamingThinking"
+                    class="thinking-block"
+                    :open="!store.streamingContent"
+                  >
+                    <summary class="thinking-summary">Reasoning</summary>
+                    <pre class="thinking-text">{{ store.streamingThinking }}</pre>
+                  </details>
                   <div class="message-content prose" v-html="streamingRendered"></div>
-                  <span v-if="!store.streamingStatus" class="typing-indicator"></span>
+                  <span v-if="!store.streamingStatus && !store.streamingThinking" class="typing-indicator"></span>
                 </div>
               </div>
 
@@ -844,6 +852,49 @@ onUnmounted(() => {
   font-style: italic;
   margin-bottom: 0.3rem;
 }
+.thinking-block {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.thinking-summary {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: var(--color-bg-secondary);
+}
+.thinking-summary::-webkit-details-marker { display: none; }
+.thinking-summary::before {
+  content: "▶";
+  font-size: 0.6rem;
+  transition: transform 0.15s;
+}
+details[open] .thinking-summary::before {
+  transform: rotate(90deg);
+}
+.thinking-text {
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border);
+}
 .streaming-status-dot {
   display: inline-block;
   width: 6px;

src/fabledassistant/services/generation_task.py

@@ -442,7 +442,10 @@ async def run_generation(
                     cancelled = True
                     break
 
-                if chunk.type == "content":
+                if chunk.type == "thinking":
+                    buf.append_event("thinking_chunk", {"chunk": chunk.content})
+
+                elif chunk.type == "content":
                     if timing["ttft_ms"] is None:
                         timing["ttft_ms"] = int((time.monotonic() - t_start) * 1000)
                     buf.content_so_far += chunk.content

src/fabledassistant/services/llm.py

@@ -131,7 +131,7 @@ async def stream_chat(
 @dataclass
 class ChatChunk:
     """A chunk yielded by stream_chat_with_tools."""
-    type: Literal["content", "tool_calls", "done"]
+    type: Literal["content", "thinking", "tool_calls", "done"]
     content: str = ""
     tool_calls: list[dict] | None = None
 
@@ -178,6 +178,11 @@ async def stream_chat_with_tools(
                 data = json.loads(line)
                 msg = data.get("message", {})
 
+                # Thinking chunks (qwen3 chain-of-thought, only when think=True)
+                thinking = msg.get("thinking", "")
+                if thinking:
+                    yield ChatChunk(type="thinking", content=thinking)
+
                 # Content chunks
                 chunk = msg.get("content", "")
                 if chunk: