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 7dc02d4..396da39 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -95,6 +95,7 @@
     // This could be improved with build-time generation
     const knownComponents = [
       "chat-input",
+      "sketch-app-shell",
       "sketch-call-status",
       "sketch-chat-input",
       "sketch-container-status",
diff --git a/webui/src/web-components/demo/demo-runner.html b/webui/src/web-components/demo/demo-runner.html
index 94af314..fe12f18 100644
--- a/webui/src/web-components/demo/demo-runner.html
+++ b/webui/src/web-components/demo/demo-runner.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sketch Web Components Demo Runner</title>
-    <link rel="stylesheet" href="demo.css" />
     <link rel="stylesheet" href="/dist/tailwind.css" />
     <style>
       :root {
@@ -15,6 +14,7 @@
       }
 
       .demo-runner {
+        width: 100%;
         display: flex;
         height: 100vh;
         font-family:
diff --git a/webui/src/web-components/demo/sketch-app-shell.demo.ts b/webui/src/web-components/demo/sketch-app-shell.demo.ts
new file mode 100644
index 0000000..d0ee53c
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-app-shell.demo.ts
@@ -0,0 +1,51 @@
+/**
+ * Demo module for sketch-app-shell component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Sketch App Shell Demo",
+  description:
+    "Full sketch application shell with chat, diff, and terminal views",
+  imports: ["../sketch-app-shell"],
+  styles: ["/src/sketch-app-shell.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Mock the service worker for data services
+    const { worker } = await import("./mocks/browser");
+    await worker.start();
+
+    // Create demo sections
+    const mainSection = demoUtils.createDemoSection(
+      "Sketch App Shell",
+      "Interactive sketch application shell with multiple view modes",
+    );
+
+    // Create the app shell
+    const appShell = document.createElement("sketch-app-shell") as any;
+
+    // Set up the shell to be contained within the demo
+    appShell.style.cssText = `
+      border: 1px solid #d1d9e0;
+      overflow: hidden;
+      display: block;
+    `;
+
+    // Assemble the demo
+    mainSection.appendChild(appShell);
+
+    container.appendChild(mainSection);
+
+    // Wait a bit for the component to initialize
+    await demoUtils.delay(100);
+  },
+
+  cleanup: async () => {
+    // Clean up any global state if needed
+    console.log("Cleaning up sketch-app-shell demo");
+  },
+};
+
+export default demo;