52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 54:T257a,"use client"; import { forwardRef, useEffect, useInsertionEffect, useRef, useState } from "react"; import { cn } from "../../utils"; import { StreamText } from "../../internals/StreamText"; import { useAutoscroll } from "../../internals/use-autoscroll"; import { formatElapsed, useElapsed } from "../../internals/use-elapsed"; import { useFancyId } from "../../internals/use-id"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { useInertAttribute } from "../../internals/dom/use-inert-attribute"; import { useEventCallback } from "../../internals/dom/use-event-callback"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { useSoundCue } from "../../sound/use-sound"; import "./reasoning-panel.css"; /** * Props for ReasoningPanel */ export interface ReasoningPanelProps { /** The reasoning trace so far. Hand over a longer string to stream more in. */ text: string; /** Whether the trace is still growing. Drives the timer, the shimmer, and autoscroll. */ streaming?: boolean; /** * Whether the trace is expanded. Left alone until either the component or * the reader changes it — see the open-behaviour contract in the README. A * changed prop value is adopted as the new state and announced through * `onToggle`, the counterpart of a consumer writing to the bound variable * on the Svelte side. */ open?: boolean; /** Header text. */ label?: string; /** Epoch ms the current burst started at. Pins the live timer's origin. */ since?: number; /** Final duration for the summary line. Falls back to what the timer measured. */ durationMs?: number; /** Scroll height of the trace once expanded. */ maxHeight?: string; /** Called whenever the panel opens or closes, by click or on its own. */ onToggle?: (open: boolean) => void; /** Additional CSS classes */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } /** How long a finished trace stays on screen before folding itself away. */ const AUTO_COLLAPSE_MS = 600; /** * ReasoningPanel */ export const ReasoningPanel = forwardRef( function ReasoningPanel( { text, streaming = false, open: openProp, label = "Reasoning", since, durationMs, maxHeight = "12rem", onToggle, className, sound = false, }, ref ) { const uid = useFancyId(); const headerId = `${uid}-header`; const bodyId = `${uid}-body`; // `open` stays undefined until something actually decides: `autoOpen` // carries the answer in the meantime, so a consumer that never touches // the prop still gets the automatic behaviour and one that drives it // still owns the value. const [openState, setOpenState] = useState(openProp); const [autoOpen, setAutoOpen] = useState(false); const [measuredMs, setMeasuredMs] = useState(0); // A changed `open` prop is a consumer decision: adopt it during render, // the way a write to the bound variable lands on the Svelte side. const lastOpenProp = useRef(openProp); if (openProp !== lastOpenProp.current) { lastOpenProp.current = openProp; if (openProp !== openState) setOpenState(openProp); } const isOpen = openState ?? autoOpen; // The state the last COMMITTED render published, readable from outside a // render. Written in an insertion effect rather than the render body, so a // render React starts and throws away can never publish a value the // component never showed. const isOpenRef = useLiveRef(isOpen); // What `commit` last decided, parked here until the render carrying it // lands: React publishes state one render later, and two commits inside a // single batch — a mount effect rehearsed by StrictMode, an effect and a // timer in the same flush — must see the first one's answer rather than // the render's. Cleared on every commit, so it never outlives the render // that carries it. const decidedOpen = useRef(undefined); useInsertionEffect(() => { decidedOpen.current = undefined; }); /** The panel's state as `commit`/`toggle` see it, between renders. */ function currentOpen(): boolean { return decidedOpen.current ?? isOpenRef.current; } // Plain refs: none of these should wake an effect that writes them. const userToggled = useRef(false); const wasStreaming = useRef(false); const collapseTimer = useRef | undefined>(undefined); // The last value `onToggle` was told about. `commit` keeps it in step // with its own calls, so the effect below only speaks up for changes // that never went through it — a consumer rewriting the `open` prop. const lastNotifiedOpen = useRef(isOpen); const elapsed = useElapsed(); const elapsedMsRef = useLiveRef(elapsed.ms); const { start: startElapsed, stop: stopElapsed } = elapsed; const playCue = useSoundCue(sound); const duration = durationMs ?? measuredMs; const summary = streaming ? formatElapsed(elapsed.ms) : duration > 0 ? `Thought for ${formatElapsed(duration)}` : ""; function clearCollapseTimer() { if (collapseTimer.current !== undefined) { clearTimeout(collapseTimer.current); collapseTimer.current = undefined; } } const commit = useEventCallback((next: boolean) => { if (currentOpen() === next) return; decidedOpen.current = next; setOpenState(next); setAutoOpen(next); lastNotifiedOpen.current = next; onToggle?.(next); }); function toggle() { // From here on the reader owns the panel: no more opening or closing // on its own behind their back. userToggled.current = true; clearCollapseTimer(); const next = !currentOpen(); // Only this click plays a cue — the streaming auto-open and the 600ms // auto-collapse both fold through `commit`, and must stay silent, so the // play sits here rather than in `commit` or the effect that watches it. playCue(next ? "open" : "close"); commit(next); } // Open on the first chunk, fold away a beat after the last one — until // the reader takes over. `userToggled` is a ref so that taking over // does not itself re-run this. useEffect(() => { clearCollapseTimer(); if (streaming) { wasStreaming.current = true; if (!userToggled.current) commit(true); return clearCollapseTimer; } if (!wasStreaming.current) return clearCollapseTimer; wasStreaming.current = false; if (userToggled.current) return clearCollapseTimer; collapseTimer.current = setTimeout(() => { collapseTimer.current = undefined; commit(false); }, AUTO_COLLAPSE_MS); return clearCollapseTimer; }, [streaming, commit]); // A consumer that rewrites the `open` prop moves the panel without going // through `commit`, so nothing above reports it. The README promises // every change is announced, whichever side caused it. const notifyToggle = useEventCallback(onToggle); useEffect(() => { if (isOpen === lastNotifiedOpen.current) return; lastNotifiedOpen.current = isOpen; notifyToggle(isOpen); }, [isOpen, notifyToggle]); // The timer only exists while the trace grows; its last reading survives // as the summary duration. useEffect(() => { if (!streaming) return; startElapsed(since ?? Date.now()); return () => { setMeasuredMs(elapsedMsRef.current); stopElapsed(); }; }, [streaming, since, startElapsed, stopElapsed]); const [bodyEl, bodyRef] = useElementRef(); const inertRef = useInertAttribute(!isOpen); const composedBodyRef = useComposedRefs(bodyRef, inertRef); useAutoscroll(bodyEl, { enabled: streaming && isOpen, pinOnConnect: true }); return (

{/* `inert` goes straight to the node through `useInertAttribute`, never as a JSX prop: React 18 drops `inert={true}` and React 19 rejects `inert=""`, so no single prop spelling covers this package's peer range. The hook emits the same attribute on both. */}

); } ); 55:T75b,/* * `.fancy-reasoning-panel` is a PORT-ADDED anchor (PORTING.md, styling rule 2). * The source's