From 0e5a6c56584bb6ccd819a9261b1485b99d977f76 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <vhaudiquet343@hotmail.fr>
Date: Tue, 20 Oct 2026 20:55:01 +0200
Subject: [PATCH] feat(web): interleave thinking blocks with tool calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fold thinking deltas into the turn's stream-ordered entries as a
thinking entry, merged back-to-back the way the stream delivers
them, instead of one flat string rendered above every call. Each
thinking block now sits where it streamed — between the calls it
precedes. Live turns keep their thinking expanded; finished turns
render it collapsed.
---
 web/claw/app/components/ChatPanel.vue     | 47 +++++++----------------
 web/claw/app/components/TurnEntries.vue   | 40 +++++++++++++++++--
 web/claw/app/composables/useTranscript.ts | 30 ++++++++++-----
 3 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/web/claw/app/components/ChatPanel.vue b/web/claw/app/components/ChatPanel.vue
index d982097..6728624 100644
--- a/web/claw/app/components/ChatPanel.vue
+++ b/web/claw/app/components/ChatPanel.vue
@@ -50,8 +50,20 @@ function onScroll(): void {
   pinned.value = el.scrollHeight - el.scrollTop - el.clientHeight < 48
 }
 
+// Thinking grows inside the trailing entry without changing the
+// entries length, so its total length joins the watch to keep the
+// stream pinned at the bottom.
+function liveThinkingLength(): number {
+  return (
+    props.live?.entries.reduce(
+      (count, entry) => (entry.kind === 'thinking' ? count + entry.text.length : count),
+      0,
+    ) ?? 0
+  )
+}
+
 watch(
-  () => [props.items.length, props.live?.reply.length, props.live?.thinking.length, props.live?.entries.length],
+  () => [props.items.length, props.live?.reply.length, liveThinkingLength(), props.live?.entries.length],
   async () => {
     if (!pinned.value) return
     await nextTick()
@@ -224,10 +236,6 @@ function streamTone(status: StreamStatus): 'ok' | 'warn' | 'error' {
           <AgentAvatar :avatar-url="avatarUrl" :mark="identity?.mark" :initials="identity?.initials ?? identity?.name?.slice(0, 1)" :size="32" />
           <div class="msg-body">
             <div class="who">{{ agentName }}</div>
-            <details v-if="item.turn.thinking" class="thinking">
-              <summary>thinking</summary>
-              <pre>{{ item.turn.thinking }}</pre>
-            </details>
             <TurnEntries
               :entries="item.turn.entries"
               @consent-answer="(id, answer) => emit('consentAnswer', id, answer)"
@@ -260,12 +268,9 @@ function streamTone(status: StreamStatus): 'ok' | 'warn' | 'error' {
         <AgentAvatar :avatar-url="avatarUrl" :mark="identity?.mark" :initials="identity?.initials ?? identity?.name?.slice(0, 1)" :size="32" />
         <div class="msg-body">
           <div class="who">{{ agentName }}</div>
-          <details v-if="live.thinking" class="thinking" open>
-            <summary>thinking</summary>
-            <pre>{{ live.thinking }}</pre>
-          </details>
           <TurnEntries
             :entries="live.entries"
+            :open-thinking="true"
             @consent-answer="(id, answer) => emit('consentAnswer', id, answer)"
             @consent-deny="(id) => emit('consentDeny', id)"
             @download-attachment="(id, name) => emit('downloadAttachment', id, name)"
@@ -436,30 +441,6 @@ function streamTone(status: StreamStatus): 'ok' | 'warn' | 'error' {
   color: var(--accent-text);
 }
 
-.thinking {
-  margin-bottom: 8px;
-  color: var(--text3);
-}
-
-.thinking summary {
-  cursor: pointer;
-  font-size: 11px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.thinking pre {
-  margin: 6px 0 0;
-  padding: 8px 10px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text3);
-  font-style: italic;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
 .reply {
   color: var(--text);
   overflow-wrap: anywhere;
diff --git a/web/claw/app/components/TurnEntries.vue b/web/claw/app/components/TurnEntries.vue
index 536dc69..472cefc 100644
--- a/web/claw/app/components/TurnEntries.vue
+++ b/web/claw/app/components/TurnEntries.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
-// A turn's stream-ordered middle: tool rows, the agent's asks, its
-// handovers — each at the position the stream delivered it, so an ask
-// sits at the tool call that raised it rather than at the turn's top.
+// A turn's stream-ordered middle: tool rows, pieces of the thinking
+// trace, the agent's asks, its handovers — each at the position the
+// stream delivered it, so an ask sits at the tool call that raised it
+// and thinking sits between the calls it precedes.
 import type { TurnEntry } from '~/composables/useTranscript'
 import type { ConsentAnswer } from '~/composables/useClaw'
 
-defineProps<{ entries: TurnEntry[] }>()
+defineProps<{
+  entries: TurnEntry[]
+  /** A live turn's thinking blocks start expanded; finished ones collapse. */
+  openThinking?: boolean
+}>()
 
 const emit = defineEmits<{
   consentAnswer: [id: string, answer: ConsentAnswer]
@@ -18,6 +23,10 @@ const emit = defineEmits<{
   <div v-if="entries.length > 0" class="entries">
     <template v-for="(entry, index) in entries" :key="index">
       <TurnToolRow v-if="entry.kind === 'tool'" :row="entry.row" />
+      <details v-else-if="entry.kind === 'thinking'" class="thinking" :open="openThinking">
+        <summary>thinking</summary>
+        <pre>{{ entry.text }}</pre>
+      </details>
       <TurnConsentCard
         v-else-if="entry.kind === 'consent'"
         :consent="entry.consent"
@@ -40,4 +49,27 @@ const emit = defineEmits<{
   gap: 4px;
   margin-bottom: 10px;
 }
+
+.thinking {
+  color: var(--text3);
+}
+
+.thinking summary {
+  cursor: pointer;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.thinking pre {
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text3);
+  font-style: italic;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
 </style>
diff --git a/web/claw/app/composables/useTranscript.ts b/web/claw/app/composables/useTranscript.ts
index ad947f6..199d32a 100644
--- a/web/claw/app/composables/useTranscript.ts
+++ b/web/claw/app/composables/useTranscript.ts
@@ -20,19 +20,21 @@ export interface ToolRow {
   command: string | null
 }
 
-/** One stream-ordered thing inside a turn: a tool call, the agent's ask
- * (a consent card), or a handover (an attachment). The turn renders its
- * entries in stream order, so a card sits where the event that raised
- * it happened — an ask appears at its tool call, not at the turn's top. */
+/** One stream-ordered thing inside a turn: a tool call, a piece of the
+ * thinking trace (adjacent deltas merged into one block), the agent's
+ * ask (a consent card), or a handover (an attachment). The turn renders
+ * its entries in stream order, so a card sits where the event that
+ * raised it happened — an ask appears at its tool call, not at the
+ * turn's top, and thinking sits between the calls it precedes. */
 export type TurnEntry =
   | { kind: 'tool'; row: ToolRow }
+  | { kind: 'thinking'; text: string }
   | { kind: 'consent'; consent: ConsentCard }
   | { kind: 'attachment'; attachment: AttachmentCard }
 
-/** One turn as the UI renders it: thinking trace, the stream-ordered
- * entries, the streamed reply. */
+/** One turn as the UI renders it: the stream-ordered entries and the
+ * streamed reply. */
 export interface TurnBlock {
-  thinking: string
   reply: string
   entries: TurnEntry[]
   /** Set by `turn_done`: `handled`, `failed`, or whatever the claw reports. */
@@ -148,7 +150,7 @@ export function useTranscript() {
   let nextId = 1
 
   function ensureLive(): TurnBlock {
-    if (!live.value) live.value = { thinking: '', reply: '', entries: [], outcome: null }
+    if (!live.value) live.value = { reply: '', entries: [], outcome: null }
     return live.value
   }
 
@@ -156,6 +158,7 @@ export function useTranscript() {
    * not alias the live slot's objects. */
   function cloneEntry(entry: TurnEntry): TurnEntry {
     if (entry.kind === 'tool') return { kind: 'tool', row: { ...entry.row } }
+    if (entry.kind === 'thinking') return { kind: 'thinking', text: entry.text }
     if (entry.kind === 'consent') return { kind: 'consent', consent: { ...entry.consent } }
     return { kind: 'attachment', attachment: { ...entry.attachment } }
   }
@@ -172,9 +175,16 @@ export function useTranscript() {
         items.value.push({ kind: 'sent', id: nextId++, text: event.text })
         break
       }
-      case 'thinking_delta':
-        ensureLive().thinking += event.text
+      case 'thinking_delta': {
+        // Thinking joins the entries at its stream position: a delta
+        // extends the trailing block, a gap (a tool call, a reply)
+        // opens the next one.
+        const entries = ensureLive().entries
+        const last = entries[entries.length - 1]
+        if (last?.kind === 'thinking') last.text += event.text
+        else entries.push({ kind: 'thinking', text: event.text })
         break
+      }
       case 'text_delta':
         ensureLive().reply += event.text
         break