diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
index e47e4ea..8842aee 100644
--- a/webui/src/web-components/sketch-tool-calls.ts
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -3,6 +3,7 @@
 import { repeat } from "lit/directives/repeat.js";
 import { ToolCall } from "../types";
 import "./sketch-tool-card";
+import "./sketch-tool-card-screenshot";
 
 @customElement("sketch-tool-calls")
 export class SketchToolCalls extends LitElement {
@@ -110,6 +111,11 @@
           .open=${open}
           .toolCall=${toolCall}
         ></sketch-tool-card-title>`;
+      case "browser_screenshot":
+        return html`<sketch-tool-card-screenshot
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-screenshot>`;
     }
     return html`<sketch-tool-card-generic
       .open=${open}
@@ -133,15 +139,19 @@
     return html`<div class="tool-calls-container">
       <div class="tool-call-cards-container">
         ${repeat(this.toolCalls, this.toolUseKey, (toolCall, idx) => {
-          let lastCall = false;
-          if (idx == this.toolCalls?.length - 1) {
-            lastCall = true;
+          let shouldOpen = false;
+          // Always expand screenshot tool calls, expand last tool call if this.open is true
+          if (
+            toolCall.name === "browser_screenshot" ||
+            (idx == this.toolCalls?.length - 1 && this.open)
+          ) {
+            shouldOpen = true;
           }
           return html`<div
             id="${toolCall.tool_call_id}"
             class="tool-call-card ${toolCall.name}"
           >
-            ${this.cardForToolCall(toolCall, lastCall && this.open)}
+            ${this.cardForToolCall(toolCall, shouldOpen)}
           </div>`;
         })}
       </div>