Thinking trace

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type ReactNode,} from 'react';import {  DEFAULT_TRACES,  MODES,  rowCount,  type CodingTrace,  type ReasoningTrace,  type SearchTrace,  type StepsTrace,  type TraceMode,  type Traces,

/* Thinking trace (thinking-trace.tsx): a quiet stage with the folded trace in its middle and the   switch between kinds of trace at its foot. At night it is near-black, the rows almost white; by   day it is a pale grey, the rows near-black.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme).   Memory. What moves is opacity, transforms, a background position, one grid row, one min-height   and the 1 px thread's height, on a few small boxes; nothing runs while the trace is complete   and still, but the spinner and the shimmer while the work comes in. */.root {  /* The words: rows, the header and thoughts, and the muted grey of icons and notes. */  --ink: oklch(24.7% 0.006 258.361);  --ink-2: oklch(50.6% 0.01 264.477);  --ink-3: oklch(69.5% 0.009 264.505);  /* The stage and its edge (also the thread); the spinner's ring. */  --canvas: oklch(96.1% 0.002 247.84);  --line: oklch(94.6% 0.003 264.542);  --line-strong: oklch(91.2% 0.005 258.326);  /* A row under the pointer, the header under the pointer, a pressed tool call. */  --hover: oklch(97% 0.002 247.839);  --hover-2: oklch(93.3% 0.003 247.86);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * What a trace can hold, one shape per kind, and the four the demo shows: an ice-cream shop's * assistant planning its summer menu. Each trace has the words its header says once it is done, * and the ones it says while the work is still coming in. */export type TraceMode = 'steps' | 'reasoning' | 'search' | 'coding';/** A step of a plan, with an optional note after it ("6 flavors"). */export type TraceStep = { label: string; meta?: string };/** A page the search found: its title, its site and, if it opens, where. */export type TraceSource = {  title: string;  domain: string;  href?: string;  /** The colour of its round badge. */  tint?: 'blue' | 'orange' | 'green';};/** A tool call: what it did, to what, and for an edit the lines it added and removed. */export type TraceTool = { action: string; target: string; added?: number; removed?: number };

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The trace's icons, on a 24-unit grid, all decorative (aria-hidden). Outlines take the current * colour; the sparkle is filled with it. *//** The four-pointed sparkle in front of the header. */export function Sparkle({ className }: { className?: string }) {  return (    <svg className={className} width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">      <path d="M12 2 14.4 9.6 22 12 14.4 14.4 12 22 9.6 14.4 2 12 9.6 9.6Z" fill="currentColor" />    </svg>  );}/** The header's chevron: points down while shut; the CSS turns it over when open. */export function Chevron({ className }: { className?: string }) {  return (    <svg      className={className}      width="14"      height="14"      viewBox="0 0 24 24"

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;