diff --git a/script.html b/script.html
index d000055..62956ff 100644
--- a/script.html
+++ b/script.html
@@ -36,8 +36,15 @@
   .tl{position:relative;height:56px;background:#0f1117;border:1px solid var(--line);border-radius:8px;
     overflow:hidden;margin-top:12px;user-select:none;touch-action:none}
   .tlcut{position:absolute;top:6px;bottom:6px;background:#1f6feb;border-radius:5px;cursor:grab;
-    font:11px/1.5 var(--mono);color:#fff;padding:5px 7px;overflow:hidden;box-sizing:border-box}
+    font:11px/1.5 var(--mono);color:#fff;overflow:hidden;box-sizing:border-box;
+    display:flex;align-items:center;gap:6px;padding-right:11px}
   .tlcut.moved{background:#8957e5}
+  .tlcut img,.tlcut video{height:100%;width:34px;object-fit:cover;flex:0 0 auto;display:block}
+  .tlcut b{font-weight:600;white-space:nowrap;overflow:hidden;padding-left:2px}
+  .tlshots{position:relative;height:46px;margin-top:14px}
+  .tlshot{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding-left:4px;
+    font:10px/1.3 var(--mono);color:var(--muted);overflow:hidden;box-sizing:border-box}
+  .tlshot img{height:28px;width:auto;border-radius:3px;display:block;margin-top:2px;border:1px solid var(--line)}
   .tlcut .grip{position:absolute;top:0;right:0;bottom:0;width:9px;cursor:ew-resize;background:rgba(255,255,255,.28)}
   .tlhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent2);pointer-events:none}
   .tlruler{position:absolute;left:0;right:0;bottom:0;height:14px;font:9px/14px var(--mono);color:var(--muted)}
@@ -274,7 +281,9 @@ function render(r) {
       + '<div class="ovl" id="povl"><img id="povlimg" alt="cutaway"><video id="povlvid" muted playsinline></video></div>'
       + '</div>'
       + '<button type="button" class="btn ghost" id="pplay">&#9654; Preview the cut</button>'
+      + '<span class="foot" style="margin-left:12px" id="ptime">0.0 / 0.0s</span>'
       + '<span class="foot" style="margin-left:12px">Nothing is rendered &mdash; this switches the picture as it plays.</span>'
+      + '<div class="tlshots" id="tlshots"></div>'
       + '<div class="tl" id="tl"></div>'
       + '<p class="foot" id="tlinfo" style="margin:8px 0 0"></p>'
       + '<div style="margin-top:12px">'
@@ -584,14 +593,36 @@ var EDL = null, DIRTY = false;
 function tlDraw() {
   var tl = document.getElementById("tl");
   if (!tl || !EDL) return;
-  var dur = EDL.duration || 1, w = tl.clientWidth || 1;
+  var dur = EDL.duration || 1;
+
+  // Above the bar: where each shot begins, with the frame it opens on. The end
+  // of a shot is always the start of the next one, so only starts are marked.
+  var strip = document.getElementById("tlshots");
+  if (strip) {
+    var segs = ((DATA && DATA.script && DATA.script.segments) || []);
+    strip.innerHTML = segs.map(function (s, k) {
+      var at = k * 8, wide = (8 / dur) * 100;
+      return '<div class="tlshot" style="left:' + ((at / dur) * 100).toFixed(3) + '%;width:'
+        + wide.toFixed(3) + '%" data-seek="' + at + '" title="shot ' + s.index + ' starts at ' + at + 's">'
+        + 'shot ' + s.index
+        + (s.plate_url ? '<img src="' + esc(s.plate_url) + '" alt="shot ' + s.index + ' opening frame">' : '')
+        + '</div>';
+    }).join("");
+  }
+
   var html = "";
   (EDL.cuts || []).forEach(function (c, i) {
     var left = (c.start / dur) * 100, wide = (c.seconds / dur) * 100;
+    // Show the actual picture. A plain rectangle says nothing about what is
+    // going to be on screen, which is the only thing worth judging here.
+    var thumb = c.kind === "video"
+      ? '<video src="' + esc(c.src) + '#t=' + (c["in"] || 0) + '" preload="metadata" muted></video>'
+      : '<img src="' + esc(c.src) + '" alt="">';
     html += '<div class="tlcut' + (c.moved ? ' moved' : '') + '" data-i="' + i + '" '
          + 'style="left:' + left.toFixed(3) + '%;width:' + wide.toFixed(3) + '%" '
-         + 'title="cutaway for shot ' + c.shot + '">'
-         + 'shot ' + c.shot + '<div class="grip" data-grip="' + i + '"></div></div>';
+         + 'title="cutaway over the end of shot ' + c.shot + '">'
+         + thumb + '<b>' + c.seconds + 's</b>'
+         + '<div class="grip" data-grip="' + i + '"></div></div>';
   });
   html += '<div class="tlhead" id="tlhead" style="left:0"></div>';
   html += '<div class="tlruler">';