StateDeltaInspector
AG-UI shared-state inspector: renders a StateSnapshot as a collapsible tree with RFC 6902 JSON Patch ops (StateDelta) highlighted in place — temporal tint on patched values, agency accent on agent-written path labels, strikethrough ghost rows for removes. Optional before/after snapshot toggle and prev/next history stepper. Malformed patch entries render as warning rows, never crashes.
import { StateDeltaInspector } from "@nodus/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
statereq | Record<string, unknown> | — | The shared state object (AG-UI StateSnapshot). |
patchesreq | Array<{ op: 'add' | 'replace' | 'remove'; path: string; value?: unknown }> | — | RFC 6902 JSON Patch operations (AG-UI StateDelta), in arrival order. Malformed entries degrade to warning rows. |
snapshotToggle | boolean | false | Show a BEFORE / AFTER toggle to view the state with or without patches applied. |
historyScrub | boolean | false | Show a PREV / NEXT stepper scrubbing through the patch history (index into the patches array). |
staterequiredRecord<string, unknown>Default —The shared state object (AG-UI StateSnapshot).
patchesrequiredArray<{ op: 'add' | 'replace' | 'remove'; path: string; value?: unknown }>Default —RFC 6902 JSON Patch operations (AG-UI StateDelta), in arrival order. Malformed entries degrade to warning rows.
snapshotTogglebooleanDefault falseShow a BEFORE / AFTER toggle to view the state with or without patches applied.
historyScrubbooleanDefault falseShow a PREV / NEXT stepper scrubbing through the patch history (index into the patches array).
This component was designed to express:
Explore Related
Side-by-side or inline diff of iteration changes
Key-value list for structured data display
Vertical rail rendering one AG-UI run as lifecycle phases: RunStarted, StepStarted/StepFinished segments, and a terminal cap (finished/interrupt/error). Supports one level of nested child runs (parentRunId concept). Composes the AgentTimeline track language with TaskStateBadge-consistent colors.
Token budget visualization showing context utilization