diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 680651b..2871929 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -96,6 +96,7 @@
       "sketch-diff-range-picker",
       "sketch-timeline",
       "sketch-timeline-message",
+      "sketch-external-message",
       "sketch-todo-panel",
       "sketch-tool-calls",
       "sketch-view-mode-select",
diff --git a/webui/src/web-components/demo/sketch-external-message.demo.ts b/webui/src/web-components/demo/sketch-external-message.demo.ts
new file mode 100644
index 0000000..cdaa86d
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-external-message.demo.ts
@@ -0,0 +1,120 @@
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+import { SketchExternalMessage } from "../sketch-external-message";
+
+const demo: DemoModule = {
+  title: "Sketch External Message Demo",
+  description:
+    "Demonstration of external message components for various external message types",
+  imports: ["../sketch-external-message.ts"],
+
+  setup: async (container: HTMLElement) => {
+    const section = demoUtils.createDemoSection(
+      "External Message Components",
+      "Shows different external message components for various message types",
+    );
+
+    // external messages
+    const externalMessages = [
+      {
+        name: "github_workflow_run: completed, success",
+        message_type: "github_workflow_run",
+        body: {
+          workflow: {
+            name: "go_tests",
+          },
+          workflow_run: {
+            id: 123456789,
+            status: "completed",
+            conclusion: "success",
+            head_branch: "user/sketch/slug-name",
+            head_commit: "abc123",
+            html_url: "https://github.com/orgs/your-org/actions/runs/123456789",
+          },
+        },
+      },
+      {
+        name: "github_workflow_run: completed, failed",
+        message_type: "github_workflow_run",
+        body: {
+          workflow: {
+            name: "go_tests",
+          },
+          workflow_run: {
+            id: 123456789,
+            status: "completed",
+            conclusion: "failure",
+            head_branch: "user/sketch/slug-name",
+            head_commit: "abc123",
+            html_url: "https://github.com/orgs/your-org/actions/runs/123456789",
+          },
+        },
+      },
+      {
+        name: "github_workflow_run: queued",
+        message_type: "github_workflow_run",
+        body: {
+          workflow: {
+            name: "go_tests",
+          },
+          workflow_run: {
+            id: 123456789,
+            status: "queued",
+            head_branch: "user/sketch/slug-name",
+            head_commit: "abc123",
+            html_url: "https://github.com/orgs/your-org/actions/runs/123456789",
+          },
+        },
+      },
+      {
+        name: "github_workflow_run: in_progress",
+        message_type: "github_workflow_run",
+        body: {
+          workflow: {
+            name: "go_tests",
+          },
+          workflow_run: {
+            id: 123456789,
+            status: "in_progress",
+            head_branch: "user/sketch/slug-name",
+            head_commit: "abc123",
+            html_url: "https://github.com/orgs/your-org/actions/runs/123456789",
+          },
+        },
+      },
+    ];
+
+    // Create tool cards for each tool call
+    externalMessages.forEach((msg) => {
+      const msgSection = document.createElement("div");
+      msgSection.style.marginBottom = "2rem";
+      msgSection.style.border = "1px solid #eee";
+      msgSection.style.borderRadius = "8px";
+      msgSection.style.padding = "1rem";
+
+      const header = document.createElement("h3");
+      header.textContent = `Message: ${msg.name}`;
+      header.style.marginTop = "0";
+      header.style.marginBottom = "1rem";
+      header.style.color = "var(--demo-fixture-text-color)";
+      msgSection.appendChild(header);
+      const msgEl = document.createElement(
+        "sketch-external-message",
+      ) as SketchExternalMessage;
+
+      msgEl.message = {
+        message_type: msg.message_type,
+        body: msg.body,
+        text_content: `Workflow run ${msg.body.workflow_run.id} completed with status ${msg.body.workflow_run.status} and conclusion ${msg.body.workflow_run.conclusion}.`,
+      };
+      msgEl.open = true;
+
+      msgSection.appendChild(msgEl);
+      section.appendChild(msgSection);
+    });
+
+    container.appendChild(section);
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/sketch-external-message.ts b/webui/src/web-components/sketch-external-message.ts
new file mode 100644
index 0000000..1df27d8
--- /dev/null
+++ b/webui/src/web-components/sketch-external-message.ts
@@ -0,0 +1,128 @@
+import { html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ExternalMessage } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element";
+import type { WorkflowRunEvent } from "@octokit/webhooks-types";
+
+@customElement("sketch-external-message")
+export class SketchExternalMessage extends SketchTailwindElement {
+  @property() message: ExternalMessage | null = null;
+  @property() open: boolean;
+  @property() summaryContent: TemplateResult | string = "";
+  @property() detailsContent: TemplateResult | string = "";
+  @state() detailsVisible: boolean = false;
+
+  _toggleDetails(e: Event) {
+    e.stopPropagation();
+    this.detailsVisible = !this.detailsVisible;
+  }
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    if (this.message?.message_type === "github_workflow_run") {
+      const run = this.message.body as WorkflowRunEvent;
+      this.summaryContent = html`<svg
+          class="inline-block w-4 h-4"
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+        >
+          <path
+            fill="currentColor"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+          ></path>
+        </svg>
+        <span
+          class="inline-flex items-center px-1.5 py-1
+        ${run.workflow_run.conclusion === "success"
+            ? "bg-green-600/10 text-green-600"
+            : run.workflow_run.conclusion === "failure"
+              ? "bg-red-600/10 text-red-600"
+              : "bg-gray-600/10 text-gray-600"}
+          rounded-md text-xs flex-shrink-0 transition-colors"
+          >${run.workflow.name} -
+          ${run.workflow_run.conclusion || run.workflow_run.status}</span
+        >
+        on ${run.workflow_run.head_branch} at ${run.workflow_run.head_commit}`;
+
+      this.detailsContent = html`
+        <div class="flex items-center gap-2">
+          <span class="text-gray-700 dark:text-gray-300">Workflow ID:</span>
+          <span class="font-mono font-medium text-gray-800 dark:text-gray-200">${run.workflow_run.id}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          bg-gray-600/10 text-gray-600
+        {{end}}
+          rounded-md text-xs flex-shrink-0 transition-colors'><a target="_blank"
+            rel="noopener noreferrer"href="${run.workflow_run.html_url}">${run.workflow.name} - ${run.workflow_run.conclusion}</a>
+            on ${run.workflow_run.head_branch} at ${run.workflow_run.head_commit}</span>
+            </span>`;
+
+      this.detailsContent = html`
+        <div class="flex items-center gap-2">
+          <span class="text-gray-700 dark:text-gray-300">Workflow Run ID:</span>
+          <span class="font-mono font-medium text-gray-800 dark:text-gray-200"
+            >${run.workflow_run.id}</span
+          >
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-gray-700 dark:text-gray-300">Status:</span>
+          <span class="font-mono font-medium text-gray-800 dark:text-gray-200"
+            >${run.workflow_run.status}</span
+          >
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-gray-700 dark:text-gray-300">Conclusion:</span>
+          <span class="font-mono font-medium text-gray-800 dark:text-gray-200"
+            >${run.workflow_run.conclusion}</span
+          >
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-gray-700 dark:text-gray-300">Run URL:</span>
+          <a
+            class="text-blue-600 dark:text-blue-400 hover:underline"
+            href="${run.workflow_run.html_url}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            ${run.workflow_run.html_url}
+          </a>
+        </div>
+      `;
+    }
+
+    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] dark:hover:bg-white/[0.05]"
+            @click=${this._toggleDetails}
+          >
+            <span
+              class="whitespace-nowrap flex-grow flex-shrink text-gray-700 dark:text-gray-300 font-mono text-xs px-1 min-w-[50px] max-w-[calc(100%-150px)] inline-block"
+              >${this.summaryContent}</span
+            >
+          </div>
+          <div
+            class="${this.detailsVisible
+              ? "block"
+              : "hidden"} p-2 bg-black/[0.02] dark:bg-white/[0.05] mt-px border-t border-black/[0.05] dark:border-white/[0.1] font-mono text-xs text-gray-800 dark:text-gray-200 rounded-b max-w-full w-full box-border overflow-hidden"
+          >
+            ${this.detailsContent
+              ? html`<div class="mb-2">${this.detailsContent}</div>`
+              : ""}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-notification-message": SketchExternalMessage;
+  }
+}
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`