diff --git a/webui/src/web-components/DEAR_LLM.md b/webui/src/web-components/DEAR_LLM.md
index 5edac6d..f3b6249 100644
--- a/webui/src/web-components/DEAR_LLM.md
+++ b/webui/src/web-components/DEAR_LLM.md
@@ -1,3 +1,78 @@
+# Modern Component Architecture: SketchTailwindElement
+
+**IMPORTANT: New component architecture standards for all Sketch web components**
+
+## New Component Standard (Use This)
+
+All new Sketch web components should:
+
+1. **Inherit from `SketchTailwindElement`** instead of `LitElement`
+2. **Use Tailwind CSS classes** for styling instead of CSS-in-JS
+3. **Use property-based composition** instead of slot-based composition
+4. **Avoid Shadow DOM** whenever possible
+
+### Example of Modern Component:
+
+```typescript
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
+
+@customElement("sketch-tool-card-example")
+export class SketchToolCardExample extends SketchTailwindElement {
+  @property() toolCall: ToolCall;
+  @property() open: boolean;
+
+  render() {
+    const summaryContent = html`<span class="font-mono text-sm text-gray-700">
+      ${this.toolCall?.name}
+    </span>`;
+
+    const inputContent = html`<div class="p-2 bg-gray-100 rounded">
+      <pre class="whitespace-pre-wrap break-words">${this.toolCall?.input}</pre>
+    </div>`;
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+    ></sketch-tool-card-base>`;
+  }
+}
+```
+
+### Key Differences from Legacy Components:
+
+- **Extends SketchTailwindElement** (not LitElement)
+- **Uses sketch-tool-card-base** with property binding (not slots)
+- **Tailwind classes** like `font-mono text-sm text-gray-700` (not CSS-in-JS)
+- **No static styles** or Shadow DOM
+- **Property-based composition** (`.summaryContent=${html\`...\`}`)
+
+## Legacy Components (Do NOT Use as Examples)
+
+Some existing components still use the old architecture and will be migrated:
+
+- Components that extend `LitElement` directly
+- Components that use `static styles = css\`...\``
+- Components that use slot-based composition (`<slot name="summary"></slot>`)
+- Components that rely on Shadow DOM
+
+**Do not use these legacy patterns for new components.** They are being phased out.
+
+## Migration Status
+
+As of the latest migration:
+
+- ✅ All tool card components now use SketchTailwindElement
+- ✅ Complete Shadow DOM elimination in tool card hierarchy
+- ✅ Consistent Tailwind CSS styling approach
+- 🔄 Other components will be migrated over time
+
+---
+
 # Component Architecture: sketch-tool-card and Related Components
 
 This document explains the relationship between LitElement subclasses in webui/src/web-components/ and the sketch-tool-card custom element, focusing on their containment relationship and CSS styling effects.
diff --git a/webui/src/web-components/sketch-tool-card-about-sketch.ts b/webui/src/web-components/sketch-tool-card-about-sketch.ts
index b480568..acd9a78 100644
--- a/webui/src/web-components/sketch-tool-card-about-sketch.ts
+++ b/webui/src/web-components/sketch-tool-card-about-sketch.ts
@@ -1,8 +1,10 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
 import { marked } from "marked";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 // Safely renders markdown with fallback to plain text on failure
 function renderMarkdown(markdownContent: string): string {
@@ -19,51 +21,38 @@
 }
 
 @customElement("sketch-tool-card-about-sketch")
-export class SketchToolCardAboutSketch extends LitElement {
+export class SketchToolCardAboutSketch extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-style: italic;
-    }
-    .about-sketch-content {
-      background: rgb(246, 248, 250);
-      border-radius: 6px;
-      padding: 12px;
-      margin-top: 10px;
-      max-height: 300px;
-      overflow-y: auto;
-      border: 1px solid #e1e4e8;
-    }
-    .sketch-label {
-      font-weight: bold;
-      color: #24292e;
-    }
-    .icon {
-      margin-right: 6px;
-    }
-  `;
+  // Styles now handled by Tailwind classes in template
 
   render() {
     const resultText = this.toolCall?.result_message?.tool_result || "";
 
+    const summaryContent = html`<span class="italic">
+      <span class="mr-1.5">📚</span> About Sketch
+    </span>`;
+    const inputContent = html`<div>
+      <span class="font-bold text-gray-800"></span>
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<div
+          class="bg-gray-50 rounded-md p-3 mt-2.5 max-h-[300px] overflow-y-auto border border-gray-200"
+        >
+          ${unsafeHTML(renderMarkdown(resultText))}
+        </div>`
+      : "";
+
     return html`
-      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          <span class="icon">📚</span> About Sketch
-        </span>
-        <div slot="input">
-          <div><span class="sketch-label"></span></div>
-        </div>
-        ${this.toolCall?.result_message?.tool_result
-          ? html`<div slot="result">
-              <div class="about-sketch-content">
-                ${unsafeHTML(renderMarkdown(resultText))}
-              </div>
-            </div>`
-          : ""}
-      </sketch-tool-card>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-base.ts b/webui/src/web-components/sketch-tool-card-base.ts
new file mode 100644
index 0000000..1bfdbe1
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-base.ts
@@ -0,0 +1,133 @@
+import { html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+
+@customElement("sketch-tool-card-base")
+export class SketchToolCardBase extends SketchTailwindElement {
+  @property() toolCall: ToolCall;
+  @property() open: boolean;
+  @property() summaryContent: TemplateResult | string = "";
+  @property() inputContent: TemplateResult | string = "";
+  @property() resultContent: TemplateResult | string = "";
+  @state() detailsVisible: boolean = false;
+
+  _cancelToolCall = async (tool_call_id: string, button: HTMLButtonElement) => {
+    button.innerText = "Cancelling";
+    button.disabled = true;
+    try {
+      const response = await fetch("cancel", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          tool_call_id: tool_call_id,
+          reason: "user requested cancellation",
+        }),
+      });
+      if (response.ok) {
+        button.parentElement.removeChild(button);
+      } else {
+        button.innerText = "Cancel";
+      }
+    } catch (e) {
+      console.error("cancel", tool_call_id, e);
+    }
+  };
+
+  _toggleDetails(e: Event) {
+    e.stopPropagation();
+    this.detailsVisible = !this.detailsVisible;
+  }
+
+  render() {
+    // Status indicator based on result
+    let statusIcon = html`<span
+      class="flex items-center justify-center text-sm text-yellow-500 animate-spin"
+      >⏳</span
+    >`;
+    if (this.toolCall?.result_message) {
+      statusIcon = this.toolCall?.result_message.tool_error
+        ? html`<span
+            class="flex items-center justify-center text-sm text-gray-500"
+            >〰️</span
+          >`
+        : html`<span
+            class="flex items-center justify-center text-sm text-green-600"
+            >✓</span
+          >`;
+    }
+
+    // Cancel button for pending operations
+    const cancelButton = this.toolCall?.result_message
+      ? ""
+      : html`<button
+          class="cursor-pointer text-white bg-red-600 hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed border-none rounded text-xs px-1.5 py-0.5 whitespace-nowrap min-w-[50px]"
+          title="Cancel this operation"
+          @click=${(e: Event) => {
+            e.stopPropagation();
+            this._cancelToolCall(
+              this.toolCall?.tool_call_id,
+              e.target as HTMLButtonElement,
+            );
+          }}
+        >
+          Cancel
+        </button>`;
+
+    // Elapsed time display
+    const elapsed = this.toolCall?.result_message?.elapsed
+      ? html`<span
+          class="text-xs text-gray-600 whitespace-nowrap min-w-[40px] text-right"
+          >${(this.toolCall?.result_message?.elapsed / 1e9).toFixed(1)}s</span
+        >`
+      : html`<span
+          class="text-xs text-gray-600 whitespace-nowrap min-w-[40px] text-right"
+        ></span>`;
+
+    // Initialize details visibility based on open property
+    if (this.open && !this.detailsVisible) {
+      this.detailsVisible = true;
+    }
+
+    return html`<div class="block max-w-full w-full box-border overflow-hidden">
+      <div class="flex flex-col w-full">
+        <div
+          class="flex w-full box-border py-1.5 px-2 pl-3 items-center gap-2 cursor-pointer rounded relative overflow-hidden flex-wrap hover:bg-black/[0.02]"
+          @click=${this._toggleDetails}
+        >
+          <span
+            class="font-mono font-medium text-gray-700 bg-black/[0.05] rounded px-1.5 py-0.5 flex-shrink-0 min-w-[45px] text-xs text-center whitespace-nowrap"
+            >${this.toolCall?.name}</span
+          >
+          <span
+            class="whitespace-normal break-words flex-grow flex-shrink text-gray-700 font-mono text-xs px-1 min-w-[50px] max-w-[calc(100%-150px)] inline-block"
+            >${this.summaryContent}</span
+          >
+          <div
+            class="flex items-center gap-3 ml-auto flex-shrink-0 min-w-[120px] justify-end pr-2"
+          >
+            ${statusIcon} ${elapsed} ${cancelButton}
+          </div>
+        </div>
+        <div
+          class="${this.detailsVisible
+            ? "block"
+            : "hidden"} p-2 bg-black/[0.02] mt-px border-t border-black/[0.05] font-mono text-xs text-gray-800 rounded-b max-w-full w-full box-border overflow-hidden"
+        >
+          ${this.inputContent
+            ? html`<div class="mb-2">${this.inputContent}</div>`
+            : ""}
+          ${this.resultContent
+            ? html`<div class="mt-2">${this.resultContent}</div>`
+            : ""}
+        </div>
+      </div>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-base": SketchToolCardBase;
+  }
+}
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
index a1f8ea0..a924b52 100644
--- 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
@@ -1,36 +1,39 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-clear-console-logs")
-export class SketchToolCardBrowserClearConsoleLogs extends LitElement {
+export class SketchToolCardBrowserClearConsoleLogs extends SketchTailwindElement {
   @property()
   toolCall: ToolCall;
 
   @property()
   open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-family: monospace;
-      color: #444;
-      word-break: break-all;
-    }
-  `;
-
   render() {
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🧹 Clear console logs
+    </span>`;
+    const inputContent = html`<div>Clear all console logs</div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-browser-click.ts b/webui/src/web-components/sketch-tool-card-browser-click.ts
index 9264a64..928dd28 100644
--- a/webui/src/web-components/sketch-tool-card-browser-click.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-click.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-click")
-export class SketchToolCardBrowserClick extends LitElement {
+export class SketchToolCardBrowserClick extends SketchTailwindElement {
   @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 = "";
@@ -39,18 +24,33 @@
       console.error("Error parsing click input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🖱️ ${selector}
+    </span>`;
+    const inputContent = html`<div>
+      Click:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${selector}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-browser-eval.ts b/webui/src/web-components/sketch-tool-card-browser-eval.ts
index 8a1ec54..4030b02 100644
--- a/webui/src/web-components/sketch-tool-card-browser-eval.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-eval.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-eval")
-export class SketchToolCardBrowserEval extends LitElement {
+export class SketchToolCardBrowserEval extends SketchTailwindElement {
   @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 = "";
@@ -43,22 +28,33 @@
     const displayExpression =
       expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      📱 ${displayExpression}
+    </span>`;
+    const inputContent = html`<div>
+      Evaluate:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${expression}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
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
index e97bf70..8b5df2f 100644
--- a/webui/src/web-components/sketch-tool-card-browser-get-text.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-get-text")
-export class SketchToolCardBrowserGetText extends LitElement {
+export class SketchToolCardBrowserGetText extends SketchTailwindElement {
   @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 = "";
@@ -39,20 +24,33 @@
       console.error("Error parsing get text input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      📖 ${selector}
+    </span>`;
+    const inputContent = html`<div>
+      Get text from:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${selector}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-browser-navigate.ts b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
index cc9779e..730274e 100644
--- a/webui/src/web-components/sketch-tool-card-browser-navigate.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-navigate")
-export class SketchToolCardBrowserNavigate extends LitElement {
+export class SketchToolCardBrowserNavigate extends SketchTailwindElement {
   @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 = "";
@@ -39,18 +24,33 @@
       console.error("Error parsing navigate input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🌐 ${url}
+    </span>`;
+    const inputContent = html`<div>
+      Navigate to:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${url}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
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
index 8d1debb..dee496e 100644
--- 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
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-recent-console-logs")
-export class SketchToolCardBrowserRecentConsoleLogs extends LitElement {
+export class SketchToolCardBrowserRecentConsoleLogs extends SketchTailwindElement {
   @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 = "";
@@ -39,23 +24,33 @@
       console.error("Error parsing recent console logs input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      📜 Console logs (${limit})
+    </span>`;
+    const inputContent = html`<div>
+      Get recent console logs:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >limit ${limit}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-browser-resize.ts b/webui/src/web-components/sketch-tool-card-browser-resize.ts
index 2d9fde9..ebbc5e3 100644
--- a/webui/src/web-components/sketch-tool-card-browser-resize.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-resize.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-resize")
-export class SketchToolCardBrowserResize extends LitElement {
+export class SketchToolCardBrowserResize extends SketchTailwindElement {
   @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 = "";
@@ -41,20 +26,33 @@
       console.error("Error parsing resize input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🖼️ ${width}x${height}
+    </span>`;
+    const inputContent = html`<div>
+      Resize to:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${width}x${height}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
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
index be765d0..2bafcd2 100644
--- 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
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-scroll-into-view")
-export class SketchToolCardBrowserScrollIntoView extends LitElement {
+export class SketchToolCardBrowserScrollIntoView extends SketchTailwindElement {
   @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 = "";
@@ -39,20 +24,33 @@
       console.error("Error parsing scroll into view input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🔄 ${selector}
+    </span>`;
+    const inputContent = html`<div>
+      Scroll into view:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${selector}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-browser-type.ts b/webui/src/web-components/sketch-tool-card-browser-type.ts
index 3cddd3f..cb947e9 100644
--- a/webui/src/web-components/sketch-tool-card-browser-type.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-type.ts
@@ -1,41 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-type")
-export class SketchToolCardBrowserType extends LitElement {
+export class SketchToolCardBrowserType extends SketchTailwindElement {
   @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 = "";
@@ -50,21 +26,42 @@
       console.error("Error parsing type input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      ⌨️ ${selector}: "${text}"
+    </span>`;
+    const inputContent = html`<div>
+      <div>
+        Type into:
+        <span
+          class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+          >${selector}</span
+        >
+      </div>
+      <div>
+        Text:
+        <span
+          class="font-mono bg-green-50 px-2 py-1 rounded inline-block break-all"
+          >${text}</span
+        >
+      </div>
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
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
index d5fbda9..f35daf6 100644
--- a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-browser-wait-for")
-export class SketchToolCardBrowserWaitFor extends LitElement {
+export class SketchToolCardBrowserWaitFor extends SketchTailwindElement {
   @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 = "";
@@ -39,18 +24,33 @@
       console.error("Error parsing wait for input:", e);
     }
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      ⏳ ${selector}
+    </span>`;
+    const inputContent = html`<div>
+      Wait for:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${selector}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-read-image.ts b/webui/src/web-components/sketch-tool-card-read-image.ts
index ba9a5af..e0e9286 100644
--- a/webui/src/web-components/sketch-tool-card-read-image.ts
+++ b/webui/src/web-components/sketch-tool-card-read-image.ts
@@ -1,32 +1,17 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-read-image")
-export class SketchToolCardReadImage extends LitElement {
+export class SketchToolCardReadImage extends SketchTailwindElement {
   @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 = "";
@@ -42,18 +27,33 @@
     // Show just the filename in summary
     const filename = path.split("/").pop() || path;
 
+    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+      🖼️ ${filename}
+    </span>`;
+    const inputContent = html`<div>
+      Read image:
+      <span
+        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        >${path}</span
+      >
+    </div>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<pre
+          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+        >
+${this.toolCall.result_message.tool_result}</pre
+        >`
+      : "";
+
     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>
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card-take-screenshot.ts b/webui/src/web-components/sketch-tool-card-take-screenshot.ts
index b21686b..8e03b94 100644
--- a/webui/src/web-components/sketch-tool-card-take-screenshot.ts
+++ b/webui/src/web-components/sketch-tool-card-take-screenshot.ts
@@ -1,9 +1,11 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 @customElement("sketch-tool-card-take-screenshot")
-export class SketchToolCardTakeScreenshot extends LitElement {
+export class SketchToolCardTakeScreenshot extends SketchTailwindElement {
   @property()
   toolCall: ToolCall;
 
@@ -16,55 +18,6 @@
   @state()
   loadError: boolean = false;
 
-  static styles = css`
-    .summary-text {
-      font-style: italic;
-      padding: 0.5em;
-    }
-
-    .screenshot-container {
-      margin: 10px 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .screenshot {
-      max-width: 100%;
-      max-height: 500px;
-      border-radius: 4px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-      border: 1px solid #ddd;
-    }
-
-    .loading-indicator {
-      margin: 20px;
-      color: #666;
-      font-style: italic;
-    }
-
-    .error-message {
-      color: #d32f2f;
-      font-style: italic;
-      margin: 10px 0;
-    }
-
-    .screenshot-info {
-      margin-top: 8px;
-      font-size: 12px;
-      color: #666;
-    }
-
-    .selector-info {
-      padding: 4px 8px;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-      font-family: monospace;
-      margin: 5px 0;
-      display: inline-block;
-    }
-  `;
-
   constructor() {
     super();
   }
@@ -108,48 +61,55 @@
     // Construct the URL for the screenshot (using relative URL without leading slash)
     const screenshotUrl = screenshotId ? `screenshot/${screenshotId}` : "";
 
-    return html`
-      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          Screenshot of ${selector}
-        </span>
-        <div slot="input" class="selector-info">
-          ${selector !== "(full page)"
-            ? `Taking screenshot of element: ${selector}`
-            : `Taking full page screenshot`}
-        </div>
-        <div slot="result">
-          ${hasResult
-            ? html`
-                <div class="screenshot-container">
-                  ${!this.imageLoaded && !this.loadError
-                    ? html`<div class="loading-indicator">
-                        Loading screenshot...
+    const summaryContent = html`<span class="italic p-2">
+      Screenshot of ${selector}
+    </span>`;
+    const inputContent = html`<div
+      class="px-2 py-1 bg-gray-100 rounded font-mono my-1.5 inline-block"
+    >
+      ${selector !== "(full page)"
+        ? `Taking screenshot of element: ${selector}`
+        : `Taking full page screenshot`}
+    </div>`;
+    const resultContent = hasResult
+      ? html`
+          <div class="my-2.5 flex flex-col items-center">
+            ${!this.imageLoaded && !this.loadError
+              ? html`<div class="m-5 text-gray-600 italic">
+                  Loading screenshot...
+                </div>`
+              : ""}
+            ${this.loadError
+              ? html`<div class="text-red-700 italic my-2.5">
+                  Failed to load screenshot
+                </div>`
+              : html`
+                  <img
+                    class="max-w-full max-h-[500px] rounded shadow-md border border-gray-300"
+                    src="${screenshotUrl}"
+                    @load=${() => (this.imageLoaded = true)}
+                    @error=${() => (this.loadError = true)}
+                    ?hidden=${!this.imageLoaded}
+                  />
+                  ${this.imageLoaded
+                    ? html`<div class="mt-2 text-xs text-gray-600">
+                        Screenshot saved and displayed
                       </div>`
                     : ""}
-                  ${this.loadError
-                    ? html`<div class="error-message">
-                        Failed to load screenshot
-                      </div>`
-                    : html`
-                        <img
-                          class="screenshot"
-                          src="${screenshotUrl}"
-                          @load=${() => (this.imageLoaded = true)}
-                          @error=${() => (this.loadError = true)}
-                          ?hidden=${!this.imageLoaded}
-                        />
-                        ${this.imageLoaded
-                          ? html`<div class="screenshot-info">
-                              Screenshot saved and displayed
-                            </div>`
-                          : ""}
-                      `}
-                </div>
-              `
-            : ""}
-        </div>
-      </sketch-tool-card>
+                `}
+          </div>
+        `
+      : "";
+
+    return html`
+      <sketch-tool-card-base
+        .open=${this.open}
+        .toolCall=${this.toolCall}
+        .summaryContent=${summaryContent}
+        .inputContent=${inputContent}
+        .resultContent=${resultContent}
+      >
+      </sketch-tool-card-base>
     `;
   }
 }
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 33fa050..72d4a48 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -1,6 +1,6 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import {
   ToolCall,
   MultipleChoiceOption,
@@ -9,6 +9,8 @@
 } from "../types";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import "./sketch-tool-card-base";
 
 // Shared utility function for markdown rendering with DOMPurify sanitization
 function renderMarkdown(markdownContent: string): string {
@@ -63,325 +65,20 @@
   }
 }
 
-// Common styles shared across all tool cards
-const commonStyles = css`
-  :host {
-    display: block;
-    max-width: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  pre {
-    background: rgb(236, 236, 236);
-    color: black;
-    padding: 0.5em;
-    border-radius: 4px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    max-width: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    overflow-wrap: break-word;
-  }
-  .summary-text {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    font-family: monospace;
-    display: block;
-  }
-`;
-
-@customElement("sketch-tool-card")
-export class SketchToolCard extends LitElement {
-  @property() toolCall: ToolCall;
-  @property() open: boolean;
-  @state() detailsVisible: boolean = false;
-
-  static styles = css`
-    .tool-call {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-    .tool-row {
-      display: flex;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 6px 8px 6px 12px;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-      border-radius: 4px;
-      position: relative;
-      overflow: hidden;
-      flex-wrap: wrap;
-    }
-    .tool-row:hover {
-      background-color: rgba(0, 0, 0, 0.02);
-    }
-    .tool-name {
-      font-family: monospace;
-      font-weight: 500;
-      color: #444;
-      background-color: rgba(0, 0, 0, 0.05);
-      border-radius: 3px;
-      padding: 2px 6px;
-      flex-shrink: 0;
-      min-width: 45px;
-      font-size: 12px;
-      text-align: center;
-      white-space: nowrap;
-    }
-    .tool-success {
-      color: #5cb85c;
-      font-size: 14px;
-    }
-    .tool-error {
-      color: #6c757d;
-      font-size: 14px;
-    }
-    .tool-pending {
-      color: #f0ad4e;
-      font-size: 14px;
-    }
-    .summary-text {
-      white-space: normal;
-      overflow-wrap: break-word;
-      word-break: break-word;
-      flex-grow: 1;
-      flex-shrink: 1;
-      color: #444;
-      font-family: monospace;
-      font-size: 12px;
-      padding: 0 4px;
-      min-width: 50px;
-      max-width: calc(100% - 150px);
-      display: inline-block;
-    }
-    .tool-status {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-left: auto;
-      flex-shrink: 0;
-      min-width: 120px;
-      justify-content: flex-end;
-      padding-right: 8px;
-    }
-    .tool-call-status {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .tool-call-status.spinner {
-      animation: spin 1s infinite linear;
-    }
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-    .elapsed {
-      font-size: 11px;
-      color: #777;
-      white-space: nowrap;
-      min-width: 40px;
-      text-align: right;
-    }
-    .tool-details {
-      padding: 8px;
-      background-color: rgba(0, 0, 0, 0.02);
-      margin-top: 1px;
-      border-top: 1px solid rgba(0, 0, 0, 0.05);
-      display: none;
-      font-family: monospace;
-      font-size: 12px;
-      color: #333;
-      border-radius: 0 0 4px 4px;
-      max-width: 100%;
-      width: 100%;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-    .tool-details.visible {
-      display: block;
-    }
-    .cancel-button {
-      cursor: pointer;
-      color: white;
-      background-color: #d9534f;
-      border: none;
-      border-radius: 3px;
-      font-size: 11px;
-      padding: 2px 6px;
-      white-space: nowrap;
-      min-width: 50px;
-    }
-    .cancel-button:hover {
-      background-color: #c9302c;
-    }
-    .cancel-button[disabled] {
-      background-color: #999;
-      cursor: not-allowed;
-    }
-  `;
-
-  _cancelToolCall = async (tool_call_id: string, button: HTMLButtonElement) => {
-    button.innerText = "Cancelling";
-    button.disabled = true;
-    try {
-      const response = await fetch("cancel", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          tool_call_id: tool_call_id,
-          reason: "user requested cancellation",
-        }),
-      });
-      if (response.ok) {
-        button.parentElement.removeChild(button);
-      } else {
-        button.innerText = "Cancel";
-      }
-    } catch (e) {
-      console.error("cancel", tool_call_id, e);
-    }
-  };
-
-  _toggleDetails(e: Event) {
-    e.stopPropagation();
-    this.detailsVisible = !this.detailsVisible;
-  }
-
-  render() {
-    // Status indicator based on result
-    let statusIcon = html`<span class="tool-call-status spinner tool-pending"
-      >⏳</span
-    >`;
-    if (this.toolCall?.result_message) {
-      statusIcon = this.toolCall?.result_message.tool_error
-        ? html`<span class="tool-call-status tool-error">〰️</span>`
-        : html`<span class="tool-call-status tool-success">✓</span>`;
-    }
-
-    // Cancel button for pending operations
-    const cancelButton = this.toolCall?.result_message
-      ? ""
-      : html`<button
-          class="cancel-button"
-          title="Cancel this operation"
-          @click=${(e: Event) => {
-            e.stopPropagation();
-            this._cancelToolCall(
-              this.toolCall?.tool_call_id,
-              e.target as HTMLButtonElement,
-            );
-          }}
-        >
-          Cancel
-        </button>`;
-
-    // Elapsed time display
-    const elapsed = this.toolCall?.result_message?.elapsed
-      ? html`<span class="elapsed"
-          >${(this.toolCall?.result_message?.elapsed / 1e9).toFixed(1)}s</span
-        >`
-      : html`<span class="elapsed"></span>`;
-
-    // Initialize details visibility based on open property
-    if (this.open && !this.detailsVisible) {
-      this.detailsVisible = true;
-    }
-
-    return html`<div class="tool-call">
-      <div class="tool-row" @click=${this._toggleDetails}>
-        <span class="tool-name">${this.toolCall?.name}</span>
-        <span class="summary-text"><slot name="summary"></slot></span>
-        <div class="tool-status">${statusIcon} ${elapsed} ${cancelButton}</div>
-      </div>
-      <div class="tool-details ${this.detailsVisible ? "visible" : ""}">
-        <slot name="input"></slot>
-        <slot name="result"></slot>
-      </div>
-    </div>`;
-  }
+// Shared utility function for creating Tailwind pre elements
+function createPreElement(content: string, additionalClasses: string = "") {
+  return html`<pre
+    class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word ${additionalClasses}"
+  >
+${content}</pre
+  >`;
 }
 
 @customElement("sketch-tool-card-bash")
-export class SketchToolCardBash extends LitElement {
+export class SketchToolCardBash extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        max-width: 100%;
-        display: block;
-      }
-      .input {
-        display: flex;
-        width: 100%;
-        max-width: 100%;
-        flex-direction: column;
-        overflow-wrap: break-word;
-        word-break: break-word;
-      }
-      .command-wrapper {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .input pre {
-        width: 100%;
-        margin-bottom: 0;
-        border-radius: 4px 4px 0 0;
-        box-sizing: border-box;
-      }
-      .result pre {
-        margin-top: 0;
-        color: #555;
-        border-radius: 0 0 4px 4px;
-        width: 100%;
-        box-sizing: border-box;
-      }
-      .result pre.scrollable-on-hover {
-        max-height: 300px;
-        overflow-y: auto;
-      }
-      .tool-call-result-container {
-        width: 100%;
-        position: relative;
-      }
-      .background-badge {
-        display: inline-block;
-        background-color: #6200ea;
-        color: white;
-        font-size: 10px;
-        font-weight: bold;
-        padding: 2px 6px;
-        border-radius: 10px;
-        margin-left: 8px;
-        vertical-align: middle;
-      }
-      .command-wrapper {
-        display: inline-block;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    `,
-  ];
-
   render() {
     const inputData = JSON.parse(this.toolCall?.input || "{}");
     const isBackground = inputData?.background === true;
@@ -394,42 +91,44 @@
     const displayCommand =
       command.length > 80 ? command.substring(0, 80) + "..." : command;
 
-    return html` <sketch-tool-card
+    const summaryContent = html`<div
+      class="max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+    >
+      ${backgroundIcon}${slowIcon}${displayCommand}
+    </div>`;
+
+    const inputContent = html`<div
+      class="flex w-full max-w-full flex-col overflow-wrap-break-word break-words"
+    >
+      <div class="w-full relative">
+        ${createPreElement(
+          `${backgroundIcon}${slowIcon}${inputData?.command}`,
+          "w-full mb-0 rounded-t rounded-b-none box-border",
+        )}
+      </div>
+    </div>`;
+
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<div class="w-full relative">
+          ${createPreElement(
+            this.toolCall.result_message.tool_result,
+            "mt-0 text-gray-600 rounded-t-none rounded-b w-full box-border max-h-[300px] overflow-y-auto",
+          )}
+        </div>`
+      : "";
+
+    return html`<sketch-tool-card-base
       .open=${this.open}
       .toolCall=${this.toolCall}
-    >
-      <span
-        slot="summary"
-        class="summary-text"
-        style="display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-      >
-        <div
-          class="command-wrapper"
-          style="max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-        >
-          ${backgroundIcon}${slowIcon}${displayCommand}
-        </div>
-      </span>
-      <div slot="input" class="input">
-        <div class="tool-call-result-container">
-          <pre>${backgroundIcon}${slowIcon}${inputData?.command}</pre>
-        </div>
-      </div>
-      ${this.toolCall?.result_message?.tool_result
-        ? html`<div slot="result" class="result">
-            <div class="tool-call-result-container">
-              <pre class="tool-call-result">
-${this.toolCall?.result_message.tool_result}</pre
-              >
-            </div>
-          </div>`
-        : ""}
-    </sketch-tool-card>`;
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-codereview")
-export class SketchToolCardCodeReview extends LitElement {
+export class SketchToolCardCodeReview extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
@@ -449,158 +148,146 @@
     const resultText = this.toolCall?.result_message?.tool_result || "";
     const statusIcon = this.getStatusIcon(resultText);
 
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <span slot="summary" class="summary-text">${statusIcon}</span>
-      <div slot="result"><pre>${resultText}</pre></div>
-    </sketch-tool-card>`;
+    const summaryContent = html`<span>${statusIcon}</span>`;
+    const resultContent = resultText ? createPreElement(resultText) : "";
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-done")
-export class SketchToolCardDone extends LitElement {
+export class SketchToolCardDone extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
   render() {
     const doneInput = JSON.parse(this.toolCall.input);
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <span slot="summary" class="summary-text"></span>
-      <div slot="result">
-        ${Object.keys(doneInput.checklist_items).map((key) => {
-          const item = doneInput.checklist_items[key];
-          let statusIcon = "〰️";
-          if (item.status == "yes") {
-            statusIcon = "✅";
-          } else if (item.status == "not applicable") {
-            statusIcon = "🤷";
-          }
-          return html`<div>
-            <span>${statusIcon}</span> ${key}:${item.status}
-          </div>`;
-        })}
-      </div>
-    </sketch-tool-card>`;
+
+    const summaryContent = html`<span></span>`;
+
+    const resultContent = html`<div>
+      ${Object.keys(doneInput.checklist_items).map((key) => {
+        const item = doneInput.checklist_items[key];
+        let statusIcon = "〰️";
+        if (item.status == "yes") {
+          statusIcon = "✅";
+        } else if (item.status == "not applicable") {
+          statusIcon = "🤷";
+        }
+        return html`<div class="mb-1">
+          <span>${statusIcon}</span> ${key}:${item.status}
+        </div>`;
+      })}
+    </div>`;
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-patch")
-export class SketchToolCardPatch extends LitElement {
+export class SketchToolCardPatch extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .summary-text {
-      color: #555;
-      font-family: monospace;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-radius: 3px;
-    }
-  `;
-
   render() {
     const patchInput = JSON.parse(this.toolCall?.input);
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <span slot="summary" class="summary-text">
-        ${patchInput?.path}: ${patchInput.patches.length}
-        edit${patchInput.patches.length > 1 ? "s" : ""}
-      </span>
-      <div slot="input">
-        ${patchInput.patches.map((patch) => {
-          return html`Patch operation: <b>${patch.operation}</b>
-            <pre>${patch.newText}</pre>`;
-        })}
-      </div>
-      <div slot="result">
-        <pre>${this.toolCall?.result_message?.tool_result}</pre>
-      </div>
-    </sketch-tool-card>`;
+
+    const summaryContent = html`<span
+      class="text-gray-600 font-mono overflow-hidden text-ellipsis whitespace-nowrap rounded"
+    >
+      ${patchInput?.path}: ${patchInput.patches.length}
+      edit${patchInput.patches.length > 1 ? "s" : ""}
+    </span>`;
+
+    const inputContent = html`<div>
+      ${patchInput.patches.map((patch) => {
+        return html`<div class="mb-2">
+          Patch operation: <b>${patch.operation}</b>
+          ${createPreElement(patch.newText)}
+        </div>`;
+      })}
+    </div>`;
+
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? createPreElement(this.toolCall.result_message.tool_result)
+      : "";
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-think")
-export class SketchToolCardThink extends LitElement {
+export class SketchToolCardThink extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .thought-bubble {
-      overflow-x: auto;
-      margin-bottom: 3px;
-      font-family: monospace;
-      padding: 3px 5px;
-      background: rgb(236, 236, 236);
-      border-radius: 6px;
-      user-select: text;
-      cursor: text;
-      -webkit-user-select: text;
-      -moz-user-select: text;
-      -ms-user-select: text;
-      font-size: 13px;
-      line-height: 1.3;
-    }
-    .summary-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-family: monospace;
-    }
-  `;
-
   render() {
-    return html`
-      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          ${JSON.parse(this.toolCall?.input)?.thoughts?.split("\n")[0]}
-        </span>
-        <div slot="input" class="thought-bubble">
-          <div class="markdown-content">
-            ${unsafeHTML(
-              renderMarkdown(JSON.parse(this.toolCall?.input)?.thoughts),
-            )}
-          </div>
-        </div>
-      </sketch-tool-card>
-    `;
+    const thoughts = JSON.parse(this.toolCall?.input)?.thoughts || "";
+
+    const summaryContent = html`<span
+      class="overflow-hidden text-ellipsis font-mono"
+    >
+      ${thoughts.split("\n")[0]}
+    </span>`;
+
+    const inputContent = html`<div
+      class="overflow-x-auto mb-1 font-mono px-2 py-1 bg-gray-200 rounded select-text cursor-text text-sm leading-relaxed"
+    >
+      <div class="markdown-content">
+        ${unsafeHTML(renderMarkdown(thoughts))}
+      </div>
+    </div>`;
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-set-slug")
-export class SketchToolCardSetSlug extends LitElement {
+export class SketchToolCardSetSlug extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-style: italic;
-    }
-    pre {
-      display: inline;
-      font-family: monospace;
-      background: rgb(236, 236, 236);
-      padding: 2px 4px;
-      border-radius: 2px;
-      margin: 0;
-    }
-  `;
-
   render() {
     const inputData = JSON.parse(this.toolCall?.input || "{}");
-    return html`
-      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-        <span slot="summary" class="summary-text">
-          Slug: "${inputData.slug}"
-        </span>
-        <div slot="input">
-          <div>Set slug to: <b>${inputData.slug}</b></div>
-        </div>
-      </sketch-tool-card>
-    `;
+
+    const summaryContent = html`<span class="italic">
+      Slug: "${inputData.slug}"
+    </span>`;
+
+    const inputContent = html`<div>Set slug to: <b>${inputData.slug}</b></div>`;
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-commit-message-style")
-export class SketchToolCardCommitMessageStyle extends LitElement {
+export class SketchToolCardCommitMessageStyle extends SketchTailwindElement {
   @property()
   toolCall: ToolCall;
 
@@ -610,19 +297,6 @@
   @property()
   state: State;
 
-  static styles = css`
-    .summary-text {
-      font-style: italic;
-    }
-    pre {
-      display: inline;
-      font-family: monospace;
-      background: rgb(236, 236, 236);
-      padding: 2px 4px;
-      border-radius: 2px;
-      margin: 0;
-    }
-  `;
   constructor() {
     super();
   }
@@ -636,70 +310,19 @@
   }
 
   render() {
-    return html`
-      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      </sketch-tool-card>
-    `;
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-multiple-choice")
-export class SketchToolCardMultipleChoice extends LitElement {
+export class SketchToolCardMultipleChoice extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
   @property() selectedOption: MultipleChoiceOption = null;
 
-  static styles = css`
-    .options-container {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin: 10px 0;
-    }
-    .option {
-      display: inline-flex;
-      align-items: center;
-      padding: 8px 12px;
-      border-radius: 4px;
-      background-color: #f5f5f5;
-      cursor: pointer;
-      transition: all 0.2s;
-      border: 1px solid transparent;
-      user-select: none;
-    }
-    .option:hover {
-      background-color: #e0e0e0;
-      border-color: #ccc;
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    .option:active {
-      transform: translateY(0);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-      background-color: #d5d5d5;
-    }
-    .option.selected {
-      background-color: #e3f2fd;
-      border-color: #2196f3;
-      border-width: 1px;
-      border-style: solid;
-    }
-    .option-checkmark {
-      margin-left: 6px;
-      color: #2196f3;
-    }
-    .summary-text {
-      font-style: italic;
-      padding: 0.5em;
-    }
-    .summary-text strong {
-      font-style: normal;
-      color: #2196f3;
-      font-weight: 600;
-    }
-  `;
-
   connectedCallback() {
     super.connectedCallback();
     this.updateSelectedOption();
@@ -754,49 +377,46 @@
 
     const summaryContent =
       this.selectedOption !== null
-        ? html`<span class="summary-text">
-            ${question}: <strong>${this.selectedOption.caption}</strong>
+        ? html`<span class="italic p-2">
+            ${question}:
+            <strong class="not-italic text-blue-600 font-semibold"
+              >${this.selectedOption.caption}</strong
+            >
           </span>`
-        : html`<span class="summary-text">${question}</span>`;
+        : html`<span class="italic p-2">${question}</span>`;
 
-    return html`
-      <div class="multiple-choice-card">
-        ${summaryContent}
-        <div class="options-container">
-          ${choices.map((choice) => {
-            const isSelected =
-              this.selectedOption !== null && this.selectedOption === choice;
-            return html`
-              <div
-                class="option ${isSelected ? "selected" : ""}"
-                @click=${() => this.handleOptionClick(choice)}
-                title="${choice.responseText}"
-              >
-                <span class="option-label">${choice.caption}</span>
-                ${isSelected
-                  ? html`<span class="option-checkmark">✓</span>`
-                  : ""}
-              </div>
-            `;
-          })}
-        </div>
-      </div>
-    `;
+    const inputContent = html`<div class="flex flex-row flex-wrap gap-2 my-2">
+      ${choices.map((choice) => {
+        const isSelected =
+          this.selectedOption !== null && this.selectedOption === choice;
+        return html`
+          <div
+            class="inline-flex items-center px-3 py-2 rounded cursor-pointer transition-all duration-200 border select-none ${isSelected
+              ? "bg-blue-50 border-blue-500"
+              : "bg-gray-100 border-transparent hover:bg-gray-200 hover:border-gray-400 hover:-translate-y-px hover:shadow-md active:translate-y-0 active:shadow-sm active:bg-gray-300"}"
+            @click=${() => this.handleOptionClick(choice)}
+            title="${choice.responseText}"
+          >
+            <span class="option-label">${choice.caption}</span>
+            ${isSelected
+              ? html`<span class="ml-1.5 text-blue-600">✓</span>`
+              : ""}
+          </div>
+        `;
+      })}
+    </div>`;
+
+    return html`<div class="multiple-choice-card">
+      ${summaryContent} ${inputContent}
+    </div>`;
   }
 }
 
 @customElement("sketch-tool-card-todo-write")
-export class SketchToolCardTodoWrite extends LitElement {
+export class SketchToolCardTodoWrite extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-style: italic;
-      color: #666;
-    }
-  `;
-
   render() {
     const inputData = JSON.parse(this.toolCall?.input || "{}");
     const tasks = inputData.tasks || [];
@@ -816,136 +436,126 @@
       })
       .join(" ");
 
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <span slot="summary" class="summary-text"> ${circles} </span>
-      <div slot="result">
-        <pre>${this.toolCall?.result_message?.tool_result}</pre>
-      </div>
-    </sketch-tool-card>`;
+    const summaryContent = html`<span class="italic text-gray-600">
+      ${circles}
+    </span>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? createPreElement(this.toolCall.result_message.tool_result)
+      : "";
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-keyword-search")
-export class SketchToolCardKeywordSearch extends LitElement {
+export class SketchToolCardKeywordSearch extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .summary-container {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      width: 100%;
-      max-width: 100%;
-      overflow: hidden;
-    }
-    .query-line {
-      color: #333;
-      font-family: inherit;
-      font-size: 12px;
-      font-weight: normal;
-      white-space: normal;
-      word-wrap: break-word;
-      word-break: break-word;
-      overflow-wrap: break-word;
-      line-height: 1.2;
-    }
-    .keywords-line {
-      color: #666;
-      font-family: inherit;
-      font-size: 11px;
-      font-weight: normal;
-      white-space: normal;
-      word-wrap: break-word;
-      word-break: break-word;
-      overflow-wrap: break-word;
-      line-height: 1.2;
-      margin-top: 1px;
-    }
-  `;
-
   render() {
     const inputData = JSON.parse(this.toolCall?.input || "{}");
     const query = inputData.query || "";
     const searchTerms = inputData.search_terms || [];
 
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <div slot="summary" class="summary-container">
-        <div class="query-line">🔍 ${query}</div>
-        <div class="keywords-line">🗝️ ${searchTerms.join(", ")}</div>
+    const summaryContent = html`<div
+      class="flex flex-col gap-0.5 w-full max-w-full overflow-hidden"
+    >
+      <div
+        class="text-gray-800 text-xs normal-case whitespace-normal break-words leading-tight"
+      >
+        🔍 ${query}
       </div>
-      <div slot="input">
-        <div><strong>Query:</strong> ${query}</div>
-        <div><strong>Search terms:</strong> ${searchTerms.join(", ")}</div>
+      <div
+        class="text-gray-600 text-xs normal-case whitespace-normal break-words leading-tight mt-px"
+      >
+        🗝️ ${searchTerms.join(", ")}
       </div>
-      <div slot="result">
-        <pre>${this.toolCall?.result_message?.tool_result}</pre>
-      </div>
-    </sketch-tool-card>`;
+    </div>`;
+
+    const inputContent = html`<div>
+      <div><strong>Query:</strong> ${query}</div>
+      <div><strong>Search terms:</strong> ${searchTerms.join(", ")}</div>
+    </div>`;
+
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? createPreElement(this.toolCall.result_message.tool_result)
+      : "";
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-todo-read")
-export class SketchToolCardTodoRead extends LitElement {
+export class SketchToolCardTodoRead extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
-  static styles = css`
-    .summary-text {
-      font-style: italic;
-      color: #666;
-    }
-  `;
-
   render() {
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <span slot="summary" class="summary-text"> Read todo list </span>
-      <div slot="result">
-        <pre>${this.toolCall?.result_message?.tool_result}</pre>
-      </div>
-    </sketch-tool-card>`;
+    const summaryContent = html`<span class="italic text-gray-600">
+      Read todo list
+    </span>`;
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? createPreElement(this.toolCall.result_message.tool_result)
+      : "";
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 @customElement("sketch-tool-card-generic")
-export class SketchToolCardGeneric extends LitElement {
+export class SketchToolCardGeneric extends SketchTailwindElement {
   @property() toolCall: ToolCall;
   @property() open: boolean;
 
   render() {
-    return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
-      <span
-        slot="summary"
-        style="display: block; white-space: normal; word-break: break-word; overflow-wrap: break-word; max-width: 100%; width: 100%;"
-        >${this.toolCall?.input}</span
-      >
-      <div
-        slot="input"
-        style="max-width: 100%; overflow-wrap: break-word; word-break: break-word;"
-      >
-        Input:
-        <pre
-          style="max-width: 100%; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;"
-        >
-${this.toolCall?.input}</pre
-        >
-      </div>
-      <div
-        slot="result"
-        style="max-width: 100%; overflow-wrap: break-word; word-break: break-word;"
-      >
-        Result:
-        ${this.toolCall?.result_message?.tool_result
-          ? html`<pre>${this.toolCall?.result_message.tool_result}</pre>`
-          : ""}
-      </div>
-    </sketch-tool-card>`;
+    const summaryContent = html`<span
+      class="block whitespace-normal break-words max-w-full w-full"
+    >
+      ${this.toolCall?.input}
+    </span>`;
+
+    const inputContent = html`<div class="max-w-full break-words">
+      Input:
+      ${createPreElement(
+        this.toolCall?.input || "",
+        "max-w-full whitespace-pre-wrap break-words",
+      )}
+    </div>`;
+
+    const resultContent = this.toolCall?.result_message?.tool_result
+      ? html`<div class="max-w-full break-words">
+          Result: ${createPreElement(this.toolCall.result_message.tool_result)}
+        </div>`
+      : "";
+
+    return html`<sketch-tool-card-base
+      .open=${this.open}
+      .toolCall=${this.toolCall}
+      .summaryContent=${summaryContent}
+      .inputContent=${inputContent}
+      .resultContent=${resultContent}
+    ></sketch-tool-card-base>`;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "sketch-tool-card": SketchToolCard;
     "sketch-tool-card-generic": SketchToolCardGeneric;
     "sketch-tool-card-bash": SketchToolCardBash;
     "sketch-tool-card-codereview": SketchToolCardCodeReview;
@@ -958,6 +568,5 @@
     "sketch-tool-card-todo-write": SketchToolCardTodoWrite;
     "sketch-tool-card-todo-read": SketchToolCardTodoRead;
     "sketch-tool-card-keyword-search": SketchToolCardKeywordSearch;
-    // TODO: We haven't implemented this for browser tools.
   }
 }