diff --git a/server/internal/api/web/chat.go b/server/internal/api/web/chat.go
index 0e46f09..00199f7 100644
--- a/server/internal/api/web/chat.go
+++ b/server/internal/api/web/chat.go
@@ -337,6 +337,9 @@ func (s *Server) handleChat(w http.ResponseWriter, r *http.Request) {
 					streamDone = true
 					continue
 				}
+				if ch.ReasoningDelta != "" {
+					emit("reasoning", map[string]any{"type": "reasoning", "content": ch.ReasoningDelta})
+				}
 				if ch.Delta != "" {
 					full.WriteString(ch.Delta)
 					emit("delta", map[string]any{"type": "delta", "content": ch.Delta})
diff --git a/server/internal/provider/pioneer.go b/server/internal/provider/pioneer.go
index 37fc809..aa3d8a2 100644
--- a/server/internal/provider/pioneer.go
+++ b/server/internal/provider/pioneer.go
@@ -92,13 +92,14 @@ type ToolResult struct {
 
 // Chunk is one decoded SSE event from the provider.
 type Chunk struct {
-	Raw       []byte         // the verbatim JSON for re-emission to clients
-	Delta     string         // assistant content delta, if any
-	ToolCalls []ToolCallDelta // tool call deltas, if any
-	FinishReason string      // "stop", "tool_calls", etc.
-	Usage     *Usage         // populated on the final chunk when include_usage is on
-	Done      bool           // true once we see "[DONE]"
-	Extra     map[string]any // anything else we care to inspect later
+	Raw              []byte          // the verbatim JSON for re-emission to clients
+	Delta            string          // assistant content delta, if any
+	ReasoningDelta   string          // reasoning/thinking content delta, if any
+	ToolCalls        []ToolCallDelta // tool call deltas, if any
+	FinishReason     string          // "stop", "tool_calls", etc.
+	Usage            *Usage          // populated on the final chunk when include_usage is on
+	Done             bool            // true once we see "[DONE]"
+	Extra            map[string]any  // anything else we care to inspect later
 }
 
 // ToolCallDelta represents an incremental tool call from a streaming response.
@@ -231,8 +232,9 @@ func (c *Client) StreamChatRaw(ctx context.Context, body []byte) (<-chan Chunk,
 type rawChunk struct {
 	Choices []struct {
 		Delta struct {
-			Content   string           `json:"content"`
-			ToolCalls []ToolCallDelta  `json:"tool_calls,omitempty"`
+			Content          string          `json:"content"`
+			ReasoningContent string          `json:"reasoning_content,omitempty"`
+			ToolCalls        []ToolCallDelta `json:"tool_calls,omitempty"`
 		} `json:"delta"`
 		FinishReason *string `json:"finish_reason,omitempty"`
 	} `json:"choices"`
@@ -257,6 +259,7 @@ func decodeChunk(payload []byte) (Chunk, error) {
 	c := Chunk{Raw: append([]byte(nil), payload...), Usage: rc.Usage}
 	if len(rc.Choices) > 0 {
 		c.Delta = rc.Choices[0].Delta.Content
+		c.ReasoningDelta = rc.Choices[0].Delta.ReasoningContent
 		if len(rc.Choices[0].Delta.ToolCalls) > 0 {
 			c.ToolCalls = rc.Choices[0].Delta.ToolCalls
 		}
diff --git a/web/src/routes/chat/+page.svelte b/web/src/routes/chat/+page.svelte
index 042fc50..4fb9627 100644
--- a/web/src/routes/chat/+page.svelte
+++ b/web/src/routes/chat/+page.svelte
@@ -9,7 +9,7 @@
   import { renderMarkdown, renderStreamingMarkdown } from '$lib/markdown';
   import { consume, type StreamEvent } from '$lib/stream';
   import ModelPicker from './ModelPicker.svelte';
-  import ToolCallBlock from './ToolCallBlock.svelte';
+  import ProcessBlock, { type ProcessStep } from './ProcessBlock.svelte';
 
   // ── state ─────────────────────────────────────────────────────────────────
 
@@ -34,11 +34,10 @@
   let atBottom = true;
   let errorMsg = $state<string | null>(null);
 
-  // Tool call tracking during streaming — keyed by tool_call_id.
-  // Persists past streaming=false so the expandable widget renders on the
-  // finished assistant message.
-  let toolCalls = $state<Map<string, { name: string; args: string; result: string; done: boolean }>>(new Map());
-  let toolMsgId = $state<string | null>(null);
+  // Ordered process steps (reasoning + tool calls) for the active stream.
+  // Persists past streaming=false so ProcessBlock stays rendered.
+  let processSteps = $state<ProcessStep[]>([]);
+  let processMsgId = $state<string | null>(null);
 
 
   // ── spin cursor (crush-style cycling glyphs) ──────────────────────────────
@@ -281,8 +280,8 @@
     streamFirstTokenMs = 0;
     streamElapsedMs = 0;
     streamLiveTokens = 0;
-    toolCalls = new Map();
-    toolMsgId = null;
+    processSteps = [];
+    processMsgId = null;
 
     // Seed the placeholder message in Dexie so the spinner appears immediately.
     const now = Math.floor(Date.now() / 1000);
@@ -368,42 +367,43 @@
           });
         }
 
+        if (ev.type === 'reasoning' && ev.content) {
+          if (!processMsgId) processMsgId = assistantId;
+          const last = processSteps.at(-1);
+          if (last?.type === 'reasoning') {
+            last.content += ev.content as string;
+            processSteps = [...processSteps];
+          } else {
+            processSteps = [...processSteps, { type: 'reasoning', content: ev.content as string }];
+          }
+        }
+
         if (ev.type === 'tool_call') {
-          if (!toolMsgId) toolMsgId = assistantId;
-          const tcId = (ev as any).id as string || uuid();
-          toolCalls.set(tcId, {
+          if (!processMsgId) processMsgId = assistantId;
+          processSteps = [...processSteps, {
+            type: 'tool',
+            id: ((ev as any).id as string) || uuid(),
             name: ((ev as any).name as string) || 'tool',
             args: ((ev as any).arguments as string) || '',
             result: '',
             done: false
-          });
-          toolCalls = new Map(toolCalls);
+          }];
         }
 
         if (ev.type === 'tool_result') {
           const tcId = ((ev as any).tool_call_id as string) || '';
-          const existing = tcId ? toolCalls.get(tcId) : null;
-          if (existing) {
-            toolCalls.set(tcId, { ...existing, result: ((ev as any).content as string) || '', done: true });
-          } else {
-            let matched = false;
-            for (const [id, tc] of toolCalls) {
-              if (!tc.done) {
-                toolCalls.set(id, { ...tc, result: ((ev as any).content as string) || '', done: true });
-                matched = true;
-                break;
-              }
-            }
-            if (!matched) {
-              toolCalls.set(tcId || uuid(), {
-                name: 'tool',
-                args: '',
-                result: ((ev as any).content as string) || '',
-                done: true
-              });
-            }
+          const result = ((ev as any).content as string) || '';
+          const idx = tcId
+            ? processSteps.findIndex((s) => s.type === 'tool' && s.id === tcId)
+            : processSteps.findLastIndex((s) => s.type === 'tool' && !s.done);
+          if (idx >= 0) {
+            const step = processSteps[idx] as Extract<ProcessStep, { type: 'tool' }>;
+            processSteps = [
+              ...processSteps.slice(0, idx),
+              { ...step, result, done: true },
+              ...processSteps.slice(idx + 1)
+            ];
           }
-          toolCalls = new Map(toolCalls);
         }
 
         if (ev.type === 'done' || ev.type === 'error') {
@@ -461,8 +461,8 @@
     streaming = true;
     atBottom = true;
     errorMsg = null;
-    toolCalls = new Map();
-    toolMsgId = null;
+    processSteps = [];
+    processMsgId = null;
 
     streamStartMs = Date.now();
     streamFirstTokenMs = 0;
@@ -702,8 +702,8 @@
           <div class="msg assistant">
             <div class="assistant-body">
               <div class="assistant-bubble" class:pending={msg.pending}>
-                {#if msg.id === toolMsgId && toolCalls.size > 0}
-                  <ToolCallBlock {toolCalls} />
+                {#if msg.id === processMsgId && processSteps.length > 0}
+                  <ProcessBlock steps={processSteps} streaming={msg.id === streamingMsgId} />
                 {/if}
                 {#if msg.id === streamingMsgId}
                   {@html renderStreamingMarkdown(msg.content)}
diff --git a/web/src/routes/chat/ProcessBlock.svelte b/web/src/routes/chat/ProcessBlock.svelte
new file mode 100644
index 0000000..2a984a2
--- /dev/null
+++ b/web/src/routes/chat/ProcessBlock.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+  export type ProcessStep =
+    | { type: 'reasoning'; content: string }
+    | { type: 'tool'; id: string; name: string; args: string; result: string; done: boolean };
+
+  let {
+    steps,
+    streaming = false
+  }: {
+    steps: ProcessStep[];
+    streaming?: boolean;
+  } = $props();
+
+  let open = $state(false);
+
+  const toolSteps = $derived(steps.filter((s): s is Extract<ProcessStep, { type: 'tool' }> => s.type === 'tool'));
+  const hasReasoning = $derived(steps.some((s) => s.type === 'reasoning'));
+  const runningTool = $derived(toolSteps.find((t) => !t.done));
+  const toolNames = $derived([...new Set(toolSteps.map((t) => t.name))]);
+
+  function summary() {
+    if (streaming) {
+      if (runningTool) return `running ${runningTool.name}…`;
+      return 'thinking…';
+    }
+    const parts: string[] = [];
+    if (hasReasoning && toolSteps.length === 0) return 'thought';
+    if (hasReasoning) parts.push('thought');
+    if (toolNames.length > 0) parts.push(`used ${toolNames.join(', ')}`);
+    return parts.join(' · ') || 'done';
+  }
+</script>
+
+<div class="process-block">
+  <button class="process-bar" onclick={() => (open = !open)} aria-expanded={open}>
+    <span class="process-bar-left">
+      {#if streaming}
+        <span class="process-spin"></span>
+      {:else}
+        <span class="process-check">✓</span>
+      {/if}
+      <span class="process-label">{summary()}</span>
+    </span>
+    <svg class="process-chevron" class:open width="10" height="6" viewBox="0 0 10 6" fill="none">
+      <path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </button>
+
+  {#if open}
+    <div class="process-body">
+      {#each steps as step, i (i)}
+        {#if step.type === 'reasoning'}
+          <p class="process-thought">{step.content}</p>
+        {:else}
+          <div class="process-tool" class:tool-pending={!step.done}>
+            <div class="process-tool-head">
+              {#if step.done}
+                <span class="tool-check">✓</span>
+              {:else}
+                <span class="tool-spin"></span>
+              {/if}
+              <span class="tool-name">{step.name}</span>
+            </div>
+            {#if step.args}
+              <details class="tool-section">
+                <summary>args</summary>
+                <pre class="tool-pre">{step.args}</pre>
+              </details>
+            {/if}
+            {#if step.result}
+              <details class="tool-section" open>
+                <summary>result</summary>
+                <pre class="tool-pre">{step.result}</pre>
+              </details>
+            {/if}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .process-block {
+    margin-bottom: 0.65rem;
+    border: 1px solid var(--border);
+    border-radius: 0.45rem;
+    overflow: hidden;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+  }
+
+  .process-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.42rem 0.65rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-muted);
+    gap: 0.5rem;
+    text-align: left;
+    transition: background 60ms;
+  }
+  .process-bar:hover {
+    background: color-mix(in srgb, var(--border) 40%, transparent);
+  }
+  .process-bar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    min-width: 0;
+    overflow: hidden;
+  }
+  .process-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.68rem;
+  }
+  .process-chevron {
+    flex-shrink: 0;
+    opacity: 0.4;
+    transition: transform 0.15s;
+    color: var(--text-muted);
+  }
+  .process-chevron.open {
+    transform: rotate(180deg);
+  }
+  .process-check {
+    color: var(--accent);
+    font-size: 0.68rem;
+    flex-shrink: 0;
+  }
+
+  .process-body {
+    border-top: 1px solid var(--border);
+    padding: 0.55rem 0.7rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  /* ── reasoning prose ─────────────────────────────────── */
+  .process-thought {
+    margin: 0;
+    font-size: 0.66rem;
+    line-height: 1.6;
+    color: var(--text-faint);
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-style: italic;
+    padding: 0.1rem 0;
+  }
+
+  /* ── tool entry ──────────────────────────────────────── */
+  .process-tool {
+    border: 1px solid var(--border);
+    border-radius: 0.35rem;
+    overflow: hidden;
+  }
+  .process-tool.tool-pending {
+    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+  }
+  .process-tool-head {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.5rem;
+    background: color-mix(in srgb, var(--border) 25%, transparent);
+    font-weight: 500;
+    font-size: 0.68rem;
+    color: var(--text-muted);
+  }
+
+  .tool-name { text-transform: capitalize; }
+  .tool-check {
+    color: var(--accent);
+    font-size: 0.65rem;
+    flex-shrink: 0;
+  }
+
+  .tool-section {
+    font-size: 0.63rem;
+    border-top: 1px solid var(--border);
+  }
+  .tool-section > summary {
+    cursor: pointer;
+    color: var(--text-faint);
+    opacity: 0.7;
+    padding: 0.2rem 0.5rem;
+    user-select: none;
+  }
+  .tool-section > summary:hover { opacity: 1; }
+  .tool-pre {
+    margin: 0;
+    padding: 0.35rem 0.5rem;
+    background: color-mix(in srgb, var(--bg-page) 60%, transparent);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+    color: var(--text);
+    font-size: 0.61rem;
+    line-height: 1.45;
+    border-top: 1px solid var(--border);
+  }
+
+  /* ── spinners ────────────────────────────────────────── */
+  .process-spin,
+  .tool-spin {
+    border-radius: 50%;
+    animation: spin 0.65s linear infinite;
+    flex-shrink: 0;
+  }
+  .process-spin {
+    width: 0.55rem;
+    height: 0.55rem;
+    border: 1.25px solid var(--text-muted);
+    border-top-color: transparent;
+    opacity: 0.6;
+  }
+  .tool-spin {
+    width: 0.5rem;
+    height: 0.5rem;
+    border: 1.25px solid var(--accent);
+    border-top-color: transparent;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+</style>
diff --git a/web/src/routes/chat/ReasoningBlock.svelte b/web/src/routes/chat/ReasoningBlock.svelte
new file mode 100644
index 0000000..976d62a
--- /dev/null
+++ b/web/src/routes/chat/ReasoningBlock.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  let {
+    reasoning,
+    streaming = false
+  }: {
+    reasoning: string;
+    streaming?: boolean;
+  } = $props();
+
+  let open = $state(false);
+
+  // Auto-expand while actively streaming reasoning; collapse when done.
+  $effect(() => {
+    if (streaming) open = true;
+    else open = false;
+  });
+</script>
+
+<div class="reasoning-block">
+  <button
+    class="reasoning-summary"
+    onclick={() => (open = !open)}
+    aria-expanded={open}
+  >
+    <span class="reasoning-summary-left">
+      {#if streaming}
+        <span class="reasoning-spinner"></span>
+        <span class="reasoning-label">thinking…</span>
+      {:else}
+        <span class="reasoning-icon">~</span>
+        <span class="reasoning-label">thought</span>
+      {/if}
+    </span>
+    <svg class="reasoning-chevron" class:reasoning-chevron-open={open} width="10" height="6" viewBox="0 0 10 6" fill="none">
+      <path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </button>
+
+  {#if open}
+    <div class="reasoning-body">
+      <pre class="reasoning-pre">{reasoning}</pre>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .reasoning-block {
+    margin-bottom: 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--text-faint) 30%, transparent);
+    border-radius: 0.45rem;
+    overflow: hidden;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+  }
+
+  .reasoning-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    background: color-mix(in srgb, var(--text-faint) 4%, transparent);
+    border: none;
+    cursor: pointer;
+    color: var(--text-faint);
+    gap: 0.5rem;
+  }
+  .reasoning-summary:hover {
+    background: color-mix(in srgb, var(--text-faint) 8%, transparent);
+  }
+
+  .reasoning-summary-left {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .reasoning-label {
+    font-size: 0.68rem;
+    opacity: 0.75;
+  }
+
+  .reasoning-icon {
+    font-size: 0.7rem;
+    opacity: 0.5;
+  }
+
+  .reasoning-chevron {
+    flex-shrink: 0;
+    opacity: 0.35;
+    transition: transform 0.15s;
+    color: var(--text-faint);
+  }
+  .reasoning-chevron-open {
+    transform: rotate(180deg);
+  }
+
+  .reasoning-body {
+    border-top: 1px solid color-mix(in srgb, var(--text-faint) 12%, transparent);
+    background: color-mix(in srgb, var(--text-faint) 2%, transparent);
+    padding: 0.5rem 0.65rem;
+  }
+
+  .reasoning-pre {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    line-height: 1.55;
+    color: var(--text-faint);
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .reasoning-spinner {
+    width: 0.55rem;
+    height: 0.55rem;
+    border: 1.25px solid var(--text-faint);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: reasoning-spin 0.7s linear infinite;
+    flex-shrink: 0;
+    opacity: 0.6;
+  }
+  @keyframes reasoning-spin {
+    to { transform: rotate(360deg); }
+  }
+</style>