64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 67:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 68:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 69:T3c6d,"use client"; import { useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // MeniscusHold — time-to-first-token rendered as calibrated capillary rise. // A narrow tube fills toward a scribed line marking the historical p50 // first-token latency for this model/tool combo; the rise is eased so the // meniscus reaches that line exactly when a response typically lands. It // never fakes progress past what it can justify: reaching the p50 line with // nothing having arrived doesn't keep climbing toward "done" — the liquid // HOLDS there and trembles (an honest "still waiting, later than usual" // signal) while a second scribe line for p95 fades in above it. Past p95 the // tremble stops — trembling forever would itself be a lie about how confident // the wait still is — and a stall affordance (retry / switch model) surfaces. // First token landing (`arrivedAt` set) drains the tube fast, ease-out-expo, // from wherever the level currently sits. // // Three states, three honest phrases, announced only on the transition // between them (role=status, not a running commentary): // waiting -> "Waiting, typically N seconds." // slow -> "Taking longer than usual." // stalled -> "May be stalled, retry available." // Distinct from status-glyph-cadence (liveness — the connection is alive, no // notion of "how long is normal") and password-strength-tide (liquid level // encodes input strength, not elapsed-time-vs-percentile). This is the only // one of the three built from a calibrated latency distribution. // // Timing is derived from `startedAt`/`p50Ms`/`p95Ms` via two scheduled // setTimeouts (not a rAF poll — there's nothing to simulate physically here, // just two thresholds), so a late mount (component created a few hundred ms // after the real request began) still lands on the correct phase and eases // in for whatever time remains, rather than replaying the whole rise from // zero. Pure DOM + CSS + SVG: the fill is a div, the meniscus is a 1-path SVG // riding its top edge, both colored from --foreground/--ns-muted, no canvas. // prefers-reduced-motion drops the rise/tremor/fade entirely and swaps in a // static three-segment strip (within-normal / slow / stalled) — the same // phase machine, same announcements, nothing depends on perceiving motion. // --------------------------------------------------------------------------- export type MeniscusPhase = "waiting" | "slow" | "stalled" | "arrived"; const TUBE_H = 48; // px, per spec const TUBE_W = 6; // px, per spec const DRAIN_MS = 380; const DRAIN_EASE = "cubic-bezier(0.16,1,0.3,1)"; // ease-out-expo const RISE_EASE = "cubic-bezier(0.22,1,0.36,1)"; // gentle decelerate, distinct from drain const P95_FADE_MS_FLOOR = 250; function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } function fmtSeconds(ms: number): string { const safe = Number.isFinite(ms) && ms > 0 ? ms : 0; return (safe / 1000).toFixed(1); } // A fraction as a percentage string, fixed to 4 decimals. The raw value // serialized as "43.3333%" on the server and "43.333333333333336%" on the // client, and React discards the subtree over a string that long. Four // decimals is far below one device pixel on a tube this size. function pct(frac: number): string { return (frac * 100).toFixed(4); } // which of the two timed phases (ignoring `arrivedAt`) a given elapsed-ms // falls in, for a p50/p95 pair function timedPhase(elapsedMs: number, p50Ms: number, p95Ms: number): "waiting" | "slow" | "stalled" { if (elapsedMs < p50Ms) return "waiting"; if (elapsedMs < p95Ms) return "slow"; return "stalled"; } const CSS = ` .ns-mh-tremor { animation: ns-mh-tremor 500ms ease-in-out infinite; } @keyframes ns-mh-tremor { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.5px); } } @media (prefers-reduced-motion: reduce) { .ns-mh-tremor { animation: none; } } `; export interface MeniscusHoldProps { /** ms epoch timestamp this request/turn began. Defaults to Date.now() at mount. */ startedAt?: number; /** historical p50 (typical) first-token latency in ms, e.g. from a rolling latency store */ p50Ms: number; /** historical p95 first-token latency in ms — should be greater than p50Ms */ p95Ms: number; /** ms epoch timestamp the first token actually arrived; null/undefined while still waiting */ arrivedAt?: number | null; /** fired when the user presses Retry after a stall */ onRetry?: () => void; /** fired when the user presses "Switch model" after a stall */ onSwitchModel?: () => void; /** accessible name for the root status region. Default "Time to first token" */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function MeniscusHold({ startedAt, p50Ms, p95Ms, arrivedAt, onRetry, onSwitchModel, label = "Time to first token", className = "", }: MeniscusHoldProps) { const reduced = useReducedMotion(); const [autoStart] = useState(() => Date.now()); const start = startedAt ?? autoStart; const safeP50 = p50Ms > 0 ? p50Ms : 1; const safeP95 = p95Ms > safeP50 ? p95Ms : safeP50 + 1; const [timed, setTimed] = useState<"waiting" | "slow" | "stalled">(() => timedPhase(Date.now() - start, safeP50, safeP95) ); // re-arm the two threshold timers whenever a new request starts. A late // mount schedules only whatever time remains, so a component created // 300ms into a request still crosses p50 300ms early, not late. useEffect(() => { const elapsed = Date.now() - start; setTimed(timedPhase(elapsed, safeP50, safeP95)); const toSlow = safeP50 - elapsed; const toStalled = safeP95 - elapsed; const timers: number[] = []; if (toSlow > 0) { timers.push(window.setTimeout(() => setTimed("slow"), toSlow)); } if (toStalled > 0) { timers.push(window.setTimeout(() => setTimed("stalled"), toStalled)); } return () => timers.forEach((t) => window.clearTimeout(t)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [start, safeP50, safeP95]); const phase: MeniscusPhase = arrivedAt ? "arrived" : timed; // fill height, as a fraction of the tube, held at the p50 line once // reached — it never keeps climbing toward p95, that would be fake // progress. p95 anchors the very top of the tube. const p50Frac = Math.max(0, Math.min(1, safeP50 / safeP95)); // The first client render must serialize EXACTLY what the server sent, and // the server cannot know how many ms elapsed before the browser hydrated — // any clock read here produced transition-duration 650ms against the 649ms // already committed to the DOM. So the elapsed clock is not read during // render at all: both sides render the full p50 duration, and the real // remaining time is installed in an effect, which runs only after hydration // has matched. Behaviour is unchanged — the threshold timers above still // decide when each phase begins. const [elapsedAtMount, setElapsedAtMount] = useState(0); useEffect(() => { setElapsedAtMount(Date.now() - start); }, [start]); const riseRemainMs = Math.max(0, safeP50 - elapsedAtMount); let fillFrac: number; let fillMs: number; let fillEase: string; if (phase === "arrived") { fillFrac = 0; fillMs = reduced ? 0 : DRAIN_MS; fillEase = DRAIN_EASE; } else if (phase === "waiting") { fillFrac = p50Frac; fillMs = reduced ? 0 : riseRemainMs; fillEase = RISE_EASE; } else { // slow or stalled: held at the p50 line, no further rise fillFrac = p50Frac; fillMs = 0; fillEase = RISE_EASE; } // p95 tick fades in across the "slow" window, complete by the time // "stalled" arrives; instant under reduced motion (still legible, just // not animated). const p95FadeMs = Math.max(P95_FADE_MS_FLOOR, safeP95 - safeP50); // driven by the underlying timed phase, not the arrived overlay — a token // that lands before p50 was ever reached should never suddenly reveal a // mark it hadn't earned yet. const p95Visible = timed !== "waiting"; // announce only on transition, never a running commentary on the level const [liveText, setLiveText] = useState(""); const lastAnnouncedRef = useRef(null); useEffect(() => { if (lastAnnouncedRef.current === phase) return; lastAnnouncedRef.current = phase; if (phase === "waiting") { setLiveText(`Waiting, typically ${fmtSeconds(safeP50)} seconds.`); } else if (phase === "slow") { setLiveText("Taking longer than usual."); } else if (phase === "stalled") { setLiveText("May be stalled, retry available."); } else { setLiveText("Response arrived."); } }, [phase, safeP50]); const p50Label = `${fmtSeconds(safeP50)}s`; const p95Label = `${fmtSeconds(safeP95)}s`; const captionText = phase === "waiting" ? "waiting" : phase === "slow" ? "slower than usual" : phase === "stalled" ? "may be stalled" : "arrived"; return (

{/* the visual tube/tick apparatus (or its reduced-motion stand-in) — a dedicated, spatially disjoint hook for tooling: it never overlaps the retry/switch buttons rendered in the sibling column below, so clicking it (inert — there is no handler here) can never accidentally land on a button that only exists once stalled. */}

{reduced ? ( ) : (

{/* the tube */}

{/* meniscus — a small concave curve riding the fill's top edge, a sibling of the clipped layer so it's never cut off */}

{/* scribe marks + labels */}

)}

{captionText} {phase === "stalled" && (

)}

{liveText}

); } function Tick({ bottomFrac, label, opacity, transitionMs = 0, }: { bottomFrac: number; label: string; opacity: number; transitionMs?: number; }) { return (

{label}

); } // Static, motion-free fallback: three fixed segments, the current phase lit // from --ns-muted to --foreground. Same phase machine drives this branch — // nothing here depends on perceiving a rise or a tremble. function ReducedIndicator({ phase }: { phase: MeniscusPhase }) { const segments: { key: "waiting" | "slow" | "stalled"; text: string }[] = [ { key: "waiting", text: "normal" }, { key: "slow", text: "slow" }, { key: "stalled", text: "stalled" }, ]; const activeKey = phase === "arrived" ? null : phase; return (

{segments.map((seg) => { const active = seg.key === activeKey; return (

{seg.text}

); })}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/meter-latency-capillary/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/meter-latency-capillary.tsx"}],"className":"h-[70svh] min-h-80"}]]}]