Context Compaction River

1"use client";
2 
3import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from "react";
4 
5// OxbowTurn — the live conversation drawn as one meandering channel in a
6// side rail. Every live turn is a point the channel passes through; the
7// curve itself is decorative (aria-hidden SVG) and carries no information a
8// screen reader needs, because the same facts live as plain text in a real
9// list right below it ("Live context, N turns" / "Compacted: turns 3-9,
10// summarized 2 minutes ago").
11//
12// When turns get folded into a summary, the component doesn't just drop a
13// row — the compaction keeps its own place in the sequence, and the channel
14// simply stops routing through it: the surviving points ease toward their
15// new (tighter) spacing over ~300ms, which is what "the river gets shorter"
16// looks like here, while the folded turns settle 12px off the channel as a
17// closed oxbow-lake shape carrying a token-count chip. That chip is a real,
18// focusable button (never aria-hidden) — opening it reveals the summary and
19// a re-inject action in a role=menu popover. Re-inject animates the lake
20// back onto the channel before the prop change actually removes it, so nothing
21// is left to imagination between "click" and "the turns are back".
22//
23// The trigger is deliberately open-only (a second click does not close it —
24// only Escape, an outside click, or choosing the menu item does). That is
25// what keeps a synthetic "press" pass (which clicks the first control once,
26// unconditionally) and a later scripted "open this" check from fighting over
27// the same toggle.
28//
29// Positions are computed from each item's index in the full sequence (turn
30// or compaction alike), so a compaction never needs its own bookkeeping of
31// "where it used to be" — it already has a slot. Turn dots and the channel
32// path animate via a direct rAF loop (setAttribute only, no React state on
33// the hot path, sleeps once settled) exactly like this repo's other
34// spring-driven diagrams. Everything else (the oxbow's 12px settle, its
35// entrance/exit) is a plain CSS transform+opacity transition, which reduced
36// motion turns off wholesale in favor of an instant fade-and-move.
37 
38export type OxbowTurnEntry = {
39  id: string;
40  /** short label, e.g. a turn number — used to build "turns 3-9" range text */
41  label: string;
42};
43 
44export type OxbowTurnItem =
45  | { kind: "turn"; id: string; label: string; preview?: string }
46  | {
47      kind: "compaction";
48// … truncated