Agent screen

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Demo } from './demo-pointer';import { CursorArt, INITIAL, Scene, useAgent } from './scene';import { useAutoplay } from './use-autoplay';import styles from './agent-screen.module.css';/* * Agent screen: a small live view of the computer an agent works on, with its name under it. * The agent's cursor glides about its desktop, clicks and types (scene.tsx). Hover the view and a * dark veil comes over it with an "Open" button; open it and the screen fills a window over the * page, where the reader can teach the agent a task: "Teach a task" starts a recording, with a red * timer by the agent's name and an "End" button in place of it. * * - The window is a <dialog> opened with showModal(): it sits in the top layer, keeps focus inside,

/* Agent screen (agent-screen.tsx): a soft grey card; in its middle the agent's view, 340 px wide   at most, its name under it, and the Working / Loading switch at the card's foot. Opened, the   view fills a window over the page (a <dialog> in the top layer).   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. The dialog   is the root's child in the document, so it inherits the same tokens from the top layer.   Motion. The view rises in once (380 ms); its veil and Open button fade in on hover (150 ms);   the window pops in (240 ms) over a page that dims (180 ms) and closes at once. Under reduced   motion all of it is instant. */.root {  /* The card, the view's own ground, and the ink in three strengths. */  --canvas: oklch(96.1% 0.002 247.84);  --inset: oklch(97.9% 0.002 247.839);  --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);  --line: oklch(94.6% 0.003 264.542);  /* The switch's track, the raised surfaces (its thumb, the window, the buttons), their hover. */  --field: oklch(96.1% 0.001 286.375);

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type CSSProperties } from 'react';import styles from './scene.module.css';/* * The agent's desktop, drawn in code: a soft wallpaper, a menu bar, a notes window behind a * browser that shows a small shop's flavours, two widgets and a dock. Everything is placed in * shares of the screen and sized in cqw, so the same drawing reads the same in the 340 px tile * and in the 960 px window. * * The agent works on it in a loop (useAgent): its cursor glides to the shop's search field, * clicks, types a flavour and sends it, adds the flavour that is left, then brings the notes to * the front and writes a line there. The cursor is a full-screen layer moved by a transform in * percent of the screen, so a glide is one compositor transition, whatever the screen's size. *//** A point on the screen, in percent of its width (x) and height (y). */type Point = { x: number; y: number };/** The windows, in percent of the screen. */const BROWSER = { x: 5, y: 29, w: 55, h: 59 };

/* The agent's desktop (scene.tsx). It fills the box it is given and is drawn in shares of it:   places in percent, sizes in cqw (the screen is the container), so the 340 px tile and the 960 px   window show the same picture. It is a picture of another computer's screen, so its colours are   its own and stay the same in both schemes. Only the agent's cursor keeps a fixed size, 30 px, as   a real pointer does. */.scene {  position: absolute;  inset: 0;  overflow: hidden;  container-type: inline-size;  color: #1d1f24;  font-family: var(--sans, system-ui, sans-serif);  letter-spacing: 0;  line-height: 1.25;  white-space: nowrap;  user-select: none;}.scene span {  display: block;}.wallpaper {  position: absolute;

'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. `visible` and `reduced` are there for any other * work that should only run on screen, or only with motion. */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]) => {