feat: inline tool display and thinking/reasoning support

- Tool calls now appear at their stream position within messages (ContentSegment model)
- Added reasoning/thinking display: collapsible <details> block above content
- Set DeepSeek V4 Flash reasoningEffort to max via providerOptions
- ChatMessage.content changed from string to ContentSegment[] (text | tool-call)
- Agent handles AI SDK reasoning events, yields reasoning-delta
- Fixed duplicate key in ChatMessage.svelte each block

1 files changed, 106 insertions, 51 deletions

diff --git a/packages/frontend/tests/chat-store.test.ts b/packages/frontend/tests/chat-store.test.ts
index de988a2..11b7deb 100644
--- a/packages/frontend/tests/chat-store.test.ts
+++ b/packages/frontend/tests/chat-store.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import type { AgentEvent } from "../src/lib/types.js";
+import type { AgentEvent, ContentSegment } from "../src/lib/types.js";
 
 // We test the logic inline since runes require svelte compilation context.
 // The chat store logic is tested via a plain reimplementation of the same logic.
@@ -8,20 +8,11 @@ function generateId() {
 	return Math.random().toString(36).slice(2, 11);
 }
 
-interface ToolCallDisplay {
-	id: string;
-	name: string;
-	arguments: Record<string, unknown>;
-	result?: string;
-	isError?: boolean;
-	isExpanded: boolean;
-}
-
 interface ChatMessage {
 	id: string;
 	role: "user" | "assistant";
-	content: string;
-	toolCalls?: ToolCallDisplay[];
+	content: ContentSegment[];
+	thinking?: string;
 	isStreaming?: boolean;
 }
 
@@ -44,8 +35,8 @@ function createTestStore() {
 			const newMsg: ChatMessage = {
 				id,
 				role: "assistant",
-				content: "",
-				toolCalls: [],
+				content: [],
+				thinking: "",
 				isStreaming: true,
 			};
 			messages = [...messages, newMsg];
@@ -63,15 +54,28 @@ function createTestStore() {
 				}
 				break;
 			}
+			case "reasoning-delta": {
+				ensureCurrentAssistantMessage();
+				messages = messages.map((m) => {
+					if (m.id === currentAssistantId) {
+						return { ...m, thinking: (m.thinking ?? "") + event.delta };
+					}
+					return m;
+				});
+				break;
+			}
 			case "text-delta": {
 				ensureCurrentAssistantMessage();
 				messages = messages.map((m) => {
 					if (m.id === currentAssistantId) {
-						return {
-							...m,
-							content: m.content + event.delta,
-							isStreaming: true,
-						};
+						const segments = [...m.content];
+						const last = segments[segments.length - 1];
+						if (last && last.type === "text") {
+							segments[segments.length - 1] = { ...last, text: last.text + event.delta };
+						} else {
+							segments.push({ type: "text", text: event.delta });
+						}
+						return { ...m, content: segments, isStreaming: true };
 					}
 					return m;
 				});
@@ -79,15 +83,19 @@ function createTestStore() {
 			}
 			case "tool-call": {
 				ensureCurrentAssistantMessage();
-				const toolCall: ToolCallDisplay = {
-					id: event.toolCall.id,
-					name: event.toolCall.name,
-					arguments: event.toolCall.arguments,
-					isExpanded: false,
-				};
 				messages = messages.map((m) => {
 					if (m.id === currentAssistantId) {
-						return { ...m, toolCalls: [...(m.toolCalls ?? []), toolCall] };
+						const segments: ContentSegment[] = [
+							...m.content,
+							{
+								type: "tool-call",
+								id: event.toolCall.id,
+								name: event.toolCall.name,
+								arguments: event.toolCall.arguments,
+								isExpanded: false,
+							},
+						];
+						return { ...m, content: segments };
 					}
 					return m;
 				});
@@ -98,15 +106,11 @@ function createTestStore() {
 					if (m.id === currentAssistantId) {
 						return {
 							...m,
-							toolCalls: (m.toolCalls ?? []).map((tc) => {
-								if (tc.id === event.toolResult.toolCallId) {
-									return {
-										...tc,
-										result: event.toolResult.result,
-										isError: event.toolResult.isError,
-									};
+							content: m.content.map((seg) => {
+								if (seg.type === "tool-call" && seg.id === event.toolResult.toolCallId) {
+									return { ...seg, result: event.toolResult.result, isError: event.toolResult.isError };
 								}
-								return tc;
+								return seg;
 							}),
 						};
 					}
@@ -117,7 +121,7 @@ function createTestStore() {
 			case "done": {
 				messages = messages.map((m) => {
 					if (m.id === currentAssistantId) {
-						return { ...m, content: event.message.content, isStreaming: false };
+						return { ...m, isStreaming: false };
 					}
 					return m;
 				});
@@ -130,7 +134,7 @@ function createTestStore() {
 					{
 						id: generateId(),
 						role: "assistant",
-						content: `Error: ${event.error}`,
+						content: [{ type: "text", text: `Error: ${event.error}` }] as ContentSegment[],
 						isStreaming: false,
 					},
 				];
@@ -145,7 +149,7 @@ function createTestStore() {
 		const userMsg: ChatMessage = {
 			id: generateId(),
 			role: "user",
-			content: text,
+			content: [{ type: "text", text }],
 		};
 		messages = [...messages, userMsg];
 		currentAssistantId = null;
@@ -186,33 +190,45 @@ describe("chat store logic", () => {
 		store.sendMessage("hello");
 		expect(store.messages).toHaveLength(1);
 		expect(store.messages[0]?.role).toBe("user");
-		expect(store.messages[0]?.content).toBe("hello");
+		expect(store.messages[0]?.content).toEqual([{ type: "text", text: "hello" }]);
 	});
 
 	it("text-delta creates a streaming assistant message and appends deltas", () => {
 		store.handleEvent({ type: "text-delta", delta: "Hello" });
 		expect(store.messages).toHaveLength(1);
 		expect(store.messages[0]?.role).toBe("assistant");
-		expect(store.messages[0]?.content).toBe("Hello");
+		expect(store.messages[0]?.content).toEqual([{ type: "text", text: "Hello" }]);
 		expect(store.messages[0]?.isStreaming).toBe(true);
 
 		store.handleEvent({ type: "text-delta", delta: " world" });
-		expect(store.messages[0]?.content).toBe("Hello world");
+		expect(store.messages[0]?.content).toEqual([{ type: "text", text: "Hello world" }]);
 	});
 
-	it("tool-call adds to current assistant message toolCalls", () => {
+	it("text-delta appends to last text segment in same segment", () => {
+		store.handleEvent({ type: "text-delta", delta: "A" });
+		store.handleEvent({ type: "text-delta", delta: "B" });
+		// Should be one text segment, not two
+		expect(store.messages[0]?.content).toHaveLength(1);
+		expect(store.messages[0]?.content[0]).toEqual({ type: "text", text: "AB" });
+	});
+
+	it("tool-call inserts as a segment after text", () => {
 		store.handleEvent({ type: "text-delta", delta: "Calling tool..." });
 		store.handleEvent({
 			type: "tool-call",
 			toolCall: { id: "tc1", name: "search", arguments: { query: "test" } },
 		});
-		const msg = store.messages[0];
-		expect(msg?.toolCalls).toHaveLength(1);
-		expect(msg?.toolCalls?.[0]?.name).toBe("search");
-		expect(msg?.toolCalls?.[0]?.id).toBe("tc1");
+		const content = store.messages[0]?.content;
+		expect(content).toHaveLength(2);
+		expect(content?.[0]?.type).toBe("text");
+		expect(content?.[1]?.type).toBe("tool-call");
+		if (content?.[1]?.type === "tool-call") {
+			expect(content[1].name).toBe("search");
+			expect(content[1].id).toBe("tc1");
+		}
 	});
 
-	it("tool-result fills in result on matching tool call", () => {
+	it("tool-result fills in result on matching tool-call segment", () => {
 		store.handleEvent({ type: "text-delta", delta: "..." });
 		store.handleEvent({
 			type: "tool-call",
@@ -222,9 +238,38 @@ describe("chat store logic", () => {
 			type: "tool-result",
 			toolResult: { toolCallId: "tc1", result: "found it", isError: false },
 		});
-		const tc = store.messages[0]?.toolCalls?.[0];
-		expect(tc?.result).toBe("found it");
-		expect(tc?.isError).toBe(false);
+		const tc = store.messages[0]?.content[1];
+		if (tc?.type === "tool-call") {
+			expect(tc.result).toBe("found it");
+			expect(tc.isError).toBe(false);
+		}
+	});
+
+	it("tool-call goes after previous tool-call, preserving both", () => {
+		store.handleEvent({
+			type: "tool-call",
+			toolCall: { id: "tc1", name: "read", arguments: {} },
+		});
+		store.handleEvent({
+			type: "tool-call",
+			toolCall: { id: "tc2", name: "write", arguments: {} },
+		});
+		const content = store.messages[0]?.content;
+		expect(content).toHaveLength(2);
+		expect(content?.[0]?.type).toBe("tool-call");
+		expect(content?.[1]?.type).toBe("tool-call");
+	});
+
+	it("text after tool-call creates new text segment", () => {
+		store.handleEvent({
+			type: "tool-call",
+			toolCall: { id: "tc1", name: "read", arguments: {} },
+		});
+		store.handleEvent({ type: "text-delta", delta: "Result: here" });
+		const content = store.messages[0]?.content;
+		expect(content).toHaveLength(2);
+		expect(content?.[0]?.type).toBe("tool-call");
+		expect(content?.[1]).toEqual({ type: "text", text: "Result: here" });
 	});
 
 	it("done finalizes the current assistant message", () => {
@@ -233,14 +278,14 @@ describe("chat store logic", () => {
 			type: "done",
 			message: { role: "assistant", content: "full content" },
 		});
-		expect(store.messages[0]?.content).toBe("full content");
+		expect(store.messages[0]?.content).toEqual([{ type: "text", text: "partial" }]);
 		expect(store.messages[0]?.isStreaming).toBe(false);
 	});
 
 	it("error event adds an error message and sets status to error", () => {
 		store.handleEvent({ type: "error", error: "something went wrong" });
 		expect(store.messages).toHaveLength(1);
-		expect(store.messages[0]?.content).toBe("Error: something went wrong");
+		expect(store.messages[0]?.content).toEqual([{ type: "text", text: "Error: something went wrong" }]);
 		expect(store.agentStatus).toBe("error");
 	});
 
@@ -258,4 +303,14 @@ describe("chat store logic", () => {
 		expect(store.messages).toHaveLength(0);
 		expect(store.agentStatus).toBe("idle");
 	});
+
+	it("reasoning-delta accumulates thinking text on current assistant message", () => {
+		store.handleEvent({ type: "reasoning-delta", delta: "First thought." });
+		expect(store.messages).toHaveLength(1);
+		expect(store.messages[0]?.role).toBe("assistant");
+		expect(store.messages[0]?.thinking).toBe("First thought.");
+
+		store.handleEvent({ type: "reasoning-delta", delta: " Second thought." });
+		expect(store.messages[0]?.thinking).toBe("First thought. Second thought.");
+	});
 });