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 b2b947a..c4c6362 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-container-status",
       "sketch-timeline",
       "sketch-timeline-message",
+      "sketch-todo-panel",
       "sketch-tool-calls",
       "sketch-view-mode-select",
     ];
diff --git a/webui/src/web-components/demo/sketch-todo-panel.demo.ts b/webui/src/web-components/demo/sketch-todo-panel.demo.ts
new file mode 100644
index 0000000..a65cb82
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-todo-panel.demo.ts
@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Demo module for sketch-todo-panel component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+// Sample todo data
+const sampleTodoList = {
+  items: [
+    {
+      id: "task-1",
+      status: "completed" as const,
+      task: "Convert sketch-todo-panel.ts to inherit from SketchTailwindElement",
+    },
+    {
+      id: "task-2",
+      status: "in-progress" as const,
+      task: "Test the converted element to ensure it works correctly",
+    },
+    {
+      id: "task-3",
+      status: "queued" as const,
+      task: "Add unit tests for the todo panel component",
+    },
+    {
+      id: "task-4",
+      status: "queued" as const,
+      task: "Update documentation with new implementation details",
+    },
+  ],
+};
+
+const largeTodoList = {
+  items: [
+    {
+      id: "task-1",
+      status: "completed" as const,
+      task: "Implement authentication system with JWT tokens",
+    },
+    {
+      id: "task-2",
+      status: "completed" as const,
+      task: "Set up database migrations and schema",
+    },
+    {
+      id: "task-3",
+      status: "in-progress" as const,
+      task: "Build responsive dashboard with real-time updates and complex data visualization components",
+    },
+    {
+      id: "task-4",
+      status: "queued" as const,
+      task: "Add file upload functionality with drag and drop support",
+    },
+    {
+      id: "task-5",
+      status: "queued" as const,
+      task: "Implement comprehensive test suite including unit, integration, and end-to-end tests",
+    },
+    {
+      id: "task-6",
+      status: "queued" as const,
+      task: "Deploy to production environment with monitoring and logging",
+    },
+    {
+      id: "task-7",
+      status: "queued" as const,
+      task: "Create user documentation and API guides",
+    },
+  ],
+};
+
+const demo: DemoModule = {
+  title: "Todo Panel Demo",
+  description:
+    "Interactive todo list panel showing task progress and allowing comments",
+  imports: ["../sketch-todo-panel"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Todo Panel",
+      "Shows a typical todo list with different task statuses",
+    );
+
+    const statesSection = demoUtils.createDemoSection(
+      "Different States",
+      "Loading, error, and empty states",
+    );
+
+    const largeListSection = demoUtils.createDemoSection(
+      "Large Todo List",
+      "Scrollable list with longer task descriptions",
+    );
+
+    // Basic todo panel with sample data
+    const basicPanel = document.createElement("sketch-todo-panel") as any;
+    basicPanel.id = "basic-panel";
+    basicPanel.visible = true;
+    basicPanel.style.cssText =
+      "height: 300px; border: 1px solid #e0e0e0; display: block;";
+
+    // Set the data after a short delay to show it populating
+    setTimeout(() => {
+      basicPanel.updateTodoContent(JSON.stringify(sampleTodoList));
+    }, 100);
+
+    // Loading state panel
+    const loadingPanel = document.createElement("sketch-todo-panel") as any;
+    loadingPanel.id = "loading-panel";
+    loadingPanel.visible = true;
+    loadingPanel.loading = true;
+    loadingPanel.style.cssText =
+      "height: 150px; border: 1px solid #e0e0e0; display: block; margin-right: 10px; flex: 1;";
+
+    // Error state panel
+    const errorPanel = document.createElement("sketch-todo-panel") as any;
+    errorPanel.id = "error-panel";
+    errorPanel.visible = true;
+    errorPanel.error = "Failed to load todo data";
+    errorPanel.style.cssText =
+      "height: 150px; border: 1px solid #e0e0e0; display: block; margin-right: 10px; flex: 1;";
+
+    // Empty state panel
+    const emptyPanel = document.createElement("sketch-todo-panel") as any;
+    emptyPanel.id = "empty-panel";
+    emptyPanel.visible = true;
+    emptyPanel.updateTodoContent("");
+    emptyPanel.style.cssText =
+      "height: 150px; border: 1px solid #e0e0e0; display: block; flex: 1;";
+
+    // Large list panel
+    const largePanel = document.createElement("sketch-todo-panel") as any;
+    largePanel.id = "large-panel";
+    largePanel.visible = true;
+    largePanel.style.cssText =
+      "height: 400px; border: 1px solid #e0e0e0; display: block;";
+    largePanel.updateTodoContent(JSON.stringify(largeTodoList));
+
+    // Create states container
+    const statesContainer = document.createElement("div");
+    statesContainer.style.cssText = "display: flex; gap: 10px; margin: 10px 0;";
+    statesContainer.appendChild(loadingPanel);
+    statesContainer.appendChild(errorPanel);
+    statesContainer.appendChild(emptyPanel);
+
+    // Add state labels
+    const loadingLabel = document.createElement("div");
+    loadingLabel.textContent = "Loading State";
+    loadingLabel.style.cssText =
+      "font-weight: bold; margin-bottom: 8px; flex: 1; text-align: center;";
+
+    const errorLabel = document.createElement("div");
+    errorLabel.textContent = "Error State";
+    errorLabel.style.cssText =
+      "font-weight: bold; margin-bottom: 8px; flex: 1; text-align: center;";
+
+    const emptyLabel = document.createElement("div");
+    emptyLabel.textContent = "Empty State";
+    emptyLabel.style.cssText =
+      "font-weight: bold; margin-bottom: 8px; flex: 1; text-align: center;";
+
+    const labelsContainer = document.createElement("div");
+    labelsContainer.style.cssText =
+      "display: flex; gap: 10px; margin-bottom: 5px;";
+    labelsContainer.appendChild(loadingLabel);
+    labelsContainer.appendChild(errorLabel);
+    labelsContainer.appendChild(emptyLabel);
+
+    // Add event listener for comment events
+    const eventLog = document.createElement("div");
+    eventLog.style.cssText =
+      "margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px; font-family: monospace; font-size: 12px;";
+    eventLog.innerHTML =
+      "<strong>Event Log:</strong> (try clicking the 💬 button on in-progress or queued items)<br>";
+
+    const logEvent = (message: string) => {
+      const timestamp = new Date().toLocaleTimeString();
+      eventLog.innerHTML += `<div>[${timestamp}] ${message}</div>`;
+      eventLog.scrollTop = eventLog.scrollHeight;
+    };
+
+    // Listen for todo comment events
+    [basicPanel, largePanel].forEach((panel) => {
+      panel.addEventListener("todo-comment", (event: any) => {
+        logEvent(
+          `Todo comment received: "${event.detail.comment.substring(0, 50)}..."`,
+        );
+      });
+    });
+
+    // Assemble the demo
+    basicSection.appendChild(basicPanel);
+
+    statesSection.appendChild(labelsContainer);
+    statesSection.appendChild(statesContainer);
+
+    largeListSection.appendChild(largePanel);
+
+    container.appendChild(basicSection);
+    container.appendChild(statesSection);
+    container.appendChild(largeListSection);
+    container.appendChild(eventLog);
+  },
+
+  cleanup: () => {
+    // Remove any event listeners if needed
+    const panels = document.querySelectorAll("sketch-todo-panel");
+    panels.forEach((panel) => {
+      (panel as any).removeEventListener("todo-comment", () => {});
+    });
+  },
+};
+
+export default demo;