Thought Trail

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import {
  AnimatePresence,
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
  useTransform,
  type MotionValue,
  type Transition,
} from "motion/react";

import { cn } from "@/lib/utils";

/* ─────────────────────────────────────────────────────────
 * THOUGHT TRAIL STORYBOARD
 *
 *  arrive    a new step opens in at the bottom: its row grows
 *            from nothing as it fades down into place, so the
 *            trail lengthens instead of jumping
 *  work      its title shimmers, a band of light sweeping left
 *            to right; an arc spins in its dot, and its details
 *            open underneath and grow with each line that
 *            streams in
 *  hand off  the next step starts: the last one's details fold
 *            away, its title rolls up into its summary, the arc
 *            draws into a check and the rail fills down toward
 *            the new step, which is already opening. One spring
 *            for all of it, so the height eases, never jolts
 *  revisit   click a summary to open it again. A step you
 *            opened stays open; the trail only closes the ones
 *            it opened itself
 *  fail      the dot becomes a red cross with a small shake,
 *            the rail stops there, and the step stays open
 *  finish    the header's clock stops and its label rolls to
 *            "Worked for 14s · 5 steps"; a beat later the whole
 *            trail folds up into that line. A failed run stays
 *            open
 *  fold      fold the trail by hand while it runs and the
 *            header keeps the current step's title, shimmering
 *  reduced   no shimmer, slide or roll: heights change at
 *            once and labels crossfade
 * ───────────────────────────────────────────────────────── */

const TRAIL = {
  fold: { type: "spring", visualDuration: 0.34, bounce: 0 }, // details opening and closing, steps arriving
  grow: { type: "spring", visualDuration: 0.26, bounce: 0 }, // details following what streams in
  roll: { type: "spring", visualDuration: 0.3, bounce: 0.1 }, // a title rolling into its summary
  pop: { type: "spring", visualDuration: 0.24, bounce: 0.2 }, // dot to arc to check
  show: { duration: 0.22, ease: "easeOut", delay: 0.06 },
  hide: { duration: 0.12, ease: "easeIn" },
  draw: { duration: 0.3, ease: [0.65, 0, 0.35, 1] }, // check and cross strokes
  rail: { duration: 0.45, ease: [0.22, 1, 0.36, 1] },
  sheen: 1.8, // s for the band of light to cross a title
  spin: 0.9, // s per turn of the working arc
  settle: 0.8, // s the finished header holds before the trail folds into it
  tick: 250, // ms between clock readings
  drift: 6, // px details slide as they fade
} as const satisfies Record<string, Transition | number>;

export type ThoughtTrailStatus = "pending" | "active" | "done" | "error";

const TONE: Record<ThoughtTrailStatus, string> = {
  pending: "text-zinc-400 dark:text-zinc-600",
  active: "text-zinc-900 dark:text-zinc-100",
  done: "text-zinc-500 dark:text-zinc-400",
  error: "text-rose-600 dark:text-rose-400",
};

const DOT_TONE: Record<ThoughtTrailStatus, string> = {
  pending: "text-zinc-300 dark:text-zinc-700",
  active: "text-zinc-900 dark:text-zinc-100",
  done: "text-zinc-400 dark:text-zinc-500",
  error: "text-rose-500 dark:text-rose-400",
};

// The title's own color at 60%, with a band of the full color through the middle.
const DIM = "color-mix(in oklab, currentColor 60%, transparent)";
const SHEEN = `linear-gradient(90deg, ${DIM} 0%, ${DIM} 41%, currentColor 50%, ${DIM} 59%, ${DIM} 100%)`;

const FOCUS =
  "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:focus-visible:ring-zinc-600";

/* ── What the steps tell the header ─────────────────────── */

type Entry = { status: ThoughtTrailStatus; title: React.ReactNode };
type Snapshot = {
  /** Steps that have started. */
  steps: number;
  failed: boolean;
  /** Title of the latest active step. */
  current: React.ReactNode;
};

/**
 * Steps write here from layout effects and the header reads it, so a step's
 * update re-renders the header, never the steps around it. The trail itself
 * only listens for `failed`.
 */
function createStore() {
  const entries = new Map<string, Entry>();
  const listeners = new Set<() => void>();
  let snapshot: Snapshot = { steps: 0, failed: false, current: null };
  let ready = false;

  const publish = () => {
    let steps = 0;
    let failed = false;
    let current: React.ReactNode = null;
    for (const entry of entries.values()) {
      if (entry.status !== "pending") steps++;
      if (entry.status === "error") failed = true;
      if (entry.status === "active") current = entry.title;
    }
    if (snapshot.steps === steps && snapshot.failed === failed && Object.is(snapshot.current, current)) return;
    snapshot = { steps, failed, current };
    listeners.forEach((listener) => listener());
  };

  return {
    set(id: string, entry: Entry) {
      entries.set(id, entry);
      publish();
    },
    remove(id: string) {
      entries.delete(id);
      publish();
    },
    subscribe(listener: () => void) {
      listeners.add(listener);
      return () => {
        listeners.delete(listener);
      };
    },
    snapshot: () => snapshot,
    failed: () => snapshot.failed,
    /** False until the trail's first commit: steps that mount after it arrive. */
    ready: () => ready,
    markReady() {
      ready = true;
    },
  };
}

type Store = ReturnType<typeof createStore>;

const TrailContext = React.createContext<{ store: Store; reduced: boolean } | null>(null);

function useTrail() {
  const trail = React.useContext(TrailContext);
  if (!trail) throw new Error("<ThoughtTrailStep> must be rendered inside <ThoughtTrail>.");
  return trail;
}

const subscribe = () => () => {};

/* ── ThoughtTrail ───────────────────────────────────────── */

export interface ThoughtTrailDoneInfo {
  /** How long the run took, rounded to whole seconds: `duration`, or the trail's own clock. Null when neither knows. */
  seconds: number | null;
  /** Steps that started. */
  steps: number;
  /** A step ended with `status="error"`. */
  failed: boolean;
}

export interface ThoughtTrailProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The agent is working. The header shimmers and counts seconds; when it turns false, the trail finishes. */
  running?: boolean;
  /** Header text while running. */
  label?: React.ReactNode;
  /** Header text once finished. Defaults to "Worked for 14s · 5 steps", or "Stopped after 9s" when a step failed. */
  doneLabel?: (info: ThoughtTrailDoneInfo) => React.ReactNode;
  /** Seconds the run took, for a trail restored from history. Overrides the trail's own clock. */
  duration?: number;
  /** Fold the trail into its header a beat after it finishes. Failed runs stay open. */
  collapseOnDone?: boolean;
  /** Open on mount. Defaults to `running || !collapseOnDone`, so a finished trail from history starts folded. */
  defaultOpen?: boolean;
  /** Control the fold yourself. The trail then never opens or folds on its own. */
  open?: boolean;
  /** Called when the reader clicks the header. */
  onOpenChange?: (open: boolean) => void;
  /** Shown before the header text, in the column of the step dots. */
  icon?: React.ReactNode;
}

/**
 * An agent's steps as they happen. Each step shows its details while it's
 * active, then shrinks to a one-line summary when it's done.
 */
export function ThoughtTrail({
  running = false,
  label = "Working",
  doneLabel = defaultDoneLabel,
  duration,
  collapseOnDone = true,
  defaultOpen,
  open: openProp,
  onOpenChange,
  icon,
  className,
  children,
  ...props
}: ThoughtTrailProps) {
  const [store] = React.useState(createStore);
  // False while rendering on the server and hydrating that HTML.
  const hydrated = React.useSyncExternalStore(subscribe, () => true, () => false);
  const reduced = (useReducedMotion() ?? false) && hydrated;
  const failed = React.useSyncExternalStore(store.subscribe, store.failed, store.failed);
  const bodyId = React.useId();

  React.useEffect(() => store.markReady(), [store]);

  const [openState, setOpenState] = React.useState(defaultOpen ?? (running || !collapseOnDone));
  const [touched, setTouched] = React.useState(false);
  const [run, setRun] = React.useState({ running, failed, ended: false });
  if (run.running !== running || run.failed !== failed) {
    const started = running && !run.running;
    setRun({ running, failed, ended: started ? false : run.ended || (!running && run.running) });
    // A new run opens the trail, and so does a failure.
    if (started) {
      setTouched(false);
      setOpenState(true);
    } else if (failed && !run.failed) {
      setOpenState(true);
    }
  }

  // A run that finishes folds into its header after a beat, unless the reader took over.
  const fold = openProp === undefined && collapseOnDone && run.ended && !failed && !touched && openState;
  React.useEffect(() => {
    if (!fold) return;
    const timer = window.setTimeout(() => setOpenState(false), TRAIL.settle * 1000);
    return () => window.clearTimeout(timer);
  }, [fold]);

  const open = openProp ?? openState;
  const toggle = () => {
    setTouched(true);
    setOpenState(!open);
    onOpenChange?.(!open);
  };

  const trail = React.useMemo(() => ({ store, reduced }), [store, reduced]);

  return (
    <TrailContext.Provider value={trail}>
      <div className={cn("w-full min-w-0 text-sm", className)} {...props}>
        <Header
          store={store}
          running={running}
          open={open}
          onToggle={toggle}
          controls={bodyId}
          label={label}
          doneLabel={doneLabel}
          duration={duration}
          icon={icon}
          reduced={reduced}
        />
        <Fold id={bodyId} open={open} reduced={reduced}>
          <ol className="pt-1">{children}</ol>
        </Fold>
      </div>
    </TrailContext.Provider>
  );
}

function defaultDoneLabel({ seconds, steps, failed }: ThoughtTrailDoneInfo) {
  const time = seconds === null ? null : formatSeconds(seconds);
  const head = failed ? (time ? `Stopped after ${time}` : "Stopped") : time ? `Worked for ${time}` : "Done";
  return steps > 0 ? `${head} · ${steps} ${steps === 1 ? "step" : "steps"}` : head;
}

function formatSeconds(seconds: number) {
  if (seconds < 60) return `${seconds}s`;
  return `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`;
}

/** Seconds since `running` last turned true, read every TRAIL.tick ms and held once it turns false. */
function useClock(running: boolean) {
  const [clock, setClock] = React.useState<{ running: boolean; seconds: number | null }>({
    running,
    seconds: null,
  });
  // A new run starts from zero, before its first reading.
  if (clock.running !== running) setClock({ running, seconds: running ? 0 : clock.seconds });

  React.useEffect(() => {
    if (!running) return;
    const start = performance.now();
    const read = () => setClock({ running: true, seconds: (performance.now() - start) / 1000 });
    const timer = window.setInterval(read, TRAIL.tick);
    return () => {
      window.clearInterval(timer);
      const seconds = (performance.now() - start) / 1000;
      setClock({ running: false, seconds });
    };
  }, [running]);

  return clock.seconds;
}

function Header({
  store,
  running,
  open,
  onToggle,
  controls,
  label,
  doneLabel,
  duration,
  icon,
  reduced,
}: {
  store: Store;
  running: boolean;
  open: boolean;
  onToggle: () => void;
  controls: string;
  label: React.ReactNode;
  doneLabel: (info: ThoughtTrailDoneInfo) => React.ReactNode;
  duration: number | undefined;
  icon: React.ReactNode;
  reduced: boolean;
}) {
  const { steps, failed, current } = React.useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
  const seconds = useClock(running);
  const done = doneLabel({
    seconds: duration ?? (seconds === null ? null : Math.max(1, Math.round(seconds))),
    steps,
    failed,
  });

  return (
    <>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={controls}
        onClick={onToggle}
        className={cn(
          "flex h-7 max-w-full items-center gap-2 text-left transition-colors duration-200",
          FOCUS,
          running
            ? TONE.active
            : failed
              ? TONE.error
              : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
        )}
      >
        {icon ? (
          <span aria-hidden className="flex size-5 shrink-0 items-center justify-center [&_svg]:size-4">
            {icon}
          </span>
        ) : null}
        <Swap id={running ? "running" : "done"} reduced={reduced} className="min-w-0">
          {running ? (
            <span className="flex min-w-0 items-baseline gap-1.5">
              <Shimmer active reduced={reduced} className="shrink-0">
                {label}
              </Shimmer>
              <span className="shrink-0 text-xs text-zinc-400 tabular-nums dark:text-zinc-500">
                {formatSeconds(Math.floor(seconds ?? 0))}
              </span>
              {/* Folded by hand mid-run: keep the current step in view. */}
              {!open && current ? (
                <>
                  <span aria-hidden className="text-zinc-300 dark:text-zinc-600">
                    ·
                  </span>
                  <Shimmer active reduced={reduced} className="min-w-0">
                    {current}
                  </Shimmer>
                </>
              ) : null}
            </span>
          ) : (
            <span className="block truncate">{done}</span>
          )}
        </Swap>
        <Chevron open={open} />
      </button>
      <span className="sr-only" aria-live="polite">
        {running ? current : done}
      </span>
    </>
  );
}

/* ── ThoughtTrailStep ───────────────────────────────────── */

export interface ThoughtTrailStepProps {
  /** Where the step is. `active` shows its details and shimmers; `done` shrinks it to its summary. */
  status?: ThoughtTrailStatus;
  /** What the step is doing, e.g. "Searching the docs". Shimmers while active. */
  title: React.ReactNode;
  /** What it did, e.g. "Read 4 pages". Replaces the title once done (or failed). */
  summary?: React.ReactNode;
  /** Replaces the dot and check. While active, the working arc circles it. */
  icon?: React.ReactNode;
  /** Small text at the end of the row: a duration, a count. */
  meta?: React.ReactNode;
  /** Classes for the details box. Give it `max-h-40 overflow-y-auto` and, while active, it keeps the newest line in view. */
  contentClassName?: string;
  className?: string;
  /** The details: streamed text, logs, sources. Shown while active or failed, and when the reader opens the step. */
  children?: React.ReactNode;
}

export function ThoughtTrailStep({
  status = "done",
  title,
  summary,
  icon,
  meta,
  contentClassName,
  className,
  children,
}: ThoughtTrailStepProps) {
  const { store, reduced } = useTrail();
  const id = React.useId();
  const detailsId = `${id}details`;
  // Steps in the trail's first render are just there; later ones arrive.
  const [arrives] = React.useState(() => store.ready() && !reduced);

  // Null until the reader clicks; until then the step opens while it works.
  const [chosen, setChosen] = React.useState<boolean | null>(null);
  const [seen, setSeen] = React.useState(status);
  if (seen !== status) {
    setSeen(status);
    // A failure shows its details, whatever the reader did before.
    if (status === "error") setChosen(null);
  }

  const hasDetails = children !== undefined && children !== null && children !== false;
  const canOpen = hasDetails && status !== "pending";
  const open = canOpen && (chosen ?? (status === "active" || status === "error"));
  const showSummary = (status === "done" || status === "error") && summary != null;

  React.useLayoutEffect(() => store.set(id, { status, title }));
  React.useLayoutEffect(() => () => store.remove(id), [store, id]);

  const label = (
    // Keyed on the status, so every change of state rolls the line.
    <Swap id={showSummary ? "summary" : status} reduced={reduced} className="flex-1">
      {showSummary ? (
        <span className="block truncate">{summary}</span>
      ) : (
        <Shimmer active={status === "active"} reduced={reduced}>
          {title}
        </Shimmer>
      )}
    </Swap>
  );
  const row = cn(
    "col-start-2 row-start-1 flex h-7 min-w-0 items-center gap-2 text-left transition-colors duration-200",
    TONE[status],
  );
  const extra = meta ? (
    <span className="shrink-0 text-xs text-zinc-400 tabular-nums dark:text-zinc-500">{meta}</span>
  ) : null;

  return (
    <Fold as="li" open appear={arrives} reduced={reduced} className={cn("group/step relative", className)}>
      <div className="grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-2">
        <Rail status={status} reduced={reduced} />
        <Dot status={status} icon={icon} reduced={reduced} />
        {canOpen ? (
          <button
            type="button"
            aria-expanded={open}
            aria-controls={detailsId}
            onClick={() => setChosen(!open)}
            className={cn(
              row,
              FOCUS,
              "group/row",
              status === "done" && "hover:text-zinc-900 dark:hover:text-zinc-100",
            )}
          >
            {label}
            {extra}
            <Chevron
              open={open}
              className={cn(
                !open &&
                  "opacity-0 group-hover/row:opacity-100 group-focus-visible/row:opacity-100 [@media(hover:none)]:opacity-60",
              )}
            />
          </button>
        ) : (
          <div className={row}>
            {label}
            {extra}
          </div>
        )}
        {hasDetails ? (
          <Fold id={detailsId} open={open} smooth reduced={reduced} className="col-start-2">
            <Details pinned={status === "active"} className={contentClassName}>
              {children}
            </Details>
          </Fold>
        ) : null}
      </div>
    </Fold>
  );
}

/** The line down to the next step. It fills in once this step is done. */
function Rail({ status, reduced }: { status: ThoughtTrailStatus; reduced: boolean }) {
  return (
    <span
      aria-hidden
      className={cn(
        // From just under this dot to just above the next, which sits 7px into its row.
        "pointer-events-none absolute top-6 -bottom-1 left-[calc(0.625rem-0.5px)] w-px overflow-hidden rounded-full transition-[opacity,background-color] duration-300 group-last/step:opacity-0",
        status === "error" ? "bg-rose-200 dark:bg-rose-500/30" : "bg-zinc-200 dark:bg-zinc-800",
      )}
    >
      <motion.span
        className="absolute inset-0 origin-top bg-zinc-400 dark:bg-zinc-500"
        initial={false}
        animate={{ scaleY: status === "done" ? 1 : 0 }}
        transition={reduced ? { duration: 0 } : TRAIL.rail}
      />
    </span>
  );
}

function Dot({
  status,
  icon,
  reduced,
}: {
  status: ThoughtTrailStatus;
  icon: React.ReactNode;
  reduced: boolean;
}) {
  const key = status === "error" ? "error" : icon ? (status === "active" ? "icon-active" : "icon") : status;
  let glyph: React.ReactNode;
  if (status === "error") glyph = <Cross reduced={reduced} />;
  else if (icon)
    glyph = (
      <span className="relative flex size-5 items-center justify-center">
        <span className="flex [&_svg]:size-3.5">{icon}</span>
        {status === "active" ? <Spinner reduced={reduced} className="absolute inset-0 size-5" ring /> : null}
      </span>
    );
  else if (status === "active") glyph = <Spinner reduced={reduced} className="size-3.5" />;
  else if (status === "done") glyph = <Check reduced={reduced} />;
  else glyph = <span className="size-2 rounded-full border border-current" />;

  return (
    <span aria-hidden className="relative col-start-1 row-start-1 flex h-7 items-center justify-center">
      <AnimatePresence initial={false} mode="popLayout">
        <motion.span
          key={key}
          className={cn("flex size-5 items-center justify-center transition-colors duration-200", DOT_TONE[status])}
          initial={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.5 }}
          transition={reduced ? { duration: 0.15 } : TRAIL.pop}
        >
          {glyph}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

function Spinner({ reduced, ring = false, className }: { reduced: boolean; ring?: boolean; className?: string }) {
  return (
    <motion.svg
      viewBox="0 0 20 20"
      fill="none"
      className={className}
      // Reduced motion: a slow breath instead of a turn.
      animate={reduced ? { opacity: [1, 0.35, 1] } : { rotate: 360 }}
      transition={
        reduced
          ? { duration: 1.6, ease: "easeInOut", repeat: Infinity }
          : { duration: TRAIL.spin, ease: "linear", repeat: Infinity }
      }
    >
      <circle cx="10" cy="10" r={ring ? 8.5 : 7} stroke="currentColor" strokeOpacity="0.18" strokeWidth={ring ? 1.25 : 2} />
      <path
        d={ring ? "M10 1.5a8.5 8.5 0 0 1 8.5 8.5" : "M10 3a7 7 0 0 1 7 7"}
        stroke="currentColor"
        strokeWidth={ring ? 1.25 : 2}
        strokeLinecap="round"
      />
    </motion.svg>
  );
}

function Check({ reduced }: { reduced: boolean }) {
  return (
    <svg viewBox="0 0 20 20" fill="none" className="size-3.5">
      <motion.path
        d="M4.5 10.5l3.5 3.5 7.5-8"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        initial={{ pathLength: reduced ? 1 : 0 }}
        animate={{ pathLength: 1 }}
        transition={TRAIL.draw}
      />
    </svg>
  );
}

function Cross({ reduced }: { reduced: boolean }) {
  return (
    <motion.svg
      viewBox="0 0 20 20"
      fill="none"
      className="size-3.5"
      animate={reduced ? undefined : { x: [0, -2.5, 2.5, -1.5, 0] }}
      transition={{ duration: 0.4, delay: 0.15 }}
    >
      {["M5.5 5.5l9 9", "M14.5 5.5l-9 9"].map((d, i) => (
        <motion.path
          key={d}
          d={d}
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          initial={{ pathLength: reduced ? 1 : 0 }}
          animate={{ pathLength: 1 }}
          transition={{ ...TRAIL.draw, delay: i * 0.08 }}
        />
      ))}
    </motion.svg>
  );
}

function Chevron({ open, className }: { open: boolean; className?: string }) {
  return (
    <svg
      viewBox="0 0 16 16"
      fill="none"
      aria-hidden
      className={cn(
        "size-3.5 shrink-0 text-zinc-400 transition-[rotate,opacity] duration-200 ease-out dark:text-zinc-500",
        open ? "rotate-0" : "-rotate-90",
        className,
      )}
    >
      <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ── Building blocks ────────────────────────────────────── */

/** Text that a band of light sweeps across while `active`. Inherits its color. */
function Shimmer({
  active,
  reduced,
  className,
  children,
}: {
  active: boolean;
  reduced: boolean;
  className?: string;
  children: React.ReactNode;
}) {
  // Inline-block, so the band crosses the words rather than the whole row.
  const base = cn("inline-block max-w-full truncate align-top", className);
  if (!active || reduced) return <span className={base}>{children}</span>;
  return (
    <motion.span
      className={base}
      style={{
        backgroundImage: SHEEN,
        backgroundSize: "250% 100%",
        backgroundClip: "text",
        WebkitBackgroundClip: "text",
        // Not `color`: the gradient is drawn in currentColor.
        WebkitTextFillColor: "transparent",
      }}
      initial={{ backgroundPosition: "100% 0%" }}
      animate={{ backgroundPosition: "0% 0%" }}
      transition={{ duration: TRAIL.sheen, ease: "linear", repeat: Infinity, repeatDelay: 0.2 }}
    >
      {children}
    </motion.span>
  );
}

/** One line of text that rolls up into the next when `id` changes. */
function Swap({
  id,
  reduced,
  className,
  children,
}: {
  id: string;
  reduced: boolean;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <span className={cn("relative block min-w-0", className)}>
      <AnimatePresence initial={false} mode="popLayout">
        <motion.span
          key={id}
          className="block min-w-0"
          initial={reduced ? { opacity: 0 } : { opacity: 0, y: "0.75em", filter: "blur(2px)" }}
          animate={{ opacity: 1, y: "0em", filter: "blur(0px)" }}
          exit={reduced ? { opacity: 0 } : { opacity: 0, y: "-0.75em", filter: "blur(2px)" }}
          transition={reduced ? { duration: 0.15 } : TRAIL.roll}
        >
          {children}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

/** A step's details. While pinned, a scrolling box keeps its newest line in view, until the reader scrolls up. */
function Details({
  pinned,
  className,
  children,
}: {
  pinned: boolean;
  className?: string;
  children: React.ReactNode;
}) {
  const ref = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const box = ref.current;
    if (!box || !pinned) return;
    let stuck = true;
    const follow = () => {
      if (stuck) box.scrollTop = box.scrollHeight;
    };
    const onScroll = () => {
      stuck = box.scrollHeight - box.scrollTop - box.clientHeight < 16;
    };
    const observer = new MutationObserver(follow);
    observer.observe(box, { childList: true, subtree: true, characterData: true });
    box.addEventListener("scroll", onScroll, { passive: true });
    follow();
    return () => {
      observer.disconnect();
      box.removeEventListener("scroll", onScroll);
    };
  }, [pinned]);

  return (
    <div
      ref={ref}
      className={cn("pt-0.5 pb-3 text-[13px] leading-relaxed text-zinc-500 dark:text-zinc-400", className)}
    >
      {children}
    </div>
  );
}

/**
 * Opens and closes its content by animating height. Clipped only while it
 * moves, so focus rings and the rail can spill out at rest. At rest an open
 * fold is `auto` and follows its content at once; a `smooth` one stays on a
 * number and springs after it instead, for content that streams in.
 */
function Fold({
  open,
  appear = false,
  smooth = false,
  reduced,
  as = "div",
  id,
  className,
  children,
}: {
  open: boolean;
  /** Grow in from nothing on mount. */
  appear?: boolean;
  smooth?: boolean;
  reduced: boolean;
  as?: "div" | "li";
  id?: string;
  className?: string;
  children: React.ReactNode;
}) {
  const innerRef = React.useRef<HTMLDivElement>(null);
  const shown = open && !appear;
  const height = useMotionValue<number | "auto">(shown ? "auto" : 0);
  const overflow = useMotionValue(shown ? "visible" : "hidden");
  const opacity = useMotionValue(shown ? 1 : 0);
  const y = useTransform(opacity, [0, 1], [-TRAIL.drift, 0]);
  const state = React.useRef({ open: false, mounted: false, moving: false, target: -1, reduced, smooth });

  React.useLayoutEffect(() => {
    state.current.reduced = reduced;
    state.current.smooth = smooth;
  });

  // Animate to `to`, clipped on the way.
  const glide = React.useCallback(
    (to: number, transition: Transition) => {
      const s = state.current;
      const inner = innerRef.current;
      if (!inner || (s.moving && s.target === to)) return;
      s.target = to;
      if (height.get() === "auto") height.jump(inner.offsetHeight);
      // Nothing to animate: settle where it is.
      if (s.reduced || (!s.moving && height.get() === to)) {
        s.moving = false;
        height.jump(to === 0 || s.smooth ? to : "auto");
        overflow.set(to === 0 ? "hidden" : "visible");
        return;
      }
      s.moving = true;
      overflow.set("hidden");
      animate(height, to, {
        ...transition,
        onComplete: () => {
          if (s.target !== to) return;
          s.moving = false;
          if (to === 0) return;
          if (!s.smooth) height.jump("auto");
          overflow.set("visible");
        },
      });
    },
    [height, overflow],
  );

  React.useLayoutEffect(() => {
    const s = state.current;
    const inner = innerRef.current;
    if (!inner) return;
    const first = !s.mounted;
    s.mounted = true;
    s.open = open;
    if (first && !(open && appear)) {
      // Already at rest; a smooth fold swaps `auto` for its number.
      if (open && smooth) {
        s.target = inner.offsetHeight;
        height.jump(s.target);
      }
      return;
    }
    glide(open ? inner.offsetHeight : 0, TRAIL.fold);
    if (s.reduced) opacity.jump(open ? 1 : 0);
    else animate(opacity, open ? 1 : 0, open ? TRAIL.show : TRAIL.hide);
    // Mount-time values only: `appear` and `smooth` are fixed per fold.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, glide, height, opacity]);

  // Content that changes size: a fold on the move retargets, a smooth one follows.
  React.useLayoutEffect(() => {
    const inner = innerRef.current;
    if (!inner) return;
    const observer = new ResizeObserver(() => {
      const s = state.current;
      if (!s.open || !(s.moving || s.smooth)) return;
      glide(inner.offsetHeight, s.moving && !s.smooth ? TRAIL.fold : TRAIL.grow);
    });
    observer.observe(inner);
    return () => observer.disconnect();
  }, [glide]);

  const content = (
    <motion.div ref={innerRef} className="flow-root" style={{ opacity, y: reduced ? 0 : y }}>
      {children}
    </motion.div>
  );
  const style = { height, overflow } as { height: MotionValue<number | "auto">; overflow: MotionValue<string> };
  return as === "li" ? (
    <motion.li id={id} inert={!open} className={className} style={style}>
      {content}
    </motion.li>
  ) : (
    <motion.div id={id} inert={!open} className={className} style={style}>
      {content}
    </motion.div>
  );
}