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