breather

    on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
        // terminal and desktop both draw a Client; vscode and mobile do not
        if (
            (e.surface !== 'terminal' && e.surface !== 'desktop') ||
            !config.enabled ||
            !e.props.isWorking ||
            e.props.hasSurvey
        )
            return next(e);
        const now = await $.clock.now();
        // a turn the hook saw start; else one that is working anyway (started before the plugin loaded)
        const running =
            turn ??
            (turn = {
                startedAt: now,
                style: pickStyle(config.style, lastStyle),
            });
        const elapsedMs = now - running.startedAt;
        if (elapsedMs < config.delay * 1000) return next(e);
        if (e.surface === 'desktop') {
            // the desktop refuses a Client module (10 s, csp); an Svg's own SMIL clock needs no host tick
            const { Box, Svg } = $.ui.resolve(e);
            const exercise = exerciseOf(config.exercise);
            return (
                <Box flexDirection='column'>
                    <Svg
                        alt={`breathing guide: ${exercise.name}, ${exercise.pattern}`}
                        height={124}
                        isInteractive
                        key={`orb:${running.startedAt}:${config.exercise}`}
                        source={orbSvg(exercise)}
                    />
                    {await next(e)}
                </Box>
            );
        }
        const { Box, Client } = $.ui.resolve(e);
        const rows = Math.min(BAND_ROWS, e.props.maxRows);
        if (rows < 1) return next(e);
        // the key names the turn: one instance per turn, remounted when the settings change mid-turn
        const key = `breathe:${running.startedAt}:${config.exercise}:${running.style}`;
        return (
            <Box flexDirection='column'>
                <Client
                    height={rows}
                    key={key}
                    module='./breathe.tsx'
                    props={{
                        elapsedMs,
                        exercise: config.exercise,
                        style: running.style,
                    }}
                    width={e.viewport?.columns ?? 80}
                />
                {await next(e)}
            </Box>
        );
    });