ios: add tool call stacking

web: tool stacking ui
fix most web_fetches from getting blocked using a real user agent
2026-06-12 00:26:21 -07:00 · 2026-06-12 00:09:44 -07:00 · 2026-06-11 23:36:19 -07:00 · 2026-06-07 19:58:04 -07:00 · 2026-06-05 23:19:14 -07:00 · 2026-06-05 22:20:56 -07:00
27 changed files with 1580 additions and 251 deletions
--- a/docs/api/rest.md
+++ b/docs/api/rest.md
@@ -299,7 +299,7 @@ Behavior notes:
 - For `anthropic`, image attachments are sent as Messages API `image` blocks using base64 source data; text attachments are added as `text` blocks.
 - Available Sybil-managed tool calls for `openai` and `xai`: `web_search` and `fetch_url`. When `CHAT_CODEX_TOOL_ENABLED=true`, `codex_exec` is also available. When `CHAT_SHELL_TOOL_ENABLED=true`, `shell_exec` is also available.
 - `web_search` returns ranked results with per-result summaries/snippets. Its backend engine is selected by `CHAT_WEB_SEARCH_ENGINE` (`exa` default, or `searxng` with `SEARXNG_BASE_URL` set). SearXNG mode requires the instance to allow `format=json`.
- `fetch_url` fetches a URL and returns plaintext page content (HTML converted to text server-side).
+- `fetch_url` fetches a URL with browser-like navigation headers and returns plaintext page content (HTML converted to text server-side).
 - `codex_exec` delegates coding, shell, repository inspection, and other complex software tasks to a persistent remote Codex CLI workspace over SSH. The server runs `codex exec --dangerously-bypass-approvals-and-sandbox --skip-git-repo-check <non-interactive wrapped prompt>` on the configured devbox inside `CHAT_CODEX_REMOTE_WORKDIR`, with SSH stdin closed.
 - `shell_exec` runs arbitrary non-interactive shell commands on the same configured devbox, starting in `CHAT_CODEX_REMOTE_WORKDIR`. It uses `bash -lc` when bash exists, otherwise `sh -lc`, closes SSH stdin, and does not run inside the Sybil server container.
 - Devbox tool configuration:
@@ -314,7 +314,7 @@ Behavior notes:
  - `CHAT_CODEX_SSH_PRIVATE_KEY_B64=<base64-private-key>` (optional fallback when a volume mount is not practical)
  - `CHAT_CODEX_EXEC_TIMEOUT_MS=600000` (optional)
  - `CHAT_SHELL_EXEC_TIMEOUT_MS=120000` (optional)
- When a tool call is executed, backend stores a chat `Message` with `role: "tool"` and tool metadata (`metadata.kind = "tool_call"`). Streaming requests persist each completed tool call as its SSE `tool_call` event is emitted, then store the assistant output when the completion finishes.
+- When a tool call is executed, backend stores a chat `Message` with `role: "tool"` and tool metadata (`metadata.kind = "tool_call"`). Streaming requests emit an initiated SSE `tool_call` event before execution, then persist each completed or failed tool call as its terminal SSE `tool_call` event is emitted, then store the assistant output when the completion finishes.
 - `anthropic` currently runs without server-managed tool calls.

 ## Searches
--- a/docs/api/streaming-chat.md
+++ b/docs/api/streaming-chat.md
@@ -91,6 +91,8 @@ Event order:
 3. Zero or more `delta`
 4. Exactly one terminal event: `done` or `error`

+Each tool invocation can emit multiple `tool_call` events with the same `toolCallId`. The backend emits `status: "initiated"` before the tool starts executing, then emits `status: "completed"` or `status: "failed"` when execution finishes. Clients should upsert by `toolCallId` instead of appending each event.
+
 ### `meta`

 ```json
@@ -115,6 +117,19 @@ For `persist: false` streams, `chatId` and `callId` are `null`.

 ### `tool_call`

+```json
+{
+  "toolCallId": "call_123",
+  "name": "web_search",
+  "status": "initiated",
+  "summary": "Searching web for 'latest CPI release'.",
+  "args": { "query": "latest CPI release" },
+  "startedAt": "2026-03-02T10:00:00.000Z"
+}
+```
+
+Terminal tool-call event:
+
 ```json
 {
  "toolCallId": "call_123",
@@ -125,11 +140,12 @@ For `persist: false` streams, `chatId` and `callId` are `null`.
  "startedAt": "2026-03-02T10:00:00.000Z",
  "completedAt": "2026-03-02T10:00:00.820Z",
  "durationMs": 820,
-  "error": null,
  "resultPreview": "{\"ok\":true,...}"
 }
 ```

+`status` is one of `initiated`, `completed`, or `failed`. `completedAt` and `durationMs` are only present on terminal events. `error` is present on failed terminal events; `resultPreview` is present on terminal events when available.
+
 ### `done`

 ```json
@@ -156,6 +172,7 @@ For `persist: false` streams, `chatId` and `callId` are `null`.

 - `openai`: backend uses OpenAI's Responses API and may execute internal function tool calls (`web_search`, `fetch_url`, optional `codex_exec`, and optional `shell_exec`) before producing final text.
 - `xai`: backend uses xAI's OpenAI-compatible Chat Completions API and may execute the same internal tool calls before producing final text.
+- `fetch_url` sends browser-like navigation headers for outbound URL requests to reduce false 403s from sites that reject generic server clients.
 - `hermes-agent`: backend uses the configured Hermes Agent OpenAI-compatible Chat Completions API. Sybil does not add its own tool definitions for this provider; Hermes Agent handles its own tools server-side. Custom Hermes stream events are normalized away unless they produce text deltas in this SSE contract.
 - `openai`: image attachments are sent as Responses `input_image` items; text attachments are sent as `input_text` items.
 - `xai` and `hermes-agent`: image attachments are sent as Chat Completions content parts; text attachments are inlined as text parts.
@@ -178,7 +195,8 @@ Backend database remains source of truth.

 For persisted streams:
 - Client may optimistically render accumulated `delta` text.
- Backend persists each completed tool call as a `tool` message before emitting its `tool_call` SSE event, so chat detail refreshes can show completed tool calls while the assistant response is still running.
+- Backend emits initiated tool-call events without persisting them.
+- Backend persists each completed or failed tool call as a `tool` message before emitting its terminal `tool_call` SSE event, so chat detail refreshes can show completed tool calls while the assistant response is still running.

 On successful persisted completion:
 - Backend persists assistant `Message` and updates `LlmCall` usage/latency in a transaction.
--- a/ios/.env.example
+++ b/ios/.env.example
@@ -0,0 +1,20 @@
+FASTLANE_APP_IDENTIFIER=net.buzzert.sybil2
+FASTLANE_TEAM_ID=DQQH5H6GBD
+FASTLANE_USER=you@example.com
+FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD=xxxx-xxxx-xxxx-xxxx
+FASTLANE_SKIP_UPDATE_CHECK=1
+FASTLANE_HIDE_CHANGELOG=1
+SYBIL_APP_STORE_APPLE_ID=6759442828
+SYBIL_PROVIDER_PUBLIC_ID=c043d167-ad88-4036-84ea-76c223f1b1b2
+
+# Optional App Store Connect API key settings for non-interactive upload and
+# TestFlight build-number lookup.
+APP_STORE_CONNECT_API_KEY_ID=
+APP_STORE_CONNECT_API_ISSUER_ID=
+APP_STORE_CONNECT_API_KEY_PATH=
+APP_STORE_CONNECT_API_KEY_CONTENT=
+APP_STORE_CONNECT_API_KEY_CONTENT_BASE64=false
+
+# Optional deployment overrides.
+SYBIL_BUILD_NUMBER=
+SYBIL_VERSION_TAG=
--- a/ios/.gitignore
+++ b/ios/.gitignore
@@ -1,2 +1,11 @@
 *.xcodeproj
-
+.env
+.env.*
+!.env.example
+build/
+*.ipa
+*.dSYM.zip
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots/
+fastlane/test_output/
--- a/ios/Apps/Sybil/project.yml
+++ b/ios/Apps/Sybil/project.yml
@@ -24,8 +24,8 @@ targets:
        GENERATE_INFOPLIST_FILE: YES
        INFOPLIST_FILE: Apps/Sybil/Info.plist
        ASSETCATALOG_COMPILER_APPICON_NAME: AppIcon
-        MARKETING_VERSION: 1.9
-        CURRENT_PROJECT_VERSION: 10
+        MARKETING_VERSION: "1.10"
+        CURRENT_PROJECT_VERSION: 11
        INFOPLIST_KEY_CFBundleDisplayName: Sybil
        INFOPLIST_KEY_ITSAppUsesNonExemptEncryption: NO
        INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents: YES
--- a/ios/Gemfile
+++ b/ios/Gemfile
@@ -0,0 +1,3 @@
+source "https://rubygems.org"
+
+gem "fastlane", "~> 2.227"
--- a/ios/Packages/Sybil/Sources/Sybil/SybilChatTranscriptView.swift
+++ b/ios/Packages/Sybil/Sources/Sybil/SybilChatTranscriptView.swift
@@ -7,39 +7,107 @@ struct SybilChatTranscriptView: View {
    var isSending: Bool
    var topContentInset: CGFloat = 0
    var bottomContentInset: CGFloat = 0
+    var bottomPinRequestID: Int = 0

-    private var hasPendingAssistant: Bool {
-        messages.contains { message in
-            message.id.hasPrefix("temp-assistant-") && message.content.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
-        }
+    private let bottomAnchorID = "sybil-chat-transcript-bottom-anchor"
+    private var renderItems: [TranscriptRenderItem] {
+        buildTranscriptRenderItems(from: messages)
    }

    var body: some View {
-        ScrollView {
-            LazyVStack(alignment: .leading, spacing: 26) {
-                ForEach(messages.reversed()) { message in
-                    MessageBubble(message: message, isSending: isSending)
-                        .frame(maxWidth: .infinity)
-                        .scaleEffect(x: 1, y: -1)
-                }
+        ScrollViewReader { proxy in
+            ScrollView {
+                LazyVStack(alignment: .leading, spacing: 26) {
+                    if isLoading && messages.isEmpty {
+                        Text("Loading messages…")
+                            .font(.sybil(.footnote))
+                            .foregroundStyle(SybilTheme.textMuted)
+                            .padding(.top, 24)
+                    }

-                if isLoading && messages.isEmpty {
-                    Text("Loading messages…")
-                        .font(.sybil(.footnote))
-                        .foregroundStyle(SybilTheme.textMuted)
-                        .padding(.top, 24)
-                        .scaleEffect(x: 1, y: -1)
+                    ForEach(renderItems) { item in
+                        switch item {
+                        case let .message(message):
+                            MessageBubble(message: message, isSending: isSending)
+                                .frame(maxWidth: .infinity)
+                        case let .toolGroup(id, messages):
+                            ToolCallStackView(groupID: id, messages: messages)
+                                .frame(maxWidth: .infinity)
+                                .id(id)
+                        }
+                    }
+
+                    Color.clear
+                        .frame(height: 18 + bottomContentInset)
+                        .id(bottomAnchorID)
                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.horizontal, 14)
+                .padding(.top, 18 + topContentInset)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
-            .padding(.horizontal, 14)
-            .padding(.top, 18 + bottomContentInset)
-            .padding(.bottom, 18 + topContentInset)
+            .scrollDismissesKeyboard(.interactively)
+            .onAppear {
+                scrollToBottom(with: proxy, animated: false)
+            }
+            .onChange(of: bottomPinRequestID) { _, _ in
+                scrollToBottom(with: proxy, animated: true)
+            }
        }
-        .frame(maxWidth: .infinity, alignment: .leading)
-        .scrollDismissesKeyboard(.interactively)
-        .scaleEffect(x: 1, y: -1)
    }
+
+    private func scrollToBottom(with proxy: ScrollViewProxy, animated: Bool) {
+        let action = {
+            proxy.scrollTo(bottomAnchorID, anchor: .bottom)
+        }
+
+        if animated {
+            withAnimation(.easeOut(duration: 0.18), action)
+        } else {
+            action()
+        }
+    }
+}
+
+enum TranscriptRenderItem: Identifiable {
+    case message(Message)
+    case toolGroup(id: String, messages: [Message])
+
+    var id: String {
+        switch self {
+        case let .message(message):
+            return message.id
+        case let .toolGroup(id, _):
+            return "tool-group-\(id)"
+        }
+    }
+}
+
+func buildTranscriptRenderItems(from messages: [Message]) -> [TranscriptRenderItem] {
+    var items: [TranscriptRenderItem] = []
+    var toolRun: [Message] = []
+
+    func flushToolRun() {
+        guard !toolRun.isEmpty else { return }
+        if toolRun.count == 1, let message = toolRun.first {
+            items.append(.message(message))
+        } else if let first = toolRun.first {
+            items.append(.toolGroup(id: first.id, messages: toolRun))
+        }
+        toolRun.removeAll(keepingCapacity: true)
+    }
+
+    for message in messages {
+        if message.toolCallMetadata != nil {
+            toolRun.append(message)
+        } else {
+            flushToolRun()
+            items.append(.message(message))
+        }
+    }
+
+    flushToolRun()
+    return items
 }

 private struct MessageBubble: View {
@@ -137,10 +205,207 @@ private struct MessageBubble: View {
    }
 }

+private struct ToolCallStackView: View {
+    private struct CardLayout {
+        var x: CGFloat
+        var y: CGFloat
+        var scale: CGFloat
+        var opacity: Double
+        var zIndex: Double
+    }
+
+    var groupID: String
+    var messages: [Message]
+
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    @State private var isExpanded = false
+
+    private let visibleCollapsedLimit = 4
+    private let cardHeight: CGFloat = 62
+    private let expandedGap: CGFloat = 10
+    private let collapsedStepX: CGFloat = 11
+    private let collapsedStepY: CGFloat = 10
+    private let toggleSize: CGFloat = 32
+    private let toggleGap: CGFloat = 12
+
+    private var animation: Animation? {
+        reduceMotion ? nil : .easeInOut(duration: 0.34)
+    }
+
+    private var visibleCollapsedCount: Int {
+        min(messages.count, visibleCollapsedLimit)
+    }
+
+    private var hiddenCount: Int {
+        max(0, messages.count - visibleCollapsedLimit)
+    }
+
+    private var containerHeight: CGFloat {
+        if isExpanded {
+            return cardHeight + CGFloat(max(0, messages.count - 1)) * (cardHeight + expandedGap)
+        }
+        return cardHeight + CGFloat(max(0, visibleCollapsedCount - 1)) * collapsedStepY
+    }
+
+    private var accessibilityLabel: String {
+        "\(messages.count) tool \(messages.count == 1 ? "call" : "calls")"
+    }
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            GeometryReader { geometry in
+                let cardWidth = max(220, min(520, geometry.size.width - toggleSize - toggleGap))
+                let toggleX = cardWidth + toggleGap
+
+                ZStack(alignment: .topLeading) {
+                    ForEach(Array(messages.enumerated()), id: \.element.id) { index, message in
+                        let layout = layout(for: index)
+                        let depth = messages.count - index - 1
+                        let isHidden = !isExpanded && depth >= visibleCollapsedLimit
+
+                        ToolCallStackCard(message: message, cardHeight: cardHeight, compactLayout: true)
+                            .frame(width: cardWidth, height: cardHeight, alignment: .topLeading)
+                            .scaleEffect(layout.scale, anchor: .topLeading)
+                            .opacity(layout.opacity)
+                            .offset(x: layout.x, y: layout.y)
+                            .zIndex(layout.zIndex)
+                            .allowsHitTesting(!isHidden)
+                            .accessibilityHidden(isHidden)
+                    }
+
+                    if !isExpanded && hiddenCount > 0 {
+                        Text("+\(hiddenCount)")
+                            .font(.sybil(.caption2, weight: .semibold))
+                            .foregroundStyle(SybilTheme.accent.opacity(0.95))
+                            .padding(.horizontal, 7)
+                            .padding(.vertical, 3)
+                            .background(
+                                Capsule()
+                                    .fill(Color.black.opacity(0.58))
+                                    .overlay(
+                                        Capsule()
+                                            .stroke(SybilTheme.accent.opacity(0.34), lineWidth: 1)
+                                    )
+                            )
+                            .offset(x: max(0, cardWidth - 56), y: containerHeight - 13)
+                            .transition(.opacity)
+                    }
+
+                    Button {
+                        withAnimation(animation) {
+                            isExpanded.toggle()
+                        }
+                    } label: {
+                        Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
+                            .font(.system(size: 14, weight: .bold))
+                            .foregroundStyle(SybilTheme.accent.opacity(0.95))
+                            .frame(width: toggleSize, height: toggleSize)
+                            .background(
+                                Circle()
+                                    .fill(
+                                        LinearGradient(
+                                            colors: [
+                                                Color(red: 0.06, green: 0.08, blue: 0.15).opacity(0.96),
+                                                Color(red: 0.03, green: 0.04, blue: 0.10).opacity(0.96)
+                                            ],
+                                            startPoint: .top,
+                                            endPoint: .bottom
+                                        )
+                                    )
+                                    .overlay(
+                                        Circle()
+                                            .stroke(SybilTheme.accent.opacity(0.38), lineWidth: 1)
+                                    )
+                                    .shadow(color: Color.black.opacity(0.30), radius: 10, x: 0, y: 6)
+                            )
+                    }
+                    .buttonStyle(.plain)
+                    .accessibilityLabel("\(isExpanded ? "Collapse" : "Expand") \(accessibilityLabel)")
+                    .offset(x: toggleX, y: 8)
+                    .zIndex(Double(messages.count + 2))
+                }
+                .frame(width: cardWidth + toggleSize + toggleGap, height: containerHeight, alignment: .topLeading)
+                .animation(animation, value: isExpanded)
+            }
+            .frame(height: containerHeight)
+
+            Spacer(minLength: 0)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+
+    private func layout(for index: Int) -> CardLayout {
+        if isExpanded {
+            return CardLayout(
+                x: 0,
+                y: CGFloat(index) * (cardHeight + expandedGap),
+                scale: 1,
+                opacity: 1,
+                zIndex: Double(messages.count - index)
+            )
+        }
+
+        let depth = messages.count - index - 1
+        let visibleDepth = min(depth, visibleCollapsedLimit - 1)
+        let isHidden = depth >= visibleCollapsedLimit
+        return CardLayout(
+            x: CGFloat(visibleDepth) * collapsedStepX,
+            y: CGFloat(visibleDepth) * collapsedStepY,
+            scale: max(0.88, 1 - CGFloat(visibleDepth) * 0.035),
+            opacity: isHidden ? 0 : max(0.34, 1 - Double(visibleDepth) * 0.22),
+            zIndex: isHidden ? 0 : Double(visibleCollapsedCount - visibleDepth)
+        )
+    }
+}
+
+private struct ToolCallStackCard: View {
+    var message: Message
+    var cardHeight: CGFloat
+    var compactLayout: Bool
+
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    @State private var didEnter = false
+
+    var body: some View {
+        Group {
+            if let metadata = message.toolCallMetadata {
+                ToolCallActivityChip(
+                    metadata: metadata,
+                    fallbackContent: message.content,
+                    createdAt: message.createdAt,
+                    compactLayout: compactLayout
+                )
+            }
+        }
+            .frame(height: cardHeight, alignment: .top)
+            .scaleEffect(didEnter ? 1 : 1.025, anchor: .topLeading)
+            .offset(y: didEnter ? 0 : -8)
+            .rotation3DEffect(.degrees(didEnter ? 0 : 3), axis: (x: 1, y: 0, z: 0), anchor: .top)
+            .opacity(didEnter ? 1 : 0.72)
+            .onAppear {
+                guard !didEnter else { return }
+                if reduceMotion {
+                    didEnter = true
+                } else {
+                    withAnimation(.easeOut(duration: 0.32).delay(0.03)) {
+                        didEnter = true
+                    }
+                }
+            }
+    }
+}
+
 private struct ToolCallActivityChip: View {
+    enum VisualState {
+        case initiated
+        case completed
+        case failed
+    }
+
    var metadata: ToolCallMetadata
    var fallbackContent: String
    var createdAt: Date
+    var compactLayout: Bool = false

    private var summary: String {
        if let text = metadata.summary?.trimmingCharacters(in: .whitespacesAndNewlines), !text.isEmpty {
@@ -184,11 +449,22 @@ private struct ToolCallActivityChip: View {
    }

    private var isFailed: Bool {
-        (metadata.status ?? "").lowercased() == "failed"
+        visualState == .failed
+    }
+
+    private var visualState: VisualState {
+        switch (metadata.status ?? "").lowercased() {
+        case "failed":
+            return .failed
+        case "initiated":
+            return .initiated
+        default:
+            return .completed
+        }
    }

    private var detailLabel: String {
-        var pieces: [String] = [isFailed ? "Failed" : "Completed"]
+        var pieces: [String] = [stateLabel]
        if let durationMs = metadata.durationMs, durationMs > 0 {
            pieces.append("\(durationMs) ms")
        }
@@ -200,14 +476,14 @@ private struct ToolCallActivityChip: View {
        HStack(alignment: .top, spacing: 11) {
            ZStack {
                RoundedRectangle(cornerRadius: 9)
-                    .fill((isFailed ? SybilTheme.danger : SybilTheme.accent).opacity(0.13))
+                    .fill(iconColor.opacity(0.13))
                    .overlay(
                        RoundedRectangle(cornerRadius: 9)
-                            .stroke((isFailed ? SybilTheme.danger : SybilTheme.accent).opacity(0.34), lineWidth: 1)
+                            .stroke(iconColor.opacity(0.34), lineWidth: 1)
                    )
                Image(systemName: iconName)
                    .font(.system(size: 14, weight: .semibold))
-                    .foregroundStyle(isFailed ? SybilTheme.danger : SybilTheme.accent)
+                    .foregroundStyle(iconColor)
            }
            .frame(width: 30, height: 30)

@@ -216,12 +492,14 @@ private struct ToolCallActivityChip: View {
                    .font(.sybil(.subheadline))
                    .foregroundStyle(isFailed ? SybilTheme.danger.opacity(0.96) : SybilTheme.text.opacity(0.94))
                    .lineSpacing(3)
-                    .fixedSize(horizontal: false, vertical: true)
+                    .lineLimit(compactLayout ? 1 : nil)
+                    .truncationMode(.tail)
+                    .fixedSize(horizontal: false, vertical: !compactLayout)

                HStack(spacing: 6) {
                    Text(toolLabel)
                        .font(.sybil(.caption2, weight: .semibold))
-                        .foregroundStyle(isFailed ? SybilTheme.danger.opacity(0.84) : SybilTheme.accent.opacity(0.90))
+                        .foregroundStyle(iconColor.opacity(0.90))
                        .lineLimit(1)

                    Text(detailLabel)
@@ -236,12 +514,45 @@ private struct ToolCallActivityChip: View {
        .padding(.vertical, 10)
        .background(
            RoundedRectangle(cornerRadius: 12)
-                .fill(isFailed ? SybilTheme.failedToolCallGradient : SybilTheme.toolCallGradient)
+                .fill(backgroundGradient)
                .overlay(
                    RoundedRectangle(cornerRadius: 12)
-                        .stroke((isFailed ? SybilTheme.danger : SybilTheme.accent).opacity(0.34), lineWidth: 1)
+                        .stroke(iconColor.opacity(0.34), lineWidth: 1)
                )
        )
        .frame(maxWidth: 520, alignment: .leading)
    }
+
+    private var stateLabel: String {
+        switch visualState {
+        case .failed:
+            return "Failed"
+        case .initiated:
+            return "Running"
+        case .completed:
+            return "Completed"
+        }
+    }
+
+    private var iconColor: Color {
+        switch visualState {
+        case .failed:
+            return SybilTheme.danger
+        case .initiated:
+            return SybilTheme.warning
+        case .completed:
+            return SybilTheme.accent
+        }
+    }
+
+    private var backgroundGradient: LinearGradient {
+        switch visualState {
+        case .failed:
+            return SybilTheme.failedToolCallGradient
+        case .initiated:
+            return SybilTheme.runningToolCallGradient
+        case .completed:
+            return SybilTheme.toolCallGradient
+        }
+    }
 }
--- a/ios/Packages/Sybil/Sources/Sybil/SybilModels.swift
+++ b/ios/Packages/Sybil/Sources/Sybil/SybilModels.swift
@@ -514,8 +514,8 @@ public struct CompletionStreamToolCall: Codable, Sendable {
    public var summary: String
    public var args: [String: JSONValue]
    public var startedAt: String
-    public var completedAt: String
-    public var durationMs: Int
+    public var completedAt: String?
+    public var durationMs: Int?
    public var error: String?
    public var resultPreview: String?
 }
--- a/ios/Packages/Sybil/Sources/Sybil/SybilTheme.swift
+++ b/ios/Packages/Sybil/Sources/Sybil/SybilTheme.swift
@@ -78,6 +78,7 @@ enum SybilTheme {
    static let searchCard = Color(red: 0.07, green: 0.06, blue: 0.14)
    static let userBubble = Color(red: 0.29, green: 0.13, blue: 0.65)
    static let danger = Color(red: 0.96, green: 0.32, blue: 0.40)
+    static let warning = Color(red: 0.95, green: 0.69, blue: 0.25)

    @MainActor static func applySystemAppearance() {
        let navAppearance = UINavigationBarAppearance()
@@ -186,6 +187,17 @@ enum SybilTheme {
        )
    }

+    static var runningToolCallGradient: LinearGradient {
+        LinearGradient(
+            colors: [
+                Color(red: 0.30, green: 0.19, blue: 0.04).opacity(0.72),
+                Color(red: 0.09, green: 0.05, blue: 0.17).opacity(0.78)
+            ],
+            startPoint: .leading,
+            endPoint: .trailing
+        )
+    }
+
    static var failedToolCallGradient: LinearGradient {
        LinearGradient(
            colors: [
--- a/ios/Packages/Sybil/Sources/Sybil/SybilViewModel.swift
+++ b/ios/Packages/Sybil/Sources/Sybil/SybilViewModel.swift
@@ -107,6 +107,7 @@ final class SybilViewModel {
    var isLoadingCollections = false
    var isLoadingSelection = false
    var isCreatingSearchChat = false
+    var chatBottomPinRequestID = 0
    var errorMessage: String?

    var composer = ""
@@ -1186,7 +1187,7 @@ final class SybilViewModel {
            break

        case let .toolCall(payload):
-            insertQuickQuestionToolCallMessage(payload)
+            upsertQuickQuestionToolCallMessage(payload)

        case let .delta(payload):
            guard !payload.text.isEmpty else { return }
@@ -1699,6 +1700,10 @@ final class SybilViewModel {
        isLoadingSelection = false
    }

+    private func requestChatBottomPin() {
+        chatBottomPinRequestID += 1
+    }
+
    private func startSelectionRefreshTask() -> Task<Void, Never> {
        isLoadingSelection = true
        let task = Task { [weak self] in
@@ -1752,6 +1757,7 @@ final class SybilViewModel {
                    }
                    selectedChat = chat
                    selectedSearch = nil
+                    requestChatBottomPin()

                    if let provider = chat.lastUsedProvider,
                       let model = chat.lastUsedModel,
@@ -1824,6 +1830,7 @@ final class SybilViewModel {
        } else {
            pendingDraftChatState = PendingChatState(chatID: nil, messages: optimisticMessages)
        }
+        requestChatBottomPin()

        if chatID == nil {
            let created = try await client.createChat(title: nil)
@@ -1871,6 +1878,7 @@ final class SybilViewModel {
        if let draftPending = pendingDraftChatState {
            pendingDraftChatState = nil
            pendingChatStates[chatID] = PendingChatState(chatID: chatID, messages: draftPending.messages)
+            requestChatBottomPin()
        } else if pendingChatStates[chatID] == nil {
            pendingChatStates[chatID] = PendingChatState(chatID: chatID, messages: optimisticMessages)
        } else {
@@ -2006,7 +2014,7 @@ final class SybilViewModel {
            }

        case let .toolCall(payload):
-            insertPendingToolCallMessage(payload, chatID: chatID)
+            upsertPendingToolCallMessage(payload, chatID: chatID)

        case let .delta(payload):
            guard !payload.text.isEmpty else { return }
@@ -2222,12 +2230,14 @@ final class SybilViewModel {
        quickQuestionMessages[index].content = transform(quickQuestionMessages[index].content)
    }

-    private func insertPendingToolCallMessage(_ payload: CompletionStreamToolCall, chatID: String) {
+    private func upsertPendingToolCallMessage(_ payload: CompletionStreamToolCall, chatID: String) {
        guard var pending = pendingChatStates[chatID] else {
            return
        }

-        if pending.messages.contains(where: { $0.toolCallMetadata?.toolCallId == payload.toolCallId }) {
+        if let existingIndex = pending.messages.firstIndex(where: { $0.toolCallMetadata?.toolCallId == payload.toolCallId || $0.id == "temp-tool-\(payload.toolCallId)" }) {
+            pending.messages[existingIndex] = toolCallMessage(for: payload, id: pending.messages[existingIndex].id)
+            pendingChatStates[chatID] = pending
            return
        }

@@ -2242,8 +2252,9 @@ final class SybilViewModel {
        pendingChatStates[chatID] = pending
    }

-    private func insertQuickQuestionToolCallMessage(_ payload: CompletionStreamToolCall) {
-        if quickQuestionMessages.contains(where: { $0.toolCallMetadata?.toolCallId == payload.toolCallId }) {
+    private func upsertQuickQuestionToolCallMessage(_ payload: CompletionStreamToolCall) {
+        if let existingIndex = quickQuestionMessages.firstIndex(where: { $0.toolCallMetadata?.toolCallId == payload.toolCallId || $0.id == "temp-tool-\(payload.toolCallId)" }) {
+            quickQuestionMessages[existingIndex] = toolCallMessage(for: payload, id: quickQuestionMessages[existingIndex].id)
            return
        }

@@ -2255,8 +2266,8 @@ final class SybilViewModel {
        }
    }

-    private func toolCallMessage(for payload: CompletionStreamToolCall) -> Message {
-        let metadata: JSONValue = .object([
+    private func toolCallMessage(for payload: CompletionStreamToolCall, id: String? = nil) -> Message {
+        var metadataObject: [String: JSONValue] = [
            "kind": .string("tool_call"),
            "toolCallId": .string(payload.toolCallId),
            "toolName": .string(payload.name),
@@ -2264,19 +2275,26 @@ final class SybilViewModel {
            "summary": .string(payload.summary),
            "args": .object(payload.args),
            "startedAt": .string(payload.startedAt),
-            "completedAt": .string(payload.completedAt),
-            "durationMs": .number(Double(payload.durationMs)),
            "error": payload.error.map { .string($0) } ?? .null,
            "resultPreview": payload.resultPreview.map { .string($0) } ?? .null
-        ])
+        ]
+
+        if let completedAt = payload.completedAt {
+            metadataObject["completedAt"] = .string(completedAt)
+        }
+        if let durationMs = payload.durationMs {
+            metadataObject["durationMs"] = .number(Double(durationMs))
+        }
+
+        let metadata: JSONValue = .object(metadataObject)

        let summary = payload.summary.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
            ? "Ran tool '\(payload.name)'."
            : payload.summary

        return Message(
-            id: "temp-tool-\(payload.toolCallId)",
-            createdAt: Date(),
+            id: id ?? "temp-tool-\(payload.toolCallId)",
+            createdAt: toolCallDate(from: payload.completedAt) ?? toolCallDate(from: payload.startedAt) ?? Date(),
            role: .tool,
            content: summary,
            name: payload.name,
@@ -2284,6 +2302,19 @@ final class SybilViewModel {
        )
    }

+    private func toolCallDate(from value: String?) -> Date? {
+        guard let value else { return nil }
+        let fractionalFormatter = ISO8601DateFormatter()
+        fractionalFormatter.formatOptions = [.withInternetDateTime, .withFractionalSeconds]
+        if let date = fractionalFormatter.date(from: value) {
+            return date
+        }
+
+        let formatter = ISO8601DateFormatter()
+        formatter.formatOptions = [.withInternetDateTime]
+        return formatter.date(from: value)
+    }
+
    private var currentChatID: String? {
        if draftKind == .chat {
            return nil
--- a/ios/Packages/Sybil/Sources/Sybil/SybilWorkspaceView.swift
+++ b/ios/Packages/Sybil/Sources/Sybil/SybilWorkspaceView.swift
@@ -194,7 +194,8 @@ struct SybilWorkspaceView: View {
                        isLoading: viewModel.isLoadingSelection,
                        isSending: viewModel.isSendingVisibleChat,
                        topContentInset: showsCustomWorkspaceNavigation ? customWorkspaceNavigationContentInset : 0,
-                        bottomContentInset: viewModel.showsComposer ? composerOverlayContentInset : 0
+                        bottomContentInset: viewModel.showsComposer ? composerOverlayContentInset : 0,
+                        bottomPinRequestID: viewModel.chatBottomPinRequestID
                    )
                    .id(transcriptScrollContextID)
                }
--- a/ios/Packages/Sybil/Tests/SybilTests/SybilTests.swift
+++ b/ios/Packages/Sybil/Tests/SybilTests/SybilTests.swift
@@ -402,6 +402,70 @@ private func makeSearchDetail(id: String, date: Date, answer: String) -> SearchD
    )
 }

+private func makeToolCallMessage(id: String, date: Date, summary: String = "Ran a tool") -> Message {
+    Message(
+        id: id,
+        createdAt: date,
+        role: .tool,
+        content: summary,
+        name: "web_search",
+        metadata: .object([
+            "kind": .string("tool_call"),
+            "toolCallId": .string("call-\(id)"),
+            "toolName": .string("web_search"),
+            "status": .string("completed"),
+            "summary": .string(summary),
+            "durationMs": .number(120)
+        ])
+    )
+}
+
+@Test func transcriptRenderItemsGroupAdjacentToolCalls() async throws {
+    let date = Date(timeIntervalSince1970: 1_700_000_000)
+    let user = Message(id: "user-1", createdAt: date, role: .user, content: "Search this", name: nil)
+    let toolA = makeToolCallMessage(id: "tool-a", date: date, summary: "Search A")
+    let toolB = makeToolCallMessage(id: "tool-b", date: date, summary: "Search B")
+    let assistant = Message(id: "assistant-1", createdAt: date, role: .assistant, content: "Answer", name: nil)
+
+    let items = buildTranscriptRenderItems(from: [user, toolA, toolB, assistant])
+
+    #expect(items.count == 3)
+    guard case let .message(firstMessage) = items[0] else {
+        Issue.record("Expected the first item to remain a normal message")
+        return
+    }
+    #expect(firstMessage.id == "user-1")
+
+    guard case let .toolGroup(groupID, groupedMessages) = items[1] else {
+        Issue.record("Expected adjacent tool calls to be grouped")
+        return
+    }
+    #expect(groupID == "tool-a")
+    #expect(groupedMessages.map(\.id) == ["tool-a", "tool-b"])
+
+    guard case let .message(lastMessage) = items[2] else {
+        Issue.record("Expected the assistant response to remain a normal message")
+        return
+    }
+    #expect(lastMessage.id == "assistant-1")
+}
+
+@Test func transcriptRenderItemsKeepSingleToolCallsInline() async throws {
+    let date = Date(timeIntervalSince1970: 1_700_000_000)
+    let user = Message(id: "user-1", createdAt: date, role: .user, content: "Search this", name: nil)
+    let tool = makeToolCallMessage(id: "tool-a", date: date)
+    let assistant = Message(id: "assistant-1", createdAt: date, role: .assistant, content: "Answer", name: nil)
+
+    let items = buildTranscriptRenderItems(from: [user, tool, assistant])
+
+    #expect(items.count == 3)
+    guard case let .message(toolMessage) = items[1] else {
+        Issue.record("Expected a single tool call to use the existing inline chip")
+        return
+    }
+    #expect(toolMessage.id == "tool-a")
+}
+
@MainActor
@Test func normalizedAPIBaseURLPreservesExplicitAPIPath() async throws {
    let defaults = UserDefaults(suiteName: #function)!
@@ -495,6 +559,7 @@ private func makeSearchDetail(id: String, date: Date, answer: String) -> SearchD
    #expect(snapshot.listSearches == 0)
    #expect(snapshot.getChat == 1)
    #expect(viewModel.selectedChat?.messages.first?.content == "refreshed transcript")
+    #expect(viewModel.chatBottomPinRequestID == 1)
 }

@MainActor
@@ -682,6 +747,37 @@ private func makeSearchDetail(id: String, date: Date, answer: String) -> SearchD
    await sendTask.value
 }

+@MainActor
+@Test func chatBottomPinRequestDoesNotFollowAssistantStreaming() async throws {
+    let date = Date(timeIntervalSince1970: 1_700_000_245)
+    let chat = makeChatSummary(id: "chat-pin", date: date)
+    let detail = makeChatDetail(id: "chat-pin", date: date, body: "existing transcript")
+    let client = MockSybilClient(
+        chatsResponse: [chat],
+        chatDetails: ["chat-pin": detail]
+    )
+    await client.setCompletionStreamEvents([
+        .delta(CompletionStreamDelta(text: "partial ")),
+        .delta(CompletionStreamDelta(text: "response")),
+        .done(CompletionStreamDone(text: "partial response"))
+    ])
+    let viewModel = SybilViewModel(settings: testSettings(named: #function)) { _ in client }
+    viewModel.isAuthenticated = true
+    viewModel.isCheckingSession = false
+    viewModel.chats = [chat]
+    viewModel.workspaceItems = [WorkspaceItem(chat: chat)]
+    viewModel.selectedItem = .chat("chat-pin")
+    viewModel.selectedChat = detail
+    viewModel.composer = "continue"
+
+    let initialPinRequestID = viewModel.chatBottomPinRequestID
+    await viewModel.sendComposer()
+
+    let snapshot = await client.currentSnapshot()
+    #expect(snapshot.runCompletionStream == 1)
+    #expect(viewModel.chatBottomPinRequestID == initialPinRequestID + 1)
+}
+
@MainActor
@Test func quickQuestionRunsNonPersistentCompletionStream() async throws {
    let client = MockSybilClient()
--- a/ios/fastlane/Appfile
+++ b/ios/fastlane/Appfile
@@ -0,0 +1,9 @@
+require "dotenv"
+
+Dotenv.load(File.expand_path("../.env", __dir__))
+
+app_identifier(ENV.fetch("FASTLANE_APP_IDENTIFIER", "net.buzzert.sybil2"))
+team_id(ENV.fetch("FASTLANE_TEAM_ID", "DQQH5H6GBD"))
+
+apple_id(ENV["FASTLANE_USER"]) if ENV["FASTLANE_USER"].to_s.strip.length.positive?
+itc_team_id(ENV["FASTLANE_ITC_TEAM_ID"]) if ENV["FASTLANE_ITC_TEAM_ID"].to_s.strip.length.positive?
--- a/ios/fastlane/Fastfile
+++ b/ios/fastlane/Fastfile
@@ -0,0 +1,177 @@
+require "dotenv"
+require "open3"
+require "shellwords"
+require "yaml"
+
+Dotenv.load(File.expand_path("../.env", __dir__))
+
+default_platform(:ios)
+
+APP_IDENTIFIER = ENV.fetch("FASTLANE_APP_IDENTIFIER", "net.buzzert.sybil2")
+TEAM_ID = ENV.fetch("FASTLANE_TEAM_ID", "DQQH5H6GBD")
+APP_STORE_APPLE_ID = ENV.fetch("SYBIL_APP_STORE_APPLE_ID", "6759442828")
+PROVIDER_PUBLIC_ID = ENV.fetch("SYBIL_PROVIDER_PUBLIC_ID", "c043d167-ad88-4036-84ea-76c223f1b1b2")
+IOS_ROOT = File.expand_path("..", __dir__)
+PROJECT_FILE = File.join(IOS_ROOT, "Sybil.xcodeproj")
+PROJECT_SPEC = File.join(IOS_ROOT, "project.yml")
+APP_SPEC = File.join(IOS_ROOT, "Apps/Sybil/project.yml")
+SCHEME = "Sybil"
+TARGET = "SybilApp"
+
+def present?(value)
+  !value.to_s.strip.empty?
+end
+
+def capture(command)
+  stdout, stderr, status = Open3.capture3(command)
+  return stdout.strip if status.success?
+
+  UI.user_error!("Command failed: #{command}\n#{stderr.strip}")
+end
+
+def app_project_settings
+  YAML.safe_load(File.read(APP_SPEC)).fetch("targets").fetch(TARGET).fetch("settings").fetch("base")
+end
+
+def local_marketing_version
+  app_project_settings.fetch("MARKETING_VERSION").to_s
+end
+
+def local_build_number
+  app_project_settings.fetch("CURRENT_PROJECT_VERSION").to_i
+end
+
+def normalize_version_tag(tag)
+  version = tag.to_s.strip.sub(/\Av/, "")
+  unless version.match?(/\A\d+\.\d+(\.\d+)?\z/)
+    UI.user_error!("Release tag #{tag.inspect} must look like v1.10 or v1.10.0")
+  end
+  version
+end
+
+def release_version
+  tag = ENV["SYBIL_VERSION_TAG"]
+  tag = capture("git describe --tags --abbrev=0") unless present?(tag)
+  normalize_version_tag(tag)
+end
+
+def xcode_build_setting(key, value)
+  "#{key}=#{value.to_s.shellescape}"
+end
+
+def app_store_connect_key_options
+  key_id = ENV["APP_STORE_CONNECT_API_KEY_ID"]
+  issuer_id = ENV["APP_STORE_CONNECT_API_ISSUER_ID"]
+  return nil unless present?(key_id) && present?(issuer_id)
+
+  key_path = ENV["APP_STORE_CONNECT_API_KEY_PATH"]
+  key_content = ENV["APP_STORE_CONNECT_API_KEY_CONTENT"]
+  if present?(key_path)
+    {
+      key_id: key_id,
+      issuer_id: issuer_id,
+      key_filepath: key_path
+    }
+  elsif present?(key_content)
+    {
+      key_id: key_id,
+      issuer_id: issuer_id,
+      key_content: key_content,
+      is_key_content_base64: ENV["APP_STORE_CONNECT_API_KEY_CONTENT_BASE64"].to_s == "true"
+    }
+  end
+end
+
+platform :ios do
+  desc "Show the version Fastlane will stamp into the next TestFlight archive"
+  lane :version do
+    UI.message("Git tag version: #{release_version}")
+    UI.message("Checked-in app version: #{local_marketing_version}")
+    UI.message("Checked-in build number: #{local_build_number}")
+  end
+
+  desc "Build Sybil and upload it to TestFlight"
+  lane :beta do
+    version = release_version
+    build_number = ENV["SYBIL_BUILD_NUMBER"].to_s
+    api_key = nil
+
+    if app_store_connect_key_options
+      api_key = app_store_connect_api_key(app_store_connect_key_options)
+    end
+
+    unless present?(build_number)
+      build_number = (local_build_number + 1).to_s
+
+      if api_key
+        begin
+          latest = latest_testflight_build_number(
+            app_identifier: APP_IDENTIFIER,
+            version: version,
+            api_key: api_key,
+            initial_build_number: local_build_number
+          ).to_i
+          build_number = [latest + 1, local_build_number + 1].max.to_s
+        rescue StandardError => e
+          UI.important("Could not look up TestFlight build number: #{e.message}")
+          UI.important("Using checked-in build number + 1: #{build_number}")
+        end
+      end
+    end
+
+    UI.user_error!("Build number must be a positive integer") unless build_number.match?(/\A[1-9]\d*\z/)
+
+    sh("xcodegen --spec #{PROJECT_SPEC.shellescape}")
+
+    xcode_args = [
+      "-allowProvisioningUpdates",
+      xcode_build_setting("MARKETING_VERSION", version),
+      xcode_build_setting("CURRENT_PROJECT_VERSION", build_number)
+    ].join(" ")
+
+    ipa_path = build_app(
+      project: PROJECT_FILE,
+      scheme: SCHEME,
+      clean: true,
+      sdk: "iphoneos",
+      export_method: "app-store",
+      output_directory: File.join(IOS_ROOT, "build/fastlane"),
+      output_name: "Sybil-#{version}-#{build_number}.ipa",
+      xcargs: xcode_args,
+      export_xcargs: "-allowProvisioningUpdates",
+      export_options: {
+        method: "app-store-connect",
+        destination: "export",
+        signingStyle: "automatic",
+        teamID: TEAM_ID,
+        manageAppVersionAndBuildNumber: false,
+        uploadSymbols: true,
+        stripSwiftSymbols: true
+      }
+    )
+
+    ipa_path ||= lane_context[SharedValues::IPA_OUTPUT_PATH]
+    UI.user_error!("IPA export failed; no IPA path was returned") unless present?(ipa_path) && File.exist?(ipa_path)
+
+    password = ENV["FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD"]
+    UI.user_error!("FASTLANE_USER is required for altool upload") unless present?(ENV["FASTLANE_USER"])
+    UI.user_error!("FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD is required for altool upload") unless present?(password)
+    UI.user_error!("SYBIL_APP_STORE_APPLE_ID is required for altool upload") unless present?(APP_STORE_APPLE_ID)
+    UI.user_error!("SYBIL_PROVIDER_PUBLIC_ID is required for altool upload") unless present?(PROVIDER_PUBLIC_ID)
+
+    ENV["ITMS_TRANSPORTER_PASSWORD"] = password
+    sh([
+      "xcrun altool",
+      "--upload-package #{ipa_path.shellescape}",
+      "--platform ios",
+      "--apple-id #{APP_STORE_APPLE_ID.shellescape}",
+      "--bundle-id #{APP_IDENTIFIER.shellescape}",
+      "--bundle-version #{build_number.shellescape}",
+      "--bundle-short-version-string #{version.shellescape}",
+      "--provider-public-id #{PROVIDER_PUBLIC_ID.shellescape}",
+      "--username #{ENV.fetch("FASTLANE_USER").shellescape}",
+      "--password @env:ITMS_TRANSPORTER_PASSWORD",
+      "--show-progress"
+    ].join(" "))
+  end
+end
--- a/ios/fastlane/README.md
+++ b/ios/fastlane/README.md
@@ -0,0 +1,40 @@
+fastlane documentation
+----
+
+# Installation
+
+Make sure you have the latest version of the Xcode command line tools installed:
+
+```sh
+xcode-select --install
+```
+
+For _fastlane_ installation instructions, see [Installing _fastlane_](https://docs.fastlane.tools/#installing-fastlane)
+
+# Available Actions
+
+## iOS
+
+### ios version
+
+```sh
+[bundle exec] fastlane ios version
+```
+
+Show the version Fastlane will stamp into the next TestFlight archive
+
+### ios beta
+
+```sh
+[bundle exec] fastlane ios beta
+```
+
+Build Sybil and upload it to TestFlight
+
+----
+
+This README.md is auto-generated and will be re-generated every time [_fastlane_](https://fastlane.tools) is run.
+
+More information about _fastlane_ can be found on [fastlane.tools](https://fastlane.tools).
+
+The documentation of _fastlane_ can be found on [docs.fastlane.tools](https://docs.fastlane.tools).
--- a/ios/justfile
+++ b/ios/justfile
@@ -5,8 +5,10 @@ derived_data := "build/DerivedData"
 default:
  @just build

-build:
-  if [ ! -d "Sybil.xcodeproj" ]; then xcodegen --spec project.yml; fi
+generate:
+  xcodegen --spec project.yml
+
+build: generate
  if command -v xcbeautify >/dev/null 2>&1; then \
    xcodebuild -scheme Sybil -destination '{{simulator}}' | xcbeautify; \
  else \
@@ -16,13 +18,15 @@ build:
 test:
  cd Packages/Sybil && xcodebuild test -scheme Sybil -destination '{{simulator}}' -parallel-testing-enabled NO

-run:
-  if [ ! -d "Sybil.xcodeproj" ]; then xcodegen --spec project.yml; fi
+run: generate
  xcrun simctl boot '{{simulator_name}}' 2>/dev/null || true
  xcodebuild -scheme Sybil -destination '{{simulator}}' -derivedDataPath '{{derived_data}}'
  xcrun simctl install booted '{{derived_data}}/Build/Products/Debug-iphonesimulator/Sybil.app'
  xcrun simctl launch booted net.buzzert.sybil2

+beta:
+  fastlane ios beta
+
 screenshot path="build/sybil-screenshot.png":
  mkdir -p "$(dirname '{{path}}')"
  xcrun simctl io booted screenshot '{{path}}'
--- a/server/src/browser-fetch-headers.ts
+++ b/server/src/browser-fetch-headers.ts
@@ -0,0 +1,26 @@
+export const CHROMIUM_USER_AGENT =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36";
+
+export const BROWSER_ACCEPT_LANGUAGE = "en-US,en;q=0.9";
+
+export const FETCH_URL_ACCEPT =
+  "text/html,application/xhtml+xml,application/xml;q=0.9,application/pdf;q=0.9,*/*;q=0.8";
+
+export function buildBrowserLikeRequestHeaders(accept: string): Record<string, string> {
+  return {
+    "User-Agent": CHROMIUM_USER_AGENT,
+    Accept: accept,
+    "Accept-Language": BROWSER_ACCEPT_LANGUAGE,
+  };
+}
+
+export function buildBrowserLikeNavigationHeaders(accept = FETCH_URL_ACCEPT): Record<string, string> {
+  return {
+    ...buildBrowserLikeRequestHeaders(accept),
+    "Upgrade-Insecure-Requests": "1",
+    "Sec-Fetch-Dest": "document",
+    "Sec-Fetch-Mode": "navigate",
+    "Sec-Fetch-Site": "none",
+    "Sec-Fetch-User": "?1",
+  };
+}
--- a/server/src/llm/chat-tools.ts
+++ b/server/src/llm/chat-tools.ts
@@ -6,6 +6,7 @@ import { promisify } from "node:util";
 import { convert as htmlToText } from "html-to-text";
 import type OpenAI from "openai";
 import { z } from "zod";
+import { buildBrowserLikeNavigationHeaders } from "../browser-fetch-headers.js";
 import { env } from "../env.js";
 import { exaClient } from "../search/exa.js";
 import { searchSearxng } from "../search/searxng.js";
@@ -292,15 +293,17 @@ type ToolAwareCompletionParams = {
  };
 };

+export type ToolExecutionStatus = "initiated" | "completed" | "failed";
+
 export type ToolExecutionEvent = {
  toolCallId: string;
  name: string;
-  status: "completed" | "failed";
+  status: ToolExecutionStatus;
  summary: string;
  args: Record<string, unknown>;
  startedAt: string;
-  completedAt: string;
-  durationMs: number;
+  completedAt?: string;
+  durationMs?: number;
  error?: string;
  resultPreview?: string;
 };
@@ -328,10 +331,13 @@ function toSingleLine(value: string, maxLength = 220) {
  );
 }

-function buildToolSummary(name: string, args: Record<string, unknown>, status: "completed" | "failed", error?: string) {
+function buildToolSummary(name: string, args: Record<string, unknown>, status: ToolExecutionStatus, error?: string) {
  const errSuffix = status === "failed" && error ? ` Error: ${toSingleLine(error, 140)}` : "";
  if (name === "web_search") {
    const query = typeof args.query === "string" ? args.query.trim() : "";
+    if (status === "initiated") {
+      return query ? `Searching web for '${toSingleLine(query, 100)}'.` : "Searching web.";
+    }
    if (status === "completed") {
      return query ? `Performed web search for '${toSingleLine(query, 100)}'.` : "Performed web search.";
    }
@@ -340,6 +346,9 @@ function buildToolSummary(name: string, args: Record<string, unknown>, status: "

  if (name === "fetch_url") {
    const url = typeof args.url === "string" ? args.url.trim() : "";
+    if (status === "initiated") {
+      return url ? `Fetching URL ${toSingleLine(url, 140)}.` : "Fetching URL.";
+    }
    if (status === "completed") {
      return url ? `Fetched URL ${toSingleLine(url, 140)}.` : "Fetched URL.";
    }
@@ -348,6 +357,9 @@ function buildToolSummary(name: string, args: Record<string, unknown>, status: "

  if (name === "codex_exec") {
    const prompt = typeof args.prompt === "string" ? args.prompt.trim() : "";
+    if (status === "initiated") {
+      return prompt ? `Running Codex task: '${toSingleLine(prompt, 120)}'.` : "Running Codex task.";
+    }
    if (status === "completed") {
      return prompt ? `Ran Codex task: '${toSingleLine(prompt, 120)}'.` : "Ran Codex task.";
    }
@@ -356,6 +368,9 @@ function buildToolSummary(name: string, args: Record<string, unknown>, status: "

  if (name === "shell_exec") {
    const command = typeof args.command === "string" ? args.command.trim() : "";
+    if (status === "initiated") {
+      return command ? `Running devbox shell command: '${toSingleLine(command, 120)}'.` : "Running devbox shell command.";
+    }
    if (status === "completed") {
      return command ? `Ran devbox shell command: '${toSingleLine(command, 120)}'.` : "Ran devbox shell command.";
    }
@@ -364,6 +379,9 @@ function buildToolSummary(name: string, args: Record<string, unknown>, status: "
      : `Devbox shell command failed.${errSuffix}`;
  }

+  if (status === "initiated") {
+    return `Running tool '${name}'.`;
+  }
  if (status === "completed") {
    return `Ran tool '${name}'.`;
  }
@@ -553,10 +571,7 @@ async function runFetchUrlTool(input: unknown): Promise<ToolRunOutcome> {
    response = await fetch(parsed.toString(), {
      redirect: "follow",
      signal: controller.signal,
-      headers: {
-        "User-Agent": "SybilBot/1.0 (+https://sybil.local)",
-        Accept: "text/html, text/plain, application/json;q=0.9, */*;q=0.5",
-      },
+      headers: buildBrowserLikeNavigationHeaders(),
    });
  } finally {
    clearTimeout(timeout);
@@ -969,17 +984,55 @@ function normalizeModelToolCalls(toolCalls: any[], round: number): NormalizedToo
  }));
 }

-async function executeToolCallAndBuildEvent(
-  call: NormalizedToolCall,
-  params: ToolAwareCompletionParams
-): Promise<{ event: ToolExecutionEvent; toolResult: ToolRunOutcome }> {
+type PreparedToolCallExecution = {
+  startedAtMs: number;
+  startedAt: string;
+  parsedArgs: Record<string, unknown>;
+  eventArgs: Record<string, unknown>;
+  parseError?: unknown;
+};
+
+function prepareToolCallExecution(call: NormalizedToolCall): { event: ToolExecutionEvent; execution: PreparedToolCallExecution } {
  const startedAtMs = Date.now();
  const startedAt = new Date(startedAtMs).toISOString();
-  let toolResult: ToolRunOutcome;
  let parsedArgs: Record<string, unknown> = {};
+
+  let parseError: unknown;
  try {
    parsedArgs = toRecord(parseToolArgs(call.arguments));
-    toolResult = await executeTool(call.name, parsedArgs);
+  } catch (err) {
+    parseError = err;
+  }
+
+  const eventArgs = buildEventArgs(call.name, parsedArgs);
+  return {
+    event: {
+      toolCallId: call.id,
+      name: call.name,
+      status: "initiated",
+      summary: buildToolSummary(call.name, eventArgs, "initiated"),
+      args: eventArgs,
+      startedAt,
+    },
+    execution: {
+      startedAtMs,
+      startedAt,
+      parsedArgs,
+      eventArgs,
+      parseError,
+    },
+  };
+}
+
+async function executeToolCallAndBuildEvent(
+  call: NormalizedToolCall,
+  execution: PreparedToolCallExecution,
+  params: ToolAwareCompletionParams
+): Promise<{ event: ToolExecutionEvent; toolResult: ToolRunOutcome }> {
+  let toolResult: ToolRunOutcome;
+  try {
+    if (execution.parseError) throw execution.parseError;
+    toolResult = await executeTool(call.name, execution.parsedArgs);
  } catch (err: any) {
    toolResult = {
      ok: false,
@@ -996,16 +1049,15 @@ async function executeToolCallAndBuildEvent(
      : undefined;

  const completedAtMs = Date.now();
-  const eventArgs = buildEventArgs(call.name, parsedArgs);
  const event: ToolExecutionEvent = {
    toolCallId: call.id,
    name: call.name,
    status,
-    summary: buildToolSummary(call.name, eventArgs, status, error),
-    args: eventArgs,
-    startedAt,
+    summary: buildToolSummary(call.name, execution.eventArgs, status, error),
+    args: execution.eventArgs,
+    startedAt: execution.startedAt,
    completedAt: new Date(completedAtMs).toISOString(),
-    durationMs: completedAtMs - startedAtMs,
+    durationMs: completedAtMs - execution.startedAtMs,
    error,
    resultPreview: buildResultPreview(toolResult),
  };
@@ -1068,7 +1120,8 @@ export async function runToolAwareOpenAIChat(params: ToolAwareCompletionParams):
    input.push(...outputItems);

    for (const call of normalizedToolCalls) {
-      const { event, toolResult } = await executeToolCallAndBuildEvent(call, params);
+      const { execution } = prepareToolCallExecution(call);
+      const { event, toolResult } = await executeToolCallAndBuildEvent(call, execution, params);
      toolEvents.push(event);

      input.push({
@@ -1155,7 +1208,8 @@ export async function runToolAwareChatCompletions(params: ToolAwareCompletionPar
    conversation.push(assistantToolCallMessage);

    for (const call of normalizedToolCalls) {
-      const { event, toolResult } = await executeToolCallAndBuildEvent(call, params);
+      const { execution } = prepareToolCallExecution(call);
+      const { event, toolResult } = await executeToolCallAndBuildEvent(call, execution, params);
      toolEvents.push(event);

      conversation.push({
@@ -1299,7 +1353,9 @@ export async function* runToolAwareOpenAIChatStream(
    input.push(...responseOutputItems);

    for (const call of normalizedToolCalls) {
-      const { event, toolResult } = await executeToolCallAndBuildEvent(call, params);
+      const { event: initiatedEvent, execution } = prepareToolCallExecution(call);
+      yield { type: "tool_call", event: initiatedEvent };
+      const { event, toolResult } = await executeToolCallAndBuildEvent(call, execution, params);
      toolEvents.push(event);
      yield { type: "tool_call", event };
      input.push({
@@ -1436,7 +1492,9 @@ export async function* runToolAwareChatCompletionsStream(
    conversation.push(assistantToolCallMessage);

    for (const call of normalizedToolCalls) {
-      const { event, toolResult } = await executeToolCallAndBuildEvent(call, params);
+      const { event: initiatedEvent, execution } = prepareToolCallExecution(call);
+      yield { type: "tool_call", event: initiatedEvent };
+      const { event, toolResult } = await executeToolCallAndBuildEvent(call, execution, params);
      toolEvents.push(event);
      yield { type: "tool_call", event };
      conversation.push({
--- a/server/src/llm/streaming.ts
+++ b/server/src/llm/streaming.ts
@@ -130,7 +130,7 @@ export async function* runMultiplexStream(req: MultiplexRequest): AsyncGenerator
        }

        if (ev.type === "tool_call") {
-          if (shouldPersist && chatId) {
+          if (ev.event.status !== "initiated" && shouldPersist && chatId) {
            const toolMessage = buildToolLogMessageData(chatId, ev.event);
            await prisma.message.create({
              data: {
--- a/server/src/search/searxng.ts
+++ b/server/src/search/searxng.ts
@@ -1,3 +1,4 @@
+import { buildBrowserLikeRequestHeaders } from "../browser-fetch-headers.js";
 import { env } from "../env.js";

 const SEARXNG_TIMEOUT_MS = 12_000;
@@ -106,10 +107,7 @@ async function fetchSearxng(url: URL, accept: string) {
    return await fetch(url, {
      redirect: "follow",
      signal: controller.signal,
-      headers: {
-        "User-Agent": "SybilBot/1.0 (+https://sybil.local)",
-        Accept: accept,
-      },
+      headers: buildBrowserLikeRequestHeaders(accept),
    });
  } finally {
    clearTimeout(timeout);
--- a/server/tests/chat-tools-streaming.test.ts
+++ b/server/tests/chat-tools-streaming.test.ts
@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import test from "node:test";
 import {
  runPlainChatCompletionsStream,
+  runToolAwareChatCompletions,
  runToolAwareChatCompletionsStream,
  runToolAwareOpenAIChatStream,
  type ToolAwareStreamingEvent,
@@ -140,3 +141,142 @@ test("plain Chat Completions stream does not send Sybil-managed tools", async ()
  );
  assert.equal(events.at(-1)?.type === "done" ? events.at(-1)?.result.text : null, "Hi");
 });
+
+test("fetch_url sends browser-like navigation headers", async () => {
+  const originalFetch = globalThis.fetch;
+  const fetchCalls: Array<{ input: RequestInfo | URL; init?: RequestInit }> = [];
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    fetchCalls.push({ input, init });
+    return new Response("<!doctype html><title>CPI</title><main>Consumer price index</main>", {
+      status: 200,
+      headers: { "content-type": "text/html; charset=utf-8" },
+    });
+  }) as typeof fetch;
+
+  try {
+    let requestCount = 0;
+    const client = {
+      chat: {
+        completions: {
+          create: async () => {
+            requestCount += 1;
+            if (requestCount === 1) {
+              return {
+                choices: [
+                  {
+                    message: {
+                      tool_calls: [
+                        {
+                          id: "call_1",
+                          type: "function",
+                          function: {
+                            name: "fetch_url",
+                            arguments: JSON.stringify({ url: "https://www.bls.gov/news.release/pdf/cpi.pdf" }),
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              };
+            }
+
+            return {
+              choices: [{ message: { content: "Fetched" } }],
+            };
+          },
+        },
+      },
+    };
+
+    const result = await runToolAwareChatCompletions({
+      client: client as any,
+      model: "grok-test",
+      messages: [{ role: "user", content: "Fetch CPI PDF" }],
+    });
+
+    assert.equal(result.text, "Fetched");
+    assert.equal(fetchCalls.length, 1);
+    assert.equal(String(fetchCalls[0]?.input), "https://www.bls.gov/news.release/pdf/cpi.pdf");
+    assert.deepEqual(fetchCalls[0]?.init?.headers, {
+      "User-Agent":
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36",
+      Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,application/pdf;q=0.9,*/*;q=0.8",
+      "Accept-Language": "en-US,en;q=0.9",
+      "Upgrade-Insecure-Requests": "1",
+      "Sec-Fetch-Dest": "document",
+      "Sec-Fetch-Mode": "navigate",
+      "Sec-Fetch-Site": "none",
+      "Sec-Fetch-User": "?1",
+    });
+    assert.equal(result.toolEvents[0]?.status, "completed");
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("OpenAI-compatible Chat Completions stream emits initiated and terminal tool call updates", async () => {
+  let requestCount = 0;
+  const client = {
+    chat: {
+      completions: {
+        create: async () => {
+          requestCount += 1;
+          if (requestCount === 1) {
+            return streamFrom([
+              {
+                choices: [
+                  {
+                    delta: {
+                      tool_calls: [
+                        {
+                          index: 0,
+                          id: "call_1",
+                          function: {
+                            name: "unknown_tool",
+                            arguments: "{\"query\":\"current weather\"}",
+                          },
+                        },
+                      ],
+                    },
+                    finish_reason: "tool_calls",
+                  },
+                ],
+              },
+            ]);
+          }
+
+          return streamFrom([
+            { choices: [{ delta: { content: "Done" } }] },
+            { choices: [{ delta: {}, finish_reason: "stop" }] },
+          ]);
+        },
+      },
+    },
+  };
+
+  const events = await collectEvents(
+    runToolAwareChatCompletionsStream({
+      client: client as any,
+      model: "grok-test",
+      messages: [{ role: "user", content: "Use a tool" }],
+    })
+  );
+
+  assert.deepEqual(
+    events.map((event) => event.type),
+    ["tool_call", "tool_call", "delta", "done"]
+  );
+
+  const toolEvents = events.flatMap((event) => (event.type === "tool_call" ? [event.event] : []));
+  assert.equal(toolEvents[0]?.toolCallId, "call_1");
+  assert.equal(toolEvents[0]?.status, "initiated");
+  assert.equal(toolEvents[0]?.completedAt, undefined);
+  assert.equal(toolEvents[0]?.durationMs, undefined);
+  assert.equal(toolEvents[1]?.toolCallId, "call_1");
+  assert.equal(toolEvents[1]?.status, "failed");
+  assert.match(toolEvents[1]?.error ?? "", /Unknown tool: unknown_tool/);
+  assert.equal(typeof toolEvents[1]?.completedAt, "string");
+  assert.equal(typeof toolEvents[1]?.durationMs, "number");
+  assert.equal(events.at(-1)?.type === "done" ? events.at(-1)?.result.text : null, "Done");
+});
--- a/tui/src/index.ts
+++ b/tui/src/index.ts
@@ -32,7 +32,7 @@ type ToolLogMetadata = {
  kind: "tool_call";
  toolCallId?: string;
  toolName?: string;
-  status?: "completed" | "failed";
+  status?: "initiated" | "completed" | "failed";
  summary?: string;
  args?: Record<string, unknown>;
  startedAt?: string;
@@ -171,28 +171,47 @@ function isToolCallLogMessage(message: Message) {
 }

 function buildOptimisticToolMessage(event: ToolCallEvent): Message {
+  const metadata: ToolLogMetadata = {
+    kind: "tool_call",
+    toolCallId: event.toolCallId,
+    toolName: event.name,
+    status: event.status,
+    summary: event.summary,
+    args: event.args,
+    startedAt: event.startedAt,
+    error: event.error ?? null,
+    resultPreview: event.resultPreview ?? null,
+  };
+
+  if (event.completedAt) metadata.completedAt = event.completedAt;
+  if (typeof event.durationMs === "number") metadata.durationMs = event.durationMs;
+
  return {
    id: `temp-tool-${event.toolCallId}`,
-    createdAt: event.completedAt ?? new Date().toISOString(),
+    createdAt: event.completedAt ?? event.startedAt ?? new Date().toISOString(),
    role: "tool",
    content: event.summary,
    name: event.name,
-    metadata: {
-      kind: "tool_call",
-      toolCallId: event.toolCallId,
-      toolName: event.name,
-      status: event.status,
-      summary: event.summary,
-      args: event.args,
-      startedAt: event.startedAt,
-      completedAt: event.completedAt,
-      durationMs: event.durationMs,
-      error: event.error ?? null,
-      resultPreview: event.resultPreview ?? null,
-    } satisfies ToolLogMetadata,
+    metadata,
  };
 }

+function upsertOptimisticToolMessage(messages: Message[], event: ToolCallEvent) {
+  const toolMessage = buildOptimisticToolMessage(event);
+  const existingIndex = messages.findIndex(
+    (message) => asToolLogMetadata(message.metadata)?.toolCallId === event.toolCallId || message.id === `temp-tool-${event.toolCallId}`
+  );
+  if (existingIndex >= 0) {
+    return messages.map((message, index) => (index === existingIndex ? { ...toolMessage, id: message.id } : message));
+  }
+
+  const assistantIndex = messages.findIndex(
+    (message, index, all) => index === all.length - 1 && message.id.startsWith("temp-assistant-")
+  );
+  if (assistantIndex < 0) return messages.concat(toolMessage);
+  return [...messages.slice(0, assistantIndex), toolMessage, ...messages.slice(assistantIndex)];
+}
+
 function getModelOptions(catalog: ModelCatalogResponse["providers"], provider: Provider) {
  const providerModels = catalog[provider]?.models ?? [];
  if (providerModels.length) return providerModels;
@@ -602,7 +621,12 @@ async function main() {
    for (const message of messages) {
      const toolMeta = asToolLogMetadata(message.metadata);
      if (message.role === "tool" && toolMeta) {
-        const prefix = toolMeta.status === "failed" ? "{red-fg}[tool failed]{/red-fg}" : "{cyan-fg}[tool]{/cyan-fg}";
+        const prefix =
+          toolMeta.status === "failed"
+            ? "{red-fg}[tool failed]{/red-fg}"
+            : toolMeta.status === "initiated"
+              ? "{yellow-fg}[tool running]{/yellow-fg}"
+              : "{cyan-fg}[tool]{/cyan-fg}";
        const summary = toolMeta.summary?.trim() || message.content.trim() || "Tool call executed.";
        parts.push(`${prefix} ${escapeTags(summary)}`);
        continue;
@@ -1083,29 +1107,7 @@ async function main() {
        },
        onToolCall: (payload) => {
          if (!pendingChatState) return;
-          const alreadyPresent = pendingChatState.messages.some(
-            (message) =>
-              asToolLogMetadata(message.metadata)?.toolCallId === payload.toolCallId || message.id === `temp-tool-${payload.toolCallId}`
-          );
-          if (alreadyPresent) return;
-
-          const toolMessage = buildOptimisticToolMessage(payload);
-          const assistantIndex = pendingChatState.messages.findIndex(
-            (message, index, all) => index === all.length - 1 && message.id.startsWith("temp-assistant-")
-          );
-
-          if (assistantIndex < 0) {
-            pendingChatState = { ...pendingChatState, messages: pendingChatState.messages.concat(toolMessage) };
-          } else {
-            pendingChatState = {
-              ...pendingChatState,
-              messages: [
-                ...pendingChatState.messages.slice(0, assistantIndex),
-                toolMessage,
-                ...pendingChatState.messages.slice(assistantIndex),
-              ],
-            };
-          }
+          pendingChatState = { ...pendingChatState, messages: upsertOptimisticToolMessage(pendingChatState.messages, payload) };

          queueTranscriptScrollToBottomIfFollowing();
          updateUI();
--- a/tui/src/types.ts
+++ b/tui/src/types.ts
@@ -55,12 +55,12 @@ export type Message = {
 export type ToolCallEvent = {
  toolCallId: string;
  name: string;
-  status: "completed" | "failed";
+  status: "initiated" | "completed" | "failed";
  summary: string;
  args: Record<string, unknown>;
  startedAt: string;
-  completedAt: string;
-  durationMs: number;
+  completedAt?: string;
+  durationMs?: number;
  error?: string;
  resultPreview?: string;
 };
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -435,7 +435,7 @@ type ToolLogMetadata = {
  kind: "tool_call";
  toolCallId?: string;
  toolName?: string;
-  status?: "completed" | "failed";
+  status?: "initiated" | "completed" | "failed";
  summary?: string;
  args?: Record<string, unknown>;
  startedAt?: string;
@@ -461,28 +461,48 @@ function isDisplayableMessage(message: Message) {
 }

 function buildOptimisticToolMessage(event: ToolCallEvent): Message {
+  const metadata: ToolLogMetadata = {
+    kind: "tool_call",
+    toolCallId: event.toolCallId,
+    toolName: event.name,
+    status: event.status,
+    summary: event.summary,
+    args: event.args,
+    startedAt: event.startedAt,
+    error: event.error ?? null,
+    resultPreview: event.resultPreview ?? null,
+  };
+
+  if (event.completedAt) metadata.completedAt = event.completedAt;
+  if (typeof event.durationMs === "number") metadata.durationMs = event.durationMs;
+
  return {
    id: `temp-tool-${event.toolCallId}`,
-    createdAt: event.completedAt ?? new Date().toISOString(),
+    createdAt: event.completedAt ?? event.startedAt ?? new Date().toISOString(),
    role: "tool",
    content: event.summary,
    name: event.name,
-    metadata: {
-      kind: "tool_call",
-      toolCallId: event.toolCallId,
-      toolName: event.name,
-      status: event.status,
-      summary: event.summary,
-      args: event.args,
-      startedAt: event.startedAt,
-      completedAt: event.completedAt,
-      durationMs: event.durationMs,
-      error: event.error ?? null,
-      resultPreview: event.resultPreview ?? null,
-    } satisfies ToolLogMetadata,
+    metadata,
  };
 }

+function upsertOptimisticToolMessage(messages: Message[], event: ToolCallEvent, assistantMessagePrefix: string) {
+  const toolMessage = buildOptimisticToolMessage(event);
+  const existingIndex = messages.findIndex(
+    (message) => asToolLogMetadata(message.metadata)?.toolCallId === event.toolCallId || message.id === `temp-tool-${event.toolCallId}`
+  );
+
+  if (existingIndex >= 0) {
+    return messages.map((message, index) => (index === existingIndex ? { ...toolMessage, id: message.id } : message));
+  }
+
+  const assistantIndex = messages.findIndex(
+    (message, index, all) => index === all.length - 1 && message.id.startsWith(assistantMessagePrefix)
+  );
+  if (assistantIndex < 0) return messages.concat(toolMessage);
+  return [...messages.slice(0, assistantIndex), toolMessage, ...messages.slice(assistantIndex)];
+}
+
 type ModelComboboxProps = {
  options: string[];
  value: string;
@@ -2093,33 +2113,10 @@ export default function App() {
            setPendingChatStates((current) => {
              const pendingState = current[chatId];
              if (!pendingState) return current;
-              if (
-                pendingState.messages.some(
-                  (message) =>
-                    asToolLogMetadata(message.metadata)?.toolCallId === payload.toolCallId || message.id === `temp-tool-${payload.toolCallId}`
-                )
-              ) {
-                return current;
-              }
-
-              const toolMessage = buildOptimisticToolMessage(payload);
-              const assistantIndex = pendingState.messages.findIndex(
-                (message, index, all) => index === all.length - 1 && message.id.startsWith("temp-assistant-")
-              );
-              if (assistantIndex < 0) {
-                return {
-                  ...current,
-                  [chatId]: { messages: pendingState.messages.concat(toolMessage) },
-                };
-              }
              return {
                ...current,
                [chatId]: {
-                  messages: [
-                    ...pendingState.messages.slice(0, assistantIndex),
-                    toolMessage,
-                    ...pendingState.messages.slice(assistantIndex),
-                  ],
+                  messages: upsertOptimisticToolMessage(pendingState.messages, payload, "temp-assistant-"),
                },
              };
            });
@@ -2359,30 +2356,10 @@ export default function App() {
            setPendingChatStates((current) => {
              const pendingState = current[chatId];
              if (!pendingState) return current;
-              if (
-                pendingState.messages.some(
-                  (message) =>
-                    asToolLogMetadata(message.metadata)?.toolCallId === payload.toolCallId || message.id === `temp-tool-${payload.toolCallId}`
-                )
-              ) {
-                return current;
-              }
-
-              const toolMessage = buildOptimisticToolMessage(payload);
-              const assistantIndex = pendingState.messages.findIndex(
-                (message, index, all) => index === all.length - 1 && message.id.startsWith("temp-assistant-")
-              );
-              if (assistantIndex < 0) {
-                return { ...current, [chatId]: { messages: pendingState.messages.concat(toolMessage) } };
-              }
              return {
                ...current,
                [chatId]: {
-                  messages: [
-                    ...pendingState.messages.slice(0, assistantIndex),
-                    toolMessage,
-                    ...pendingState.messages.slice(assistantIndex),
-                  ],
+                  messages: upsertOptimisticToolMessage(pendingState.messages, payload, "temp-assistant-"),
                },
              };
            });
@@ -2649,25 +2626,7 @@ export default function App() {
        {
          onToolCall: (payload) => {
            setQuickQuestionMessages((current) => {
-              if (
-                current.some(
-                  (message) =>
-                    asToolLogMetadata(message.metadata)?.toolCallId === payload.toolCallId || message.id === `temp-tool-${payload.toolCallId}`
-                )
-              ) {
-                return current;
-              }
-
-              const toolMessage = buildOptimisticToolMessage(payload);
-              const assistantIndex = current.findIndex(
-                (message, index, all) => index === all.length - 1 && message.id.startsWith("temp-assistant-quick-")
-              );
-              if (assistantIndex < 0) return current.concat(toolMessage);
-              return [
-                ...current.slice(0, assistantIndex),
-                toolMessage,
-                ...current.slice(assistantIndex),
-              ];
+              return upsertOptimisticToolMessage(current, payload, "temp-assistant-quick-");
            });
          },
          onDelta: (payload) => {
--- a/web/src/components/chat/chat-messages-panel.tsx
+++ b/web/src/components/chat/chat-messages-panel.tsx
@@ -1,8 +1,10 @@
+import { useMemo, useRef, useState } from "preact/hooks";
+import type { JSX } from "preact";
 import { cn } from "@/lib/utils";
 import { ChatAttachmentList } from "@/components/chat/chat-attachment-list";
 import { getMessageAttachments, type Message } from "@/lib/api";
 import { MarkdownContent } from "@/components/markdown/markdown-content";
-import { Globe2, Link2, Wrench } from "lucide-preact";
+import { ChevronDown, ChevronUp, Globe2, Link2, Wrench } from "lucide-preact";

 type Props = {
  messages: Message[];
@@ -14,7 +16,7 @@ type ToolLogMetadata = {
  kind: "tool_call";
  toolCallId?: string;
  toolName?: string;
-  status?: "completed" | "failed";
+  status?: "initiated" | "completed" | "failed";
  summary?: string;
  args?: Record<string, unknown>;
  startedAt?: string;
@@ -71,9 +73,40 @@ function formatToolTimestamp(...values: Array<string | null | undefined>) {
  return new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" }).format(new Date(value));
 }

-function getToolDetailLabel(message: Message, metadata: ToolLogMetadata, isFailed: boolean) {
+type ToolCallVisualState = "initiated" | "completed" | "failed";
+type MessageRenderItem = { kind: "message"; message: Message } | { kind: "tool_group"; key: string; messages: Message[] };
+type ToolStackStyle = JSX.CSSProperties & {
+  "--tool-stack-x"?: string;
+  "--tool-stack-y"?: string;
+  "--tool-stack-z"?: string;
+  "--tool-stack-scale"?: string;
+  "--tool-stack-opacity"?: string;
+  "--tool-stack-delay"?: string;
+  "--tool-stack-from-transform"?: string;
+  "--tool-stack-to-transform"?: string;
+  "--tool-stack-from-opacity"?: string;
+  "--tool-stack-to-opacity"?: string;
+};
+type ToolStackContainerStyle = JSX.CSSProperties & {
+  "--tool-stack-from-height"?: string;
+  "--tool-stack-to-height"?: string;
+};
+type ToolStackMotionDirection = "expand" | "collapse" | null;
+
+const COLLAPSED_TOOL_STACK_LIMIT = 4;
+const TOOL_STACK_CARD_HEIGHT = 62;
+const TOOL_STACK_CARD_GAP = 10;
+const TOOL_STACK_LAYOUT_ANIMATION_MS = 340;
+
+function getToolVisualState(metadata: ToolLogMetadata): ToolCallVisualState {
+  if (metadata.status === "failed") return "failed";
+  if (metadata.status === "initiated") return "initiated";
+  return "completed";
+}
+
+function getToolDetailLabel(message: Message, metadata: ToolLogMetadata, state: ToolCallVisualState) {
  return [
-    isFailed ? "Failed" : "Completed",
+    state === "failed" ? "Failed" : state === "initiated" ? "Running" : "Completed",
    formatDuration(metadata.durationMs),
    formatToolTimestamp(message.createdAt, metadata.completedAt, metadata.startedAt),
  ]
@@ -81,53 +114,293 @@ function getToolDetailLabel(message: Message, metadata: ToolLogMetadata, isFaile
    .join(" • ");
 }

+function buildMessageRenderItems(messages: Message[]) {
+  const items: MessageRenderItem[] = [];
+  let toolRun: Message[] = [];
+
+  const flushToolRun = () => {
+    if (!toolRun.length) return;
+    if (toolRun.length === 1) {
+      items.push({ kind: "message", message: toolRun[0] });
+    } else {
+      items.push({ kind: "tool_group", key: toolRun[0].id, messages: toolRun });
+    }
+    toolRun = [];
+  };
+
+  for (const message of messages) {
+    if (message.role === "tool" && asToolLogMetadata(message.metadata)) {
+      toolRun.push(message);
+      continue;
+    }
+
+    flushToolRun();
+    items.push({ kind: "message", message });
+  }
+
+  flushToolRun();
+  return items;
+}
+
+function getToolStackHeight(messageCount: number, expanded: boolean) {
+  const visibleCount = Math.min(messageCount, COLLAPSED_TOOL_STACK_LIMIT);
+  return expanded
+    ? `${TOOL_STACK_CARD_HEIGHT + Math.max(0, messageCount - 1) * (TOOL_STACK_CARD_HEIGHT + TOOL_STACK_CARD_GAP)}px`
+    : `${TOOL_STACK_CARD_HEIGHT + Math.max(0, visibleCount - 1) * TOOL_STACK_CARD_GAP}px`;
+}
+
+function getToolStackContainerStyle(messageCount: number, expanded: boolean, motionDirection: ToolStackMotionDirection): ToolStackContainerStyle {
+  const collapsedHeight = getToolStackHeight(messageCount, false);
+  const expandedHeight = getToolStackHeight(messageCount, true);
+  const targetHeight = expanded ? expandedHeight : collapsedHeight;
+  const fromHeight = motionDirection === "expand" ? collapsedHeight : motionDirection === "collapse" ? expandedHeight : targetHeight;
+
+  return {
+    "--tool-stack-from-height": fromHeight,
+    "--tool-stack-to-height": targetHeight,
+    height: targetHeight,
+  };
+}
+
+function getExpandedToolLayout(index: number, messageCount: number) {
+  const y = `${index * (TOOL_STACK_CARD_HEIGHT + TOOL_STACK_CARD_GAP)}px`;
+  return {
+    opacity: "1",
+    transform: `translate3d(0px, ${y}, 0px) scale(1)`,
+    x: "0px",
+    y,
+    z: "0px",
+    scale: "1",
+    zIndex: messageCount - index,
+  };
+}
+
+function getCollapsedToolLayout(index: number, messageCount: number) {
+  const depth = messageCount - index - 1;
+  const visibleDepth = Math.min(depth, COLLAPSED_TOOL_STACK_LIMIT - 1);
+  const isHidden = depth >= COLLAPSED_TOOL_STACK_LIMIT;
+  const visibleCount = Math.min(messageCount, COLLAPSED_TOOL_STACK_LIMIT);
+  const x = `${visibleDepth * 11}px`;
+  const y = `${visibleDepth * TOOL_STACK_CARD_GAP}px`;
+  const z = `${visibleDepth * -36}px`;
+  const scale = `${Math.max(0.88, 1 - visibleDepth * 0.035)}`;
+  const opacity = isHidden ? "0" : `${Math.max(0.34, 1 - visibleDepth * 0.22)}`;
+
+  return {
+    opacity,
+    transform: `translate3d(${x}, ${y}, ${z}) scale(${scale})`,
+    x,
+    y,
+    z,
+    scale,
+    zIndex: isHidden ? 0 : visibleCount - visibleDepth,
+  };
+}
+
+function getToolStackStyle(index: number, messageCount: number, expanded: boolean, motionDirection: ToolStackMotionDirection): ToolStackStyle {
+  const expandedLayout = getExpandedToolLayout(index, messageCount);
+  const collapsedLayout = getCollapsedToolLayout(index, messageCount);
+  const targetLayout = expanded ? expandedLayout : collapsedLayout;
+  const fromLayout = motionDirection === "expand" ? collapsedLayout : motionDirection === "collapse" ? expandedLayout : targetLayout;
+
+  return {
+    "--tool-stack-x": targetLayout.x,
+    "--tool-stack-y": targetLayout.y,
+    "--tool-stack-z": targetLayout.z,
+    "--tool-stack-scale": targetLayout.scale,
+    "--tool-stack-opacity": targetLayout.opacity,
+    "--tool-stack-delay": `${Math.min(messageCount - index - 1, COLLAPSED_TOOL_STACK_LIMIT - 1) * 34}ms`,
+    "--tool-stack-from-transform": fromLayout.transform,
+    "--tool-stack-to-transform": targetLayout.transform,
+    "--tool-stack-from-opacity": fromLayout.opacity,
+    "--tool-stack-to-opacity": targetLayout.opacity,
+    opacity: targetLayout.opacity,
+    transform: targetLayout.transform,
+    zIndex: targetLayout.zIndex,
+  };
+}
+
+function ToolCallCard({
+  message,
+  className,
+  style,
+}: {
+  message: Message;
+  className?: string;
+  style?: JSX.CSSProperties;
+}) {
+  const toolLogMetadata = asToolLogMetadata(message.metadata);
+  if (!toolLogMetadata) return null;
+
+  const iconKind = getToolIconName(toolLogMetadata.toolName ?? message.name);
+  const Icon = iconKind === "search" ? Globe2 : iconKind === "fetch" ? Link2 : Wrench;
+  const toolState = getToolVisualState(toolLogMetadata);
+  const isFailed = toolState === "failed";
+  const isInitiated = toolState === "initiated";
+  const toolSummary = getToolSummary(message, toolLogMetadata);
+  const toolLabel = getToolLabel(message, toolLogMetadata);
+  const toolDetailLabel = getToolDetailLabel(message, toolLogMetadata, toolState);
+
+  return (
+    <div
+      className={cn(
+        "inline-flex min-w-0 items-start gap-3 overflow-hidden rounded-xl border px-3 py-2.5 shadow-[inset_0_1px_0_hsl(180_100%_88%_/_0.06)]",
+        isFailed
+          ? "border-rose-400/34 bg-[linear-gradient(90deg,hsl(350_72%_44%_/_0.18),hsl(342_66%_9%_/_0.72))]"
+          : isInitiated
+            ? "border-amber-300/34 bg-[linear-gradient(90deg,hsl(43_74%_30%_/_0.34),hsl(260_48%_13%_/_0.74))]"
+            : "border-cyan-400/34 bg-[linear-gradient(90deg,hsl(184_89%_21%_/_0.70),hsl(208_66%_12%_/_0.78))]",
+        className
+      )}
+      style={style}
+      title={`${toolSummary}\n${toolLabel} • ${toolDetailLabel}`}
+    >
+      <span
+        className={cn(
+          "mt-0.5 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg border",
+          isFailed
+            ? "border-rose-400/34 bg-rose-400/13 text-rose-300"
+            : isInitiated
+              ? "border-amber-300/34 bg-amber-300/13 text-amber-200"
+              : "border-cyan-300/34 bg-cyan-300/13 text-cyan-300"
+        )}
+      >
+        <Icon className="h-4 w-4" />
+      </span>
+      <span className="min-w-0 flex-1 space-y-1">
+        <span className={cn("block truncate text-sm leading-5", isFailed ? "text-rose-200" : "text-violet-50/95")}>{toolSummary}</span>
+        <span className="flex min-w-0 items-center gap-1.5 text-[11px] leading-4">
+          <span className={cn("min-w-0 truncate font-semibold", isFailed ? "text-rose-300/85" : isInitiated ? "text-amber-200/90" : "text-cyan-200/90")}>
+            {toolLabel}
+          </span>
+          <span className="min-w-0 truncate text-violet-200/64">{toolDetailLabel}</span>
+        </span>
+      </span>
+    </div>
+  );
+}
+
+function ToolCallStack({
+  groupKey,
+  messages,
+  expanded,
+  onToggle,
+}: {
+  groupKey: string;
+  messages: Message[];
+  expanded: boolean;
+  onToggle: (groupKey: string) => void;
+}) {
+  const hiddenCount = Math.max(0, messages.length - COLLAPSED_TOOL_STACK_LIMIT);
+  const countLabel = `${messages.length} tool ${messages.length === 1 ? "call" : "calls"}`;
+  const [motionDirection, setMotionDirection] = useState<ToolStackMotionDirection>(null);
+  const [motionRevision, setMotionRevision] = useState(0);
+  const motionResetTimerRef = useRef<number | null>(null);
+
+  const handleToggle = () => {
+    setMotionDirection(expanded ? "collapse" : "expand");
+    setMotionRevision((current) => current + 1);
+    if (typeof window !== "undefined") {
+      if (motionResetTimerRef.current !== null) window.clearTimeout(motionResetTimerRef.current);
+      motionResetTimerRef.current = window.setTimeout(() => {
+        setMotionDirection(null);
+        motionResetTimerRef.current = null;
+      }, TOOL_STACK_LAYOUT_ANIMATION_MS + 60);
+    }
+    onToggle(groupKey);
+  };
+
+  return (
+    <div className="flex justify-start">
+      <div
+        className={cn(
+          "tool-call-stack-shell relative w-full max-w-[85%] min-w-0 pr-10",
+          motionDirection && (motionRevision % 2 === 0 ? "tool-call-stack-shell-layout-a" : "tool-call-stack-shell-layout-b")
+        )}
+        data-tool-stack-group={groupKey}
+        data-expanded={expanded ? "true" : "false"}
+        style={getToolStackContainerStyle(messages.length, expanded, motionDirection)}
+      >
+        {messages.map((message, index) => {
+          const depth = messages.length - index - 1;
+          const isHidden = !expanded && depth >= COLLAPSED_TOOL_STACK_LIMIT;
+          return (
+            <div
+              key={message.id}
+              className={cn(
+                "tool-call-stack-card absolute left-0 right-10 top-0 w-auto max-w-none",
+                motionDirection && (motionRevision % 2 === 0 ? "tool-call-stack-card-layout-a" : "tool-call-stack-card-layout-b"),
+                isHidden && "pointer-events-none"
+              )}
+              style={getToolStackStyle(index, messages.length, expanded, motionDirection)}
+              aria-hidden={isHidden ? "true" : undefined}
+            >
+              <div
+                className={cn("tool-call-stack-card-surface", !isHidden && "tool-call-stack-card-enter")}
+                data-tool-stack-card-id={message.id}
+              >
+                <ToolCallCard message={message} className="tool-call-stack-card-glass w-full max-w-full" />
+              </div>
+            </div>
+          );
+        })}
+        {!expanded && hiddenCount ? (
+          <span className="absolute bottom-1 right-10 z-20 rounded-full border border-cyan-300/30 bg-slate-950/86 px-2 py-0.5 text-[10px] font-semibold leading-none text-cyan-100 shadow-sm">
+            +{hiddenCount}
+          </span>
+        ) : null}
+        <button
+          type="button"
+          className="tool-call-stack-toggle absolute right-0 top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full"
+          aria-expanded={expanded ? "true" : "false"}
+          aria-label={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
+          title={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
+          onClick={handleToggle}
+        >
+          {expanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
  const hasPendingAssistant = messages.some((message) => message.id.startsWith("temp-assistant-") && message.content.trim().length === 0);
+  const renderItems = useMemo(() => buildMessageRenderItems(messages), [messages]);
+  const [expandedToolGroups, setExpandedToolGroups] = useState<Set<string>>(() => new Set());
+
+  const toggleToolGroup = (groupKey: string) => {
+    setExpandedToolGroups((current) => {
+      const next = new Set(current);
+      if (next.has(groupKey)) next.delete(groupKey);
+      else next.add(groupKey);
+      return next;
+    });
+  };

  return (
    <>
      {isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
      <div className="mx-auto max-w-4xl space-y-6">
-        {messages.map((message) => {
+        {renderItems.map((item) => {
+          if (item.kind === "tool_group") {
+            return (
+              <ToolCallStack
+                key={`tool-group-${item.key}`}
+                groupKey={item.key}
+                messages={item.messages}
+                expanded={expandedToolGroups.has(item.key)}
+                onToggle={toggleToolGroup}
+              />
+            );
+          }
+
+          const { message } = item;
          const toolLogMetadata = asToolLogMetadata(message.metadata);
          if (message.role === "tool" && toolLogMetadata) {
-            const iconKind = getToolIconName(toolLogMetadata.toolName ?? message.name);
-            const Icon = iconKind === "search" ? Globe2 : iconKind === "fetch" ? Link2 : Wrench;
-            const isFailed = toolLogMetadata.status === "failed";
-            const toolSummary = getToolSummary(message, toolLogMetadata);
-            const toolLabel = getToolLabel(message, toolLogMetadata);
-            const toolDetailLabel = getToolDetailLabel(message, toolLogMetadata, isFailed);
            return (
              <div key={message.id} className="flex justify-start">
-                <div
-                  className={cn(
-                    "inline-flex max-w-[85%] min-w-0 items-start gap-3 overflow-hidden rounded-xl border px-3 py-2.5 shadow-[inset_0_1px_0_hsl(180_100%_88%_/_0.06)]",
-                    isFailed
-                      ? "border-rose-400/34 bg-[linear-gradient(90deg,hsl(350_72%_44%_/_0.18),hsl(342_66%_9%_/_0.72))]"
-                      : "border-cyan-400/34 bg-[linear-gradient(90deg,hsl(184_89%_21%_/_0.70),hsl(208_66%_12%_/_0.78))]"
-                  )}
-                  title={`${toolSummary}\n${toolLabel} • ${toolDetailLabel}`}
-                >
-                  <span
-                    className={cn(
-                      "mt-0.5 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg border",
-                      isFailed ? "border-rose-400/34 bg-rose-400/13 text-rose-300" : "border-cyan-300/34 bg-cyan-300/13 text-cyan-300"
-                    )}
-                  >
-                    <Icon className="h-4 w-4" />
-                  </span>
-                  <span className="min-w-0 flex-1 space-y-1">
-                    <span className={cn("block truncate text-sm leading-5", isFailed ? "text-rose-200" : "text-violet-50/95")}>
-                      {toolSummary}
-                    </span>
-                    <span className="flex min-w-0 items-center gap-1.5 text-[11px] leading-4">
-                      <span className={cn("min-w-0 truncate font-semibold", isFailed ? "text-rose-300/85" : "text-cyan-200/90")}>
-                        {toolLabel}
-                      </span>
-                      <span className="min-w-0 truncate text-violet-200/64">{toolDetailLabel}</span>
-                    </span>
-                  </span>
-                </div>
+                <ToolCallCard message={message} className="max-w-[85%]" />
              </div>
            );
          }
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -140,6 +140,148 @@ textarea {
    0 14px 36px hsl(240 80% 2% / 0.28);
 }

+.tool-call-stack-shell {
+  perspective: 900px;
+  transform-style: preserve-3d;
+  isolation: isolate;
+}
+
+.tool-call-stack-card {
+  transform: translate3d(var(--tool-stack-x, 0), var(--tool-stack-y, 0), var(--tool-stack-z, 0)) scale(var(--tool-stack-scale, 1));
+  transform-origin: top left;
+  opacity: var(--tool-stack-opacity, 1);
+  transition:
+    opacity 180ms ease,
+    transform 300ms cubic-bezier(0.2, 0.8, 0.22, 1);
+  will-change: transform, opacity;
+}
+
+.tool-call-stack-shell-layout-a {
+  animation: tool-call-stack-height-a 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.tool-call-stack-shell-layout-b {
+  animation: tool-call-stack-height-b 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.tool-call-stack-card-layout-a {
+  animation: tool-call-stack-layout-a 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.tool-call-stack-card-layout-b {
+  animation: tool-call-stack-layout-b 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.tool-call-stack-card-surface {
+  transform-origin: top left;
+}
+
+.tool-call-stack-card-glass {
+  backdrop-filter: blur(10px);
+}
+
+.tool-call-stack-card-enter {
+  animation: tool-call-stack-drop-in 320ms cubic-bezier(0.18, 0.95, 0.28, 1) backwards;
+  animation-delay: var(--tool-stack-delay, 0ms);
+}
+
+.tool-call-stack-toggle {
+  border: 1px solid hsl(188 82% 70% / 0.36);
+  background:
+    linear-gradient(180deg, hsl(230 36% 16% / 0.96), hsl(238 48% 7% / 0.96)),
+    hsl(236 48% 8%);
+  color: hsl(186 92% 86%);
+  box-shadow:
+    inset 0 1px 0 hsl(180 100% 88% / 0.08),
+    0 8px 22px hsl(235 72% 2% / 0.42);
+  transition:
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease,
+    filter 160ms ease;
+}
+
+.tool-call-stack-toggle:hover {
+  border-color: hsl(188 92% 74% / 0.62);
+  color: hsl(184 100% 92%);
+  filter: brightness(1.08);
+}
+
+.tool-call-stack-toggle:focus-visible {
+  outline: 2px solid hsl(188 92% 72% / 0.9);
+  outline-offset: 2px;
+}
+
+@keyframes tool-call-stack-height-a {
+  from {
+    height: var(--tool-stack-from-height);
+  }
+
+  to {
+    height: var(--tool-stack-to-height);
+  }
+}
+
+@keyframes tool-call-stack-height-b {
+  from {
+    height: var(--tool-stack-from-height);
+  }
+
+  to {
+    height: var(--tool-stack-to-height);
+  }
+}
+
+@keyframes tool-call-stack-layout-a {
+  from {
+    opacity: var(--tool-stack-from-opacity, 1);
+    transform: var(--tool-stack-from-transform);
+  }
+
+  to {
+    opacity: var(--tool-stack-to-opacity, 1);
+    transform: var(--tool-stack-to-transform);
+  }
+}
+
+@keyframes tool-call-stack-layout-b {
+  from {
+    opacity: var(--tool-stack-from-opacity, 1);
+    transform: var(--tool-stack-from-transform);
+  }
+
+  to {
+    opacity: var(--tool-stack-to-opacity, 1);
+    transform: var(--tool-stack-to-transform);
+  }
+}
+
+@keyframes tool-call-stack-drop-in {
+  from {
+    opacity: 0.72;
+    transform: translate3d(0, -0.65rem, 120px) scale(1.025) rotateX(3deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1) rotateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-call-stack-card {
+    transition: none;
+  }
+
+  .tool-call-stack-shell-layout-a,
+  .tool-call-stack-shell-layout-b,
+  .tool-call-stack-card-layout-a,
+  .tool-call-stack-card-layout-b,
+  .tool-call-stack-card-enter {
+    animation: none;
+  }
+}
+
 .md-content {
  word-break: break-word;
 }
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -45,12 +45,12 @@ export type Message = {
 export type ToolCallEvent = {
  toolCallId: string;
  name: string;
-  status: "completed" | "failed";
+  status: "initiated" | "completed" | "failed";
  summary: string;
  args: Record<string, unknown>;
  startedAt: string;
-  completedAt: string;
-  durationMs: number;
+  completedAt?: string;
+  durationMs?: number;
  error?: string;
  resultPreview?: string;
 };
Author	SHA1	Message	Date
James Magahern	7436544a69	ios: add tool call stacking	2026-06-12 00:26:21 -07:00
James Magahern	95796646b1	web: tool stacking ui	2026-06-12 00:09:44 -07:00
James Magahern	d7214c88ad	fix most web_fetches from getting blocked using a real user agent	2026-06-11 23:36:19 -07:00
James Magahern	22aa652257	Fix iOS chat scroll pinning	2026-06-07 19:58:04 -07:00
James Magahern	8f6e8c17a5	ios: add fastlane	2026-06-05 23:19:14 -07:00
James Magahern	fccc8110f4	Show in-progress tool calls	2026-06-05 22:20:56 -07:00