trmnl_preview 0.16.0 → 0.17.1

data/lib/trmnlp/testing/device_models.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+require 'faraday'
+require 'json'
+
+require_relative '../errors'
+
+module TRMNLP
+  module Testing
+    # TRMNL's device models, as `trmnlp serve`'s picker loads them, turned into what a render needs.
+    module DeviceModels
+      API_URL = 'https://trmnl.com/api'
+
+      Device = Data.define(:name, :width, :height, :bit_depth, :screen_classes, :image_size_limit) do
+        def render_params = { width:, height:, model: name, bit_depth: }
+      end
+
+      module_function
+
+      def names = models.map { it['name'] }
+
+      # A model name, or a Hash of width:, height:, bit_depth: and optionally screen_classes: for a custom screen.
+      def find(device, orientation: :landscape, palette: nil)
+        return custom(device) if device.is_a?(Hash)
+
+        model = models.find { it['name'] == device.to_s } ||
+                raise(TestingError, "Unknown device #{device.inspect}; known: #{names.join(', ')}")
+        portrait = orientation.to_s == 'portrait'
+        width, height = portrait ? model.values_at('height', 'width') : model.values_at('width', 'height')
+        chosen = palette_for(model, palette)
+        Device.new(name: model['name'], width:, height:, bit_depth: bit_depth(model, chosen),
+                   screen_classes: screen_classes(model, chosen, portrait), image_size_limit: model['image_size_limit'])
+      end
+
+      # The picker's classes: palette, device, size, then portrait.
+      def screen_classes(model, palette, portrait)
+        css = model.dig('css', 'classes') || {}
+        ['screen', palette&.fetch('framework_class'), css['device'], css['size'],
+         ('screen--portrait' if portrait)].compact.join(' ')
+      end
+
+      def palette_for(model, id)
+        candidates = palettes.select { model['palette_ids'].to_a.include?(it['id']) }
+        return candidates.find { it['id'] == id.to_s } || raise(TestingError, unknown_palette(model, id)) if id
+
+        candidates.find { it['grays'] == 2**model['bit_depth'] } || candidates.first
+      end
+
+      # A palette of fewer grays draws the PNG at that depth, as the device then does.
+      def bit_depth(model, palette)
+        grays = palette && palette['grays']
+        grays ? [Math.log2(grays).ceil, model['bit_depth']].min : model['bit_depth']
+      end
+
+      def unknown_palette(model, id)
+        "Model #{model['name']} has no palette #{id.inspect}; it has #{model['palette_ids'].to_a.join(', ')}"
+      end
+
+      def custom(device)
+        device = device.transform_keys(&:to_sym)
+        Device.new(name: device.fetch(:model, 'custom'), width: device.fetch(:width), height: device.fetch(:height),
+                   bit_depth: device.fetch(:bit_depth, 1), screen_classes: device[:screen_classes],
+                   image_size_limit: device[:image_size_limit])
+      end
+
+      def models = @models ||= fetch('models')
+      def palettes = @palettes ||= fetch('palettes')
+
+      def fetch(resource)
+        response = Faraday.get("#{API_URL}/#{resource}")
+        raise TestingError, "Could not load TRMNL's #{resource} (HTTP #{response.status})" unless response.success?
+
+        body = JSON.parse(response.body)
+        body.is_a?(Hash) ? body.fetch('data') : body
+      rescue Faraday::Error => e
+        raise TestingError, "Could not load TRMNL's #{resource}: #{e.message}. Pass a device Hash to test offline."
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/frozen_clock.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+require 'rbconfig'
+
+require_relative '../errors'
+
+module TRMNLP
+  module Testing
+    # Starts every clock a run reads at the test's time: Ruby's own (Liquid's `now`, the trmnl namespace)
+    # and, through libfaketime, the transform process's, whatever its language.
+    module FrozenClock
+      LIBRARY_ENV_KEY = 'TRMNLP_LIBFAKETIME'
+      LIBRARY_GLOBS = {
+        darwin: %w[/opt/homebrew/opt/libfaketime/lib/faketime/libfaketime.1.dylib
+                   /usr/local/opt/libfaketime/lib/faketime/libfaketime.1.dylib],
+        linux: %w[/usr/lib/*/faketime/libfaketime.so.1 /usr/lib/faketime/libfaketime.so.1
+                  /usr/local/lib/faketime/libfaketime.so.1]
+      }.freeze
+      INSTALL_HINTS = { darwin: 'brew install libfaketime', linux: 'apt-get install libfaketime' }.freeze
+      # macOS drops DYLD_* variables for the binaries System Integrity Protection guards.
+      PROTECTED_PREFIXES = %w[/usr/bin/ /bin/ /sbin/ /usr/sbin/ /System/].freeze
+
+      # Answers Time.now with the frozen time on the current thread while it is set.
+      module FrozenNow
+        def now(...) = Thread.current[:trmnlp_frozen_now]&.dup || super
+      end
+      Time.singleton_class.prepend(FrozenNow)
+
+      module_function
+
+      def around(time)
+        previous = Thread.current[:trmnlp_frozen_now]
+        Thread.current[:trmnlp_frozen_now] = time
+        yield
+      ensure
+        Thread.current[:trmnlp_frozen_now] = previous
+      end
+
+      # The clock reads its time from clock_file on every call, so #move can set it forward mid-run.
+      def environment(time, interpreter:, clock_file:)
+        os = operating_system
+        library = library_path(os)
+        refuse_protected(interpreter) if os == :darwin
+
+        write(clock_file, time)
+        preload_variables(os, library).merge('FAKETIME_TIMESTAMP_FILE' => clock_file.to_s, 'FAKETIME_NO_CACHE' => '1',
+                                             'FAKETIME_DONT_FAKE_MONOTONIC' => '1', 'FAKETIME_DONT_RESET' => '1',
+                                             'TZ' => 'UTC')
+      end
+
+      def write(clock_file, time) = File.write(clock_file, "#{time.utc.strftime('@%Y-%m-%d %H:%M:%S')}\n")
+
+      def preload_variables(os, library)
+        return { 'LD_PRELOAD' => library } if os == :linux
+
+        { 'DYLD_INSERT_LIBRARIES' => library, 'DYLD_FORCE_FLAT_NAMESPACE' => '1' }
+      end
+
+      def operating_system
+        case RbConfig::CONFIG['host_os']
+        when /darwin/ then :darwin
+        when /linux/ then :linux
+        else raise TestingError, 'A frozen clock needs libfaketime, which runs on macOS and Linux only'
+        end
+      end
+
+      def library_path(os)
+        return ENV[LIBRARY_ENV_KEY] if ENV[LIBRARY_ENV_KEY]
+
+        found = LIBRARY_GLOBS.fetch(os).flat_map { Dir.glob(it) }.first
+        return found if found
+
+        raise TestingError,
+              "A frozen clock needs libfaketime: #{INSTALL_HINTS.fetch(os)} (or set #{LIBRARY_ENV_KEY})"
+      end
+
+      def refuse_protected(interpreter)
+        real_path = File.realpath(interpreter)
+        return unless PROTECTED_PREFIXES.any? { real_path.start_with?(it) }
+
+        raise TestingError,
+              "macOS will not freeze the clock for #{real_path}; install the interpreter with brew or mise"
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/inline_stylesheets.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require 'faraday'
+require 'uri'
+
+module TRMNLP
+  module Testing
+    # Puts a page's linked stylesheets in the page itself. A page written with document.write, as TRMNL and
+    # trmnlp write theirs, runs its scripts without waiting for linked stylesheets, so a script that
+    # measures text (a layout solver, say) raced them and drew a different board from run to run.
+    module InlineStylesheets
+      LINK = /<link\b[^>]*\brel=["']stylesheet["'][^>]*>/i
+      HREF = /\bhref=["'](https?:[^"']+)["']/i
+      CSS_URL = /url\(\s*(['"]?)(?!data:|https?:|#)([^'")]+)\1\s*\)/i
+
+      module_function
+
+      def call(html)
+        html.gsub(LINK) do |link|
+          url = link[HREF, 1]
+          css = url && stylesheet(url)
+          css ? "<style data-href=\"#{url}\">#{css}</style>" : link
+        end
+      end
+
+      # nil when the stylesheet cannot be fetched: the page keeps its link.
+      def stylesheet(url)
+        cache.fetch(url) do
+          response = Faraday.get(url)
+          cache[url] = response.success? ? absolute_urls(response.body, url) : nil
+        end
+      rescue Faraday::Error
+        nil
+      end
+
+      def absolute_urls(css, base) = css.gsub(CSS_URL) { "url(\"#{URI.join(base, Regexp.last_match(2))}\")" }
+
+      def cache = @cache ||= {}
+    end
+  end
+end

data/lib/trmnlp/testing/memory_sampler.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module TRMNLP
+  module Testing
+    # The peak memory of a running process, read every few milliseconds until it exits: VmHWM on Linux
+    # (the kernel's own high-water mark), the resident size from ps on macOS (the highest one seen).
+    class MemorySampler
+      INTERVAL_SECONDS = 0.01
+
+      def self.start(pid) = new(pid).tap(&:start)
+
+      def initialize(pid)
+        @pid = pid
+        @peak_kb = nil
+      end
+
+      def start
+        @thread = Thread.new do
+          while (kb = read_kb)
+            @peak_kb = [@peak_kb.to_i, kb].max
+            sleep INTERVAL_SECONDS
+          end
+        end
+      end
+
+      def peak_mb
+        @thread&.join
+        @peak_kb && (@peak_kb / 1024.0).round(1)
+      end
+
+      private
+
+      # nil once the process is gone.
+      def read_kb
+        return File.read("/proc/#{@pid}/status")[/VmHWM:\s+(\d+)/, 1]&.to_i if File.exist?('/proc/self/status')
+
+        kb = IO.popen(['ps', '-o', 'rss=', '-p', @pid.to_s], err: File::NULL, &:read).strip
+        kb.empty? ? nil : kb.to_i
+      rescue SystemCallError
+        nil
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/mock_proxy.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+require 'openssl'
+require 'socket'
+
+module TRMNLP
+  module Testing
+    # The HTTP(S) proxy a transform process runs behind, answering from a MockTable. HTTPS is opened with
+    # certificates from CertificateAuthority, so mocks work for every language and library that honors
+    # the proxy variables. One request per connection, then the connection closes.
+    class MockProxy
+      def initialize(table:, authority:)
+        @table = table
+        @authority = authority
+      end
+
+      def self.open(table:, authority:)
+        proxy = new(table:, authority:).start
+        yield proxy
+      ensure
+        proxy&.stop
+      end
+
+      def start
+        @server = TCPServer.new('127.0.0.1', 0)
+        @thread = Thread.new { loop { Thread.new(@server.accept) { serve(it) } } }
+        self
+      end
+
+      def stop
+        @thread&.kill
+        @server&.close
+      end
+
+      def environment
+        proxy = "http://127.0.0.1:#{@server.addr[1]}"
+        { 'HTTP_PROXY' => proxy, 'HTTPS_PROXY' => proxy, 'http_proxy' => proxy, 'https_proxy' => proxy,
+          'NO_PROXY' => '', 'no_proxy' => '', 'NODE_USE_ENV_PROXY' => '1' }.merge(@authority.environment)
+      end
+
+      private
+
+      def serve(socket)
+        verb, target = socket.gets.to_s.split
+        return socket.close unless verb
+
+        verb == 'CONNECT' ? serve_tunnel(socket, target) : serve_request(socket, verb, target, read_headers(socket))
+      rescue IOError, SystemCallError, OpenSSL::SSL::SSLError
+        nil
+      ensure
+        socket.close unless socket.closed?
+      end
+
+      def serve_tunnel(socket, target)
+        read_headers(socket)
+        host, port = target.split(':')
+        socket.write("HTTP/1.1 200 Connection Established\r\n\r\n")
+        tls = OpenSSL::SSL::SSLSocket.new(socket, @authority.ssl_context_for(host))
+        tls.accept
+        verb, path = tls.gets.to_s.split
+        origin = port == '443' ? "https://#{host}" : "https://#{host}:#{port}"
+        serve_request(tls, verb, origin + path.to_s, read_headers(tls))
+        tls.close
+      end
+
+      def serve_request(io, verb, url, headers)
+        body = read_body(io, headers)
+        response = @table.answer(verb, url, headers:, body:, via: :transform)
+        return io.close unless response
+        return if hung_up?(io)
+
+        write_response(io, response)
+        response.record[:delivered] = true
+      rescue IOError, SystemCallError, OpenSSL::SSL::SSLError
+        nil
+      end
+
+      def write_response(io, response)
+        body = response.body.b
+        io.write(head(response, body.bytesize))
+        io.flush
+        sleep(response.body_delay) if response.body_delay
+        io.write(body)
+      end
+
+      # A transform that gave up (its own timeout, an abort signal) has closed the connection by now.
+      def hung_up?(io)
+        socket = io.respond_to?(:to_io) ? io.to_io : io
+        return false unless socket.wait_readable(0)
+
+        socket.recv_nonblock(1, Socket::MSG_PEEK, exception: false).then { it.nil? || it.empty? }
+      end
+
+      def read_headers(io)
+        headers = {}
+        while (line = io.gets) && !line.strip.empty?
+          name, value = line.split(':', 2)
+          headers[name.strip.downcase] = value.to_s.strip
+        end
+        headers
+      end
+
+      def read_body(io, headers)
+        return io.read(headers['content-length'].to_i) if headers['content-length']
+        return nil unless headers['transfer-encoding'].to_s.include?('chunked')
+
+        chunks = +''
+        while (size = io.gets.to_s.to_i(16)).positive?
+          chunks << io.read(size)
+          io.gets
+        end
+        io.gets
+        chunks
+      end
+
+      def head(response, length)
+        lines = response.headers.reject { |name, _| %w[content-length connection].include?(name.downcase) }
+                        .map { |name, value| "#{name}: #{value}" }
+        "HTTP/1.1 #{response.status} Mocked\r\n#{lines.join("\r\n")}\r\ncontent-length: #{length}\r\n" \
+          "connection: close\r\n\r\n"
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/mock_table.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+require 'json'
+
+module TRMNLP
+  module Testing
+    # A test's canned answers for the requests a run makes, and the record of those requests. Polling asks it
+    # through #call, standing in for OutboundRequest; the transform's requests reach it through MockProxy.
+    #
+    # Keys are urls: exact, with `*` wildcards, or a Regexp; a key may start with a method ("POST https://...").
+    # A value is an answer ({ json:, body:, status:, headers:, delay:, body_delay:, advance_clock:, error: :reset }),
+    # in seconds where it is a time; a String body,
+    # a lambda that takes the request and returns an answer, or an Array of answers used in order.
+    class MockTable
+      Response = Struct.new(:status, :headers, :body, :body_delay, :record)
+      UNMOCKED_STATUS = 599
+      METHOD_PREFIX = /\A(GET|POST|PUT|PATCH|DELETE|HEAD) /
+
+      attr_reader :requests
+
+      def initialize(mocks, on_advance_clock: nil)
+        @on_advance_clock = on_advance_clock
+        @mocks = (mocks || {}).map { |key, value| { key:, answers: value.is_a?(Array) ? value.dup : [value] } }
+        @requests = []
+        @lock = Mutex.new
+      end
+
+      # [response, failure], as OutboundRequest#call answers.
+      def call(verb, url, headers:, body:)
+        response = answer(verb, url, headers:, body:, via: :polling)
+        response&.record&.[]=(:delivered, true)
+        response ? [response, nil] : [nil, 'the connection was reset']
+      end
+
+      # Once the run is over: a request whose answer never reached the transform was abandoned by it.
+      def finish
+        @lock.synchronize do
+          @requests.each { |request| request[:aborted] = !request.delete(:delivered) && !request[:reset] }
+        end
+      end
+
+      # nil when the mock resets the connection. The request is recorded before it is answered, so one the
+      # transform abandons during a delay is still there; MockProxy marks it aborted.
+      def answer(verb, url, headers: {}, body: nil, via: :polling)
+        request = { method: verb.upcase, url:, headers:, body:, via: }
+        answer = claim(request)
+        entry = record(request.merge(mocked: !answer.nil?, status: nil, aborted: false))
+        response = answer.nil? ? unmocked(request) : respond(answer, request)
+        response&.record = entry
+        entry[:status] = response&.status
+        entry[:reset] = true if answer && response.nil?
+        response
+      end
+
+      private
+
+      def claim(request)
+        @lock.synchronize do
+          mock = @mocks.find { matches?(it[:key], request) }
+          mock && (mock[:answers].size > 1 ? mock[:answers].shift : mock[:answers].first)
+        end
+      end
+
+      def respond(answer, request)
+        answer = answer.call(request) if answer.respond_to?(:call)
+        answer = { body: answer } if answer.is_a?(String)
+        sleep(answer[:delay]) if answer[:delay]
+        @on_advance_clock&.call(answer[:advance_clock]) if answer[:advance_clock]
+        answer[:error] == :reset ? nil : build(answer)
+      end
+
+      def build(answer)
+        json = answer.key?(:json)
+        body = json ? JSON.generate(answer[:json]) : answer[:body].to_s
+        type = json ? 'application/json' : 'text/plain; charset=utf-8'
+        Response.new(answer[:status] || 200, { 'content-type' => type }.merge(answer[:headers] || {}), body,
+                     answer[:body_delay])
+      end
+
+      def unmocked(request)
+        Response.new(UNMOCKED_STATUS, { 'content-type' => 'text/plain' },
+                     "trmnlp test: no mock for #{request[:method]} #{request[:url]}")
+      end
+
+      def matches?(key, request)
+        return key.match?(request[:url]) if key.is_a?(Regexp)
+
+        verb = key[METHOD_PREFIX, 1]
+        return false if verb && verb != request[:method]
+
+        pattern = key.sub(METHOD_PREFIX, '')
+        target = pattern.include?('?') ? request[:url] : request[:url].split('?', 2).first
+        /\A#{Regexp.escape(pattern).gsub('\*', '.*')}\z/.match?(target)
+      end
+
+      def record(entry)
+        @lock.synchronize { @requests << entry }
+        entry
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/node_version.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require 'open3'
+
+require_relative '../errors'
+
+module TRMNLP
+  module Testing
+    # Node sends fetch through HTTPS_PROXY only from version 24 (NODE_USE_ENV_PROXY); an older one would
+    # skip MockProxy and reach the real network, so a Node transform is refused there rather than run.
+    module NodeVersion
+      MINIMUM_MAJOR = 24
+
+      module_function
+
+      def check!(interpreter)
+        version = checked[interpreter] ||= Open3.capture2(interpreter, '--version').first.strip
+        return if version[/\Av?(\d+)/, 1].to_i >= MINIMUM_MAJOR
+
+        raise TestingError, "Mocking a Node transform's requests needs Node #{MINIMUM_MAJOR} or newer, " \
+                            "whose fetch honors HTTPS_PROXY; #{interpreter} is #{version}"
+      end
+
+      def checked = @checked ||= {}
+    end
+  end
+end

data/lib/trmnlp/testing/plugin.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+require 'time'
+
+require_relative 'device_models'
+require_relative 'report'
+require_relative 'run'
+require_relative 'screen'
+
+module TRMNLP
+  module Testing
+    # What a test calls as `trmnl`: the plugin in the current directory, rendered or transformed with the test's
+    # inputs. Every input is optional: now:, custom_fields:, variables:, state:, previous_merge_variables:,
+    # data: (skips polling), mocks:, transform: false.
+    class Plugin
+      # Records what goes wrong on the page, for Screen#problems; it runs before anything else in it.
+      PROBLEMS_SCRIPT = <<~JS.gsub(/\s+/, ' ').strip
+        (() => {
+          const problems = window.__trmnlpProblems = [];
+          window.addEventListener('error', (event) => {
+            const source = event.target && event.target !== window && (event.target.src || event.target.href);
+            problems.push(source ? `failed to load ${source}` :
+              `${event.message}${event.filename ? ` (${event.filename}:${event.lineno})` : ''}`);
+          }, true);
+          window.addEventListener('unhandledrejection', (event) =>
+            problems.push(`unhandled rejection: ${(event.reason && event.reason.message) || event.reason}`));
+          const consoleError = console.error;
+          console.error = (...parts) => { problems.push(`console.error: ${parts.join(' ')}`); consoleError(...parts); };
+        })();
+      JS
+      PAGE_CLOCK_SCRIPT = '(() => { const offset = %d; const RealDate = Date; ' \
+                          'class TestDate extends RealDate { constructor(...args) { args.length ? super(...args) : ' \
+                          'super(RealDate.now() + offset); } static now() { return RealDate.now() + offset; } } ' \
+                          'window.Date = TestDate; })();'
+
+      def initialize(dir, browser:, authority:)
+        @dir = dir
+        @browser = browser
+        @authority = authority
+      end
+
+      # The plugin in another folder, rendered in the same browser: a built copy, say.
+      def plugin(dir) = self.class.new(File.expand_path(dir), browser: @browser, authority: @authority)
+
+      def transform(device: 'og_plus', orientation: :landscape, now: nil, **)
+        device = DeviceModels.find(device, orientation:)
+        run(now, **).transform(device: device.render_params).tap { Report.current&.record_run(it) }
+      end
+
+      # A render also takes head: (markup for the page's <head>, before the Framework loads), wait_for: (a
+      # JavaScript expression the page must reach before it is captured) and wait_for_timeout: (seconds).
+      # rubocop:disable-next Metrics/ParameterLists -- one keyword per choice a render offers
+      def render(view: 'full', device: 'og_plus', orientation: :landscape, palette: nil, dark_mode: false, theme: nil,
+                 now: nil, head: nil, wait_for: nil, wait_for_timeout: 5, fresh_browser: false, **)
+        device = DeviceModels.find(device, orientation:, palette:)
+        classes = [device.screen_classes, ('screen--dark-mode' if dark_mode)].compact.join(' ')
+        result = run(now, **).render(view:, device: device.render_params, screen_classes: classes, theme:)
+        html = with_problems_trap(with_head(with_page_clock(result.html, now), head))
+        browser = fresh_browser ? @browser.fresh : @browser
+        Report.current&.record_run(result)
+        Screen.new(html:, device:, view:, browser:, result:, wait_for:, wait_for_timeout:)
+              .tap { Report.current&.record_screen(it) }
+      end
+
+      private
+
+      def run(now, **) = Run.new(plugin: @dir, authority: @authority, now: time(now), **)
+
+      def time(value)
+        case value
+        when nil then nil
+        when Time then value.utc
+        when Date then value.to_time.utc
+        else Time.iso8601(value.to_s).utc
+        end
+      end
+
+      def with_problems_trap(html) = html.sub(/<head>/i) { "<head><script>#{PROBLEMS_SCRIPT}</script>" }
+
+      def with_head(html, head) = head ? html.sub(%r{</head>}i) { "#{head}</head>" } : html
+
+      # Scripts in the markup see the test's time too; the page's clock then runs on from it.
+      def with_page_clock(html, now)
+        return html unless now
+
+        offset = ((time(now).to_f - Time.now.to_f) * 1000).round
+        html.sub(/<head>/i) { "<head><script>#{format(PAGE_CLOCK_SCRIPT, offset)}</script>" }
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/report.html.erb

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>trmnlp test report</title>
+<style>
+  :root { --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --pass: #1a7f37; --fail: #cf222e; --pending: #9a6700; --box: #0969da; }
+  body { font: 14px/1.5 system-ui, sans-serif; color: var(--ink); margin: 0 auto; padding: 24px 16px; max-width: 1400px; }
+  header { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
+  h1 { font-size: 20px; margin: 0; }
+  .counts span { margin-right: 12px; }
+  .passed { color: var(--pass); } .failed { color: var(--fail); } .pending { color: var(--pending); }
+  label { color: var(--muted); cursor: pointer; }
+  label::before { content: '☐ '; }
+  #outlines:checked ~ header label[for=outlines]::before, #failures:checked ~ header label[for=failures]::before { content: '☑ '; }
+  section { border-bottom: 1px solid var(--line); padding: 16px 0; }
+  section h2 { font-size: 15px; margin: 0 0 4px; }
+  .location, .run { color: var(--muted); font-size: 12px; }
+  pre { background: #f6f8fa; padding: 8px; overflow-x: auto; white-space: pre-wrap; }
+  .screens { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
+  figure { margin: 0; max-width: 100%; }
+  .frame { position: relative; border: 1px solid var(--line); max-width: min(100%, 640px); }
+  .frame img, .frame svg { display: block; width: 100%; height: auto; }
+  .frame svg { position: absolute; inset: 0; display: none; }
+  #outlines:checked ~ main .frame svg { display: block; }
+  #failures:checked ~ main section:not(.failed-example) { display: none; }
+  rect { fill: none; stroke: var(--box); stroke-width: 1; vector-effect: non-scaling-stroke; }
+  figcaption { color: var(--muted); font-size: 12px; margin-top: 4px; }
+  .problems { color: var(--fail); font-size: 12px; margin: 4px 0 0; padding-left: 16px; }
+  table { border-collapse: collapse; font-size: 12px; margin-top: 4px; }
+  td { border-top: 1px solid var(--line); padding: 2px 8px 2px 0; }
+</style>
+</head>
+<body>
+<input type="checkbox" id="outlines" hidden>
+<input type="checkbox" id="failures" hidden>
+<header>
+  <h1>trmnlp test</h1>
+  <div class="counts">
+    <span class="passed"><%= count('passed') %> passed</span>
+    <span class="failed"><%= count('failed') %> failed</span>
+    <span class="pending"><%= count('pending') %> pending</span>
+    <span><%= examples.sum { it[:screens].size } %> screens</span>
+  </div>
+  <label for="outlines">outline every drawn box</label>
+  <label for="failures">failures only</label>
+</header>
+<main>
+<% examples.each do |example| %>
+  <section class="<%= 'failed-example' if example[:status] == 'failed' %>">
+    <h2 class="<%= example[:status] %>"><%= h(example[:description]) %></h2>
+    <div class="location"><%= h(example[:location]) %> · <%= example[:status] %></div>
+    <% if example[:message] %><pre><%= h(example[:message]) %></pre><% end %>
+    <% example[:runs].each do |run| %>
+      <div class="run">transform: <%= run[:duration_ms] %> ms, <%= run[:max_memory_mb] || '?' %> MB<%= ", error: #{h(run[:error])}" if run[:error] %></div>
+      <% if run[:requests].any? %>
+        <table><% run[:requests].each do |request| %>
+          <tr><td><%= request[:via] %></td><td><%= request[:method] %></td><td><%= h(request[:url]) %></td><td><%= request[:status] %><%= ' aborted' if request[:aborted] %></td></tr>
+        <% end %></table>
+      <% end %>
+    <% end %>
+    <div class="screens">
+    <% example[:screens].each do |screen| %>
+      <figure>
+        <div class="frame">
+          <img src="<%= screen[:image] %>" alt="<%= h(screen[:label]) %>" width="<%= screen[:width] %>" height="<%= screen[:height] %>">
+          <svg viewBox="0 0 <%= screen[:width] %> <%= screen[:height] %>"><% screen[:outlines].each do |box| %><rect x="<%= box['x'] %>" y="<%= box['y'] %>" width="<%= box['w'] %>" height="<%= box['h'] %>"><title><%= h("#{box['tag']}.#{box['class']}") %></title></rect><% end %></svg>
+        </div>
+        <figcaption><%= h(screen[:label]) %></figcaption>
+        <% if screen[:problems].any? %><ul class="problems"><% screen[:problems].each do |problem| %><li><%= h(problem) %></li><% end %></ul><% end %>
+      </figure>
+    <% end %>
+    </div>
+  </section>
+<% end %>
+</main>
+</body>
+</html>