anchor.diff:        param.wasIndex = index;
       }
       refresh();
  -  };
  -
  -  //-----------------------------------------
  -  // refresh diff? [x]
  -  //-----------------------------------------
  -
  -  const refreshDiffCheckBox = () => {
  -    diffCheckBox()
  -      .attr('checked', param.wasIndex !== param.nowIndex)
  -      .unbind('click')
  -      .bind('click', () => show(param.nowIndex));
  -  };
  -
  -  const diffCheckBox = () => $('#diff-checkbox');
  -
  -  const inDiffMode = () => diffCheckBox().is(':checked');
  -
  -  $('#diff-checkbox-title').click(() => {
  -    diffCheckBox().attr('checked', !diffCheckBox().is(':checked'));
  -    show(param.nowIndex);
  -  });
  -
  -  //-----------------------------------------
  -  // refresh avatar navigator
  -  //    [<]avatar[>]
  -  //-----------------------------------------
  -
  -  const refreshAvatarNavigator = () => {
  -    if (param.avatarName === '') {
  -      $('#avatar-navigator').hide();
  -    } else {
  -      refreshAvatar($('#prev-avatar'), param.prevAvatarId);
  -      $('#review-avatar-image-box').html(makeAvatarImageHtml());
  -      refreshAvatar($('#next-avatar'), param.nextAvatarId);
  -    }
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeAvatarImageHtml = () => {
  -    return `<img class="avatar-image" src="/avatar/image/${param.avatarIndex}"/>`;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const refreshAvatar = (button, id) => {
  -    const on = (id !== '');
  -    button
  -      .attr('disabled', !on)
  -      .unbind('click')
  -      .bind('click', () => {
  -        param.id = id;
  -        show(1);
  -      });
  -  };
  -
  -  //-----------------------------------------
  -  // refresh traffic-light navigator
  -  //    [<]index[>] traffic-lights...
  -  //-----------------------------------------
  -
  -  const refreshIndexNavigator = () => {
  -    refreshIndex($('#prev-index'), prevEventIndex(param.nowIndex));
  -    $('#review-index-box').html(makeIndexHtml());
  -    refreshIndex($('#next-index'), nextEventIndex(param.nowIndex));
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeIndexHtml = () => {
  -    const index = param.nowIndex;
  -    const colour = param.events[index].colour;
  -    return `<div id="index-number" class="${colour}">${index}</div>`;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const refreshIndex = (button, index) => {
  -    const on = (index !== null);
  -    button
  -      .attr('disabled', !on)
  -      .unbind('click')
  -      .bind('click', () => show(index));
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const prevEventIndex = (n) => {
  -    // index==0 is the kata creation event
  -    const firstIndex = 1;
  -    if (n === null || n === firstIndex) {
  -      return null; // signals disabled-button in refreshIndex()
  -    } else {
  -      return n - 1; // Note: assumes only test events
  -    }
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const nextEventIndex = (n) => {
  -    const lastIndex = param.events.length - 1;
  -    if (n === null || n === lastIndex) {
  -      return null; // signals disabled-button in refreshIndex()
  -    } else {
  -      return n + 1; // Note: assumes only test events
  -    }
  -  };
  -
  -  //-----------------------------------------
  -  // refresh traffic-lights
  -  //-----------------------------------------
  -
  -  const refreshTrafficLights = () => {
  -    const trafficLights = $('#review-traffic-lights');
  -    trafficLights.html(makeTrafficLightsHtml());
  -    $.each($('.diff-traffic-light', trafficLights), (_, light) => {
  -      const $light = $(light);
  -      const nowIndex = $light.data('index');
  -      $light.click(() => show(nowIndex));
  -      // Show full tool-tip even if diff[x] is off
  -      // otherwise you end up with odd tool-tip such as
  -      //    (RED) 12 -> (RED) 12
  -      const wasIndex = prevEventIndex(nowIndex);
  -      cd.setupTrafficLightTip($light, param.version, param.id, param.avatarIndex, wasIndex, nowIndex);
  -    });
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeTrafficLightsHtml = () => {
  -    let html = '';
  -    let wasIndex = 0;
  -    $.each(param.events, (_n, event) => {
  -      const colour = event.colour;
  -      if (colour !== '') {
  -        const nowIndex = event.index;
  -        const barOrGap = (param.nowIndex === nowIndex) ? 'bar' : 'gap';
  -        html += makeTrafficLightHtml(colour, wasIndex, nowIndex, barOrGap);
  -        wasIndex = nowIndex;
  -      }
  -    });
  -    return html;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeTrafficLightHtml = (colour, wasIndex, nowIndex, barOrGap) => {
  -    return [
  -      "<div class='diff-traffic-light'",
  -        ` data-id='${param.id}'`,
  -        ` data-colour='${colour}'`,
  -        ` data-index='${nowIndex}'>`,
  -        `<img class='with-bar-gap' src='/traffic-light/image/${colour}_${barOrGap}.png'/>`,
  -      '</div>'
  -    ].join('');
  -  };
  -
  -  //-----------------------------------------
  -  // refresh files
  -  //-----------------------------------------
  -
  -  const refreshFiles = () => {
  -    const diffContent = $('#diff-content');
  -    const diffFilenames = $('#diff-filenames');
  -    diffFilenames.html(makeDiffFilenames(param.diffs));
  -    resetFilenameAddedDeletedLineCountHandlers();
  -    diffContent.html(makeDiffContent(param.diffs));
  -    buildDiffFilenameHandlers(param.idsAndSectionCounts);
  -    showFile(param.currentFilenameId);
  -  };
  -
  -  const showFile = (filenameId) => {
  -    const filename =  $(`#radio_${filenameId}`);
  -    filename.click()
  -            .scrollIntoView({ direction: 'vertical' });
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffFilenames = (diffs) => {
  -    let html = '';
  -    $.each(sortedDiffs(diffs), (_, diff) => {
  -      html += '<div class="diff-filename-box">';
  -      html += makeDiffDeletedCount(diff);
  -      html += makeDiffAddedCount(diff);
  -      html += makeDiffFilename(diff);
  -      html += '</div>';
  -    });
  -    return html;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffFilename = (diff) => {
  -    return outerHTML($('<div>', {
  -      'class': 'filename',
  -      'data-filename': diff.filename,
  -      'id': `radio_${diff.id}`,
  -      'text': diff.filename
  -    }));
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffDeletedCount = (diff) => {
  -    return makeDiffCount(diff, 'deleted_line_count', 'deleted');
  -  };
  -
  -  const makeDiffAddedCount = (diff) => {
  -    return makeDiffCount(diff, 'added_line_count', 'added');
  -  };
  -
  -  const makeDiffCount = (diff, propertyName, cssName) => {
  -    let html = '';
  -    if (!diffCheckBox().is(':checked')) {
  -      return html;
  -    }
  -    const div = $('<div>', {
  -      'class': `diff-${cssName}-line-count button`,
  -      'data-filename': diff.filename
  -    });
  -    const count = diff[propertyName];
  -    if (count !== 0) {
  -      div.append(count);
  -    }
  -    return outerHTML(div);
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const outerHTML = (element) => {
  -    return element.get(0).outerHTML;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const sortedDiffs = (diffs) => {
  -    let filenames = [];
  -    $.each(diffs, (_, diff) => {
  -      filenames.push(diff.filename);
  -    });
  -    // ensure filenames appear in the same order as kata/edit page
  -    const sorted = cd.sortedFilenames(filenames);
  -    const diffFor = (filename) => {
  -      for (let i = 0; i !== diffs.length; i++) {
  -        if (diffs[i].filename === filename) {
  -          return diffs[i];
  -        }
  -      }
  -    };
  -    let result = [];
  -    $.each(sorted, (_, filename) => {
  -      result.push(diffFor(filename));
  -    });
  -    return result;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const resetFilenameAddedDeletedLineCountHandlers = () => {
  -
  -    const display = (node, name, value) => {
  -      // only [+][-] counts for current filename are live
  -      if ($(node).attr('disabled') !== 'disabled') {
  -        const filename = $(node).data('filename');
  -        const selector = `[id="${filename}_diff_div"] ${name}`;
  -        $(selector).css('display', value);
  -        if (value === 'none') {
  -          $(node).removeClass('on');
  -          $(node).addClass('off');
  -        } else {
  -          $(node).removeClass('off');
  -          $(node).addClass('on');
  -        }
  -      }
  -    };
  -
  -    $('.diff-deleted-line-count')
  -      .clickToggle(
  -        function() { display(this, 'deleted', 'none' ); },
  -        function() { display(this, 'deleted', 'block'); }
  -      );
  -
  -    $('.diff-added-line-count')
  -      .clickToggle(
  -        function() { display(this, 'added', 'none' ); },
  -        function() { display(this, 'added', 'block'); }
  -      );
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const buildDiffFilenameHandlers = (diffs) => {
  -    // Builds click handlers for all filenames for a given
  -    // [ kata-id, was-index, now-index] tuple.
  -    // When you open a new filename it auto-scrolls its first diff-chunk.
  -    // When you reclick a filename it auto-scrolls to its *next* diff-chunk.
  -    const getFilename = (node) => $.trim(node.text());
  -    const id = (name) => $(`[id="${name}"]`);
  -    const diffFileContentFor = (filename) => id(`diff_file_content_for_${filename}`);
  -    const diffFileDiv = (filename) => id(`${filename}_diff_div`);
  -
  -    let previousFilenameNode;
  -    let alreadyOpened = [];
  -
  -    const loadFrom = (diff) => {
  -      const id = diff.id;
  -      const filenameNode = $(`#radio_${id}`);
  -      const filename = getFilename(filenameNode);
  -      const sectionCount = diff.section_count;
  -      const diffSheet = diffFileContentFor(filename);
  -      let sectionIndex = 0;
  -
  -      if (sectionCount > 0) {
  -        filenameNode.attr('title', 'Auto-scroll through diffs');
  -      }
  -
  -      return () => {
  -
  -        const reselected =
  -          previousFilenameNode !== undefined &&
  -            getFilename(previousFilenameNode) === filename;
  -
  -        $('.diff-deleted-line-count, .diff-added-line-count').attr('disabled', true);
  -        $(`.diff-deleted-line-count[data-filename="${filename}"]`).attr('disabled', false);
  -        $(`.diff-added-line-count[data-filename="${filename}"]`).attr('disabled', false);
  -
  -        cd.radioEntrySwitch(previousFilenameNode, filenameNode);
  -
  -        if (previousFilenameNode !== undefined) {
  -          diffFileDiv(getFilename(previousFilenameNode)).hide();
  -        }
  -        diffFileDiv(getFilename(filenameNode)).show();
  -        previousFilenameNode = filenameNode;
  -        param.filename = filename;
  -
  -        if (sectionCount > 0 && (reselected || !cd.inArray(filename, alreadyOpened))) {
  -          const section = $(`#${id}_section_${sectionIndex}`);
  -          const downFromTop = 250;
  -          const halfSecond = 500;
  -          diffSheet.animate({
  -            scrollTop: '+=' + (section.offset().top - downFromTop) + 'px'
  -          }, halfSecond);
  -          sectionIndex += 1;
  -          sectionIndex %= sectionCount;
  -        }
  -        alreadyOpened.push(filename);
  -      };
  -    }; // loadFrom()
  -
  -    $.each(diffs, (_n, diff) => {
  -      const filename = $(`#radio_${diff.id}`);
  -      filename.click(loadFrom(diff));
  -    });
  -  }; // buildDiffFilenameHandlers()
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffContent = (diffs) => {
  -    const holder = $('<span>');
  -    $.each(diffs, (_, diff) => {
  -      const table = $('' +
  -        `<div id="${diff.filename}_diff_div" class="filename_div">` +
  -        '<table>' +
  -          '<tr class="valign-top">' +
  -            makeTd('<div class="diff-line-numbers"></div>') +
  -            makeTd(`<div id="diff_file_content_for_${diff.filename}"` +
  -                   ' class="diff-sheet"></div>') +
  -          '</tr>' +
  -        '</table>' +
  -        '</div>'
  -        );
  -      const content = $('.diff-sheet', table);
  -      const numbers = $('.diff-line-numbers', table);
  -      content.html(diff.content);
  -      numbers.html(diff.line_numbers);
  -      bindLineNumberScrolling(content, numbers);
  -      holder.append(table);
  -    });
  -    return holder;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const bindLineNumberScrolling = ($content, $numbers) => {
  -    const synchScroll = () => {
  -      $numbers.scrollTop($content.scrollTop());
  -    };
  -    $content.bind({
  -      keydown   : synchScroll,
  -      scroll    : synchScroll,
  -      mousewheel: synchScroll,
  -      mousemove : synchScroll,
  -      mousedown : synchScroll,
  -      mouseup   : synchScroll
  -    });
     };
   
     // - - - - - - - - - - - - - - - - - - - - - - - -
  
positive.code:   };
  
    //-----------------------------------------
    // refresh [fork]
    //-----------------------------------------
  
  
negative.code: 
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const moveToAvatar = (id) => {
      param.id = id;
      moveToTrafficLight(1);
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const moveToTrafficLight = (index) => {
      param.nowIndex = index;
      if (inDiffMode()) {
        param.wasIndex = (prevEventIndex(param.nowIndex) || 0);
  