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