Merge graph card

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  Fragment,  useCallback,  useEffect,  useEffectEvent,  useId,  useMemo,  useRef,  useState,  type CSSProperties,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { pathsOf, Slice } from './graph';import { Bars, Icon, Spinner } from './icons';import {  apply,  CREATE,  graphOf,  INITIAL,

/* Merge graph card (merge-graph-card.tsx): a chat turn on a near-white stage, or at night a   near-black one. A 640 px column holds, bottom up, the composer, the status chips, and the   thread: the request, the disclosure, the card and the answer. The thread grows upwards from   the composer, as a chat does.   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).   Motion. Rows that arrive later open up (their height, 30 px, once); everything else moves by   opacity and transforms: entrances, the spinners, the halo of a node, the shimmer of the words   in progress (a moving background clipped to the text). */.root {  /* The stage, and the surfaces on it. */  --surface: #fdfdfd;  --raised: #fff;  --fill: #f3f3f3;  --fill-2: #ececec;  --edge: #ebebeb;  --edge-2: #e3e3e3;  /* Words: the strongest, the meta, the quiet ones (others' commits), the faint (hashes). */  --ink: #1a1a1a;  --ink-2: #6b6b6b;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * What the card shows, as plain data. The whole turn is one Model; the agent's work is a script of * small patches to it, each after a pause (CREATE, RESOLVE, MERGE). The rows of the commit graph, * and the edges between them, are worked out from the Model by `graphOf`: nothing about the graph * is stored, so every state draws the same way whether it is reached step by step or at once. */export type Stage =  'idle' | 'sent' | 'working' | 'conflicts' | 'resolving' | 'ready' | 'merging' | 'merged';/** The stages a card may start at, already drawn. */export type StartStage = 'idle' | 'conflicts' | 'ready' | 'merged';/** The status chip over the composer. */export type Chip =  'create' | 'creating' | 'conflicts' | 'resolving' | 'ready' | 'merging' | 'merged';/** The card's last line: what the agent is doing, or what is left to do, and its button. */export type Footer = {  kind: 'busy' | 'conflicts' | 'ready' | 'merged';  text: string;  action?: 'resolve' | 'resolving' | 'merge' | 'merging' | 'open';

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { Edge, Lane, Node, Row } from './model';import styles from './merge-graph-card.module.css';/* * The commit graph, drawn row by row. Every edge is one path in the coordinates of the whole list * (row k's middle is at k × PITCH + PITCH / 2), and each row has an SVG of its own whose viewBox is * its band of that list: it shows the pieces of every edge that cross it, and its own node. So a * row that arrives later opens up between two others with the lanes running through it, and the * rows never need one drawing laid over them all. *//** A row's height, in px. */export const PITCH = 30;/** The graph's width, and where its three lanes run. */export const GRAPH = 61;const LANES = [9.5, 26.5, 43.5];const x = (lane: Lane) => LANES[lane];const y = (index: number) => index * PITCH + PITCH / 2;/** One edge, as a path in the list's coordinates. */function pathOf(edge: Edge, rows: Row[], index: Map<string, number>): string | null {

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useLayoutEffect, useRef } from 'react';import styles from './merge-graph-card.module.css';/* * Words that decode into place, the way the agent's new rows arrive: the line grows from a few * random letters to its full length while the real text takes over from the left. It writes the * span's text straight from a frame loop (no React render per frame). Screen readers get the real * words from a hidden copy; the moving one is aria-hidden. Under reduced motion it never runs. */const LETTERS = 'abcdefghijklmnopqrstuvwxyz0123456789';/** How often the random letters change, in ms. */const FLICKER = 45;const noise = (length: number, from: string) =>  Array.from({ length }, (_, i) =>    from[i] === ' ' ? ' ' : LETTERS[Math.floor(Math.random() * LETTERS.length)],  ).join('');export function Scramble({

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { ReactNode } from 'react';import styles from './merge-graph-card.module.css';/* * The card's icons, drawn on a 16-unit grid with round strokes in currentColor. They are * decorative: every control that shows one is named in words. The stylesheet sizes them. */const props = {  viewBox: '0 0 16 16',  'aria-hidden': true,  focusable: false,  fill: 'none',  stroke: 'currentColor',  strokeWidth: 1.4,  strokeLinecap: 'round',  strokeLinejoin: 'round',} as const;export type IconName =  | 'chevron-right'  | 'chevron-down'

'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, or * glide the pointer somewhere. 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. * * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it. The arrow and the * hand are HTML boxes that swap by their visibility: a change of style inside an SVG would lay * the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => 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;