diff --git a/webui/src/web-components/demo/status-indicators.demo.ts b/webui/src/web-components/demo/status-indicators.demo.ts
new file mode 100644
index 0000000..2b4ef11
--- /dev/null
+++ b/webui/src/web-components/demo/status-indicators.demo.ts
@@ -0,0 +1,169 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Status Indicators Demo",
+  description:
+    "Status indicators showing connected, working, and disconnected states without the green connection dot",
+  imports: ["../sketch-call-status.ts", "../sketch-network-status.ts"],
+
+  customStyles: `
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .status-container {
+      padding: 20px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      background-color: #f9f9f9;
+    }
+    .label {
+      font-weight: bold;
+      margin-bottom: 10px;
+      font-size: 16px;
+    }
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+    }
+    .status-item {
+      min-width: 200px;
+    }
+    .status-view {
+      background-color: white;
+      border: 1px solid #ddd;
+      padding: 10px;
+      border-radius: 4px;
+    }
+    .description {
+      margin-top: 10px;
+      color: #666;
+      font-size: 14px;
+    }
+  `,
+
+  setup: async (container: HTMLElement) => {
+    const section = demoUtils.createDemoSection(
+      "Status Indicators",
+      "Demonstrates the new status indicators without the green connection dot, showing different connection and activity states.",
+    );
+
+    const demoContainer = document.createElement("div");
+    demoContainer.className = "demo-container";
+
+    // Connected States Container
+    const connectedContainer = document.createElement("div");
+    connectedContainer.className = "status-container";
+
+    const connectedLabel = document.createElement("div");
+    connectedLabel.className = "label";
+    connectedLabel.textContent = "Connected States:";
+    connectedContainer.appendChild(connectedLabel);
+
+    // IDLE State
+    const idleRow = document.createElement("div");
+    idleRow.className = "status-row";
+
+    const idleItem = document.createElement("div");
+    idleItem.className = "status-item";
+    idleItem.textContent = "IDLE:";
+
+    const idleView = document.createElement("div");
+    idleView.className = "status-view";
+
+    const idleStatus = document.createElement("sketch-call-status") as any;
+    idleStatus.isDisconnected = false;
+    idleStatus.isIdle = true;
+    idleStatus.llmCalls = 0;
+    idleStatus.toolCalls = [];
+
+    const idleDescription = document.createElement("div");
+    idleDescription.className = "description";
+    idleDescription.textContent = "Agent is connected but not actively working";
+
+    idleView.appendChild(idleStatus);
+    idleRow.appendChild(idleItem);
+    idleRow.appendChild(idleView);
+    idleRow.appendChild(idleDescription);
+    connectedContainer.appendChild(idleRow);
+
+    // WORKING State
+    const workingRow = document.createElement("div");
+    workingRow.className = "status-row";
+
+    const workingItem = document.createElement("div");
+    workingItem.className = "status-item";
+    workingItem.textContent = "WORKING:";
+
+    const workingView = document.createElement("div");
+    workingView.className = "status-view";
+
+    const workingStatus = document.createElement("sketch-call-status") as any;
+    workingStatus.isDisconnected = false;
+    workingStatus.isIdle = false;
+    workingStatus.llmCalls = 1;
+    workingStatus.toolCalls = ["bash"];
+
+    const workingDescription = document.createElement("div");
+    workingDescription.className = "description";
+    workingDescription.textContent = "Agent is connected and actively working";
+
+    workingView.appendChild(workingStatus);
+    workingRow.appendChild(workingItem);
+    workingRow.appendChild(workingView);
+    workingRow.appendChild(workingDescription);
+    connectedContainer.appendChild(workingRow);
+
+    // Disconnected States Container
+    const disconnectedContainer = document.createElement("div");
+    disconnectedContainer.className = "status-container";
+
+    const disconnectedLabel = document.createElement("div");
+    disconnectedLabel.className = "label";
+    disconnectedLabel.textContent = "Disconnected State:";
+    disconnectedContainer.appendChild(disconnectedLabel);
+
+    // DISCONNECTED State
+    const disconnectedRow = document.createElement("div");
+    disconnectedRow.className = "status-row";
+
+    const disconnectedItem = document.createElement("div");
+    disconnectedItem.className = "status-item";
+    disconnectedItem.textContent = "DISCONNECTED:";
+
+    const disconnectedView = document.createElement("div");
+    disconnectedView.className = "status-view";
+
+    const disconnectedStatus = document.createElement(
+      "sketch-call-status",
+    ) as any;
+    disconnectedStatus.isDisconnected = true;
+    disconnectedStatus.isIdle = true;
+    disconnectedStatus.llmCalls = 0;
+    disconnectedStatus.toolCalls = [];
+
+    const disconnectedDescription = document.createElement("div");
+    disconnectedDescription.className = "description";
+    disconnectedDescription.textContent = "Connection lost to the agent";
+
+    disconnectedView.appendChild(disconnectedStatus);
+    disconnectedRow.appendChild(disconnectedItem);
+    disconnectedRow.appendChild(disconnectedView);
+    disconnectedRow.appendChild(disconnectedDescription);
+    disconnectedContainer.appendChild(disconnectedRow);
+
+    // Assemble the demo
+    demoContainer.appendChild(connectedContainer);
+    demoContainer.appendChild(disconnectedContainer);
+    section.appendChild(demoContainer);
+    container.appendChild(section);
+  },
+};
+
+export default demo;