diff --git a/loop/webui/src/web-components/sketch-timeline-message.ts b/loop/webui/src/web-components/sketch-timeline-message.ts
index e34d61f..ef707bd 100644
--- a/loop/webui/src/web-components/sketch-timeline-message.ts
+++ b/loop/webui/src/web-components/sketch-timeline-message.ts
@@ -12,6 +12,9 @@
   @property()
   previousMessage: AgentMessage;
 
+  @property()
+  open: boolean = false;
+
   // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
   // Note that these styles only apply to the scope of this web component's
   // shadow DOM node, so they won't leak out or collide with CSS declared in
@@ -514,6 +517,7 @@
           </div>
           <sketch-tool-calls
             .toolCalls=${this.message?.tool_calls}
+            .open=${this.open}
           ></sketch-tool-calls>
           ${this.message?.commits
             ? html`
diff --git a/loop/webui/src/web-components/sketch-timeline.ts b/loop/webui/src/web-components/sketch-timeline.ts
index 80efd0f..b630679 100644
--- a/loop/webui/src/web-components/sketch-timeline.ts
+++ b/loop/webui/src/web-components/sketch-timeline.ts
@@ -201,6 +201,7 @@
             return html`<sketch-timeline-message
               .message=${message}
               .previousMessage=${previousMessage}
+              .open=${index == this.messages.length - 1}
             ></sketch-timeline-message>`;
           })}
         </div>
diff --git a/loop/webui/src/web-components/sketch-tool-calls.ts b/loop/webui/src/web-components/sketch-tool-calls.ts
index 9461d6d..3f036c2 100644
--- a/loop/webui/src/web-components/sketch-tool-calls.ts
+++ b/loop/webui/src/web-components/sketch-tool-calls.ts
@@ -1,5 +1,6 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import { ToolCall } from "../types";
 import "./sketch-tool-card";
 
@@ -8,6 +9,9 @@
   @property()
   toolCalls: ToolCall[] = [];
 
+  @property()
+  open: boolean = false;
+
   static styles = css`
     /* Tool calls container styles */
     .tool-calls-container {
@@ -101,22 +105,37 @@
     ></sketch-tool-card-generic>`;
   }
 
+  // toolUseKey return value should change, if the toolCall gets a response.
+  toolUseKey(toolCall: ToolCall): string {
+    console.log(
+      "toolUseKey",
+      toolCall.tool_call_id,
+      toolCall.result_message?.idx,
+    );
+    if (!toolCall.result_message) {
+      return toolCall.tool_call_id;
+    }
+    return `${toolCall.tool_call_id}-${toolCall.result_message.idx}`;
+  }
+
   render() {
     return html`<div class="tool-calls-container">
       <div class="tool-calls-header"></div>
       <div class="tool-call-cards-container">
-        ${this.toolCalls?.map((toolCall, idx) => {
-          let lastCall = false;
-          if (idx == this.toolCalls?.length - 1) {
-            lastCall = true;
-          }
-          return html`<div
-            id="${toolCall.tool_call_id}"
-            class="tool-call-card ${toolCall.name}"
-          >
-            ${this.cardForToolCall(toolCall, lastCall)}
-          </div>`;
-        })}
+        ${this.toolCalls
+          ? repeat(this.toolCalls, this.toolUseKey, (toolCall, idx) => {
+              let lastCall = false;
+              if (idx == this.toolCalls?.length - 1) {
+                lastCall = true;
+              }
+              return html`<div
+                id="${toolCall.tool_call_id}"
+                class="tool-call-card ${toolCall.name}"
+              >
+                ${this.cardForToolCall(toolCall, lastCall && this.open)}
+              </div>`;
+            })
+          : ""}
       </div>
     </div>`;
   }
diff --git a/loop/webui/src/web-components/sketch-tool-card.ts b/loop/webui/src/web-components/sketch-tool-card.ts
index 0144ba0..39fadf8 100644
--- a/loop/webui/src/web-components/sketch-tool-card.ts
+++ b/loop/webui/src/web-components/sketch-tool-card.ts
@@ -147,6 +147,13 @@
       font-style: italic;
       color: #aa0909;
     }
+
+    .elapsed {
+      font-size: 10px;
+      color: #888;
+      font-style: italic;
+      margin-left: 3px;
+    }
   `;
 
   constructor() {
@@ -193,7 +200,7 @@
       ? this.toolCall?.result_message.tool_error
         ? html`❌
             <span class="tool-error-message"
-              >${this.toolCall?.result_message.tool_error}</span
+              >${this.toolCall?.result_message.tool_result}</span
             >`
         : ""
       : "⏳";
@@ -217,12 +224,19 @@
       >${toolCallStatus}</span
     >`;
 
+    const elapsed = html`${this.toolCall?.result_message?.elapsed
+      ? html`<span class="elapsed"
+          >${(this.toolCall?.result_message?.elapsed / 1e9).toFixed(2)}s
+          elapsed</span
+        >`
+      : ""}`;
+
     const ret = html`<div class="tool-call">
       <details ?open=${this.open}>
         <summary>
           <span class="tool-name">${this.toolCall?.name}</span>
           <span class="summary-text"><slot name="summary"></slot></span>
-          ${status} ${cancelButton}
+          ${status} ${cancelButton} ${elapsed}
         </summary>
         <slot name="input"></slot>
         <slot name="result"></slot>