diff --git a/termui/termui.go b/termui/termui.go
index 17f3ff2..0146190 100644
--- a/termui/termui.go
+++ b/termui/termui.go
@@ -59,6 +59,30 @@
 {{ range .input.responseOptions -}}
   - {{ .caption}}: {{.responseText}}
 {{end -}}
+{{else if eq .msg.ToolName "browser_navigate" -}}
+ 🌐 {{.input.url -}}
+{{else if eq .msg.ToolName "browser_click" -}}
+ 🖱️  {{.input.selector -}}
+{{else if eq .msg.ToolName "browser_type" -}}
+ ⌨️  {{.input.selector}}: "{{.input.text}}"
+{{else if eq .msg.ToolName "browser_wait_for" -}}
+ ⏳ {{.input.selector -}}
+{{else if eq .msg.ToolName "browser_get_text" -}}
+ 📖 {{.input.selector -}}
+{{else if eq .msg.ToolName "browser_eval" -}}
+ 📱 {{.input.expression -}}
+{{else if eq .msg.ToolName "browser_take_screenshot" -}}
+ 📸 Screenshot
+{{else if eq .msg.ToolName "browser_scroll_into_view" -}}
+ 🔄 {{.input.selector -}}
+{{else if eq .msg.ToolName "browser_resize" -}}
+ 🖼️  {{.input.width}}x{{.input.height -}}
+{{else if eq .msg.ToolName "browser_read_image" -}}
+ 🖼️  {{.input.path -}}
+{{else if eq .msg.ToolName "browser_recent_console_logs" -}}
+ 📜 Console logs
+{{else if eq .msg.ToolName "browser_clear_console_logs" -}}
+ 🧹 Clear console logs
 {{else -}}
  🛠️  {{ .msg.ToolName}}: {{.msg.ToolInput -}}
 {{end -}}
diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
index 8e500ff..792e893 100644
--- a/webui/src/web-components/sketch-tool-calls.ts
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -5,6 +5,17 @@
 import "./sketch-tool-card";
 import "./sketch-tool-card-take-screenshot";
 import "./sketch-tool-card-about-sketch";
+import "./sketch-tool-card-browser-navigate";
+import "./sketch-tool-card-browser-click";
+import "./sketch-tool-card-browser-type";
+import "./sketch-tool-card-browser-wait-for";
+import "./sketch-tool-card-browser-get-text";
+import "./sketch-tool-card-browser-eval";
+import "./sketch-tool-card-browser-scroll-into-view";
+import "./sketch-tool-card-browser-resize";
+import "./sketch-tool-card-browser-read-image";
+import "./sketch-tool-card-browser-recent-console-logs";
+import "./sketch-tool-card-browser-clear-console-logs";
 
 @customElement("sketch-tool-calls")
 export class SketchToolCalls extends LitElement {
@@ -143,11 +154,66 @@
           .open=${open}
           .toolCall=${toolCall}
         ></sketch-tool-card-todo-read>`;
+      case "browser_navigate":
+        return html`<sketch-tool-card-browser-navigate
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-navigate>`;
       case "keyword_search":
         return html`<sketch-tool-card-keyword-search
           .open=${open}
           .toolCall=${toolCall}
         ></sketch-tool-card-keyword-search>`;
+      case "browser_click":
+        return html`<sketch-tool-card-browser-click
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-click>`;
+      case "browser_type":
+        return html`<sketch-tool-card-browser-type
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-type>`;
+      case "browser_wait_for":
+        return html`<sketch-tool-card-browser-wait-for
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-wait-for>`;
+      case "browser_get_text":
+        return html`<sketch-tool-card-browser-get-text
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-get-text>`;
+      case "browser_eval":
+        return html`<sketch-tool-card-browser-eval
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-eval>`;
+      case "browser_scroll_into_view":
+        return html`<sketch-tool-card-browser-scroll-into-view
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-scroll-into-view>`;
+      case "browser_resize":
+        return html`<sketch-tool-card-browser-resize
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-resize>`;
+      case "browser_read_image":
+        return html`<sketch-tool-card-browser-read-image
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-read-image>`;
+      case "browser_recent_console_logs":
+        return html`<sketch-tool-card-browser-recent-console-logs
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-recent-console-logs>`;
+      case "browser_clear_console_logs":
+        return html`<sketch-tool-card-browser-clear-console-logs
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-browser-clear-console-logs>`;
     }
     return html`<sketch-tool-card-generic
       .open=${open}
diff --git a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
new file mode 100644
index 0000000..556d1be
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
@@ -0,0 +1,44 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-clear-console-logs")
+export class SketchToolCardBrowserClearConsoleLogs extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          🧹 Clear console logs
+        </span>
+        <div slot="input">
+          <div>Clear all console logs</div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-clear-console-logs": SketchToolCardBrowserClearConsoleLogs;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-click.ts b/webui/src/web-components/sketch-tool-card-browser-click.ts
new file mode 100644
index 0000000..c19114c
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-click.ts
@@ -0,0 +1,64 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-click")
+export class SketchToolCardBrowserClick extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .selector-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get selector
+    let selector = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        selector = input.selector || "";
+      }
+    } catch (e) {
+      console.error("Error parsing click input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          🖱️ ${selector}
+        </span>
+        <div slot="input">
+          <div>Click: <span class="selector-input">${selector}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-click": SketchToolCardBrowserClick;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-eval.ts b/webui/src/web-components/sketch-tool-card-browser-eval.ts
new file mode 100644
index 0000000..15fcc16
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-eval.ts
@@ -0,0 +1,67 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-eval")
+export class SketchToolCardBrowserEval extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .expression-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get expression
+    let expression = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        expression = input.expression || "";
+      }
+    } catch (e) {
+      console.error("Error parsing eval input:", e);
+    }
+
+    // Truncate expression for summary if too long
+    const displayExpression = expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          📱 ${displayExpression}
+        </span>
+        <div slot="input">
+          <div>Evaluate: <span class="expression-input">${expression}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-eval": SketchToolCardBrowserEval;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-get-text.ts b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
new file mode 100644
index 0000000..b093650
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
@@ -0,0 +1,64 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-get-text")
+export class SketchToolCardBrowserGetText extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .selector-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get selector
+    let selector = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        selector = input.selector || "";
+      }
+    } catch (e) {
+      console.error("Error parsing get text input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          📖 ${selector}
+        </span>
+        <div slot="input">
+          <div>Get text from: <span class="selector-input">${selector}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-get-text": SketchToolCardBrowserGetText;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-navigate.ts b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
new file mode 100644
index 0000000..37efbd1
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
@@ -0,0 +1,64 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-navigate")
+export class SketchToolCardBrowserNavigate extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .url-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get URL
+    let url = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        url = input.url || "";
+      }
+    } catch (e) {
+      console.error("Error parsing navigate input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          🌐 ${url}
+        </span>
+        <div slot="input">
+          <div>Navigate to: <span class="url-input">${url}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-navigate": SketchToolCardBrowserNavigate;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-read-image.ts b/webui/src/web-components/sketch-tool-card-browser-read-image.ts
new file mode 100644
index 0000000..554feee
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-read-image.ts
@@ -0,0 +1,67 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-read-image")
+export class SketchToolCardBrowserReadImage extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .path-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get path
+    let path = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        path = input.path || "";
+      }
+    } catch (e) {
+      console.error("Error parsing read image input:", e);
+    }
+
+    // Show just the filename in summary
+    const filename = path.split('/').pop() || path;
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          🖼️ ${filename}
+        </span>
+        <div slot="input">
+          <div>Read image: <span class="path-input">${path}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-read-image": SketchToolCardBrowserReadImage;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
new file mode 100644
index 0000000..55d080d
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
@@ -0,0 +1,64 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-recent-console-logs")
+export class SketchToolCardBrowserRecentConsoleLogs extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .limit-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get limit
+    let limit = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        limit = input.limit ? input.limit.toString() : "100";
+      }
+    } catch (e) {
+      console.error("Error parsing recent console logs input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          📜 Console logs (${limit})
+        </span>
+        <div slot="input">
+          <div>Get recent console logs: <span class="limit-input">limit ${limit}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-recent-console-logs": SketchToolCardBrowserRecentConsoleLogs;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-resize.ts b/webui/src/web-components/sketch-tool-card-browser-resize.ts
new file mode 100644
index 0000000..0d04091
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-resize.ts
@@ -0,0 +1,66 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-resize")
+export class SketchToolCardBrowserResize extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .size-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get width and height
+    let width = "";
+    let height = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        width = input.width ? input.width.toString() : "";
+        height = input.height ? input.height.toString() : "";
+      }
+    } catch (e) {
+      console.error("Error parsing resize input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          🖼️ ${width}x${height}
+        </span>
+        <div slot="input">
+          <div>Resize to: <span class="size-input">${width}x${height}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-resize": SketchToolCardBrowserResize;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
new file mode 100644
index 0000000..4070882
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
@@ -0,0 +1,64 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-scroll-into-view")
+export class SketchToolCardBrowserScrollIntoView extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .selector-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get selector
+    let selector = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        selector = input.selector || "";
+      }
+    } catch (e) {
+      console.error("Error parsing scroll into view input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          🔄 ${selector}
+        </span>
+        <div slot="input">
+          <div>Scroll into view: <span class="selector-input">${selector}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-scroll-into-view": SketchToolCardBrowserScrollIntoView;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-type.ts b/webui/src/web-components/sketch-tool-card-browser-type.ts
new file mode 100644
index 0000000..1f58eb8
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-type.ts
@@ -0,0 +1,76 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-type")
+export class SketchToolCardBrowserType extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .selector-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+    
+    .text-input {
+      font-family: monospace;
+      background: rgba(0, 100, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get selector and text
+    let selector = "";
+    let text = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        selector = input.selector || "";
+        text = input.text || "";
+      }
+    } catch (e) {
+      console.error("Error parsing type input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          ⌨️ ${selector}: "${text}"
+        </span>
+        <div slot="input">
+          <div>Type into: <span class="selector-input">${selector}</span></div>
+          <div>Text: <span class="text-input">${text}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-type": SketchToolCardBrowserType;
+  }
+}
diff --git a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
new file mode 100644
index 0000000..eb3306b
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
@@ -0,0 +1,64 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+@customElement("sketch-tool-card-browser-wait-for")
+export class SketchToolCardBrowserWaitFor extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+    
+    .selector-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get selector
+    let selector = "";
+    try {
+      if (this.toolCall?.input) {
+        const input = JSON.parse(this.toolCall.input);
+        selector = input.selector || "";
+      }
+    } catch (e) {
+      console.error("Error parsing wait for input:", e);
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text">
+          ⏳ ${selector}
+        </span>
+        <div slot="input">
+          <div>Wait for: <span class="selector-input">${selector}</span></div>
+        </div>
+        <div slot="result">
+          ${this.toolCall?.result_message?.tool_result
+            ? html`<pre>${this.toolCall.result_message.tool_result}</pre>`
+            : ""}
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-browser-wait-for": SketchToolCardBrowserWaitFor;
+  }
+}