webui: Update status indicators
- Remove green dot connection indicator
- Add DISCONNECTED state with red styling when connection is lost
- Update the status bar to show DISCONNECTED instead of IDLE/WORKING when disconnected
- Create demo page to preview all three status states
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: skR3m0v3Gr3nD0tD1sc0nn3ct3dR3d
Change-ID: sa2b3679b9cdcaf80k
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>
`;