Meter macrolite

A usage track: a bar of coloured segments against a maximum, with a caption and a value.

Built from: Box Text
Children: none

Preview

Loading the renderer…

segmentsrequired

max

label

value

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Meter",
          "segments": [
            {
              "value": 40,
              "tone": "primary"
            },
            {
              "value": 25,
              "tone": "warning"
            }
          ],
          "max": 100,
          "label": "Storage",
          "value": "650 MB of 1 GB"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Meter rendered by the React renderer on Web — **Web** React

Meter rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Meter rendered by the Compose renderer on Android — **Android** Compose

Meter rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-meter, painted by each native renderer.

Props

Prop	Type	Default	Description
`segments`required	`[segment]`	–	The slices in order.
`max`	`number`	`100`	The full amount.
`label`	`string`	–	A caption before the track.
`value`	`string`	–	A formatted value after the track.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: meter
Semantics: meter (value of max, labelled by its label)

Not focusable; no keys.

Theming

Recipe parts: Meter/rootMeter/headerMeter/labelMeter/valueMeter/trackMeter/segment
Keyed by: tone:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Meter

The ONE bar every usage surface draws — the rate-limit windows, the run's context, the mini line.

A capsule track in the strong stroke with a capsule fill, and exactly three tones: foreground at 30% normally, the yellow semantic from 75%, the destructive from 95%. The height is the caller's (6px full, 4px mini); the tone is the only decision. Before EXP-909 there were two bars two rows apart — a bare Progress with the primary fill, and a hand-rolled span with its own tone map — reading the same percent in different colours.

Webok

Meterpackages/ui/src/meter.tsx

iOSok

AgentUsageTrackapps/ios/ExpUI/Sources/UsageTrack.swift

Androidok

UsageTrackapps/android/app/src/main/java/com/exponential/app/ui/components/UsageTrack.kt

Desktopok

usage_bar::meterapps/desktop/crates/ui/src/usage_bar.rs

Segmented bar

EXP-1051: the context window's breakdown — the Meter's track, filled left to right by one slice per layer the run's context_layout named (base, tools, playbook, team prompt, project, task) and the derived conversation, in the contract's tones, clipped at 100% and never rescaled; free space is the bare track.

Three hairline ticks mark the compaction floor (50%) and the two usage thresholds (75%, 95%). The legend swatch beside each row reuses the slice's tone, so a square and its slice cannot disagree.

Webok

SegmentedBarpackages/ui/src/segmented-bar.tsx

iOSok

SegmentedTrackapps/ios/ExpUI/Sources/SegmentedTrack.swift

Androidok

SegmentedTrackapps/android/app/src/main/java/com/exponential/app/ui/components/SegmentedTrack.kt

Desktopok

render_context_windowapps/desktop/crates/ui/src/usage_sheet.rs