KQ-943 · LOG/EXPAND

Log Expand

One log line that opens in place. The panel unfolds in flow against a height a ResizeObserver measured from the content's own border box, joined on glide behind overflow-clip, while the chevron turns a quarter on snap. Inside, the fields are a real key-value list and the JSON is the same record printed whole; the two cross-fade with the leaving view taken out of flow, so the height is always the height of what is being read, and a secret field stays masked in both until an explicit reveal.

KQ-943 · LOG/EXPAND

trace: t-9f4c21
host: dock-2.waylight
route: POST /captures/8841/retry
status: 409
attempt: 2 of 3
latency_ms: 412
region: basin-north
auth.token: ••••••••••••

{
  "time": "09:14:22",
  "level": "warn",
  "service": "ledger-api",
  "message": "retry scheduled for capture 8841",
  "trace": "t-9f4c21",
  "host": "dock-2.waylight",
  "route": "POST /captures/8841/retry",
  "status": "409",
  "attempt": "2 of 3",
  "latency_ms": "412",
  "region": "basin-north",
  "auth.token": "••••••••••••"
}

Closed · fields · token masked

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/log-expand

Props

entry: LogEntry; default —; The line and everything behind it: time, level, service, message, and its fields (a field may be marked secret).
open / defaultOpen: boolean; default false; Controlled or initial disclosure state.
onOpenChange: (open: boolean) => void; default —; Fires from the summary press and from Escape.
view / defaultView: "fields" | "json"; default "fields"; Controlled or initial body view.
onViewChange: (view: LogExpandView) => void; default —; Fires from the view toggle.
onRevealChange: (revealed: boolean) => void; default —; Fires when the masked field is shown or hidden again.
onAnnounce: (sentence: string) => void; default —; The sentence the polite region just spoke.

Prop	Type	Default	Description
entry	LogEntry	—	The line and everything behind it: time, level, service, message, and its fields (a field may be marked secret).
open / defaultOpen	boolean	false	Controlled or initial disclosure state.
onOpenChange	(open: boolean) => void	—	Fires from the summary press and from Escape.
view / defaultView	"fields" \| "json"	"fields"	Controlled or initial body view.
onViewChange	(view: LogExpandView) => void	—	Fires from the view toggle.
onRevealChange	(revealed: boolean) => void	—	Fires when the masked field is shown or hidden again.
onAnnounce	(sentence: string) => void	—	The sentence the polite region just spoke.