Confidence Logprob Hatch

1"use client";
2 
3import {
4  useEffect,
5  useId,
6  useLayoutEffect,
7  useMemo,
8  useRef,
9  useState,
10  type FocusEvent as ReactFocusEvent,
11  type KeyboardEvent as ReactKeyboardEvent,
12} from "react";
13 
14// ---------------------------------------------------------------------------
15// PencilHedge — token-level model uncertainty rendered as pencil hesitation.
16// A span the model was unsure about gets a 4px hand-hatched underline built
17// from ONE shared SVG <pattern> per doubt bucket (sparse / medium /
18// cross-hatch — a draftsman going over a line once, twice, or crossed), fed
19// by a single generation's logprobs: no resampling, cheap enough for every
20// message. The words themselves NEVER change weight, blur or opacity — that
21// is the failure mode this design exists to avoid, unlike an ink-reveal
22// treatment. Density is a shape channel (line count/angle), not a hue, so it
23// reads under every theme and every color-vision deficiency.
24//
25// Hover or focus on a hatched span opens a small popover (12px / rounded-md)
26// listing the runner-up tokens the model almost said as mono rows — "said
27// 0.44", "almost 0.31" — each alternative a real button that rewrites the
28// span in place with a short settle transition and clears its marks (a
29// resolved token reads exactly like a confident one). The popover is a
30// plain DOM child of the hatched span itself, not a portal: mouseenter/
31// mouseleave don't fire crossing into a descendant, so moving the pointer
32// from text down into the popover never flickers it shut, and Tab reaches
33// its buttons in natural document order with no focus-stealing hacks.
34//
35// A11y: the hatched span is role="note" tabIndex=0 with an aria-label
36// carrying the doubt — "low confidence: <text>" by default, expanded to
37// name the alternatives with percentages when the caller opts a message
38// into verbose mode, so default reading flow stays quiet. The popover is
39// role="dialog" with an aria-label naming the token it's alternatives-for.
40// Escape closes from anywhere (span or popover) and returns focus to the
41// span, never trapping. Confident text is never wrapped at all — plain
42// text, no role, no tabIndex, nothing to land on.
43//
44// Colors are the five registry tokens only (--background --foreground
45// --muted --border --accent), read as CSS custom properties directly in
46// SVG attributes — no canvas here, so no getComputedStyle dance is needed.
47// prefers-reduced-motion drops the settle transition; the rewrite still
48// … truncated