docs: function plugin(hydro, utils, root){
    var stats = track(hydro)
    var stat = domify(statsTemplate)
    var items = stat.getElementsByTagName('li')
    var passes = items[1].getElementsByTagName('em')[0]
    var passesLink = items[1].getElementsByTagName('a')[0]
    var failures = items[2].getElementsByTagName('em')[0]
    var failuresLink = items[2].getElementsByTagName('a')[0]
    var duration = items[3].getElementsByTagName('em')[0]
    var progress = new Progress().size(40).text('%d%')
    var report = domify('<ul id=hydro-report></ul>')
    var stack = [report]
  
    root = root
      || document.getElementById('hydro')
      || document.body.appendChild(domify('<div id=hydro></div>'))
  
    items[0].appendChild(progress.el)
    root.appendChild(stat)
    root.appendChild(report)
  
    // pass toggle
    bind(passesLink, 'click', function(){
      unhide()
      classes.remove('fail', report)
      classes.toggle('pass', report)
      classes.has('pass', report) && hideSuitesWithout('test pass')
    })
  
    // failure toggle
    bind(failuresLink, 'click', function(){
      unhide()
      classes.remove('pass', report)
      classes.toggle('fail', report)
      classes.has('fail', report) && hideSuitesWithout('test fail')
    })
  
    hydro.on('pre:suite', function(suite){
      var el = fragment(
        '<li class="suite"><h1><a href="%s">%e</a></h1></li>',
        grep(suite),
        suite.title)
  
      stack[0].appendChild(el)
      stack.unshift(document.createElement('ul'))
      el.appendChild(stack[0])
    })
  
    hydro.on('post:suite', function(){
      stack.shift()
    })
  
    hydro.on('post:test', function(test){
      progress.update(stats.percent)
  
      // update stats
      text(passes, stats.passes)
      text(failures, stats.failures)
      text(duration, (stats.elapsed / 1000).toFixed(2))
  
      // test
      switch (test.status) {
        case 'passed':
          var el = fragment(
            '<li class="test pass %s"><h2>%e<span class=duration>%sms</span></h2></li>',
            test.speed || 'fast',
            test.title,
            test.time)
          break
        case 'pending':
        case 'skipped':
          var el = fragment(
            '<li class="test pass pending"><h2>%e</h2></li>',
            test.title)
          break
        case 'failed':
          var str = test.error.stack || test.error.toString()
  
          // FF / Opera do not add the message
          if (!~str.indexOf(test.error.message)) {
            str = test.error.message + '\n' + str
          }
  
          // Safari doesn't give you a stack. Let's at least provide a source line.
          if (!test.error.stack && test.error.sourceURL && test.error.line !== undefined) {
            str += "\n(" + test.error.sourceURL + ":" + test.error.line + ")"
          }
  
          var el = fragment(
            '<li class="test fail"><h2>%e</h2><pre class=error>%e</pre></li>',
            test.title,
            str)
      }
  
      // hide code
      if (test.status != 'pending') {
        var h2 = el.getElementsByTagName('h2')[0]
        var pre = fragment('<pre><code>%s</code></pre>', highlight(trim(clean(test.fn))))
        el.appendChild(pre)
        pre.style.display = 'none'
  
        bind(h2, 'dblclick', function(){
          location.search = grep(test)
        })
  
        bind(h2, 'click', function(){
          pre.style.display = 'none' == pre.style.display
            ? 'block'
            : 'none'
        })
      }
  
      stack[0].appendChild(el)
    })
  
    // grep tests
    var query = location.search.replace(/^\?/, '')
    var focus = qs.parse(query).focus
    if (focus) hydro.on('pre:test', function(test) {
      if (test.fullTitle().indexOf(focus) < 0) test.skip()
    })
  }