Skip to content

InspectorIllustration

One call traced left to right: request, server, raw result, compacted, agent. The packet swells at the raw result and shrinks when compacted.

IllustrationsServer-rendered

Examples

Animated

5 s loop: the packet rides the timeline, each stop lights as it passes.

Light
A call trace: get_forecast goes to my-server@local, its 1,840-token raw result is compacted to 912 tokens, and the answer reaches the agent in 41 ms.
Dark
A call trace: get_forecast goes to my-server@local, its 1,840-token raw result is compacted to 912 tokens, and the answer reaches the agent in 41 ms.
Example
<InspectorIllustration tool="get_forecast" server="my-server@local" raw={1840} compacted={912} ms={41} />

Static frame

What prefers-reduced-motion visitors see, forced here with `still`.

Light
A call trace: get_forecast goes to my-server@local, its 1,840-token raw result is compacted to 912 tokens, and the answer reaches the agent in 41 ms.
Dark
A call trace: get_forecast goes to my-server@local, its 1,840-token raw result is compacted to 912 tokens, and the answer reaches the agent in 41 ms.
Example
<InspectorIllustration tool="get_forecast" server="my-server@local" raw={1840} compacted={912} ms={41} still />

Usage

Usage
import { InspectorIllustration } from '@switchboard/ui'

<InspectorIllustration tool?="…" server?="…" raw?={n} compacted?={n} ms?={n} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

InspectorIllustration

InspectorIllustration props
PropTypeDefaultDescription
toolstring"get_forecast"Tool called.
serverstring"my-server@local"Upstream and target, as sb calls shows it.
rawnumber1840Tokens in the raw result.
compactednumber912Tokens after compaction; sets the packet’s final width.
msnumber41Call duration, on the ruler and the last stop.
labelstringa sentence describing the ideaAccessible name (aria-label and <title>).
stillbooleanfalseShow the static frame without motion, as under prefers-reduced-motion.

Also accepts every <svg> attribute. Scales to its container (320–640px wide).

Accessibility

  • One role="img" <svg> named by aria-label (and a matching <title>); every drawn part is aria-hidden.
  • prefers-reduced-motion: reduce turns the animation off and leaves a static frame that still tells the story.
  • Monochrome ink on surface (both flip with the theme); the accent appears only on a lit lamp, never as the only carrier of meaning.
  • CSS animations only, loops of 6 s or less, no JavaScript and no timers.

Guidance

Do

  • Use numbers from a real sb calls line.

Don’t

  • Do not put text the reader needs only inside the drawing; say it in the page copy too.
  • Do not crowd more than one moving illustration into a single viewport.