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/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