> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Server Dashboard

> Live-updating metrics with sparklines, status badges, and auto-refresh.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

A simulated server dashboard that auto-refreshes every 400ms. The context window fills up, metrics tick, and the progress bar changes color as utilization climbs. Everything is driven by a single `SetInterval` and reactive expressions.

<ComponentPreview json={{"view":{"cssClass":"pf-app-root max-w-md p-0","onMount":{"action":"setInterval","duration":400,"onTick":{"action":"setState","key":"tick","value":"{{ tick + 1 }}"}},"type":"Div","children":[{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-4 grid-cols-2","type":"Grid","children":[{"cssClass":"gap-0 pb-0 overflow-hidden","type":"Card","children":[{"type":"CardContent","children":[{"type":"Metric","label":"CPU Usage","value":"{{ tick % 20 * 4 + 15 }}%"}]},{"cssClass":"h-10","type":"Sparkline","data":[35,42,38,55,48,62,58,70,65,45],"variant":"info","fill":true,"curve":"linear","strokeWidth":1.5}]},{"cssClass":"gap-0 pb-0 overflow-hidden","type":"Card","children":[{"type":"CardContent","children":[{"type":"Metric","label":"Memory","value":"{{ tick % 30 * 2 + 40 }}%"}]},{"cssClass":"h-10","type":"Sparkline","data":[60,62,58,65,63,68,64,70,66,62],"variant":"success","fill":true,"curve":"linear","strokeWidth":1.5}]}]},{"type":"Card","children":[{"type":"CardHeader","children":[{"cssClass":"items-center justify-between","type":"Row","children":[{"type":"CardTitle","content":"System Health"},{"type":"Badge","label":"{{ tick % 20 * 4 + 15 > 80 ? 'destructive' : (tick % 20 * 4 + 15 > 50 ? 'warning' : 'success') }}","variant":"{{ tick % 20 * 4 + 15 > 80 ? 'destructive' : (tick % 20 * 4 + 15 > 50 ? 'warning' : 'success') }}"}]}]},{"type":"CardContent","children":[{"cssClass":"gap-4","type":"Column","children":[{"cssClass":"gap-4 items-center justify-between","type":"Row","children":[{"content":"CPU: {{ tick % 20 * 4 + 15 }}%","type":"Text"},{"content":"Memory: {{ tick % 30 * 2 + 40 }}%","type":"Muted"}]},{"type":"Progress","value":"{{ tick % 20 * 4 + 15 }}","max":100.0,"variant":"{{ tick % 20 * 4 + 15 > 80 ? 'destructive' : (tick % 20 * 4 + 15 > 50 ? 'warning' : 'success') }}","size":"default"},{"type":"Separator","orientation":"horizontal"},{"cssClass":"gap-6","type":"Row","children":[{"type":"Metric","label":"Uptime","value":"99.9{{ tick % 10 }}%"},{"type":"Metric","label":"Requests/s","value":"{{ 12000 + tick % 50 * 30 | number }}"},{"type":"Metric","label":"p99 Latency","value":"{{ 120 + tick % 30 }}ms"}]}]}]}]}]}]},"state":{"tick":0}}} playground="ZnJvbSBwcmVmYWJfdWkgaW1wb3J0IFByZWZhYkFwcApmcm9tIHByZWZhYl91aS5hY3Rpb25zIGltcG9ydCBTZXRJbnRlcnZhbCwgU2V0U3RhdGUKZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQmFkZ2UsIENhcmQsIENhcmRDb250ZW50LCBDYXJkSGVhZGVyLCBDYXJkVGl0bGUsCiAgICBDb2x1bW4sIEdyaWQsIE1ldHJpYywgTXV0ZWQsIFByb2dyZXNzLCBSb3csIFNlcGFyYXRvciwgVGV4dCwKKQpmcm9tIHByZWZhYl91aS5jb21wb25lbnRzLmNoYXJ0cyBpbXBvcnQgU3BhcmtsaW5lCmZyb20gcHJlZmFiX3VpLnJ4IGltcG9ydCBSeAoKdGljayA9IFJ4KCJ0aWNrIikKY3B1ID0gdGljayAlIDIwICogNCArIDE1Cm1lbSA9IHRpY2sgJSAzMCAqIDIgKyA0MApjcHVfdmFyaWFudCA9IChjcHUgPiA4MCkudGhlbigiZGVzdHJ1Y3RpdmUiLCAoY3B1ID4gNTApLnRoZW4oIndhcm5pbmciLCAic3VjY2VzcyIpKQoKIyBMaXZlLXRpY2tpbmcgZm9vdGVyIHN0YXRzCnJlcXVlc3RzID0gMTIwMDAgKyB0aWNrICUgNTAgKiAzMApsYXRlbmN5ID0gMTIwICsgdGljayAlIDMwCgp3aXRoIFByZWZhYkFwcCgKICAgIHN0YXRlPXsidGljayI6IDB9LAogICAgb25fbW91bnQ9U2V0SW50ZXJ2YWwoNDAwLCBvbl90aWNrPVNldFN0YXRlKCJ0aWNrIiwgdGljayArIDEpKSwKICAgIGNzc19jbGFzcz0ibWF4LXctbWQgcC0wIiwKKToKICAgIHdpdGggQ29sdW1uKGdhcD00KToKICAgICAgICB3aXRoIEdyaWQoY29sdW1ucz0yLCBnYXA9NCk6CiAgICAgICAgICAgIHdpdGggQ2FyZChjc3NfY2xhc3M9ImdhcC0wIHBiLTAgb3ZlcmZsb3ctaGlkZGVuIik6CiAgICAgICAgICAgICAgICB3aXRoIENhcmRDb250ZW50KCk6CiAgICAgICAgICAgICAgICAgICAgTWV0cmljKGxhYmVsPSJDUFUgVXNhZ2UiLCB2YWx1ZT1mIntjcHV9JSIpCiAgICAgICAgICAgICAgICBTcGFya2xpbmUoCiAgICAgICAgICAgICAgICAgICAgZGF0YT1bMzUsIDQyLCAzOCwgNTUsIDQ4LCA2MiwgNTgsIDcwLCA2NSwgNDVdLAogICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9ImluZm8iLCBmaWxsPVRydWUsIGNzc19jbGFzcz0iaC0xMCIsCiAgICAgICAgICAgICAgICApCiAgICAgICAgICAgIHdpdGggQ2FyZChjc3NfY2xhc3M9ImdhcC0wIHBiLTAgb3ZlcmZsb3ctaGlkZGVuIik6CiAgICAgICAgICAgICAgICB3aXRoIENhcmRDb250ZW50KCk6CiAgICAgICAgICAgICAgICAgICAgTWV0cmljKGxhYmVsPSJNZW1vcnkiLCB2YWx1ZT1mInttZW19JSIpCiAgICAgICAgICAgICAgICBTcGFya2xpbmUoCiAgICAgICAgICAgICAgICAgICAgZGF0YT1bNjAsIDYyLCA1OCwgNjUsIDYzLCA2OCwgNjQsIDcwLCA2NiwgNjJdLAogICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9InN1Y2Nlc3MiLCBmaWxsPVRydWUsIGNzc19jbGFzcz0iaC0xMCIsCiAgICAgICAgICAgICAgICApCgogICAgICAgIHdpdGggQ2FyZCgpOgogICAgICAgICAgICB3aXRoIENhcmRIZWFkZXIoKToKICAgICAgICAgICAgICAgIHdpdGggUm93KGFsaWduPSJjZW50ZXIiLCBjc3NfY2xhc3M9Imp1c3RpZnktYmV0d2VlbiIpOgogICAgICAgICAgICAgICAgICAgIENhcmRUaXRsZSgiU3lzdGVtIEhlYWx0aCIpCiAgICAgICAgICAgICAgICAgICAgQmFkZ2UoY3B1X3ZhcmlhbnQsIHZhcmlhbnQ9Y3B1X3ZhcmlhbnQpCiAgICAgICAgICAgIHdpdGggQ2FyZENvbnRlbnQoKToKICAgICAgICAgICAgICAgIHdpdGggQ29sdW1uKGdhcD00KToKICAgICAgICAgICAgICAgICAgICB3aXRoIFJvdyhnYXA9NCwgYWxpZ249ImNlbnRlciIsIGNzc19jbGFzcz0ianVzdGlmeS1iZXR3ZWVuIik6CiAgICAgICAgICAgICAgICAgICAgICAgIFRleHQoZiJDUFU6IHtjcHV9JSIpCiAgICAgICAgICAgICAgICAgICAgICAgIE11dGVkKGYiTWVtb3J5OiB7bWVtfSUiKQogICAgICAgICAgICAgICAgICAgIFByb2dyZXNzKHZhbHVlPWNwdSwgbWF4PTEwMCwgdmFyaWFudD1jcHVfdmFyaWFudCkKICAgICAgICAgICAgICAgICAgICBTZXBhcmF0b3IoKQogICAgICAgICAgICAgICAgICAgIHdpdGggUm93KGdhcD02KToKICAgICAgICAgICAgICAgICAgICAgICAgTWV0cmljKGxhYmVsPSJVcHRpbWUiLCB2YWx1ZT1mIjk5Ljl7dGljayAlIDEwfSUiKQogICAgICAgICAgICAgICAgICAgICAgICBNZXRyaWMobGFiZWw9IlJlcXVlc3RzL3MiLCB2YWx1ZT1yZXF1ZXN0cy5udW1iZXIoKSkKICAgICAgICAgICAgICAgICAgICAgICAgTWV0cmljKGxhYmVsPSJwOTkgTGF0ZW5jeSIsIHZhbHVlPWYie2xhdGVuY3l9bXMiKQo">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui import PrefabApp
    from prefab_ui.actions import SetInterval, SetState
    from prefab_ui.components import (
        Badge, Card, CardContent, CardHeader, CardTitle,
        Column, Grid, Metric, Muted, Progress, Row, Separator, Text,
    )
    from prefab_ui.components.charts import Sparkline
    from prefab_ui.rx import Rx

    tick = Rx("tick")
    cpu = tick % 20 * 4 + 15
    mem = tick % 30 * 2 + 40
    cpu_variant = (cpu > 80).then("destructive", (cpu > 50).then("warning", "success"))

    # Live-ticking footer stats
    requests = 12000 + tick % 50 * 30
    latency = 120 + tick % 30

    with PrefabApp(
        state={"tick": 0},
        on_mount=SetInterval(400, on_tick=SetState("tick", tick + 1)),
        css_class="max-w-md p-0",
    ):
        with Column(gap=4):
            with Grid(columns=2, gap=4):
                with Card(css_class="gap-0 pb-0 overflow-hidden"):
                    with CardContent():
                        Metric(label="CPU Usage", value=f"{cpu}%")
                    Sparkline(
                        data=[35, 42, 38, 55, 48, 62, 58, 70, 65, 45],
                        variant="info", fill=True, css_class="h-10",
                    )
                with Card(css_class="gap-0 pb-0 overflow-hidden"):
                    with CardContent():
                        Metric(label="Memory", value=f"{mem}%")
                    Sparkline(
                        data=[60, 62, 58, 65, 63, 68, 64, 70, 66, 62],
                        variant="success", fill=True, css_class="h-10",
                    )

            with Card():
                with CardHeader():
                    with Row(align="center", css_class="justify-between"):
                        CardTitle("System Health")
                        Badge(cpu_variant, variant=cpu_variant)
                with CardContent():
                    with Column(gap=4):
                        with Row(gap=4, align="center", css_class="justify-between"):
                            Text(f"CPU: {cpu}%")
                            Muted(f"Memory: {mem}%")
                        Progress(value=cpu, max=100, variant=cpu_variant)
                        Separator()
                        with Row(gap=6):
                            Metric(label="Uptime", value=f"99.9{tick % 10}%")
                            Metric(label="Requests/s", value=requests.number())
                            Metric(label="p99 Latency", value=f"{latency}ms")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "pf-app-root max-w-md p-0",
        "onMount": {
          "action": "setInterval",
          "duration": 400,
          "onTick": {"action": "setState", "key": "tick", "value": "{{ tick + 1 }}"}
        },
        "type": "Div",
        "children": [
          {
            "cssClass": "gap-4",
            "type": "Column",
            "children": [
              {
                "cssClass": "gap-4 grid-cols-2",
                "type": "Grid",
                "children": [
                  {
                    "cssClass": "gap-0 pb-0 overflow-hidden",
                    "type": "Card",
                    "children": [
                      {
                        "type": "CardContent",
                        "children": [{"type": "Metric", "label": "CPU Usage", "value": "{{ tick % 20 * 4 + 15 }}%"}]
                      },
                      {
                        "cssClass": "h-10",
                        "type": "Sparkline",
                        "data": [35, 42, 38, 55, 48, 62, 58, 70, 65, 45],
                        "variant": "info",
                        "fill": true,
                        "curve": "linear",
                        "strokeWidth": 1.5
                      }
                    ]
                  },
                  {
                    "cssClass": "gap-0 pb-0 overflow-hidden",
                    "type": "Card",
                    "children": [
                      {
                        "type": "CardContent",
                        "children": [{"type": "Metric", "label": "Memory", "value": "{{ tick % 30 * 2 + 40 }}%"}]
                      },
                      {
                        "cssClass": "h-10",
                        "type": "Sparkline",
                        "data": [60, 62, 58, 65, 63, 68, 64, 70, 66, 62],
                        "variant": "success",
                        "fill": true,
                        "curve": "linear",
                        "strokeWidth": 1.5
                      }
                    ]
                  }
                ]
              },
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [
                      {
                        "cssClass": "items-center justify-between",
                        "type": "Row",
                        "children": [
                          {"type": "CardTitle", "content": "System Health"},
                          {
                            "type": "Badge",
                            "label": "{{ tick % 20 * 4 + 15 > 80 ? 'destructive' : (tick % 20 * 4 + 15 > 50 ? 'warning' : 'success') }}",
                            "variant": "{{ tick % 20 * 4 + 15 > 80 ? 'destructive' : (tick % 20 * 4 + 15 > 50 ? 'warning' : 'success') }}"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "cssClass": "gap-4",
                        "type": "Column",
                        "children": [
                          {
                            "cssClass": "gap-4 items-center justify-between",
                            "type": "Row",
                            "children": [
                              {"content": "CPU: {{ tick % 20 * 4 + 15 }}%", "type": "Text"},
                              {"content": "Memory: {{ tick % 30 * 2 + 40 }}%", "type": "Muted"}
                            ]
                          },
                          {
                            "type": "Progress",
                            "value": "{{ tick % 20 * 4 + 15 }}",
                            "max": 100.0,
                            "variant": "{{ tick % 20 * 4 + 15 > 80 ? 'destructive' : (tick % 20 * 4 + 15 > 50 ? 'warning' : 'success') }}",
                            "size": "default"
                          },
                          {"type": "Separator", "orientation": "horizontal"},
                          {
                            "cssClass": "gap-6",
                            "type": "Row",
                            "children": [
                              {"type": "Metric", "label": "Uptime", "value": "99.9{{ tick % 10 }}%"},
                              {
                                "type": "Metric",
                                "label": "Requests/s",
                                "value": "{{ 12000 + tick % 50 * 30 | number }}"
                              },
                              {"type": "Metric", "label": "p99 Latency", "value": "{{ 120 + tick % 30 }}ms"}
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      "state": {"tick": 0}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## How It Works

The whole dashboard runs off a single integer in [state](/concepts/state): `tick`, which starts at `0`. The [PrefabApp](/reference/app) declares `on_mount=SetInterval(400, on_tick=SetState("tick", tick + 1))`, so once the view mounts, a timer fires every 400 milliseconds and writes `tick + 1` back into state. Nothing else changes — every animated number on the screen is a [reactive expression](/concepts/expressions) derived from that one counter.

Those derivations are built in Python using [`Rx`](/concepts/expressions). `tick = Rx("tick")` is a handle to the state key, and ordinary arithmetic on it produces an expression rather than a value: `cpu = tick % 20 * 4 + 15` compiles to the string `{{ tick % 20 * 4 + 15 }}` that the renderer evaluates on every frame. Because `tick` climbs forever, the modulo keeps `cpu` cycling through a bounded range, which is what makes the metrics oscillate instead of running off the chart. `mem`, `requests`, and `latency` are the same trick with different constants.

The color changes come from `cpu_variant = (cpu > 80).then("destructive", (cpu > 50).then("warning", "success"))`. The `.then()` method builds a nested ternary — green below 50, amber below 80, red above — and the result feeds three separate props at once: the [Badge](/components/badge) variant, the [Progress](/components/progress) bar variant, and (implicitly) the badge label. They stay in lockstep because they read the same expression, so the badge and the bar can never disagree about system health.

Notice what is *not* here: no callback, no re-render loop, no server. `SetInterval` and `SetState` are client-side [actions](/concepts/actions) the renderer runs on its own. The Python script executes once to emit the component tree and its embedded expressions; from then on the browser owns the clock. The [Sparkline](/components/sparkline) data is static — the live feel comes entirely from the expressions reacting to `tick`.