grr-cli 0.13.3

---
// The terminal demo: an asciinema cast of grr's real output, played by the
// self-hosted asciinema-player.
//
// The mount is lazy, armed by an IntersectionObserver below: the player
// bundle (~50 KB) and the .cast fetch only happen once this section nears
// the viewport, so the page's LCP is untouched. Astro's ClientRouter swaps
// in new DOM nodes that carry no mount marker, so `astro:page-load` re-arms
// the observer and the whole thing is idempotent.

// A `client:*` directive would NOT do this: DemoPlayer is an Astro
// component, and Astro components never render in the client. The directive
// is ignored with a build warning, which left the player mounting eagerly on
// load while this comment claimed otherwise.
//
// The player's CSS is NOT imported in the frontmatter. A frontmatter import
// -- and even a dynamic `import()` of the stylesheet -- is hoisted by Astro
// into a render-blocking <link> on every page load, for a terminal that only
// exists far below the fold: 3.8 KB of critical-path CSS for content nobody
// has scrolled to yet. Importing it with Vite's `?url` suffix yields the
// built asset's URL without registering it as a page stylesheet, so
// ensureStyles() can attach it at mount time instead.
//
// Ordering matters: the stylesheet must be applied before create() runs, or
// the cast paints once without `white-space: pre` and its newlines collapse
// into a staircase. So ensureStyles resolves on the link's load event rather
// than merely appending it.

interface Props {
  src?: string;
  duration?: string;
}

// Single source of truth: demo/demo.cast at the repo root — the file demo.yml
// regenerates on every CLI or version change. It used to be mirrored by hand
// into site/public/demo/, and the mirror rotted: the live site kept playing a
// 0.5.0-era recording while the real cast on main was three re-recordings
// newer. Importing it as an asset emits it content-hashed under _astro/, so a
// re-recorded cast is a new URL and the immutable-cache rule for built assets
// can never serve a stale one.
import demoCastUrl from '../../../demo/demo.cast?url';
// The same file as text, for the caption's pre-hydration value: the header
// line's `duration`, the exact field the player itself reads at mount. No
// hand-maintained number, so the server-rendered caption cannot drift either.
import demoCastRaw from '../../../demo/demo.cast?raw';

const castDuration = (JSON.parse(demoCastRaw.split('\n')[0]) as { duration?: number }).duration ?? 0;
const { src = demoCastUrl, duration = `${Math.round(castDuration)}s` } = Astro.props;
---

<div class="demo-shell" data-demo-player data-demo-src={src}>
  <div class="demo-bar" aria-hidden="true">
    <span class="demo-dots"><i></i><i></i><i></i></span>
    <span class="demo-title">grr — a real terminal, a real agent</span>
    <span class="demo-dims" data-demo-dims>{duration} · asciinema</span>
  </div>
  <div class="demo-stage" data-demo-stage></div>
</div>

<script>
  // The player module is ~65 KB, and a static `import` here would fetch and
  // parse it during the load window even though `arm()` below deliberately
  // waits for the shell to approach the viewport. The lazy mount is only
  // half a fix if the bundle still rides in on the critical path, so the
  // import itself is deferred to the same IntersectionObserver callback.
  type CreateFn = typeof import('asciinema-player').create;
  let player: Promise<CreateFn> | null = null;

  // `?url` hands back the built asset's path without adding it to the page's
  // stylesheet set, which is the whole point: the link below is created only
  // when the terminal is about to be scrolled into view.
  import playerCss from 'asciinema-player/dist/bundle/asciinema-player.css?url';

  const STYLE_ATTR = 'data-demo-styles';
  const ensureStyles = () =>
    new Promise<void>((resolve) => {
      const existing = document.querySelector<HTMLLinkElement>(`link[${STYLE_ATTR}]`);
      if (existing?.sheet) {
        resolve();
        return;
      }
      if (existing) {
        // Attached on a previous mount and still in flight; reuse it rather
        // than racing a second link for the same stylesheet.
        existing.addEventListener('load', () => resolve(), { once: true });
        existing.addEventListener('error', () => resolve(), { once: true });
        return;
      }
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = playerCss;
      link.setAttribute(STYLE_ATTR, '');
      // A failed stylesheet must not wedge the demo: the cast still plays,
      // it just renders without the player's own layout rules.
      link.addEventListener('load', () => resolve(), { once: true });
      link.addEventListener('error', () => resolve(), { once: true });
      document.head.appendChild(link);
    });

  const loadPlayer = () =>
    (player ??= Promise.all([ensureStyles(), import('asciinema-player')]).then(([, mod]) => mod.create));

  // The cast carries its own `duration`, and the player parses it: reading it
  // back keeps the caption tied to the file that actually plays instead of a
  // number typed into the markup. `getDuration()` is undefined until the
  // recording is parsed; the `playing` event usually signals that, but a
  // blocked autoplay can parse without ever playing, so a short bounded poll
  // covers that case too. First value wins; the rest become no-ops.
  function syncCaption(instance: ReturnType<CreateFn>, shell: HTMLElement | null) {
    if (!shell) return;
    let applied = false;
    const apply = () => {
      if (applied) return;
      const seconds = instance.getDuration();
      if (typeof seconds !== 'number' || !Number.isFinite(seconds) || seconds <= 0) return;
      applied = true;
      const dims = shell.querySelector<HTMLElement>('[data-demo-dims]');
      if (dims) dims.textContent = `${Math.round(seconds)}s · asciinema`;
    };
    instance.addEventListener('playing', apply);
    apply();
    let attempts = 0;
    const poll = () => {
      if (applied || attempts >= 20) return;
      attempts += 1;
      apply();
      if (!applied) setTimeout(poll, 100);
    };
    setTimeout(poll, 100);
  }

  // Mounts every player on the page that has not mounted yet. Driven by a
  // query rather than a parameter so the DOM types flow in from
  // querySelectorAll (this block is plain JS, not TS). The player module is
  // imported once, on first mount, not at module evaluation.
  async function mountPending() {
    const pending = Array.from(document.querySelectorAll<HTMLElement>('[data-demo-stage]')).filter(
      (stage) => stage.dataset.demoMounted !== 'true',
    );
    if (pending.length === 0) return;
    // Marked up front: a second observer callback that lands while the
    // dynamic import is in flight must not queue a duplicate mount.
    for (const stage of pending) stage.dataset.demoMounted = 'true';

    let create: CreateFn;
    try {
      create = await loadPlayer();
    } catch (error) {
      // The chunk never arrived. Leave the same readable shell a failed
      // mount produces instead of an empty black stage.
      for (const stage of pending) stage.textContent = 'demo unavailable';
      return;
    }

    for (const stage of pending) {
      const shell = stage.closest<HTMLElement>('[data-demo-player]');
      // Always set by the component above; the guard keeps a hand-copied
      // shell from fetching the old site/public path, which no longer exists.
      const src = shell?.dataset.demoSrc;
      if (!src) {
        stage.textContent = 'demo unavailable';
        continue;
      }
      try {
        const instance = create(src, stage, {
          loop: true,
          autoPlay: true,
          // The brand font — the demo renders in the same IBM 3270 the site
          // uses. (The earlier scatter was never the font: it was bare \n in
          // the cast — see scripts/generate-demo.ts.)
          terminalFontFamily: "'IBM3270', 'IBM3270 Fallback', monospace",
          // fit: width scales the 130-col terminal to the shell's width;
          // at the shell's max (~937px) the font lands at ~13.4px — the
          // same size as the site's body text — with a laptop 16:10 shape.
          fit: 'width',
          theme: 'asciinema',
        });
        syncCaption(instance, shell);
      } catch (error) {
        // A failed mount must never take the page down: the shell keeps its
        // terminal styling and the caption still reads.
        stage.textContent = 'demo unavailable';
        if (shell) shell.dataset.demoMounted = 'failed';
      }
    }
  }

  // One observer for the page, re-created on every navigation. Held in a
  // module-level binding so a ClientRouter swap disconnects the previous
  // one instead of leaving it attached to detached nodes.
  let observer: IntersectionObserver | null = null;

  function arm() {
    const shells = document.querySelectorAll<HTMLElement>('[data-demo-player]');
    if (shells.length === 0) return;

    // No IntersectionObserver (very old browsers): correctness beats
    // laziness, so mount straight away rather than leaving an empty shell.
    if (typeof IntersectionObserver === 'undefined') {
      mountPending();
      return;
    }

    if (observer) observer.disconnect();
    observer = new IntersectionObserver(
      (entries) => {
        // Nothing scrolled in yet — leave the shell untouched.
        if (!entries.some((entry) => entry.isIntersecting)) return;

        mountPending();
        // Every player on the page has mounted: stop paying for the observer.
        const pending = Array.from(document.querySelectorAll<HTMLElement>('[data-demo-stage]')).some(
          (stage) => stage.dataset.demoMounted !== 'true',
        );
        if (!pending && observer) {
          observer.disconnect();
          observer = null;
        }
      },
      // 200px of headroom: the player is ready slightly before it scrolls in.
      { rootMargin: '200px' },
    );
    shells.forEach((shell) => observer?.observe(shell));
  }

  arm();
  document.addEventListener('astro:page-load', arm);
</script>