proctolog 0.1.0

data/app/views/proctolog/pull_requests/show.html.erb

@@ -0,0 +1,145 @@
+<% content_for :title, "##{@stop.number} #{@stop.title}" %>
+<% content_for :head do %>
+  <link rel="stylesheet" href="/respond.css">
+  <link rel="stylesheet" href="/pull_request.css">
+  <link rel="stylesheet" href="/scenarios.css">
+  <link rel="stylesheet" href="/standing.css">
+  <link rel="stylesheet" href="/decisions.css">
+  <script type="module" src="/notes.js"></script>
+  <script type="module" src="/decisions.js"></script>
+  <script type="module" src="/cursor.js"></script>
+  <script type="module" src="/code-review.js"></script>
+  <script type="module" src="/try.js"></script>
+<% end %>
+<% content_for :mode, mode_line("Reading", "↑ ↓" => "move", "[ ]" => "sections") %>
+<% content_for :keys do %>
+  <%# The docked list is short on purpose: a decision's choices are named in its own menu, and writing, a picture looked at closely and returned work each say their keys where they are. %>
+  <%# ↑ ↓ and j k are one key: the next block down, or up, of all the page shows, returned work included. %>
+  <%= keys_group "Read", "↑ ↓ j k" => "move, block by block", "[ ]" => "section", "← →" => "close, open", "Space" => "look closely" %>
+  <%= keys_group "Mark", "n" => "note on a block", "w" => "note on the whole", "f" => "decide, one at a time", "A" => "leave the non-blocking as is", "g" => "good to go" %>
+  <%= keys_group "Deciding", "← →" => "previous, next decision", "↑ ↓ j k" => "scroll", "R" => "make the answer a rule", "Esc" => "back to reading" %>
+  <%= keys_group "Go", "J K" => "layer above, below", "N" => "next to review", "h" => "the route", "v" => "returned work, Esc back" %>
+  <%= keys_group "Elsewhere", "d" => "code in Diffle", "e" => "handover", "r" => "read GitHub again", "G" => "on GitHub", "u" => "undo a choice", **({"t" => "try it, beside the page"} if @scenarios.any?) %>
+<% end %>
+
+<header class="pull-request">
+  <h1><span class="number">#<%= @stop.number %></span> <%= @stop.title %></h1>
+  <%= render "status", burst: @burst, stop: @stop, standing: @standing %>
+  <div class="review-actions" data-desk>
+    <button type="button" data-enter-decisions <%= "disabled" if @boxes.empty? %>><kbd>f</kbd> review decisions <span class="count" data-count-of="unreviewed"></span></button>
+    <button type="button" data-enter-responses hidden><kbd>v</kbd> returned work</button>
+    <nav class="along" aria-label="In the route">
+      <%= link_to burst_path(@burst, anchor: "pr-#{@stop.number}"), data: {key: "h"} do %><kbd>h</kbd> route<% end %>
+      <% if (earlier = focus.before(@stop)) %>
+        <%= link_to burst_pull_request_path(@burst, earlier.number), rel: "prev", data: {key: "K"}, title: earlier.title do %><kbd>K</kbd> previous #<%= earlier.number %><% end %>
+      <% end %>
+      <% if (later = focus.after(@stop)) %>
+        <%= link_to burst_pull_request_path(@burst, later.number), rel: "next", data: {key: "J"}, title: later.title do %><kbd>J</kbd> next #<%= later.number %><% end %>
+      <% end %>
+      <% if @next_to_review %>
+        <%= link_to burst_pull_request_path(@burst, @next_to_review.number), data: {key: "N"}, title: @next_to_review.title do %><kbd>N</kbd> next to review #<%= @next_to_review.number %><% end %>
+      <% end %>
+    </nav>
+  </div>
+  <%# What can be done with the whole pull request stands beside its title while the reading rests there, each with its key. %>
+  <div class="whole" data-desk>
+    <button type="button" data-note-whole><kbd>w</kbd> note on the whole</button>
+    <%= button_to burst_pull_request_code_review_path(@burst, @stop.number), form: {target: "_blank", data: {code: ""}} do %><kbd>d</kbd> code in Diffle<% end %>
+    <%= link_to burst_pull_request_path(@burst, @stop.number, fresh: 1) do %><kbd>r</kbd> read GitHub again<% end %>
+    <% if @stop.url %>
+      <%= link_to @stop.url, target: "_blank", rel: "noopener", data: {key: "G"} do %><kbd>G</kbd> on GitHub<% end %>
+    <% end %>
+    <%= link_to "code comments", burst_pull_request_code_review_path(@burst, @stop.number), class: "keyless" %>
+  </div>
+  <div class="slot" id="whole-slot" data-desk></div>
+  <%= render "proctolog/recordings/list", burst: @burst, stop: @stop %>
+</header>
+
+<% if @since %>
+  <%= render "since", since: @since, stop: @stop %>
+<% end %>
+
+<% if @rendering.lost.any? %>
+  <section class="lost" aria-labelledby="lost-heading">
+    <h2 id="lost-heading">Notes that lost their place</h2>
+    <p>The words or the picture they were written on are no longer in the description. Their old words are kept here.</p>
+    <ol class="cards">
+      <% @rendering.lost.each do |note| %>
+        <%= render "note", note:, rendering: @rendering, burst: @burst, stop: @stop %>
+      <% end %>
+    </ol>
+  </section>
+<% end %>
+
+<div data-inline-decisions></div>
+<script type="application/json" id="decision-inventory"><%= raw json_escape(decision_inventory(@burst)) %></script>
+<%= render "proctolog/decisions/round_data", burst: @burst, stop: @stop %>
+
+<section data-round-results data-pr="<%= @stop.number %>" hidden></section>
+<div class="page">
+  <main class="description">
+    <% @rendering.sections.each do |section| %>
+      <%= tag.details id: ("decisions" if section.heading == Proctolog::Description::DECISIONS), class: "section", open: unfolded?(section), data: {heading: section.heading.to_s} do %>
+        <summary>
+          <span class="heading"><%= section.heading || "Opening" %></span>
+          <span class="count"><%= count_of(section) %></span>
+        </summary>
+        <% if section.heading == Proctolog::Description::DECISIONS %>
+          <%# One cell for each decision, in order, which the script fills: where the owner is among them, and which are done. %>
+          <div class="stepper" data-stepper data-desk aria-hidden="true"></div>
+          <div class="actions views">
+            <button type="button" class="quiet" data-pending-view>To review <span class="count" data-count-of="unreviewed"></span></button>
+            <button type="button" class="quiet" data-all-view>All decisions <span class="count" data-count-of="all"></span></button>
+          </div>
+        <% end %>
+        <%= raw section_html(section, burst: @burst, boxes: @boxes) %>
+        <% if section.heading == Proctolog::Description::DECISIONS %>
+          <%= render "finish", burst: @burst, stop: @stop, boxes: @boxes, standing: @standing, next_to_review: @next_to_review, later: %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </main>
+
+  <%# After the description, where its review stands: what must be met, the scenarios, how it connects, the notes and the handover. Each is a section like the description's own, so the same keys and the outline reach them. %>
+  <%= tag.details class: "section", open: true, data: {heading: "Standing"} do %>
+    <summary>
+      <span class="heading">Standing</span>
+      <%= tag.span conditions_met(@standing), class: "count", data: {waits: @standing.conditions.any? { it.met == false }} %>
+    </summary>
+    <%= render "standing", burst: @burst, stop: @stop, standing: @standing %>
+  <% end %>
+
+  <% if @scenarios.any? %>
+    <%= render "scenarios", burst: @burst, stop: @stop, scenarios: @scenarios, marks: @standing.marks %>
+  <% end %>
+
+  <%= tag.details class: "section", data: {heading: "Connections"} do %>
+    <summary><span class="heading">Connections</span></summary>
+    <%= render "connections", burst: @burst, route: @route, stop: @stop %>
+  <% end %>
+
+  <% open_notes = @rendering.about.count(&:open?) + @rendering.margin.count(&:open?) %>
+  <%= tag.details class: "section", open: (@rendering.about.any? || @rendering.margin.any?), data: {heading: "Notes"} do %>
+    <summary>
+      <span class="heading">Notes</span>
+      <%= tag.span (open_notes.zero? ? "none open" : "#{open_notes} open"), class: "count", data: {waits: open_notes.positive?} %>
+    </summary>
+    <%= render "margin", rendering: @rendering, burst: @burst, stop: @stop %>
+  <% end %>
+
+  <%= tag.details class: "section", data: {heading: "Handover"} do %>
+    <summary><span class="heading">Handover</span></summary>
+    <%= render "proctolog/decisions/draft_tools", burst: @burst, stop: @stop %>
+  <% end %>
+</div>
+
+<%# The rail at the right: the outline, and under it Try it, which sets up the scenarios. %>
+<div class="rail">
+  <%= render "outline", rendering: @rendering, standing: @standing, scenarios: @scenarios, open_notes:, burst: @burst, code: @code %>
+  <% if @scenarios.any? %>
+    <%= render "try", burst: @burst, stop: @stop, scenarios: @scenarios %>
+  <% end %>
+</div>
+
+<%= render "proctolog/notes/template", action: burst_pull_request_notes_path(@burst, @stop.number) %>
+<button type="button" id="note-selection" class="selection" hidden>Note</button>

data/app/views/proctolog/recordings/_dialog.html.erb

@@ -0,0 +1,26 @@
+<%# locals: (burst:, recording:) %>
+<%# The script says which moment the note is on, and whether a rectangle was drawn. %>
+<dialog id="note-dialog" aria-labelledby="note-heading">
+  <%= form_with url: burst_moments_path(burst), id: "note-form" do |form| %>
+    <h2 id="note-heading">A note on this moment</h2>
+    <blockquote class="words" data-about></blockquote>
+
+    <fieldset class="kinds">
+      <legend class="visually-hidden">What kind of note</legend>
+      <% Proctolog::Note::KINDS.each_with_index do |kind, index| %>
+        <label><%= form.radio_button :kind, kind, checked: index.zero? %> <%= kind.capitalize %></label>
+      <% end %>
+    </fieldset>
+
+    <%= form.text_area :text, rows: 5, required: true, autofocus: true, "aria-label": "The note", placeholder: "What should change, or what do you ask?" %>
+
+    <%= hidden_field_tag :recording, recording.to_param, id: nil %>
+    <%= hidden_field_tag :time, nil, id: nil %>
+    <%= hidden_field_tag :box, nil, id: nil %>
+
+    <div class="buttons">
+      <%= form.button "Save note", class: "primary" %>
+      <button type="submit" formmethod="dialog" formnovalidate class="quiet">Cancel</button>
+    </div>
+  <% end %>
+</dialog>

data/app/views/proctolog/recordings/_list.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (burst:, stop:) %>
+<%# The recordings in a pull request's folder, as links. %>
+<% recordings = Proctolog::Recording.in(burst, stop.number) %>
+<% if recordings.any? %>
+  <p class="elsewhere recordings">Recordings:
+    <%= safe_join(recordings.map { player_link(burst, it) }, ", ") %>
+  </p>
+<% end %>

data/app/views/proctolog/recordings/_note.html.erb

@@ -0,0 +1,22 @@
+<%# locals: (note:, burst:) %>
+<%# A note on a moment: it goes to its moment when pressed, and moves along like any other. %>
+<%= tag.li id: "note-#{note.id}", class: "card", data: {card: note.id, kind: note.kind, state: note.state, time: note.place.time, box: note.place.box&.join(",")} do %>
+  <p class="meta"><span class="kind"><%= note.kind %></span> <span class="state"><%= note.state %></span></p>
+  <p class="text"><%= with_mentions(note.text, burst:) %></p>
+  <p class="where">
+    <button type="button" class="quiet" data-go><%= timecode(note.place.time) %></button>
+    <%= "· #{note.place.step}" if note.place.step %>
+  </p>
+  <% if note.reply %>
+    <p class="reply">
+      Addressed<%= " in " if note.reply["commit"] %><code><%= note.reply["commit"] %></code>.
+      <%= with_mentions(note.reply["text"], burst:) %>
+    </p>
+  <% end %>
+  <div class="moves">
+    <% path = burst_moment_path(burst, note.id) %>
+    <%= button_to "Confirm", path, method: :patch, params: {state: "confirmed"}, class: "quiet" if note.addressed? %>
+    <%= button_to "Reopen", path, method: :patch, params: {state: "open"}, class: "quiet" unless note.open? %>
+    <%= button_to "Withdraw", path, method: :patch, params: {state: "withdrawn"}, class: "quiet" unless note.withdrawn? %>
+  </div>
+<% end %>

data/app/views/proctolog/recordings/index.html.erb

@@ -0,0 +1,33 @@
+<% content_for :title, "Recordings · #{@burst.name}" %>
+<% content_for :head do %>
+  <link rel="stylesheet" href="/recording.css">
+<% end %>
+
+<header class="films-head">
+  <h1>Recordings</h1>
+  <p class="tally"><%= @folders.sum { |_, recordings| recordings.size }.then { pluralize(it, "recording") } %> of <%= @burst.name %>. Each plays here, with its steps and the notes pinned to it.</p>
+</header>
+
+<% if @folders.empty? %>
+  <p class="empty">No recordings yet. A capture script that films a flow leaves its <code>.mp4</code> and <code>.vtt</code> in <code>tools/proctolog/films/<%= @burst.slug %>/sitting/</code>, or in a folder named for a pull request.</p>
+<% end %>
+
+<% @folders.each do |folder, recordings| %>
+  <section class="folder">
+    <h2><%= folder.to_i.positive? ? link_to(recording_folder(folder), burst_pull_request_path(@burst, folder)) : recording_folder(folder) %></h2>
+    <ul class="films">
+      <% recordings.each do |recording| %>
+        <li>
+          <p class="title"><%= player_link @burst, recording %></p>
+          <p class="facts">
+            <%= timecode(recording.length) %> ·
+            <%= pluralize(recording.chapters.count, "step") %> ·
+            <%= recording.width %>×<%= recording.height %> ·
+            <%= number_with_precision(recording.megabytes, precision: 1) %> MB ·
+            <%= pluralize(recording.noted_in(@burst.marks(recording.folder)).count(&:live?), "open note") %>
+          </p>
+        </li>
+      <% end %>
+    </ul>
+  </section>
+<% end %>

data/app/views/proctolog/recordings/show.html.erb

@@ -0,0 +1,118 @@
+<% content_for :title, "#{recording_title(@recording)} · Recordings" %>
+<% content_for :head do %>
+  <link rel="stylesheet" href="/respond.css">
+  <link rel="stylesheet" href="/pull_request.css">
+  <link rel="stylesheet" href="/recording.css">
+  <script type="module" src="/recording.js"></script>
+<% end %>
+<% live, put_away = @notes.partition(&:live?) %>
+
+<header class="film-head">
+  <p class="crumbs">
+    <%= link_to "Recordings", burst_recordings_path(@burst) %> /
+    <%= @recording.number ? link_to(recording_folder(@recording.folder), burst_pull_request_path(@burst, @recording.number)) : recording_folder(@recording.folder) %>
+  </p>
+  <div class="titling">
+    <h1><%= recording_title(@recording) %></h1>
+    <p class="facts">
+      <%= timecode(@recording.length) %> ·
+      <%= pluralize(@recording.chapters.count, "step") %> ·
+      <%= @recording.width %>×<%= @recording.height %> ·
+      <%= number_with_precision(@recording.megabytes, precision: 1) %> MB
+    </p>
+    <button type="button" class="quiet" data-fill aria-pressed="false">Fill the window</button>
+  </div>
+</header>
+
+<div class="film" data-film data-length="<%= @recording.length %>" style="--ratio: <%= (@recording.width.to_f / @recording.height).round(4) %>">
+  <section class="stage" aria-label="The recording">
+    <div class="screen" data-screen>
+      <video src="<%= @recording.url %>" preload="auto" playsinline muted>
+        <track kind="chapters" src="<%= @recording.captions_url %>" srclang="en" label="Steps" default>
+      </video>
+      <div class="regions" data-regions></div>
+    </div>
+
+    <div class="controls">
+      <button type="button" class="primary" data-play>Play</button>
+      <button type="button" data-frame-back title="One frame back">‹ Frame <kbd>,</kbd></button>
+      <button type="button" data-frame-forward title="One frame forward">Frame › <kbd>.</kbd></button>
+      <button type="button" data-step-back title="The previous step">‹ Step <kbd>[</kbd></button>
+      <button type="button" data-step-forward title="The next step">Step › <kbd>]</kbd></button>
+      <output class="clock" data-clock>0:00 / <%= timecode(@recording.length) %></output>
+      <button type="button" class="note-here" data-note-here>Note here <kbd>c</kbd></button>
+    </div>
+
+    <div class="timeline" data-timeline aria-label="Timeline: press to go to a moment">
+      <ol class="segments">
+        <% @recording.chapters.each_with_index do |chapter, index| %>
+          <li style="left: <%= film_position(chapter.from, @recording) %>; width: <%= film_position(chapter.to - chapter.from, @recording) %>" title="<%= chapter.name %>">
+            <span><%= index + 1 %> <%= chapter.name %></span>
+          </li>
+        <% end %>
+      </ol>
+      <% live.each do |note| %>
+        <%= tag.button type: "button", class: "pin", data: {pin: note.id, time: note.place.time, kind: note.kind, state: note.state},
+              style: "left: #{film_position(note.place.time, @recording)}", "aria-label": "Note at #{timecode(note.place.time)}: #{note.text.truncate(60)}" %>
+      <% end %>
+      <span class="playhead" data-playhead></span>
+    </div>
+    <p class="where" data-where aria-live="polite"></p>
+  </section>
+
+  <aside class="side">
+    <%# The strip: each step by the picture it opens on, under its name; a press goes there. A still comes once it is made, and without one the name stands alone. %>
+    <% if @recording.chapters.any? %>
+      <h2>Steps</h2>
+      <%# Against the round before: which steps changed, which are new, or why nothing could be said. %>
+      <p class="round" data-round><%= @changes.said %></p>
+      <ol class="steps">
+        <% @recording.chapters.each_with_index do |chapter, index| %>
+          <% change = @changes.of(chapter.name) %>
+          <%= tag.li data: {step: "", from: chapter.from, to: chapter.to, name: chapter.name, change: (change if change.in?(%i[changed new]))} do %>
+            <button type="button">
+              <span class="n"><%= index + 1 %></span>
+              <span class="name"><%= chapter.name %><% if change.in?(%i[changed new]) %> <span class="change"><%= (change == :new) ? "New step" : "Changed" %></span><% end %></span>
+              <time><%= timecode(chapter.from) %></time>
+              <%= tag.img src: burst_recording_still_path(@burst, index, @recording.to_param, film: @recording.digest[0, 12]), alt: "", loading: "lazy", class: "still", data: {still: ""} %>
+            </button>
+          <% end %>
+        <% end %>
+      </ol>
+    <% end %>
+
+    <h2>Notes</h2>
+    <% if live.any? %>
+      <ol class="cards">
+        <% live.sort_by { it.place.time }.each do |note| %>
+          <%= render "note", note:, burst: @burst %>
+        <% end %>
+      </ol>
+    <% else %>
+      <p class="empty">No notes yet. Press <kbd>c</kbd> on a moment, or drag across the frame to mark a place.</p>
+    <% end %>
+    <% if put_away.any? %>
+      <details class="set-aside">
+        <summary>Put away <span class="count"><%= put_away.size %></span></summary>
+        <ol class="cards">
+          <% put_away.sort_by { it.place.time }.each do |note| %>
+            <%= render "note", note:, burst: @burst %>
+          <% end %>
+        </ol>
+      </details>
+    <% end %>
+  </aside>
+</div>
+
+<%# The time each frame is first shown, so that one frame forward is one frame that changes. %>
+<%= tag.script raw(json_escape(@recording.frames.to_json)), type: "application/json", id: "frames" %>
+
+<%= render "dialog", burst: @burst, recording: @recording %>
+
+<footer class="keys">
+  <span><kbd>Space</kbd> plays and pauses</span>
+  <span><kbd>,</kbd> <kbd>.</kbd> one frame back and forward</span>
+  <span><kbd>[</kbd> <kbd>]</kbd> the previous and next step</span>
+  <span><kbd>c</kbd> a note on this moment</span>
+  <span>Drag across the frame to mark a place first</span>
+</footer>

data/app/views/proctolog/scenarios/_dialog.html.erb

@@ -0,0 +1,22 @@
+<%# locals: (burst:) %>
+<%# One dialog for every scenario: the script says which one the note is on, and where it goes. The token is the page's own, as the form's address is not known until a scenario is chosen. %>
+<dialog id="note-dialog" aria-labelledby="note-heading">
+  <%= form_with url: burst_scenarios_path(burst), authenticity_token: form_authenticity_token, id: "note-form" do |form| %>
+    <h2 id="note-heading">A note on the scenario</h2>
+    <blockquote class="words" data-about></blockquote>
+
+    <fieldset class="kinds">
+      <legend class="visually-hidden">What kind of note</legend>
+      <% Proctolog::Note::KINDS.each_with_index do |kind, index| %>
+        <label><%= form.radio_button :kind, kind, checked: index.zero? %> <%= kind.capitalize %></label>
+      <% end %>
+    </fieldset>
+
+    <%= form.text_area :text, rows: 5, required: true, autofocus: true, "aria-label": "The note", placeholder: "What should change, or what do you ask?" %>
+
+    <div class="buttons">
+      <%= form.button "Save note", class: "primary" %>
+      <button type="submit" formmethod="dialog" formnovalidate class="quiet">Cancel</button>
+    </div>
+  <% end %>
+</dialog>

data/app/views/proctolog/scenarios/_note.html.erb

@@ -0,0 +1,18 @@
+<%# locals: (note:, scenario:, burst:) %>
+<%# A note on a scenario, moved along from the page it is shown on. %>
+<%= tag.li class: "card", data: {kind: note.kind, state: note.state} do %>
+  <p class="meta"><span class="kind"><%= note.kind %></span> <span class="state"><%= note.state %></span></p>
+  <p class="text"><%= with_mentions(note.text, burst:) %></p>
+  <% if note.reply %>
+    <p class="reply">
+      Addressed<%= " in " if note.reply["commit"] %><code><%= note.reply["commit"] %></code>.
+      <%= with_mentions(note.reply["text"], burst:) %>
+    </p>
+  <% end %>
+  <div class="moves">
+    <% path = burst_scenario_note_path(burst, scenario, note.id) %>
+    <%= button_to "Confirm", path, method: :patch, params: {state: "confirmed"}, class: "quiet" if note.addressed? %>
+    <%= button_to "Reopen", path, method: :patch, params: {state: "open"}, class: "quiet" unless note.open? %>
+    <%= button_to "Withdraw", path, method: :patch, params: {state: "withdrawn"}, class: "quiet" unless note.withdrawn? %>
+  </div>
+<% end %>

data/app/views/proctolog/scenarios/_open.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (scenario:, state:, burst:) %>
+<div class="act">
+  <% if state == :up %>
+    <%= button_to "Open", open_burst_scenario_path(burst, scenario), class: "open", form: {target: ("_blank" if scenario.browser.mine?)} %>
+  <% else %>
+    <button class="open" disabled>The server is not up</button>
+  <% end %>
+  <small><%= where_it_opens(scenario) %></small>
+</div>

data/app/views/proctolog/scenarios/_scenario.html.erb

@@ -0,0 +1,48 @@
+<%# locals: (scenario:, burst:, steps:, head:, seen:, notes:, overlays: [], act: nil) %>
+<%# A scenario as a row: what to do, what was seen and the notes on it. `act` is what the page puts between, such as the button that opens it. `overlays` are the Grouse overlays its presses opened, whose notes a pull brings here. %>
+<%= tag.li id: scenario.to_param, class: "scenario" do %>
+  <div class="text">
+    <h4><%= tag.span(scenario.sitting, class: "n") if scenario.sitting %><%= scenario.name %></h4>
+    <% if scenario.expect %>
+      <p class="expect"><%= scenario.expect %></p>
+    <% end %>
+    <% if scenario.steps && steps.any? %>
+      <details class="steps" open>
+        <summary><%= pluralize(steps.size, "step") %>, from the description</summary>
+        <ol>
+          <% steps.each do |step| %>
+            <%= tag.li step_words(step.text), value: step.number %>
+          <% end %>
+        </ol>
+      </details>
+    <% elsif scenario.steps %>
+      <p class="lost">The description has no steps under “<%= scenario.steps %>” in How to test locally now.</p>
+    <% end %>
+  </div>
+
+  <%= act %>
+
+  <div class="seen">
+    <p class="line" data-result="<%= seen&.fetch("result") %>"><%= seen_line(seen, head) %></p>
+    <div class="results">
+      <% Proctolog::Scenario::RESULTS.each do |label, result| %>
+        <%= button_to label, saw_burst_scenario_path(burst, scenario), params: {result:}, class: "result", aria: {pressed: (seen&.fetch("result") == result)} %>
+      <% end %>
+      <%= tag.button "Note", type: "button", class: "result", data: {note_scenario: burst_scenario_notes_path(burst, scenario), name: scenario.name} %>
+    </div>
+    <% if overlays.any? %>
+      <p class="line overlays"><%= overlays_line(overlays) %></p>
+      <div class="results">
+        <%= button_to "Pull notes", pull_burst_scenario_path(burst, scenario), class: "result" %>
+      </div>
+    <% end %>
+  </div>
+
+  <% if notes.any? %>
+    <ol class="cards">
+      <% notes.each do |note| %>
+        <%= render "proctolog/scenarios/note", note:, scenario:, burst: %>
+      <% end %>
+    </ol>
+  <% end %>
+<% end %>

data/app/views/proctolog/scenarios/_server.html.erb

@@ -0,0 +1,20 @@
+<section class="server" data-state="<%= state %>" data-status-url="<%= burst_sitting_server_path(burst) %>">
+  <p class="status"><span class="light" aria-hidden="true"></span><span><%= server_status(server) %></span></p>
+  <p class="where">
+    Serves <%= server.branch ? tag.code(server.branch) : "as it is" %> from <code><%= server.checkout.to_s.sub(Dir.home, "~") %></code>
+    on database <code><%= server.slug %></code>, port <%= server.port %>.
+  </p>
+  <% if state == :down %>
+    <%= button_to "Start", burst_sitting_server_path(burst), class: "action" %>
+  <% elsif server.started_here? %>
+    <%= button_to "Stop", burst_sitting_server_path(burst), method: :delete, class: "action" %>
+  <% else %>
+    <p class="where">The desk did not start it, so it cannot stop it: stop it where it runs.</p>
+  <% end %>
+  <% if server.crashed? %>
+    <details open>
+      <summary>The end of its log</summary>
+      <pre><%= server.last_lines %></pre>
+    </details>
+  <% end %>
+</section>

data/app/views/proctolog/scenarios/index.html.erb

@@ -0,0 +1,62 @@
+<% content_for :title, "Scenarios" %>
+<% content_for :head do %>
+  <link rel="stylesheet" href="/respond.css">
+  <link rel="stylesheet" href="/pull_request.css">
+  <link rel="stylesheet" href="/scenarios.css">
+  <script src="/scenarios.js" defer></script>
+<% end %>
+
+<header class="burst">
+  <h1>Scenarios</h1>
+  <% unless @server.app.described? %>
+    <p class="lede">This checkout has no <code>.proctolog/app.yml</code> saying how to run its app, so these buttons cannot start it or open a scenario in it. The steps still read, and what you saw can still be marked.</p>
+  <% end %>
+  <%= render "server", burst: @burst, server: @server, state: @state %>
+</header>
+
+<main class="scenarios">
+  <% if @burst.scenarios.empty? %>
+    <p class="lede">This burst has no scenarios yet. They are written in <code>.proctolog/scenarios/<%= @burst.slug %>.yml</code>, a step or a pull request's “How to test locally” each.</p>
+  <% end %>
+
+  <% if @burst.scenarios.any?(&:sitting) %>
+  <section>
+    <h2>The sitting</h2>
+    <p class="lede">Steps of the whole burst, belonging to no one pull request. Each button opens the app where its step starts.</p>
+    <% sitting = @burst.marks("sitting") %>
+    <% @burst.scenarios.select(&:sitting).group_by(&:group).each do |group, scenarios| %>
+      <h3><%= group %></h3>
+      <ol class="steps-of">
+        <% scenarios.each do |scenario| %>
+          <%= render "scenario", scenario:, burst: @burst, steps: [], head: @server.head, seen: sitting.scenarios[scenario.name], notes: scenario.noted_in(sitting), overlays: sitting.overlays_of(scenario.name),
+                act: render("open", scenario:, state: @state, burst: @burst) %>
+        <% end %>
+      </ol>
+    <% end %>
+  </section>
+  <% end %>
+
+  <% if @burst.scenarios.any?(&:pr) %>
+  <section>
+    <h2>By pull request</h2>
+    <p class="lede">Each group of steps is read from the pull request's description as it stands now.</p>
+    <% scenarios_by_pull_request(@burst.scenarios.select { focus.whole? || focus.at(it.pr) }, focus).each do |number, scenarios| %>
+      <% stop = @route.at(number) %>
+      <% marks = @burst.marks(number) %>
+      <h3>
+        <%= link_to "##{number}", burst_pull_request_path(@burst, number), class: "number" %>
+        <%= stop ? stop.title : "no longer open" %>
+      </h3>
+      <ol class="steps-of">
+        <% scenarios.each do |scenario| %>
+          <%= render "scenario", scenario:, burst: @burst, steps: stop ? scenario.steps_in(stop.description) : [],
+                head: stop&.head_oid, seen: marks.scenarios[scenario.name], notes: scenario.noted_in(marks), overlays: marks.overlays_of(scenario.name),
+                act: render("open", scenario:, state: @state, burst: @burst) %>
+        <% end %>
+      </ol>
+    <% end %>
+  </section>
+  <% end %>
+</main>
+
+<%= render "dialog", burst: @burst %>