KQ-2098 · REQUEST/ANATOMY

Request Anatomy

A log of one agent run's model requests where opening a request unfolds its anatomy: the row's height opens on springs.glide, a long bar arrives closed with every part touching, then its system, context, history, input, output and cached parts slide apart on glide while their captions rise in cascade order with tokens and price, and a bracket sweeps across the slowest stretch of the latency beneath. A Tokens / Cost switch re-proportions the same parts on glide, and a pinned request rides along as a ghost bar at the same scale with per-part differences. The log is a grid where Up and Down move, Enter opens, C pins for comparison and Escape closes; truncated, errored and redacted requests are drawn as such, and in a narrow container the bar stands vertically beside its captions.

KQ-2098 · REQUEST/ANATOMY

Fernworks agent · run 7f3a

9 requests · 76.6k tokens · $0.164 · 11.3 s

#Step

01PlanModel 3 · 3.1k · $0.014 · 1.1 s

02Search help centreLite · 5.5k · $0.001 · 370 ms

03Fetch order 4471Model 3 · 8.2k · $0.016 · 1.5 s

04Draft replyModel 3 · 15.7k · $0.032 · 1.2 s

05Draft replyModel 3 · 16.9k · $0.049 · 3.3 s

06Look up customerLite · 3.7k · <$0.001 · 360 ms

07Summarise threadModel 3 · 17.8k · $0.050 · 2.5 s

08Check toneLite · 3.8k · <$0.001 · 230 ms

09Tag and closeLite · 2.1k · <$0.001 · 140 ms

no request open · pinned none

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/request-anatomy

Props

requests: AnatomyRequest[]; default defaultAnatomyRequests; The run's requests in order: { id, step, model, at, tokens (per part), phases ({ name, ms }[]), status?: ok | truncated | errored | redacted, error?, dropped?, preview? }.
prices: Record<string, AnatomyPrice>; default defaultAnatomyPrices; Dollars per million tokens per model name: { input, output, cached }. System, context, history and input bill at the input price.
open / defaultOpen: string | null; default null; The open request id, controlled or initial. A request open from the first render is drawn open; every later open unfolds.
onOpenRequest: (id: string | null, request: AnatomyRequest | null) => void; default —; Fires when Enter or a click opens a request, or with null when it closes.
pinned / defaultPinned: string | null; default null; The request pinned for comparison, controlled or initial.
onPin: (id: string | null) => void; default —; Fires when C or the pin button pins a request, or with null when it is unpinned.
onCompare: (pinned: AnatomyRequest, open: AnatomyRequest) => void; default —; Fires when an open request is compared with a different pinned one.
onCopyId: (id: string) => void; default —; Fires when a request id is copied (the button answers “Copied”).
sizeBy / defaultSizeBy: "tokens" | "cost"; default "tokens"; What the bar's parts are proportional to, controlled or initial.
onSizeByChange: (sizeBy: "tokens" | "cost") => void; default —; Fires from the Tokens / Cost switch.
status: "ready" | "loading" | "error"; default "ready"; The run arrived, is on its way (still placeholder rows), or failed (a message and Try again).
onRetry: () => void; default —; “Try again” was pressed after the run failed to load.
title: string; default "Fernworks agent · run 7f3a"; The panel's heading; the run's totals print under it.
formatMoney: (amount: number) => string; default "$0.049" by hand; How money prints.
segmentGap: number; default 6; How far apart the parts slide when a request opens, in px.
palette: "tones" | "spectrum" | "mono"; default "tones"; The parts' colours: one hue in six steps, six hues turned from the accent, or ink greys — pigments at one lightness in both themes.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The selection, the slowest-stretch mark and the hue the palette turns from; any CSS colour works.
disabled: boolean; default false; Read only: requests cannot be opened or pinned.
className: string; default —; Classes for the panel; it scrolls inside its own box (36rem tall at most).

Prop	Type	Default	Description
requests	AnatomyRequest[]	defaultAnatomyRequests	The run's requests in order: { id, step, model, at, tokens (per part), phases ({ name, ms }[]), status?: ok \| truncated \| errored \| redacted, error?, dropped?, preview? }.
prices	Record<string, AnatomyPrice>	defaultAnatomyPrices	Dollars per million tokens per model name: { input, output, cached }. System, context, history and input bill at the input price.
open / defaultOpen	string \| null	null	The open request id, controlled or initial. A request open from the first render is drawn open; every later open unfolds.
onOpenRequest	(id: string \| null, request: AnatomyRequest \| null) => void	—	Fires when Enter or a click opens a request, or with null when it closes.
pinned / defaultPinned	string \| null	null	The request pinned for comparison, controlled or initial.
onPin	(id: string \| null) => void	—	Fires when C or the pin button pins a request, or with null when it is unpinned.
onCompare	(pinned: AnatomyRequest, open: AnatomyRequest) => void	—	Fires when an open request is compared with a different pinned one.
onCopyId	(id: string) => void	—	Fires when a request id is copied (the button answers “Copied”).
sizeBy / defaultSizeBy	"tokens" \| "cost"	"tokens"	What the bar's parts are proportional to, controlled or initial.
onSizeByChange	(sizeBy: "tokens" \| "cost") => void	—	Fires from the Tokens / Cost switch.
status	"ready" \| "loading" \| "error"	"ready"	The run arrived, is on its way (still placeholder rows), or failed (a message and Try again).
onRetry	() => void	—	“Try again” was pressed after the run failed to load.
title	string	"Fernworks agent · run 7f3a"	The panel's heading; the run's totals print under it.
formatMoney	(amount: number) => string	"$0.049" by hand	How money prints.
segmentGap	number	6	How far apart the parts slide when a request opens, in px.
palette	"tones" \| "spectrum" \| "mono"	"tones"	The parts' colours: one hue in six steps, six hues turned from the accent, or ink greys — pigments at one lightness in both themes.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The selection, the slowest-stretch mark and the hue the palette turns from; any CSS colour works.
disabled	boolean	false	Read only: requests cannot be opened or pinned.
className	string	—	Classes for the panel; it scrolls inside its own box (36rem tall at most).