---
html: true
title: Pulse — service status
description: A calm, dark observability panel built in one Markdown file — a live :fetch board, build-time rollups, and a keyed services table, all with zero hand-written JavaScript.
image: https://darkmown.com/__wd/media/og-pulse.png
transitions: true
---

@include /nav.wd
@include /base.wd

<main class="wide app-pulse">

<style>
  @keyframes pulse-beat {
    0%   { box-shadow: 0 0 0 0 rgba(43, 212, 168, .5); }
    70%  { box-shadow: 0 0 0 6px rgba(43, 212, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 212, 168, 0); }
  }
  @keyframes pulse-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .app-pulse .pulse-live .dot,
    .app-pulse .pulse-spin { animation: none; }
  }
</style>

:fetch board from "/__wd/data/metrics.json"
:every 10s -> board refetch

:computed totalServices = board.services.length

<header class="pulse-head">
  <div class="pulse-id">
    <span class="pulse-mark">◐</span>
    <div>
      <h1 class="pulse-name">Pulse</h1>
      <p class="pulse-sub">Infrastructure status · all regions</p>
    </div>
  </div>
  <div class="pulse-actions">
    <span class="pulse-live"><span class="dot"></span>live</span>
  </div>
</header>

<div class="pulse-bar">

::: div .pulse-summary
{ totalServices } services · sorted slowest first
:::

:button "↻ Refresh" -> board refetch

</div>

:if board_loading
::: div .pulse-state .is-loading
<span class="pulse-spin"></span> Refreshing…
:::
:else if board_error
::: div .pulse-state .is-error
✕ Feed unreachable — { board_error }
:::
:endif

<div class="pulse-stats">

::: stat .is-ok
**Services tracked**

::: div .stat-value
{ totalServices }
:::

iad · sfo · fra · global
:::

::: stat .is-ok
**Snapshot**

::: div .stat-value
06:05
:::

Sampled UTC, this morning
:::

::: stat .is-warn
**Source**

::: div .stat-value
\:fetch
:::

Live JSON endpoint
:::

::: stat
**Framework JS**

::: div .stat-value
0 KB
:::

Until this page fetched
:::

</div>

<div class="svc-table">

<div class="svc-row svc-head">
  <span class="c-status">status</span>
  <span class="c-name">service</span>
  <span class="c-num">latency</span>
  <span class="c-num">uptime</span>
  <span class="c-region">region</span>
</div>

@loop board.services into s sort by s.latency desc
::: div .svc-row .svc-ok when s.status == "ok" .svc-warn when s.status == "warn" .svc-down when s.status == "down"
::: div .c-status
::: span .dot
:::
::: span .pill
{ s.status }
:::
:::
::: div .c-name
**{ s.name }**
:::
::: div .c-num .is-latency
{ s.latency }ms
:::
::: div .c-num
{ s.uptime }%
:::
::: div .c-region
{ s.region }
:::
:::
@empty
::: div .pulse-state .is-empty
○ No services in the feed.
:::
@endloop

</div>

<details class="source-reveal"><summary>Built with <code>:fetch</code> — view source</summary>

```wd
:fetch board from "/__wd/data/metrics.json"
:every 10s -> board refetch

:computed totalServices = board.services.length

:if board_loading
Refreshing…
:else if board_error
Feed unreachable — { board_error }
:endif

:button "↻ Refresh" -> board refetch

@loop board.services into s sort by s.latency desc
::: div .svc-row .svc-ok when s.status == "ok" .svc-warn when s.status == "warn" .svc-down when s.status == "down"
**{ s.name }** · { s.region }
{ s.latency }ms · { s.uptime }%
:::
@empty
No services in the feed.
@endloop
```

</details>

</main>

@include /footer.wd