Tool chips

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type ToggleEvent,} from 'react';import { CALLS, FILES, type FileChange, type ToolCall, type ToolIcon } from './data';import { DemoPointer, runDemo, type Demo } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './tool-chips.module.css';export type { DiffLine, FileChange, ToolCall, ToolIcon } from './data';/* * Tool chips: what an agent did in one turn, folded into a few compact lines. A group header * ("4 tool calls, 2 messages") opens onto one row per tool call, each a glyph, a few words and a * chip (the file, the command, or the first words of a thought), and under them the files the turn

/* Tool chips (tool-chips.tsx): a soft grey card, and in its middle a column 320 px wide at most:   the group's header, its rows, and the file chips under a hairline.   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). Shadows that differ between the schemes are   written once with every layer, the layers a scheme does not use being transparent.   Motion. The folds animate grid-template-rows between 0fr and 1fr, so nothing is measured; rows   rise in by a transform and the chips pop in by a scale. Under reduced motion all of it is   instant. The diffs' popovers live in the top layer: they inherit these tokens from the root,   their parent in the document, whatever is drawn around the card. */.root {  /* The card, and the ink in three strengths. */  --canvas: oklch(96.1% 0.002 247.84);  --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);  /* Hairlines: the card's edge, the row chips' and the rule above the files. */  --line: oklch(94.6% 0.003 264.542);  /* A row's chip; the file chips and the popovers; their hovers. */  --field: oklch(96.1% 0.001 286.375);  --surface: oklch(100% 0 0);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * What the chips show: the steps of an agent's run (tool calls) and the files it changed. The * sample is an ice-cream shop's code, planning which flavours to churn and when. *//** The glyph at the start of a row. */export type ToolIcon = 'thinking' | 'write' | 'command' | 'read';export type ToolCall = {  id: string;  icon: ToolIcon;  /** What the step did, in a few words: "Write 204 lines". */  label: string;  /** Its chip: a file, a command, or the first words of a thought. */  chip: string;  /** Sets the chip in monospace, as a file name or a command. */  code?: boolean;  /** The lines the row opens onto. */  details?: string[];  /** How they read: prose, output in monospace, or lines added to a file. */  tone?: 'text' | 'code' | 'added';};

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, glide * the pointer onto a control, press it and call the component's own handler, as a click would. * Stopping the demo (the reader takes over, or it scrolls away) ends the step in progress at once: * its promise rejects, which ends the script right there, and the pointer fades out. * * The pointer is an HTML box around a still drawing: it glides by an animation the compositor * plays, and the press scales a box that keeps a transform at rest, so nothing it does needs a * layout. */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: Point) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;

'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;