---
title: "Pagerloop · INC-4821 Checkout API SEV1"
platform: android
slug: pagerloop-inc-4821-checkout-api-sev1
screens: []
domains: ["developer-tools"]
style: "material"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "badge", "chip", "card", "avatar", "toolbar", "text-field", "button"]
score: {clean: 100, consistent: 76, accessible: 84, comprehensible: 29}
url: https://gui.farm/android/pagerloop-inc-4821-checkout-api-sev1
raw: https://gui.farm/android/pagerloop-inc-4821-checkout-api-sev1/design.guix
download: https://gui.farm/android/pagerloop-inc-4821-checkout-api-sev1.gui
---

# Pagerloop · INC-4821 Checkout API SEV1

An on-call incident war-room for an active SEV1 outage, showing severity, live impact metrics, affected services, rollback progress, responders, and a timeline of updates.

- **Live preview:** https://gui.farm/android/pagerloop-inc-4821-checkout-api-sev1
- **Raw source:** https://gui.farm/android/pagerloop-inc-4821-checkout-api-sev1/design.guix
- **Download (.gui):** https://gui.farm/android/pagerloop-inc-4821-checkout-api-sev1.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Pagerloop · INC-4821 Checkout API SEV1">
  <tokens>
    <color name="surface" value="#141210" />
    <color name="surface-container" value="#201C18" />
    <color name="surface-container-high" value="#2A251F" />
    <color name="surface-container-highest" value="#332D26" />
    <color name="on-surface" value="#ECE3DA" />
    <color name="on-surface-variant" value="#C7B9AB" />
    <color name="outline" value="#8C7F70" />
    <color name="outline-variant" value="#40392F" />
    <color name="primary" value="#FFAD6B" />
    <color name="on-primary" value="#3A1A00" />
    <color name="primary-container" value="#6B3410" />
    <color name="on-primary-container" value="#FFD9BC" />
    <color name="sev-container" value="#5A1512" />
    <color name="on-sev" value="#FFB4A8" />
    <color name="dot-down" value="#FF6B5E" />
    <color name="dot-degraded" value="#FFAD6B" />
    <color name="dot-elevated" value="#FFC978" />
    <number name="r-lg" value="16" />
    <number name="r-md" value="12" />
    <number name="r-sm" value="8" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Headline" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="20" font-weight="500" line-height="26" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="15" font-weight="400" line-height="22" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style
      name="Overline"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="16"
      letter-spacing="1.2"
    />
    <text-style name="Mono" font-family="Roboto Mono" font-size="14" font-weight="500" line-height="20" />
    <text-style name="MonoLarge" font-family="Roboto Mono" font-size="30" font-weight="500" line-height="34" />
    <text-style name="MonoMed" font-family="Roboto Mono" font-size="18" font-weight="500" line-height="24" />
    <text-style name="MonoSmall" font-family="Roboto Mono" font-size="12" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$surface">
    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelMedium" value="9:41" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23ECE3DA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23ECE3DA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23ECE3DA" w="15" h="15" />
      </row>
    </row>
    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23ECE3DA" w="24" h="24" />
      </row>
      <col w="fill" gap="0">
        <text text-style="TitleLarge" value="INC-4821" fill="$on-surface" />
      </col>
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23ECE3DA" w="22" h="22" />
      </row>
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%23ECE3DA" w="24" h="24" />
      </row>
    </row>
    <!-- HERO : severity + title -->
    <col w="360" p="6 16 8 16" gap="10">
      <row w="328" gap="8" align="middle-left">
        <row role="badge" h="26" radius="$r-full" fill="$sev-container" p="0 10" gap="5" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/crisis-alert-rounded.svg?color=%23FFB4A8" w="15" h="15" />
          <text text-style="LabelMedium" value="SEV1" fill="$on-sev" />
        </row>
        <row role="chip" h="26" radius="$r-full" fill="$primary-container" p="0 10" gap="5" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/search-insights-rounded.svg?color=%23FFD9BC" w="15" h="15" />
          <text text-style="LabelMedium" value="Identified" fill="$on-primary-container" />
        </row>
        <row w="fill" gap="5" align="middle-right">
          <img src="https://api.iconify.design/material-symbols/timer-outline-rounded.svg?color=%23C7B9AB" w="15" h="15" />
          <text text-style="LabelMedium" value="Ongoing 41m" fill="$on-surface-variant" />
        </row>
      </row>
      <text text-style="Headline" value="Checkout API - elevated 5xx and latency" fill="$on-surface" w="328" />
      <text text-style="BodyMedium" value="Payments and checkout are failing for a subset of users. Fix identified, rollback in progress." fill="$on-surface-variant" w="320" />
      <row w="328" gap="6" align="middle-left" p="2 0 0 0">
        <img src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23C7B9AB" w="14" h="14" />
        <text text-style="LabelMedium" value="Started 14:37 PST" fill="$on-surface-variant" />
        <ellipse w="3" h="3" fill="$on-surface-variant" />
        <text text-style="LabelMedium" value="Updated 15:14" fill="$on-surface-variant" />
        <ellipse w="3" h="3" fill="$on-surface-variant" />
        <text text-style="LabelMedium" value="us-west-2" fill="$on-surface-variant" />
      </row>
    </col>
    <!-- LIFECYCLE STEPPER : 5 nodes + 4 connectors = 328 -->
    <col w="360" p="8 16 8 16" gap="12">
      <row w="328" gap="8" align="middle-left">
        <text text-style="Overline" value="INCIDENT LIFECYCLE" fill="$on-surface-variant" w="fill" />
        <text text-style="LabelSmall" value="Phase 3 of 5" fill="$primary" />
      </row>
      <row w="328" gap="0" align="top-left">
        <!-- 1 Detected : done -->
        <col w="44" gap="6" align="middle-center">
          <row w="24" h="24" radius="$r-full" fill="$primary-container" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFD9BC" w="16" h="16" />
          </row>
          <text text-style="LabelSmall" value="Detected" fill="$on-surface-variant" align="center" />
        </col>
        <col w="27" h="24" align="middle-center">
          <rect w="27" h="2" radius="1" fill="$primary" />
        </col>
        <!-- 2 Triaged : done -->
        <col w="44" gap="6" align="middle-center">
          <row w="24" h="24" radius="$r-full" fill="$primary-container" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFD9BC" w="16" h="16" />
          </row>
          <text text-style="LabelSmall" value="Triaged" fill="$on-surface-variant" align="center" />
        </col>
        <col w="27" h="24" align="middle-center">
          <rect w="27" h="2" radius="1" fill="$primary" />
        </col>
        <!-- 3 Identified : active -->
        <col w="44" gap="6" align="middle-center">
          <row w="24" h="24" radius="$r-full" fill="$primary" align="middle-center">
            <ellipse w="9" h="9" fill="$on-primary" />
          </row>
          <text text-style="LabelSmall" value="Identified" fill="$on-surface" align="center" />
        </col>
        <col w="27" h="24" align="middle-center">
          <rect w="27" h="2" radius="1" fill="$outline-variant" />
        </col>
        <!-- 4 Monitoring : upcoming -->
        <col w="44" gap="6" align="middle-center">
          <row w="24" h="24" radius="$r-full" fill="none" border="2 $outline-variant" align="middle-center">
            <text text-style="LabelSmall" value="4" fill="$on-surface-variant" />
          </row>
          <text text-style="LabelSmall" value="Monitor" fill="$on-surface-variant" align="center" />
        </col>
        <col w="27" h="24" align="middle-center">
          <rect w="27" h="2" radius="1" fill="$outline-variant" />
        </col>
        <!-- 5 Resolved : upcoming -->
        <col w="44" gap="6" align="middle-center">
          <row w="24" h="24" radius="$r-full" fill="none" border="2 $outline-variant" align="middle-center">
            <text text-style="LabelSmall" value="5" fill="$on-surface-variant" />
          </row>
          <text text-style="LabelSmall" value="Resolved" fill="$on-surface-variant" align="center" />
        </col>
      </row>
    </col>
    <!-- IMPACT : wide hero metric + two tiles -->
    <col w="360" p="6 16 6 16" gap="8">
      <text text-style="Overline" value="LIVE IMPACT" fill="$on-surface-variant" p="0 0 0 4" />
      <row role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 16" gap="12" align="middle-left">
        <col w="fill" gap="3">
          <text text-style="Overline" value="5XX ERROR RATE" fill="$on-surface-variant" />
          <text text-style="MonoLarge" value="8.4%" fill="$primary" />
          <row gap="5" align="middle-left" p="1 0 0 0">
            <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23FF6B5E" w="16" h="16" />
            <text text-style="LabelMedium" value="up from 0.5% baseline" fill="$on-surface-variant" />
          </row>
        </col>
        <line h="72" fill="$outline-variant" />
        <col w="122" gap="3" align="top-left">
          <text text-style="Overline" value="FAILING NOW" fill="$on-surface-variant" />
          <text text-style="MonoMed" value="1,940" fill="$on-surface" />
          <text text-style="LabelMedium" value="requests / min" fill="$on-surface-variant" />
        </col>
      </row>
      <row w="328" gap="12" align="top-left">
        <col role="card" w="158" radius="$r-md" fill="$surface-container" p="14 14" gap="3">
          <text text-style="Overline" value="P95 LATENCY" fill="$on-surface-variant" />
          <text text-style="MonoMed" value="2,310 ms" fill="$on-surface" />
          <row gap="5" align="middle-left" p="1 0 0 0">
            <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23FFC978" w="15" h="15" />
            <text text-style="LabelSmall" value="+1,180 ms" fill="$on-surface-variant" />
          </row>
        </col>
        <col role="card" w="158" radius="$r-md" fill="$surface-container" p="14 14" gap="3">
          <text text-style="Overline" value="USERS AFFECTED" fill="$on-surface-variant" />
          <text text-style="MonoMed" value="12,480" fill="$on-surface" />
          <text text-style="LabelSmall" value="~7% of active sessions" fill="$on-surface-variant" />
        </col>
      </row>
    </col>
    <!-- AFFECTED SERVICES : bars normalized to max 8.4% -> 120px -->
    <col w="360" p="6 16 6 16" gap="8">
      <text text-style="Overline" value="AFFECTED SERVICES" fill="$on-surface-variant" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="16">
        <!-- payments-api : down, 8.4% -> 120px -->
        <row w="300" gap="10" align="middle-left">
          <ellipse w="9" h="9" fill="$dot-down" />
          <col w="fill" gap="4">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="Mono" value="payments-api" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="Major outage" fill="$dot-down" />
            </row>
            <row w="fill" gap="10" align="middle-left">
              <rect w="120" h="6" radius="3" fill="$surface-container-highest" align="middle-left">
                <rect w="120" h="6" radius="3" fill="$dot-down" />
              </rect>
              <text text-style="MonoSmall" value="8.4%" fill="$on-surface-variant" w="fill" align="right" />
            </row>
          </col>
        </row>
        <!-- checkout-web : degraded, 5.1% -> 73px -->
        <row w="300" gap="10" align="middle-left">
          <ellipse w="9" h="9" fill="$dot-degraded" />
          <col w="fill" gap="4">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="Mono" value="checkout-web" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="Degraded" fill="$dot-degraded" />
            </row>
            <row w="fill" gap="10" align="middle-left">
              <rect w="120" h="6" radius="3" fill="$surface-container-highest" align="middle-left">
                <rect w="73" h="6" radius="3" fill="$dot-degraded" />
              </rect>
              <text text-style="MonoSmall" value="5.1%" fill="$on-surface-variant" w="fill" align="right" />
            </row>
          </col>
        </row>
        <!-- cart-service : elevated, 1.2% -> 17px -->
        <row w="300" gap="10" align="middle-left">
          <ellipse w="9" h="9" fill="$dot-elevated" />
          <col w="fill" gap="4">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="Mono" value="cart-service" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="Elevated" fill="$dot-elevated" />
            </row>
            <row w="fill" gap="10" align="middle-left">
              <rect w="120" h="6" radius="3" fill="$surface-container-highest" align="middle-left">
                <rect w="17" h="6" radius="3" fill="$dot-elevated" />
              </rect>
              <text text-style="MonoSmall" value="1.2%" fill="$on-surface-variant" w="fill" align="right" />
            </row>
          </col>
        </row>
      </col>
    </col>
    <!-- MITIGATION : rollback progress, 63% of 300 = 189px -->
    <col w="360" p="6 16 6 16" gap="8">
      <text text-style="Overline" value="MITIGATION" fill="$on-surface-variant" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="12">
        <row w="300" gap="10" align="middle-left">
          <row w="36" h="36" radius="$r-full" fill="$primary-container" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/undo-rounded.svg?color=%23FFD9BC" w="20" h="20" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Rolling back checkout-svc" fill="$on-surface" />
            <row gap="6" align="middle-left">
              <text text-style="MonoSmall" value="v2.8.1" fill="$on-surface-variant" />
              <img src="https://api.iconify.design/material-symbols/arrow-right-alt-rounded.svg?color=%23FFAD6B" w="16" h="16" />
              <text text-style="MonoSmall" value="v2.8.0" fill="$primary" />
            </row>
          </col>
        </row>
        <col w="300" gap="6">
          <rect w="300" h="8" radius="4" fill="$surface-container-highest" align="middle-left">
            <rect w="189" h="8" radius="4" fill="$primary" />
          </rect>
          <row w="300" gap="8" align="middle-left">
            <text text-style="LabelMedium" value="63% complete" fill="$on-surface" w="fill" />
            <text text-style="LabelMedium" value="12 of 19 clusters" fill="$on-surface-variant" />
          </row>
        </col>
      </col>
    </col>
    <!-- RESPONDERS -->
    <col w="360" p="6 16 6 16" gap="8">
      <text text-style="Overline" value="RESPONDERS · 4" fill="$on-surface-variant" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="14 14" gap="14">
        <row w="300" gap="12" align="middle-left">
          <frame role="avatar" w="48" h="48" radius="24" clip="true">
            <img x="0" y="0" w="48" h="48" fit="cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" />
          </frame>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Priya Nair" fill="$on-surface" />
            <text text-style="BodyMedium" value="Staff SRE" fill="$on-surface-variant" />
          </col>
          <row role="chip" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
            <text text-style="LabelMedium" value="Commander" fill="$on-primary-container" />
          </row>
        </row>
        <line w="300" fill="$outline-variant" />
        <row w="300" gap="12" align="middle-left">
          <row gap="0" align="middle-left">
            <frame role="avatar" w="34" h="34" radius="17" clip="true" border="2 $surface-container">
              <img x="0" y="0" w="34" h="34" fit="cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" />
            </frame>
            <frame role="avatar" w="34" h="34" radius="17" clip="true" p="0 0 0 -10" border="2 $surface-container">
              <img x="0" y="0" w="34" h="34" fit="cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" />
            </frame>
            <frame role="avatar" w="34" h="34" radius="17" clip="true" p="0 0 0 -10" border="2 $surface-container">
              <img x="0" y="0" w="34" h="34" fit="cover" src="https://images.unsplash.com/photo-1705645930353-0e335311ef20?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" />
            </frame>
          </row>
          <col w="fill" gap="2">
            <text text-style="LabelLarge" value="Marcus Feldt, Dana Osei, Sam Ito" fill="$on-surface" />
            <text text-style="BodyMedium" value="Backend on-call · Comms · Payments" fill="$on-surface-variant" />
          </col>
        </row>
      </col>
    </col>
    <!-- TIMELINE -->
    <col w="360" p="6 16 6 16" gap="10">
      <text text-style="Overline" value="TIMELINE" fill="$on-surface-variant" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="18">
        <!-- 15:14 newest -->
        <row w="300" gap="12" align="top-left">
          <row w="30" h="30" radius="$r-full" fill="$primary-container" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/trending-down-rounded.svg?color=%23FFD9BC" w="18" h="18" />
          </row>
          <col w="fill" gap="3">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="LabelLarge" value="Priya Nair" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="15:14" fill="$on-surface-variant" />
            </row>
            <text text-style="BodyMedium" value="Rollback at 63%, 5xx down to 3.1% and falling." fill="$on-surface-variant" />
          </col>
        </row>
        <!-- 15:06 -->
        <row w="300" gap="12" align="top-left">
          <row w="30" h="30" radius="$r-full" fill="$surface-container-highest" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/undo-rounded.svg?color=%23C7B9AB" w="18" h="18" />
          </row>
          <col w="fill" gap="3">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="LabelLarge" value="Deploy bot" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="15:06" fill="$on-surface-variant" />
            </row>
            <text text-style="BodyMedium" value="Started rollback of checkout-svc v2.8.1 to v2.8.0 across 3 clusters." fill="$on-surface-variant" />
          </col>
        </row>
        <!-- 14:58 status change -->
        <row w="300" gap="12" align="top-left">
          <row w="30" h="30" radius="$r-full" fill="$surface-container-highest" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/bug-report-outline-rounded.svg?color=%23C7B9AB" w="18" h="18" />
          </row>
          <col w="fill" gap="5">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="LabelLarge" value="Marcus Feldt" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="14:58" fill="$on-surface-variant" />
            </row>
            <row role="badge" h="24" radius="$r-sm" fill="$surface-container-highest" p="0 8" gap="6" align="middle-center">
              <text text-style="LabelSmall" value="Investigating" fill="$on-surface-variant" />
              <img src="https://api.iconify.design/material-symbols/arrow-right-alt-rounded.svg?color=%23FFAD6B" w="15" h="15" />
              <text text-style="LabelSmall" value="Identified" fill="$primary" />
            </row>
            <text text-style="BodyMedium" value="Root cause: DB connection pool exhausted by a config change in v2.8.1." fill="$on-surface-variant" />
          </col>
        </row>
        <!-- 14:41 status change -->
        <row w="300" gap="12" align="top-left">
          <row w="30" h="30" radius="$r-full" fill="$surface-container-highest" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/campaign-outline-rounded.svg?color=%23C7B9AB" w="18" h="18" />
          </row>
          <col w="fill" gap="5">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="LabelLarge" value="Priya Nair" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="14:41" fill="$on-surface-variant" />
            </row>
            <row role="badge" h="24" radius="$r-sm" fill="$surface-container-highest" p="0 8" gap="6" align="middle-center">
              <text text-style="LabelSmall" value="Detected" fill="$on-surface-variant" />
              <img src="https://api.iconify.design/material-symbols/arrow-right-alt-rounded.svg?color=%23FFAD6B" w="15" h="15" />
              <text text-style="LabelSmall" value="Investigating" fill="$primary" />
            </row>
            <text text-style="BodyMedium" value="Declared SEV1 and paged the payments on-call rotation." fill="$on-surface-variant" />
          </col>
        </row>
        <!-- 14:37 auto -->
        <row w="300" gap="12" align="top-left">
          <row w="30" h="30" radius="$r-full" fill="$surface-container-highest" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/monitor-heart-outline-rounded.svg?color=%23C7B9AB" w="18" h="18" />
          </row>
          <col w="fill" gap="3">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="LabelLarge" value="Datadog Monitor" fill="$on-surface" w="fill" />
              <text text-style="LabelMedium" value="14:37" fill="$on-surface-variant" />
            </row>
            <text text-style="BodyMedium" value="5xx on checkout-api crossed the 5% threshold. Auto-alert fired." fill="$on-surface-variant" />
          </col>
        </row>
      </col>
    </col>
    <!-- COMPOSER : fixed bottom bar, last flow child -->
    <row role="toolbar" w="fill" h="76" fill="$surface-container" p="14 12 20 16" gap="10" align="top-left">
      <row role="text-field" w="fill" h="48" radius="$r-full" fill="$surface-container-high" p="0 18" gap="8" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/edit-note-rounded.svg?color=%23C7B9AB" w="20" h="20" />
        <text text-style="BodyLarge" value="Post an update..." fill="$on-surface-variant" />
      </row>
      <row role="button" w="48" h="48" radius="$r-full" fill="$primary" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/send-rounded.svg?color=%233A1A00" w="22" h="22" />
      </row>
    </row>
  </col>
</gui>
```