Workflow builder

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import {  AGENT_PORTS,  BRANCHES,  COST,  GROUPS,  KINDS,  NAV,  NAV_OTHER,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useId,  useRef,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type Ref,} from 'react';import { COST, EXTENSIONS, type Node } from './data';import { Icon, type IconName } from './icons';import styles from './workflow-builder.module.css';/* * The two panels that slide over the canvas: a node's settings, from the right, and the test * run's report, from the bottom. They only draw what the builder hands them; every change goes * back up through a callback, so the canvas and the panels always show the same workflow. */export type Config = {  /** The upload trigger: where files come from, which types it takes, and whether it is on. */  source: string;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { IconName } from './icons';/* * The builder's data: the kinds of node the palette offers, the workflow it opens on, and the * numbers a test run reports. All of it is invented. * * Positions are in the canvas's own px (its "world"), which the view pans and zooms. Every node * is NODE_HEIGHT tall and as wide as its entry says, so the connectors can be drawn from the data * alone, without measuring the page. */export type Group = 'Tools' | 'Logic' | 'Action';export type Kind = {  id: string;  label: string;  group: Group;  icon: IconName;  /** What it does: the palette's tooltip. */  description: string;  /** The line under its name on the canvas, until it is set up. */  sub: string;

// Copyright (c) 2026 Bruno Delorence. MIT License.import { AGENT_PORTS, NODE_HEIGHT, STEM, type Edge, type Node } from './data';/* * The canvas's geometry, in world px: where each node's ports are, the path of a connector, the * box around the whole workflow, and the view (pan and zoom) that fits it in the canvas. */export type Point = { x: number; y: number };export type View = { x: number; y: number; k: number };export const ZOOM_MIN = 0.25;export const ZOOM_MAX = 1.6;/** How far right of a node its "add node" plus sits, from the output port. */export const ADD_REACH = 36;export const inPort = (node: Node): Point => ({ x: node.x, y: node.y + NODE_HEIGHT / 2 });export const outPort = (node: Node): Point => ({ x: node.x + node.w, y: node.y + NODE_HEIGHT / 2 });/** Where a connector leaves a node: its output port, or under the plus of one of the agent's stems. */export function startOf(node: Node, port: Edge['port']): Point {  const stem = AGENT_PORTS.find((item) => item.id === port);  if (!stem) return outPort(node);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The builder's icons: line drawings on a 24-unit grid, each one or a few path strings, stroked * with the current colour, and framed on the middle 20 units so the drawings fill their box as * the interface's do. They are decorative (aria-hidden): the button or the row around each * one says what it is. Their size comes from the stylesheet (.icon), never from the SVG. *//** A circle as a path, so every icon is paths only. */const ring = (cx: number, cy: number, r: number) =>  `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${2 * r} 0a${r} ${r} 0 1 0 ${-2 * r} 0`;export const ICONS = {  home: ['M4.5 10.2 12 4.2l7.5 6V19a1 1 0 0 1-1 1H15v-5.5H9V20H5.5a1 1 0 0 1-1-1z'],  folder: [    'M3.5 7A1.5 1.5 0 0 1 5 5.5h4.3l2 2.2H19A1.5 1.5 0 0 1 20.5 9.2V17A1.5 1.5 0 0 1 19 18.5H5A1.5 1.5 0 0 1 3.5 17z',    'M3.5 10h17',  ],  rocket: [    'M13.6 5.1c2.8-1.2 5.9-.9 5.9-.9s.3 3.1-.9 5.9L13 15.7 8.3 11z',    'M8.3 11 5 11.4l-1.6 2.4 3.9.6M13 15.7l-.4 3.3-2.4 1.6-.6-3.9',    'M6.8 17.2 4.5 19.5',    ring(15.2, 8.8, 1.2),

// 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 = {  /** Resolves after `ms`. */

// 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, or never when `idle` is null (a builder the * reader has edited is theirs: the demo would undo their work). */export function useAutoplay<T extends HTMLElement>(idle: number | null = 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);

/* Workflow builder (workflow-builder.tsx): a whole app screen. A sidebar on the left, a header   along the top, and under it a dotted canvas with the workflow, its palette, toolbar and minimap;   the run's report rises from the bottom and a node's settings slide in from the right.   Colours are the tokens below, light-dark(light, dark): 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). The dark scheme is near-black greys with one blue, a red for what   needs attention and a green for Run.   Memory and motion. The stage is a layout boundary of a fixed height. What moves moves by   transform or opacity: the world of nodes (pan and zoom), the panels, the toolbar and the   minimap; the sidebar folds by a clip-path. Sizes are in px for a 1200–1440 px app and shrink   by container queries down to 320 px. */.root {  --app: #fbfbfb;  --canvas: #f6f6f6;  --surface: #ffffff;  --raised: #f1f1f1;  --field: #f7f7f7;  --line: #e7e7e7;  --line-strong: #dadada;  --ink: #141414;  --ink-2: #5b5b5b;