| Philip Zeyliger | 5e35702 | 2025-05-16 04:50:34 +0000 | [diff] [blame^] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Status Demo</title> |
| 5 | <script type="module" src="../sketch-call-status.ts"></script> |
| 6 | <style> |
| 7 | body { |
| 8 | font-family: system-ui, sans-serif; |
| 9 | max-width: 800px; |
| 10 | margin: 0 auto; |
| 11 | padding: 20px; |
| 12 | } |
| 13 | .demo-section { |
| 14 | margin-bottom: 40px; |
| 15 | } |
| 16 | .demo-item { |
| 17 | margin-bottom: 20px; |
| 18 | padding: 15px; |
| 19 | border: 1px solid #ccc; |
| 20 | border-radius: 5px; |
| 21 | } |
| 22 | h2 { |
| 23 | margin-top: 0; |
| 24 | } |
| 25 | .status-display { |
| 26 | display: flex; |
| 27 | align-items: center; |
| 28 | justify-content: center; |
| 29 | height: 60px; |
| 30 | background-color: #f5f5f5; |
| 31 | border-radius: 4px; |
| 32 | margin-top: 10px; |
| 33 | } |
| 34 | </style> |
| 35 | </head> |
| 36 | <body> |
| 37 | <h1>Status Indicators Demo</h1> |
| 38 | <p>This demo shows the status indicators with the DISCONNECTED state.</p> |
| 39 | |
| 40 | <div class="demo-section"> |
| 41 | <div class="demo-item"> |
| 42 | <h2>IDLE State</h2> |
| 43 | <div class="status-display"> |
| 44 | <sketch-call-status id="idle-status"></sketch-call-status> |
| 45 | </div> |
| 46 | </div> |
| 47 | |
| 48 | <div class="demo-item"> |
| 49 | <h2>WORKING State</h2> |
| 50 | <div class="status-display"> |
| 51 | <sketch-call-status id="working-status"></sketch-call-status> |
| 52 | </div> |
| 53 | </div> |
| 54 | |
| 55 | <div class="demo-item"> |
| 56 | <h2>DISCONNECTED State</h2> |
| 57 | <div class="status-display"> |
| 58 | <sketch-call-status id="disconnected-status"></sketch-call-status> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | |
| 63 | <script> |
| 64 | // Set up the demo after components are defined |
| 65 | window.addEventListener('DOMContentLoaded', () => { |
| 66 | // IDLE status |
| 67 | const idleStatus = document.getElementById('idle-status'); |
| 68 | idleStatus.isIdle = true; |
| 69 | idleStatus.isDisconnected = false; |
| 70 | idleStatus.llmCalls = 0; |
| 71 | idleStatus.toolCalls = []; |
| 72 | |
| 73 | // WORKING status |
| 74 | const workingStatus = document.getElementById('working-status'); |
| 75 | workingStatus.isIdle = false; |
| 76 | workingStatus.isDisconnected = false; |
| 77 | workingStatus.llmCalls = 1; |
| 78 | workingStatus.toolCalls = ['bash']; |
| 79 | |
| 80 | // DISCONNECTED status |
| 81 | const disconnectedStatus = document.getElementById('disconnected-status'); |
| 82 | disconnectedStatus.isIdle = true; |
| 83 | disconnectedStatus.isDisconnected = true; |
| 84 | disconnectedStatus.llmCalls = 0; |
| 85 | disconnectedStatus.toolCalls = []; |
| 86 | }); |
| 87 | </script> |
| 88 | </body> |
| 89 | </html> |