webui: add comprehensive browser tool cards and termui support
Implement complete browser tool card coverage with simple, clean styling
following the established bash tool card pattern and add missing termui
handling for all browser tools.
Missing tool coverage identified after commit e7806fbc which added
browser_navigate tool card, revealing gaps in both webui and termui
support for the complete browser tool suite.
Changes include:
1. New browser tool cards with simple, consistent styling:
- browser_click: Shows CSS selector with mouse pointer icon
- browser_type: Shows selector and text input with keyboard icon
- browser_wait_for: Shows selector with hourglass icon for waiting
- browser_get_text: Shows selector with book icon for text extraction
- browser_eval: Shows JavaScript expression with mobile phone icon
- browser_scroll_into_view: Shows selector with arrows icon for scrolling
- browser_resize: Shows dimensions in WxH format with frame icon
- browser_read_image: Shows filename with truncated path display
- browser_recent_console_logs: Shows log count with document icon
- browser_clear_console_logs: Shows clear action with broom icon
2. Updated tool calls mapping system:
- Added all 10 new browser tool card imports to sketch-tool-calls.ts
- Extended cardForToolCall() switch statement with proper case handling
- Consistent HTML template pattern following existing tool cards
- Proper TypeScript declarations for all new components
3. Enhanced termui template with browser tool support:
- Added template cases for all 12 browser tools in toolUseTemplTxt
- Consistent emoji icons and concise display formatting
- Proper parameter extraction for selectors, URLs, dimensions
- Truncation and formatting for clean terminal display
4. Simple, maintainable styling approach:
- Monospace fonts for technical data (selectors, expressions)
- Subtle background highlights for input parameters
- Break-word handling for long selectors and URLs
- Consistent icon usage for quick visual tool identification
- Minimal CSS to keep cards lightweight and debuggable
Technical implementation:
- All tool cards extend LitElement with standard properties
- JSON input parsing with error handling for malformed data
- Slot-based content organization following base tool card pattern
- Consistent summary, input, and result slot population
- TypeScript interface declarations for proper type checking
Testing verification:
- Started test sketch instance and verified tool cards render correctly
- Confirmed browser_take_screenshot card shows timing and status icons
- Verified browser_type card displays selectors and input text properly
- Validated browser_read_image card shows filename truncation
- All tool cards follow established simple styling without visual clutter
This provides complete browser tool coverage in both webui and termui,
maintaining the clean, simple aesthetic while ensuring all browser
automation tools have proper visual representation and status reporting.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s79b2200705afaee8k
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;
+ }
+}