Context Prompt Shims

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useId,
7  useMemo,
8  useRef,
9  useState,
10  type KeyboardEvent as ReactKeyboardEvent,
11  type PointerEvent as ReactPointerEvent,
12} from "react";
13 
14// ---------------------------------------------------------------------------
15// ShimFit — prompt composition as fitting machinist's shims into a gap of
16// fixed height (the context window). Every section (system / tools / memory
17// / retrieved docs / user message) is a real DOM row whose height maps to its
18// token count; stack order IS prompt order, reordered by drag or by a full
19// keyboard listbox pattern (Space lifts, arrows move, Space drops) with FLIP
20// transforms on every reorder. Remaining budget is a real empty clearance
21// region above the stack, never a percentage bar. Inserting a tray candidate
22// that would blow the budget elastically compresses the stack, springs the
23// candidate back to the tray, pulses the largest truncatable row's edge, and
24// opens a persistent "thin this one" remedy — no error string, a visible
25// non-fit plus a suggested fix. Pure DOM/CSS, no canvas.
26// ---------------------------------------------------------------------------
27 
28export interface ShimSection {
29  id: string;
30  label: string;
31  tokens: number;
32  /** may be offered as the trim target when an insert overflows */
33  truncatable?: boolean;
34  /** floor tokens can't be trimmed below; defaults to 30% of initial tokens */
35  minTokens?: number;
36}
37 
38export interface ShimFitProps {
39  /** total context-window budget, in tokens */
40  budget?: number;
41  /** initial stack, top-to-bottom = prompt order */
42  sections?: ShimSection[];
43  /** candidates waiting in the tray, not yet part of the prompt */
44  candidates?: ShimSection[];
45  /** px per token for row height (min 8px floor still applies) */
46  scale?: number;
47  className?: string;
48  "aria-label"?: string;
49}
50 
51// Floor a row at 16px, not 8px: an 8px row cannot contain its own ~14px label,
52// so a thin row (e.g. a 120-token message) let its centered text bleed past the
53// row and — being the last row, flush at the frame's clipped bottom edge — get
54// severed by the frame's overflow-hidden. 16px holds the (hairline-sized) label
55// cleanly; the stack still fits with clearance to spare.
56const MIN_ROW_PX = 16;
57const HAIRLINE_PX = 18;
58const COMPRESS_MS = 120;
59const FLIP_MS = 320;
60const FLIP_EASE = "cubic-bezier(0.22,1,0.36,1)";
61const PULSE_MS = 620;
62const SUGGEST_DISMISS_MS = 9000;
63 
64const DEFAULT_SECTIONS: ShimSection[] = [
65// … truncated