<Card title="Service Health" subtitle="On-call engineer view · Single screen">
  <Callout tone="info" title="Current status">
    All systems nominal. No critical alerts firing.
  </Callout>

  <Columns>
    <Card title="Uptime this quarter">
      <Stat label="Uptime" value="99.97%" note="+0.01% vs last quarter" tone="success" icon="chart-line" />
      <Progress value="99.97" max="100" label="Target: 99.9%" tone="success" />
    </Card>

    <Card title="Error rate (right now)">
      <Stat label="Error rate" value="0.23%" note="Below threshold (1.0%)" tone="info" icon="warning" />
    </Card>
  </Columns>

  <Card title="CPU &amp; memory usage (past 24 h)">
    <Chart type="line" x="Time" y="%">
| Time | CPU | Memory |
|---|---|---|
| 00:00 | 45 | 62 |
| 04:00 | 52 | 65 |
| 08:00 | 68 | 72 |
| 12:00 | 74 | 78 |
| 16:00 | 71 | 75 |
| 20:00 | 58 | 68 |
| 24:00 | 47 | 63 |
    </Chart>
  </Card>

  <Card title="Open incidents">
    <Tabs>
      <Tab title="All regions">
        <Columns>
          <Card>
            <Badge tone="danger">P1</Badge> Database replica lag in us-east-1
            <Button variant="secondary" ask="Acknowledge P1 incident: Database replica lag in us-east-1">Acknowledge</Button>
          </Card>
          <Card>
            <Badge tone="warning">P2</Badge> Elevated latency on /checkout in eu-west-1
            <Button variant="secondary" ask="Acknowledge P2 incident: Elevated latency on /checkout in eu-west-1">Acknowledge</Button>
          </Card>
          <Card>
            <Badge tone="info">P3</Badge> TLS certificate renewal due in 3 days
            <Button variant="secondary" ask="Acknowledge P3 incident: TLS certificate renewal due in 3 days">Acknowledge</Button>
          </Card>
        </Columns>
      </Tab>
      <Tab title="us-east-1">
        <Badge tone="danger">P1</Badge> Database replica lag in us-east-1
        <Button variant="secondary" ask="Acknowledge P1 incident: Database replica lag in us-east-1">Acknowledge</Button>
      </Tab>
      <Tab title="eu-west-1">
        <Badge tone="warning">P2</Badge> Elevated latency on /checkout in eu-west-1
        <Button variant="secondary" ask="Acknowledge P2 incident: Elevated latency on /checkout in eu-west-1">Acknowledge</Button>
      </Tab>
    </Tabs>
  </Card>

  <Card title="Narrow to one region">
    <Select label="Region" name="region" options="All regions | us-east-1 | eu-west-1 | ap-southeast-1" placeholder="Choose a region" />
    <Button ask="Show service health for us-east-1">Apply filter</Button>
  </Card>

  <Card title="Five slowest endpoints (latency)">
    <Columns>
      <Card>
        <Stat label="1. /checkout" value="1.2 s" icon="clock" />
        <Stat label="2. /orders" value="980 ms" icon="clock" />
        <Stat label="3. /search" value="720 ms" icon="clock" />
        <Stat label="4. /auth" value="540 ms" icon="clock" />
        <Stat label="5. /profile" value="310 ms" icon="clock" />
      </Card>
    </Columns>
  </Card>

  <Card title="Set alert threshold">
    <Form name="alert-threshold">
      <Slider label="Error rate threshold (%)" min="0.1" max="5.0" step="0.1" value="1.0" name="error-threshold" unit="%" />
      <Slider label="CPU threshold (%)" min="50" max="100" step="1" value="90" name="cpu-threshold" unit="%" />
      <Slider label="Memory threshold (%)" min="50" max="100" step="1" value="85" name="mem-threshold" unit="%" />
      <Button>Save thresholds</Button>
    </Form>
  </Card>
</Card>

<FollowUps>
- [Show me the timeline for the P1 incident](#)
- [Compare today's error rate with last week](#)
- [What are the top 3 root causes this quarter?](#)
</FollowUps>