// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  useSyncExternalStore,  type KeyboardEvent,} from 'react';import { Assistant, tokenize, type Message } from './assistant';import {  COMMENTS,  INSIGHTS,  REPLIES,  SESSION,  START,  SUGGESTIONS,  SUMMARY,  clock,  replyTo,  segmentAt,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';import { clock } from './data';import { Icon, PlayerGlyph } from './icons';import { GuestScene, HostScene } from './scene';import styles from './session-review.module.css';/* * The recording's player. Nothing plays: the time is a number the screen owns and advances on * its own clock, and the picture is the illustrated scene of scene.tsx, which moves while * `playing`. The controls are real ones: * * - The scrub bar is a role="slider": hovering it shows a preview of that moment (a small copy of *   the scene, leaning as she did then) with its time over the total; pressing or dragging seeks, *   and the arrow keys step 5 s, Page Up / Down 30 s, Home and End to either end. * - The volume is a native range input with its speaker as a mute button; the speed button steps *   through 1×, 1.5×, 2× and 0.5×; casting is a toggle; full screen is the browser's own. * - A press on the picture plays or pauses, and a large play button shows while paused. */const SPEEDS = [1, 1.5, 2, 0.5];

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState } from 'react';import { SUGGESTIONS, clock, type ReplyPart } from './data';import { AppMark, Icon } from './icons';import styles from './session-review.module.css';/* * The assistant's panel: ask the recording a question. Empty, it shows its mark, a headline and * three suggestions above the composer; once asked, the conversation takes the room. Answers are * canned (data.ts) and stream in token by token; every timestamp in an answer is a chip that * seeks the recording there. * * - The composer is a textarea: Enter sends, Shift+Enter breaks the line. The plus button adds *   the current time as a reference, the sliders button opens a menu (a shorter answer, a new *   chat), and the microphone fakes a dictation into the field. * - The two buttons at the top fold the panel into a rail, or close it; the screen keeps the rest. */export type Message =  | { id: number; role: 'user'; text: string }  | { id: number; role: 'assistant'; tokens: ReplyPart[]; shown: number };

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useId } from 'react';import styles from './session-review.module.css';/* * The recording's pictures, all illustrated: no photo of anyone. The participant sits in a bright * room by a window; the researcher's tile shows him against a brick wall, a plant beside him. * Each figure breathes and sways while the recording plays, and its mouth moves while it is the * one speaking (data-speaking); the stylesheet holds every animation, paused with the recording * (data-playing on the player) and dropped under reduced motion. Gradient ids come from useId, so * any number of copies (the hover preview, the thumbnails) can share a page. *//** The participant, in her room. `lean` (−1 to 1) tilts her, for the preview of another moment. */export function GuestScene({  speaking = false,  lean = 0,  className,}: {  speaking?: boolean;  lean?: number;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The session on screen: an invented research interview, its transcript, summary, comments and * insights, and the assistant's canned answers. Times are in seconds from the start of the * recording; every timestamp in the screen is a button that seeks to it. */export type Speaker = 'host' | 'guest';export type Segment = { at: number; speaker: Speaker; text: string };export type Person = { name: string; initials: string; role: string };export type Session = {  /** The study it belongs to, and the participant's label in it. */  study: string;  label: string;  title: string;  description: string;  date: string;  products: string;  company: string;  /** Length of the recording, in seconds. */

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The screen's icons: one 24-unit grid, drawn as strokes in currentColor, sized by the stylesheet * (the lab sizes an unsized SVG to 16 px). The player's glyphs (play, pause, the speaker) are * filled, as a player draws them. The app's mark and the assistant's are filled shapes of their * own. */export type IconName =  | 'panel'  | 'search'  | 'home'  | 'studies'  | 'calendar'  | 'folder'  | 'people'  | 'settings'  | 'chevron'  | 'more'  | 'video'  | 'cast'  | 'expand'  | 'minimize'

// Copyright (c) 2026 Bruno Delorence. MIT License.'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 = {

// Copyright (c) 2026 Bruno Delorence. MIT License.'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(

/* Session review (session-review.tsx): a white research app with a pale icon sidebar, the   recording in a rounded frame with white controls, a segmented tab bar, a transcript lit in pale   blue where it is being spoken, and a pale grey assistant panel with a black send button. At   night near-black, the recording unchanged.   Colours are the tokens below, light-dark(light, dark) where the two differ: the screen takes the   color-scheme it inherits from the page, or the one its colorScheme prop sets   (data-color-scheme).   Layout is by container queries on the root: the full screen from 1100 px (945 px tall; the   tab's content scrolls inside), the assistant under the recording below that, the sidebar a bar   across the top under 640 px. The player answers to its own width for its controls.   Motion. The figures breathe, nod and talk by transforms on their SVG groups, paused with the   recording; scrub previews, menus and the toast fade in. Reduced motion stills it all. */.root {  --bg: #fff;  --side: #fafafa;  --panel: #fafafa;  --field: #fff;  --line: #efefef;  --line-2: #e2e2e2;  --line-3: #ececec;