feat(web): interleave thinking blocks with tool calls

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

@@ -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;

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>