diff --git a/webui/src/web-components/demo/demo-fixtures/index.ts b/webui/src/web-components/demo/demo-fixtures/index.ts
index 9a47f8e..627b257 100644
--- a/webui/src/web-components/demo/demo-fixtures/index.ts
+++ b/webui/src/web-components/demo/demo-fixtures/index.ts
@@ -24,6 +24,14 @@
   heavyUsageState,
 } from "./container-status";
 
+// View mode select
+export {
+  sampleViewModeConfigs,
+  viewModeScenarios,
+  applyViewModeConfig,
+  createViewModeTestButtons,
+} from "./view-mode-select";
+
 // Common demo utilities
 export const demoStyles = {
   container: `
diff --git a/webui/src/web-components/demo/demo-fixtures/view-mode-select.ts b/webui/src/web-components/demo/demo-fixtures/view-mode-select.ts
new file mode 100644
index 0000000..5e2df2d
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/view-mode-select.ts
@@ -0,0 +1,170 @@
+/**
+ * Shared demo fixtures for SketchViewModeSelect component
+ */
+
+/**
+ * Sample view mode configurations for different scenarios
+ */
+export const sampleViewModeConfigs = {
+  // Basic configuration with no diff stats
+  basic: {
+    activeMode: "chat" as const,
+    diffLinesAdded: 0,
+    diffLinesRemoved: 0,
+  },
+
+  // Configuration with small diff stats
+  smallDiff: {
+    activeMode: "diff2" as const,
+    diffLinesAdded: 5,
+    diffLinesRemoved: 2,
+  },
+
+  // Configuration with large diff stats
+  largeDiff: {
+    activeMode: "diff2" as const,
+    diffLinesAdded: 247,
+    diffLinesRemoved: 156,
+  },
+
+  // Configuration with terminal mode active
+  terminalActive: {
+    activeMode: "terminal" as const,
+    diffLinesAdded: 12,
+    diffLinesRemoved: 8,
+  },
+
+  // Configuration with only additions
+  additionsOnly: {
+    activeMode: "diff2" as const,
+    diffLinesAdded: 35,
+    diffLinesRemoved: 0,
+  },
+
+  // Configuration with only deletions
+  deletionsOnly: {
+    activeMode: "diff2" as const,
+    diffLinesAdded: 0,
+    diffLinesRemoved: 28,
+  },
+};
+
+/**
+ * Sample scenarios for interactive demos
+ */
+export const viewModeScenarios = [
+  {
+    name: "Fresh Start",
+    description: "No changes, chat mode active",
+    config: sampleViewModeConfigs.basic,
+  },
+  {
+    name: "Small Changes",
+    description: "Few lines changed, diff view active",
+    config: sampleViewModeConfigs.smallDiff,
+  },
+  {
+    name: "Major Refactor",
+    description: "Large number of changes across files",
+    config: sampleViewModeConfigs.largeDiff,
+  },
+  {
+    name: "Terminal Work",
+    description: "Running commands, terminal active",
+    config: sampleViewModeConfigs.terminalActive,
+  },
+  {
+    name: "New Feature",
+    description: "Only additions, new code written",
+    config: sampleViewModeConfigs.additionsOnly,
+  },
+  {
+    name: "Code Cleanup",
+    description: "Only deletions, removing unused code",
+    config: sampleViewModeConfigs.deletionsOnly,
+  },
+];
+
+/**
+ * Type for view mode configuration
+ */
+export type ViewModeConfig = {
+  activeMode: "chat" | "diff2" | "terminal";
+  diffLinesAdded: number;
+  diffLinesRemoved: number;
+};
+
+/**
+ * Helper function to apply configuration to a component
+ */
+export function applyViewModeConfig(
+  component: any,
+  config: ViewModeConfig,
+): void {
+  component.activeMode = config.activeMode;
+  component.diffLinesAdded = config.diffLinesAdded;
+  component.diffLinesRemoved = config.diffLinesRemoved;
+  component.requestUpdate();
+}
+
+/**
+ * Create a series of buttons for testing different scenarios
+ */
+export function createViewModeTestButtons(
+  component: any,
+  container: HTMLElement,
+): void {
+  const buttonContainer = document.createElement("div");
+  buttonContainer.style.cssText = `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 15px 0;
+    padding: 10px;
+    background: #f6f8fa;
+    border-radius: 6px;
+  `;
+
+  viewModeScenarios.forEach((scenario) => {
+    const button = document.createElement("button");
+    button.textContent = scenario.name;
+    button.title = scenario.description;
+    button.style.cssText = `
+      padding: 6px 12px;
+      background: #0969da;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      transition: background-color 0.2s;
+    `;
+
+    button.addEventListener("mouseenter", () => {
+      button.style.backgroundColor = "#0860ca";
+    });
+
+    button.addEventListener("mouseleave", () => {
+      button.style.backgroundColor = "#0969da";
+    });
+
+    button.addEventListener("click", () => {
+      applyViewModeConfig(component, scenario.config);
+
+      // Visual feedback
+      const allButtons = buttonContainer.querySelectorAll("button");
+      allButtons.forEach((btn) => {
+        (btn as HTMLButtonElement).style.backgroundColor = "#0969da";
+      });
+      button.style.backgroundColor = "#2da44e";
+
+      setTimeout(() => {
+        button.style.backgroundColor = "#0969da";
+      }, 1000);
+    });
+
+    buttonContainer.appendChild(button);
+  });
+
+  container.appendChild(buttonContainer);
+}
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 53f9fba..76b7085 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -97,6 +97,7 @@
       "sketch-chat-input",
       "sketch-container-status",
       "sketch-tool-calls",
+      "sketch-view-mode-select",
     ];
 
     // Filter to only components that actually have demo files
diff --git a/webui/src/web-components/demo/sketch-view-mode-select.demo.ts b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
new file mode 100644
index 0000000..c187fbd
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
@@ -0,0 +1,376 @@
+/**
+ * Demo module for sketch-view-mode-select component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import {
+  demoUtils,
+  sampleViewModeConfigs,
+  viewModeScenarios,
+  applyViewModeConfig,
+  createViewModeTestButtons,
+} from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "View Mode Select Demo",
+  description:
+    "Interactive tab navigation for switching between chat, diff, and terminal views",
+  imports: ["../sketch-view-mode-select"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic View Mode Selector",
+      "Click buttons to switch between different views",
+    );
+
+    const scenariosSection = demoUtils.createDemoSection(
+      "Different Scenarios",
+      "Pre-configured scenarios showing various diff stats and active modes",
+    );
+
+    const interactiveSection = demoUtils.createDemoSection(
+      "Interactive Testing",
+      "Test different configurations and watch the component update",
+    );
+
+    // Basic view mode selector
+    const basicContainer = document.createElement("div");
+    basicContainer.className = "@container";
+
+    const basicSelector = document.createElement(
+      "sketch-view-mode-select",
+    ) as any;
+    basicSelector.id = "basic-selector";
+    applyViewModeConfig(basicSelector, sampleViewModeConfigs.basic);
+
+    basicContainer.appendChild(basicSelector);
+
+    // Status display for basic selector
+    const basicStatus = document.createElement("div");
+    basicStatus.id = "basic-status";
+    basicStatus.style.cssText = `
+      margin-top: 15px;
+      padding: 10px;
+      background: #f6f8fa;
+      border-radius: 6px;
+      font-family: monospace;
+      font-size: 14px;
+    `;
+
+    const updateBasicStatus = () => {
+      basicStatus.innerHTML = `
+        <strong>Current State:</strong><br>
+        Active Mode: <code>${basicSelector.activeMode}</code><br>
+        Diff Stats: <code>+${basicSelector.diffLinesAdded} -${basicSelector.diffLinesRemoved}</code>
+      `;
+    };
+    updateBasicStatus();
+
+    // Listen for view mode changes
+    basicSelector.addEventListener("view-mode-select", (event: CustomEvent) => {
+      console.log("View mode changed:", event.detail);
+      basicSelector.activeMode = event.detail.mode;
+      updateBasicStatus();
+    });
+
+    // Create scenario examples
+    const scenarioContainer = document.createElement("div");
+    scenarioContainer.style.cssText = `
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 15px;
+      margin-top: 15px;
+    `;
+
+    viewModeScenarios.forEach((scenario) => {
+      const scenarioCard = document.createElement("div");
+      scenarioCard.style.cssText = `
+        padding: 15px;
+        border: 1px solid #d0d7de;
+        border-radius: 8px;
+        background: white;
+      `;
+
+      const scenarioTitle = document.createElement("h4");
+      scenarioTitle.textContent = scenario.name;
+      scenarioTitle.style.cssText = "margin: 0 0 5px 0; color: #24292f;";
+
+      const scenarioDesc = document.createElement("p");
+      scenarioDesc.textContent = scenario.description;
+      scenarioDesc.style.cssText =
+        "margin: 0 0 10px 0; color: #656d76; font-size: 14px;";
+
+      const scenarioWrapper = document.createElement("div");
+      scenarioWrapper.className = "@container";
+
+      const scenarioSelector = document.createElement(
+        "sketch-view-mode-select",
+      ) as any;
+      applyViewModeConfig(scenarioSelector, scenario.config);
+
+      scenarioWrapper.appendChild(scenarioSelector);
+
+      scenarioCard.appendChild(scenarioTitle);
+      scenarioCard.appendChild(scenarioDesc);
+      scenarioCard.appendChild(scenarioWrapper);
+      scenarioContainer.appendChild(scenarioCard);
+    });
+
+    // Interactive testing component
+    const interactiveSelectorContainer = document.createElement("div");
+    interactiveSelectorContainer.className = "@container";
+
+    const interactiveSelector = document.createElement(
+      "sketch-view-mode-select",
+    ) as any;
+    interactiveSelector.id = "interactive-selector";
+    applyViewModeConfig(interactiveSelector, sampleViewModeConfigs.basic);
+
+    interactiveSelectorContainer.appendChild(interactiveSelector);
+
+    // Status display for interactive selector
+    const interactiveStatus = document.createElement("div");
+    interactiveStatus.id = "interactive-status";
+    interactiveStatus.style.cssText = basicStatus.style.cssText;
+
+    const updateInteractiveStatus = () => {
+      interactiveStatus.innerHTML = `
+        <strong>Interactive Component State:</strong><br>
+        Active Mode: <code>${interactiveSelector.activeMode}</code><br>
+        Diff Lines Added: <code>${interactiveSelector.diffLinesAdded}</code><br>
+        Diff Lines Removed: <code>${interactiveSelector.diffLinesRemoved}</code><br>
+        <em>Click scenario buttons above to test different configurations</em>
+      `;
+    };
+    updateInteractiveStatus();
+
+    // Listen for view mode changes on interactive selector
+    interactiveSelector.addEventListener(
+      "view-mode-select",
+      (event: CustomEvent) => {
+        console.log("Interactive view mode changed:", event.detail);
+        interactiveSelector.activeMode = event.detail.mode;
+        updateInteractiveStatus();
+      },
+    );
+
+    // Custom controls for interactive testing
+    const customControls = document.createElement("div");
+    customControls.style.cssText = `
+      margin: 15px 0;
+      padding: 15px;
+      background: #f6f8fa;
+      border-radius: 6px;
+    `;
+
+    const addLinesButton = demoUtils.createButton("Add +5 Lines", () => {
+      interactiveSelector.diffLinesAdded += 5;
+      interactiveSelector.requestUpdate();
+      updateInteractiveStatus();
+    });
+
+    const removeLinesButton = demoUtils.createButton("Add -3 Lines", () => {
+      interactiveSelector.diffLinesRemoved += 3;
+      interactiveSelector.requestUpdate();
+      updateInteractiveStatus();
+    });
+
+    const clearDiffButton = demoUtils.createButton("Clear Diff", () => {
+      interactiveSelector.diffLinesAdded = 0;
+      interactiveSelector.diffLinesRemoved = 0;
+      interactiveSelector.requestUpdate();
+      updateInteractiveStatus();
+    });
+
+    const randomDiffButton = demoUtils.createButton("Random Diff", () => {
+      interactiveSelector.diffLinesAdded = Math.floor(Math.random() * 100) + 1;
+      interactiveSelector.diffLinesRemoved = Math.floor(Math.random() * 50) + 1;
+      interactiveSelector.requestUpdate();
+      updateInteractiveStatus();
+    });
+
+    customControls.appendChild(addLinesButton);
+    customControls.appendChild(removeLinesButton);
+    customControls.appendChild(clearDiffButton);
+    customControls.appendChild(randomDiffButton);
+
+    // Assemble the demo
+    basicSection.appendChild(basicContainer);
+    basicSection.appendChild(basicStatus);
+
+    scenariosSection.appendChild(scenarioContainer);
+
+    interactiveSection.appendChild(interactiveSelectorContainer);
+
+    // Add test buttons for interactive section
+    createViewModeTestButtons(interactiveSelector, interactiveSection);
+
+    interactiveSection.appendChild(customControls);
+    interactiveSection.appendChild(interactiveStatus);
+
+    container.appendChild(basicSection);
+    container.appendChild(scenariosSection);
+    container.appendChild(interactiveSection);
+
+    // Add container queries responsive testing section
+    const responsiveSection = demoUtils.createDemoSection(
+      "Container Query Responsive Testing",
+      "Demonstrates how the component behaves at different container sizes using Tailwind container queries",
+    );
+
+    // Create explanation text
+    const explanation = document.createElement("p");
+    explanation.style.cssText = "margin: 10px 0; color: #666; font-size: 14px;";
+    explanation.innerHTML = `
+      <strong>Container Queries:</strong> The component now uses Tailwind <code>@container</code> queries instead of viewport media queries.<br>
+      This allows different sized containers to show different responsive behaviors simultaneously.
+    `;
+    responsiveSection.appendChild(explanation);
+
+    // Create different sized container examples
+    const containerExamples = [
+      {
+        title: "Extra Wide Container (700px)",
+        description: "Shows full text labels and complete layout",
+        width: "700px",
+        config: sampleViewModeConfigs.largeDiff,
+        containerClass: "w-[700px]",
+        borderColor: "border-green-500",
+      },
+      {
+        title: "Very Narrow Container (250px)",
+        description: "Shows icons only (text hidden due to container query)",
+        width: "250px",
+        config: sampleViewModeConfigs.terminalActive,
+        containerClass: "w-[250px]",
+        borderColor: "border-orange-500",
+      },
+    ];
+
+    const examplesContainer = document.createElement("div");
+    examplesContainer.style.cssText =
+      "display: flex; flex-direction: column; gap: 20px; margin: 20px 0;";
+
+    containerExamples.forEach((example, index) => {
+      // Create container wrapper
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText = `
+        border: 2px solid;
+        border-radius: 8px;
+        padding: 15px;
+        background: #f9f9f9;
+      `;
+      wrapper.className = example.borderColor;
+
+      // Create title and description
+      const header = document.createElement("div");
+      header.style.cssText = "margin-bottom: 10px;";
+      header.innerHTML = `
+        <h4 style="margin: 0 0 5px 0; font-weight: 600; color: #333;">${example.title}</h4>
+        <p style="margin: 0; font-size: 14px; color: #666;">${example.description}</p>
+      `;
+      wrapper.appendChild(header);
+
+      // Create constrained container for the component
+      const componentContainer = document.createElement("div");
+      componentContainer.className = "@container";
+      componentContainer.style.cssText = `
+        width: ${example.width};
+        border: 1px dashed #ccc;
+        padding: 10px;
+        background: white;
+        border-radius: 4px;
+      `;
+
+      // Create the component
+      const component = document.createElement(
+        "sketch-view-mode-select",
+      ) as any;
+      applyViewModeConfig(component, example.config);
+
+      componentContainer.appendChild(component);
+      wrapper.appendChild(componentContainer);
+      examplesContainer.appendChild(wrapper);
+    });
+
+    responsiveSection.appendChild(examplesContainer);
+
+    // Add interactive container size testing
+    const containerTestSection = document.createElement("div");
+    containerTestSection.style.cssText =
+      "margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd;";
+
+    const interactiveTitle = document.createElement("h4");
+    interactiveTitle.textContent = "Interactive Container Size Testing";
+    interactiveTitle.style.cssText = "margin: 0 0 10px 0; font-weight: 600;";
+
+    const interactiveDesc = document.createElement("p");
+    interactiveDesc.textContent =
+      "Use the buttons below to change the container size and see the responsive behavior in real-time.";
+    interactiveDesc.style.cssText =
+      "margin: 0 0 15px 0; color: #666; font-size: 14px;";
+
+    // Create interactive container
+    const interactiveContainer = document.createElement("div");
+    interactiveContainer.className = "@container";
+    interactiveContainer.style.cssText = `
+      border: 2px solid #007acc;
+      border-radius: 8px;
+      padding: 15px;
+      background: #f0f8ff;
+      transition: width 0.3s ease;
+      width: 700px;
+    `;
+
+    // Create interactive component
+    const interactiveComponent = document.createElement(
+      "sketch-view-mode-select",
+    ) as any;
+    applyViewModeConfig(interactiveComponent, sampleViewModeConfigs.largeDiff);
+
+    // Size info display
+    const sizeInfo = document.createElement("div");
+    sizeInfo.style.cssText =
+      "margin-bottom: 10px; font-family: monospace; font-size: 12px; color: #333;";
+    sizeInfo.textContent = "Current container width: 700px";
+
+    interactiveContainer.appendChild(sizeInfo);
+    interactiveContainer.appendChild(interactiveComponent);
+
+    // Control buttons
+    const controlButtons = document.createElement("div");
+    controlButtons.style.cssText =
+      "margin-top: 15px; display: flex; gap: 8px; flex-wrap: wrap;";
+
+    const sizes = [
+      { label: "Extra Wide (700px)", width: "700px" },
+      { label: "Medium (400px)", width: "400px" },
+      { label: "Very Narrow (250px)", width: "250px" },
+    ];
+
+    sizes.forEach((size) => {
+      const button = demoUtils.createButton(size.label, () => {
+        interactiveContainer.style.width = size.width;
+        sizeInfo.textContent = `Current container width: ${size.width}`;
+      });
+      controlButtons.appendChild(button);
+    });
+
+    containerTestSection.appendChild(interactiveTitle);
+    containerTestSection.appendChild(interactiveDesc);
+    containerTestSection.appendChild(interactiveContainer);
+    containerTestSection.appendChild(controlButtons);
+
+    responsiveSection.appendChild(containerTestSection);
+    container.appendChild(responsiveSection);
+  },
+
+  cleanup: async () => {
+    // Clean up any event listeners or intervals if needed
+    console.log("Cleaning up sketch-view-mode-select demo");
+  },
+};
+
+export default demo;