diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index abbb329..9a0b78a 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -5,6 +5,9 @@
 import { marked, MarkedOptions, Renderer, Tokens } from "marked";
 import type mermaid from "mermaid";
 import DOMPurify from "dompurify";
+import "./sketch-tool-calls";
+import "./sketch-external-message";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
 
 // Mermaid is loaded dynamically - see loadMermaid() function
 declare global {
@@ -54,8 +57,6 @@
 
   return mermaidLoadPromise;
 }
-import "./sketch-tool-calls";
-import { SketchTailwindElement } from "./sketch-tailwind-element";
 
 @customElement("sketch-timeline-message")
 export class SketchTimelineMessage extends SketchTailwindElement {
@@ -927,12 +928,15 @@
       .join(" ");
 
     const messageContentClasses = [
-      "relative px-2.5 py-1.5 rounded-xl shadow-sm min-w-min",
+      "relative px-2.5 py-1.5 min-w-min",
       // User message styling
       this.message?.type === "user"
-        ? "bg-blue-500 text-white rounded-br-sm"
-        : // Agent/tool/error message styling
-          "bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-100 rounded-bl-sm",
+        ? "rounded-xl shadow-sm bg-blue-500 text-white rounded-br-sm"
+        : this.message?.type === "agent" // Agent/tool/error message styling
+          ? "rounded-xl shadow-sm bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-100 rounded-bl-sm"
+          : this.message?.type === "external" // External message styling
+            ? "bg-white dark:bg-gray-800 text-black dark:text-gray-100"
+            : "", // default styling for other types
     ]
       .filter(Boolean)
       .join(" ");
@@ -1135,6 +1139,16 @@
                   `
                 : ""}
 
+              <!-- External messages -->
+              ${this.message?.type === "external"
+                ? html`
+                    <sketch-external-message
+                      .message=${this.message?.external_message}
+                      .open=${this.open}
+                    ></sketch-external-message>
+                  `
+                : ""}
+
               <!-- Commits section -->
               ${this.message?.commits
                 ? html`