LLM Settings tab · one short design decision · rendered at native width (260pt sidebar), SF font, system colours.
The status indicator next to each provider is a 10 pt coloured dot. After this branch it carries three colour meanings on two hues: green = online, amber = unavailable (429/offline/5xx) and amber = out of credit (402), red = invalid. The two ambers are different states sharing one dot; green-vs-amber is the whole “is it ready” signal carried by hue alone. That’s the question.
HIG: “differentiate without colour — add shape or glyph.” Green/amber and a deuteranope can’t tell the dots apart. Pair each coloured indicator with a shape, not just hue.
Glyph only the exceptions (the ambers + red); leave .online a plain dot. The normal case stays silent.
“Absence is information — no glyph for the normal case.” gruber’s fuller set puts a checkmark on .online too. That’s the line to draw. The settling indicator (G) is the same vocabulary.
| State | Dot | When | Label | Activatable? |
|---|---|---|---|---|
.online | 2xx — key valid & reachable | Online · Last verified 2 minutes ago | yes | |
.outOfCredit | 402 — authenticated, no credit | Out of credit | yes (top up & run) | |
.unavailable | 429 / 5xx / offline (transient) | Unavailable | yes | |
.invalid | 401 / 403 — key rejected | Invalid key | no | |
.notSetUp | no key in Keychain | Not set up | no | |
.checking | first validation in flight | Checking… | no |
Two ambers, one hue. In the table you read them apart by the label — but the column-scan signal is the dot, and that’s where colour-only fails.
.online. Most a11y-redundant — but the checkmark on the normal case is exactly what “absence is information” argues against.Left: normal vision. Middle: greyscale (luminance only). Right: deuteranopia (red-green, ~6% of men). Watch A’s green/amber/amber/red collapse; B keeps every state distinct by shape.
During the eager board’s silent background reconfirm, a row keeps showing its cached value. Should a reconfirming row look different from a settled one? If yes, that’s another glyph in the same family. Here Claude is mid-reconfirm (faint pulsing ring behind the cached green dot) — gates nothing, just “the app is checking.”
Three questions, in order:
.online too? (C) — a checkmark on the normal case. This is the one that collides with “absence is information — no glyph for the normal case.” B leaves it a plain green dot; C marks it.Glyphs shown are stand-ins (HTML can’t use SF Symbols). In the app: exclamationmark.triangle.fill (unavailable), creditcard.trianglebadge.exclamationmark or dollarsign.circle.fill (out of credit), xmark.octagon.fill (invalid), checkmark.circle.fill (online, if C). Provider icons are letter placeholders — real app uses the monochrome brand logos.