diff --git a/webui/src/web-components/demo/sketch-network-status.demo.html b/webui/src/web-components/demo/sketch-network-status.demo.html
index f248a5d..b0aad7e 100644
--- a/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -3,20 +3,51 @@
     <title>sketch-network-status demo</title>
     <link rel="stylesheet" href="demo.css" />
     <script type="module" src="../sketch-network-status.ts"></script>
+    <script type="module" src="../sketch-call-status.ts"></script>
+    <style>
+      .status-container {
+        margin: 20px 0;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .label {
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+    </style>
   </head>
   <body>
-    <h1>sketch-network-status demo</h1>
-
-    Connected:
-    <sketch-network-status
-      connection="connected"
-      message="connected"
-    ></sketch-network-status>
-
-    Error:
-    <sketch-network-status
-      connection="error"
-      error="error"
-    ></sketch-network-status>
+    <h1>Status Indicators Demo</h1>
+    
+    <div class="status-container">
+      <div class="label">Connected State:</div>
+      <sketch-call-status
+        .isDisconnected="false"
+        .isIdle="true"
+        .llmCalls="0"
+        .toolCalls='[]'
+      ></sketch-call-status>
+    </div>
+    
+    <div class="status-container">
+      <div class="label">Working State:</div>
+      <sketch-call-status
+        .isDisconnected="false"
+        .isIdle="false"
+        .llmCalls="1"
+        .toolCalls='["bash"]'
+      ></sketch-call-status>
+    </div>
+    
+    <div class="status-container">
+      <div class="label">Disconnected State:</div>
+      <sketch-call-status
+        .isDisconnected="true"
+        .isIdle="true"
+        .llmCalls="0"
+        .toolCalls='[]'
+      ></sketch-call-status>
+    </div>
   </body>
 </html>
diff --git a/webui/src/web-components/demo/status-demo.html b/webui/src/web-components/demo/status-demo.html
new file mode 100644
index 0000000..063c693
--- /dev/null
+++ b/webui/src/web-components/demo/status-demo.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Status Demo</title>
+    <script type="module" src="../sketch-call-status.ts"></script>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .demo-section {
+        margin-bottom: 40px;
+      }
+      .demo-item {
+        margin-bottom: 20px;
+        padding: 15px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+      h2 {
+        margin-top: 0;
+      }
+      .status-display {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 60px;
+        background-color: #f5f5f5;
+        border-radius: 4px;
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Status Indicators Demo</h1>
+    <p>This demo shows the status indicators with the DISCONNECTED state.</p>
+    
+    <div class="demo-section">
+      <div class="demo-item">
+        <h2>IDLE State</h2>
+        <div class="status-display">
+          <sketch-call-status id="idle-status"></sketch-call-status>
+        </div>
+      </div>
+      
+      <div class="demo-item">
+        <h2>WORKING State</h2>
+        <div class="status-display">
+          <sketch-call-status id="working-status"></sketch-call-status>
+        </div>
+      </div>
+      
+      <div class="demo-item">
+        <h2>DISCONNECTED State</h2>
+        <div class="status-display">
+          <sketch-call-status id="disconnected-status"></sketch-call-status>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Set up the demo after components are defined
+      window.addEventListener('DOMContentLoaded', () => {
+        // IDLE status
+        const idleStatus = document.getElementById('idle-status');
+        idleStatus.isIdle = true;
+        idleStatus.isDisconnected = false;
+        idleStatus.llmCalls = 0;
+        idleStatus.toolCalls = [];
+        
+        // WORKING status
+        const workingStatus = document.getElementById('working-status');
+        workingStatus.isIdle = false;
+        workingStatus.isDisconnected = false;
+        workingStatus.llmCalls = 1;
+        workingStatus.toolCalls = ['bash'];
+        
+        // DISCONNECTED status
+        const disconnectedStatus = document.getElementById('disconnected-status');
+        disconnectedStatus.isIdle = true;
+        disconnectedStatus.isDisconnected = true;
+        disconnectedStatus.llmCalls = 0;
+        disconnectedStatus.toolCalls = [];
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/webui/src/web-components/demo/status-indicators.demo.html b/webui/src/web-components/demo/status-indicators.demo.html
new file mode 100644
index 0000000..5fa9400
--- /dev/null
+++ b/webui/src/web-components/demo/status-indicators.demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Status Indicators Demo</title>
+    <script type="module" src="../sketch-call-status.ts"></script>
+    <script type="module" src="../sketch-network-status.ts"></script>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .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;
+      }
+      h1 {
+        margin-bottom: 20px;
+      }
+      .status-view {
+        background-color: white;
+        border: 1px solid #ddd;
+        padding: 10px;
+        border-radius: 4px;
+      }
+      .description {
+        margin-top: 10px;
+        color: #666;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Status Indicators Demo</h1>
+    <p>This demo shows the new status indicators without the green connection dot.</p>
+    
+    <div class="demo-container">
+      <div class="status-container">
+        <div class="label">Connected States:</div>
+        
+        <div class="status-row">
+          <div class="status-item">IDLE:</div>
+          <div class="status-view">
+            <sketch-call-status
+              .isDisconnected="false"
+              .isIdle="true"
+              .llmCalls="0"
+              .toolCalls="[]"
+            ></sketch-call-status>
+          </div>
+          <div class="description">Agent is connected but not actively working</div>
+        </div>
+        
+        <div class="status-row">
+          <div class="status-item">WORKING:</div>
+          <div class="status-view">
+            <sketch-call-status
+              .isDisconnected="false"
+              .isIdle="false"
+              .llmCalls="1"
+              .toolCalls='["bash"]'
+            ></sketch-call-status>
+          </div>
+          <div class="description">Agent is connected and actively working</div>
+        </div>
+      </div>
+      
+      <div class="status-container">
+        <div class="label">Disconnected State:</div>
+        
+        <div class="status-row">
+          <div class="status-item">DISCONNECTED:</div>
+          <div class="status-view">
+            <sketch-call-status
+              .isDisconnected="true"
+              .isIdle="true"
+              .llmCalls="0"
+              .toolCalls="[]"
+            ></sketch-call-status>
+          </div>
+          <div class="description">Connection lost to the agent</div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index aebabd9..3c39a55 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1022,6 +1022,7 @@
               ? this.messages[this.messages.length - 1]?.end_of_turn &&
                 !this.messages[this.messages.length - 1]?.parent_conversation_id
               : true}
+            .isDisconnected=${this.connectionStatus === "disconnected"}
           ></sketch-call-status>
 
           <sketch-network-status
diff --git a/webui/src/web-components/sketch-call-status.test.ts b/webui/src/web-components/sketch-call-status.test.ts
index 88ae3bd..7dc16a5 100644
--- a/webui/src/web-components/sketch-call-status.test.ts
+++ b/webui/src/web-components/sketch-call-status.test.ts
@@ -136,3 +136,48 @@
     "2 tool calls in progress: bash, think",
   );
 });
+
+test("displays IDLE status when isIdle is true and not disconnected", async ({ mount }) => {
+  const component = await mount(SketchCallStatus, {
+    props: {
+      isIdle: true,
+      isDisconnected: false,
+      llmCalls: 0,
+      toolCalls: [],
+    },
+  });
+
+  // Check that the status banner has the correct class and text
+  await expect(component.locator(".status-banner")).toHaveClass(/status-idle/);
+  await expect(component.locator(".status-banner")).toHaveText("IDLE");
+});
+
+test("displays WORKING status when isIdle is false and not disconnected", async ({ mount }) => {
+  const component = await mount(SketchCallStatus, {
+    props: {
+      isIdle: false,
+      isDisconnected: false,
+      llmCalls: 1,
+      toolCalls: [],
+    },
+  });
+
+  // Check that the status banner has the correct class and text
+  await expect(component.locator(".status-banner")).toHaveClass(/status-working/);
+  await expect(component.locator(".status-banner")).toHaveText("WORKING");
+});
+
+test("displays DISCONNECTED status when isDisconnected is true regardless of isIdle", async ({ mount }) => {
+  const component = await mount(SketchCallStatus, {
+    props: {
+      isIdle: true, // Even when idle
+      isDisconnected: true,
+      llmCalls: 0,
+      toolCalls: [],
+    },
+  });
+
+  // Check that the status banner has the correct class and text
+  await expect(component.locator(".status-banner")).toHaveClass(/status-disconnected/);
+  await expect(component.locator(".status-banner")).toHaveText("DISCONNECTED");
+});
diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index a390093..69211b3 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -15,6 +15,9 @@
 
   @property()
   isIdle: boolean = false;
+  
+  @property()
+  isDisconnected: boolean = false;
 
   static styles = css`
     @keyframes gentle-pulse {
@@ -94,12 +97,12 @@
       font-weight: bold;
       text-align: center;
       letter-spacing: 0.5px;
-      width: 64px; /* Fixed width for the banner */
+      width: 104px; /* Wider to accommodate DISCONNECTED text */
       left: 50%;
       transform: translateX(-50%);
       top: 60%; /* Position a little below center */
       z-index: 10; /* Ensure it appears above the icons */
-      opacity: 0.6;
+      opacity: 0.9;
     }
 
     .status-working {
@@ -111,6 +114,12 @@
       background-color: #e6f4ea;
       color: #0d652d;
     }
+    
+    .status-disconnected {
+      background-color: #ffebee; /* Light red */
+      color: #d32f2f; /* Red */
+      font-weight: bold;
+    }
   `;
 
   render() {
@@ -126,8 +135,17 @@
 
     const agentState = `${this.agentState ? " (" + this.agentState + ")" : ""}`;
 
-    // Determine working state - working if not idle
-    const isWorking = !this.isIdle;
+    // Determine state - disconnected takes precedence, then working vs idle
+    let statusClass = "status-idle";
+    let statusText = "IDLE";
+    
+    if (this.isDisconnected) {
+      statusClass = "status-disconnected";
+      statusText = "DISCONNECTED";
+    } else if (!this.isIdle) {
+      statusClass = "status-working";
+      statusText = "WORKING";
+    }
 
     return html`
       <div class="call-status-container">
@@ -152,9 +170,9 @@
           </div>
         </div>
         <div
-          class="status-banner ${isWorking ? "status-working" : "status-idle"}"
+          class="status-banner ${statusClass}"
         >
-          ${isWorking ? "WORKING" : "IDLE"}
+          ${statusText}
         </div>
       </div>
     `;
diff --git a/webui/src/web-components/sketch-network-status.test.ts b/webui/src/web-components/sketch-network-status.test.ts
index bf0f4ba..6930910 100644
--- a/webui/src/web-components/sketch-network-status.test.ts
+++ b/webui/src/web-components/sketch-network-status.test.ts
@@ -1,33 +1,28 @@
 import { test, expect } from "@sand4rt/experimental-ct-web";
 import { SketchNetworkStatus } from "./sketch-network-status";
 
-// Test for the status indicator dot
-test("shows status indicator dot when connected", async ({ mount }) => {
+// Test that the network status component doesn't display visible content
+// since we've removed the green dot indicator
+test("network status component is not visible", async ({ mount }) => {
   const component = await mount(SketchNetworkStatus, {
     props: {
       connection: "connected",
     },
   });
 
-  // The status container and indicator should be visible
-  await expect(component.locator(".status-container")).toBeVisible();
-  await expect(component.locator(".status-indicator")).toBeVisible();
-  await expect(component.locator(".status-indicator")).toHaveClass(/connected/);
+  // The status container should exist but be hidden with display: none
+  await expect(component.locator(".status-container")).toHaveCSS("display", "none");
 });
 
-// Test that tooltip shows error message when provided
-test("includes error in tooltip when provided", async ({ mount }) => {
-  const errorMsg = "Connection error";
+// Test that the network status component remains invisible regardless of connection state
+test("network status component is not visible when disconnected", async ({ mount }) => {
   const component = await mount(SketchNetworkStatus, {
     props: {
       connection: "disconnected",
-      error: errorMsg,
+      error: "Connection error",
     },
   });
 
-  await expect(component.locator(".status-indicator")).toBeVisible();
-  await expect(component.locator(".status-indicator")).toHaveAttribute(
-    "title",
-    "Connection status: disconnected - Connection error",
-  );
+  // The status container should exist but be hidden with display: none
+  await expect(component.locator(".status-container")).toHaveCSS("display", "none");
 });
diff --git a/webui/src/web-components/sketch-network-status.ts b/webui/src/web-components/sketch-network-status.ts
index 8a5a883..7029975 100644
--- a/webui/src/web-components/sketch-network-status.ts
+++ b/webui/src/web-components/sketch-network-status.ts
@@ -16,43 +16,7 @@
 
   static styles = css`
     .status-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .status-indicator {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-    }
-
-    .status-indicator.connected {
-      background-color: #2e7d32; /* Green */
-      box-shadow: 0 0 5px rgba(46, 125, 50, 0.5);
-    }
-
-    .status-indicator.disconnected {
-      background-color: #d32f2f; /* Red */
-      box-shadow: 0 0 5px rgba(211, 47, 47, 0.5);
-    }
-
-    .status-indicator.connecting {
-      background-color: #f57c00; /* Orange */
-      box-shadow: 0 0 5px rgba(245, 124, 0, 0.5);
-      animation: pulse 1.5s infinite;
-    }
-
-    @keyframes pulse {
-      0% {
-        opacity: 0.6;
-      }
-      50% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0.6;
-      }
+      display: none; /* Hide by default - we're removing the dot */
     }
   `;
 
@@ -71,15 +35,10 @@
   }
 
   render() {
-    // Only show the status indicator dot (no text)
+    // We no longer show any content as the dot is being removed
+    // The connection status will now be handled by the call-status component
     return html`
       <div class="status-container">
-        <div
-          class="status-indicator ${this.connection}"
-          title="Connection status: ${this.connection}${this.error
-            ? ` - ${this.error}`
-            : ""}"
-        ></div>
       </div>
     `;
   }