# Status Panel

A status panel for service health. Each service shows a colored lamp that pulses while it is unhealthy, with optional uptime and latency. The header reports the worst status, and new events slide into the log as they arrive.

<demo-status-panel>



</demo-status-panel>

## Usage

```vue
<script setup lang="ts">
  import StatusPanel from '~/components/ui/status-panel/StatusPanel.vue';
  import type {
    StatusEvent,
    StatusService,
  } from '~/components/ui/status-panel/types';

  const services: StatusService[] = [
    {
      id: 'api',
      name: 'API',
      status: 'operational',
      uptime: 99.99,
      latency: 84,
    },
    {
      id: 'queue',
      name: 'Job queue',
      status: 'degraded',
      uptime: 99.9,
      latency: 240,
    },
  ];
  const events: StatusEvent[] = [
    {
      id: '1',
      time: new Date(),
      message: 'Job queue latency above 2s',
      level: 'warning',
    },
  ];
</script>

<template>
  <StatusPanel :services="services" :events="events" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        services
      </code>
    </td>
    
    <td>
      <code>
        { id; name; status; uptime?; latency? }[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      <code>
        status
      </code>
      
       is <code>
        'operational'
      </code>
      
      , <code>
        'degraded'
      </code>
      
      , <code>
        'down'
      </code>
      
       or <code>
        'maintenance'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        events
      </code>
    </td>
    
    <td>
      <code>
        { id; time; message; level }[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      <code>
        level
      </code>
      
       is <code>
        'info'
      </code>
      
      , <code>
        'warning'
      </code>
      
      , <code>
        'error'
      </code>
      
       or <code>
        'success'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-events
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Newest events kept in the log
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'System status'
      </code>
    </td>
    
    <td>
      Panel heading
    </td>
  </tr>
</tbody>
</table>

Motion respects `prefers-reduced-motion`.