ns-ui

Context Compaction River

Context compaction drawn as a meandering river: live turns are points on one curving channel, and a compacted run of turns necks off into a reopenable, re-injectable oxbow lake sitting 12px off the channel.

Use when an agent conversation where compaction has already happened and the user needs to see which run of turns was folded away and get it back, since each compacted run necks off the channel into a labelled oxbow that reopens and re-injects; pick meter-context-window instead when the question is how full the window is right now rather than what was dropped from it, or context-prompt-shims when the user is composing what goes into the window in the first place.

Install

npx shadcn add https://design.helpmarq.com/r/context-compaction-river.json
  • context-window
  • compaction
  • agent
  • llm
  • svg
  • diagram
  • history
  • mono
  • menu
  • undo
  • accessibility

ns-ui / context-compaction-river

CONTEXT RIVERagent session
Turn 1: asked to add rate limiting to the public API
Turn 2: shared a screenshot of the failing dashboard chart
Turn 10: shared a screenshot of the failing dashboard chart
Turn 11: requested a summary of last night's deploy log
Turn 12: asked whether the auth migration is reversible
Turn 13: pasted a new error boundary component for review
Turn 17: asked to add rate limiting to the public API
Turn 18: shared a screenshot of the failing dashboard chart
Turn 19: requested a summary of last night's deploy log
Turn 20: asked whether the auth migration is reversible
turns 3–9 pinched off the channel · re-injectable
turns 14–16 pinched off the channel · re-injectable
  • Live context, 10 turns
  • Compacted: turns 3–9, summarized 6 minutes ago
  • Compacted: turns 14–16, summarized 2 minutes ago

event · session live · 10 turns in channel, 2 oxbows settled

the channel is a picture of what is still live — open an oxbow to read what left it, or re-inject to splice it back in

Props

PropTypeDefaultDescription
itemsOxbowTurnItem[]the full ordered sequence: live turns and compaction (oxbow) entries, interleaved
onReinject?(compactionId: string) => voidfired once a re-inject has finished animating back onto the channel
ariaLabel?string
className?string