@@ -109,6 +109,10 @@ const transcribeButton = el('button', 'action is-primary', 'Transcribe')
 transcribeButton.type = 'button'
 transcribeButton.disabled = true
 
+const cancelButton = el('button', 'action is-danger', 'Cancel')
+cancelButton.type = 'button'
+cancelButton.hidden = true
+
 const srtButton = el('button', 'action', 'Download SRT')
 srtButton.type = 'button'
 srtButton.disabled = true
@@ -127,39 +131,49 @@ progress.max = 100
 progress.hidden = true
 
 const controls = el('div', 'controls')
-controls.append(modelLabel, modelSelect, transcribeButton, srtButton, vttButton)
+controls.append(modelLabel, modelSelect, transcribeButton, cancelButton, srtButton, vttButton)
+
+// Whether the selected model is already on this machine, and whether this
+// host runs single- or multi-threaded -- both said once, next to the
+// controls they explain, rather than discovered after clicking Transcribe or
+// buried in a footer nobody scrolls to.
+const modelHint = el('p', 'model-hint')
+const speedHint = el(
+  'p',
+  'speed-hint',
+  // Only the non-default case is worth a sentence -- the isolated case is
+  // what everything else on the page already assumes.
+  THREADS_AVAILABLE
+    ? ''
+    : 'Running single-threaded on this host, so transcription will be ' +
+      'noticeably slower than on a cross-origin-isolated deploy.',
+)
+const controlHints = el('div', 'control-hints')
+controlHints.append(modelHint, speedHint)
 
 // Empty until a transcript exists (`.transcript-hint:empty` hides it), so the
-// two gestures nothing else on the page states -- double-click a word,
-// drag ⋮ -- are said once rather than left for hover to reveal by accident.
+// gestures nothing else on the page states -- double-click a word, tab
+// through corrections, insert or delete one, drag ⋮ -- are said once rather
+// than left for hover to reveal by accident.
 const transcriptHint = el('p', 'transcript-hint')
 const TRANSCRIPT_HINT_TEXT =
-  'Double-click a word to fix it · drag ⋮ between segments to move where one ends.'
+  'Double-click a word to fix it, Enter/Tab for the next · + inserts a word, ' +
+  'Ctrl/Cmd+Backspace deletes one · drag ⋮ between segments to move where one ends.'
 
 const transcriptEl = el('div', 'transcript')
 
-const footer = el(
-  'p',
-  'footer',
-  THREADS_AVAILABLE
-    ? 'Cross-origin isolated: threaded inference is available.'
-    : 'Not cross-origin isolated, so SharedArrayBuffer is unavailable and ' +
-      'transcription runs single-threaded. That is the deploy host, not ' +
-      'the build.',
-)
-
 app.append(
   heading,
   chooser,
   status,
   surface,
   audio,
+  controlHints,
   controls,
   transcriptHint,
   transcriptEl,
   progress,
   engineStatus,
-  footer,
 )
 
 const waveform = createWaveform(canvas)
@@ -176,10 +190,16 @@ const transcriptView = createTranscriptView({
 
 // Substituted by the build, which bundles the worker first so that this name --
 // which carries a content hash -- exists to substitute. See types/build.d.ts.
-const engine = createEngineClient(new URL(__WHISPER_WORKER__, document.baseURI).href)
+const workerUrl = new URL(__WHISPER_WORKER__, document.baseURI).href
 
 // --- State -----------------------------------------------------------------
 
+// A `let`, not a `const`: cancelling mid-transcribe replaces it with a fresh
+// worker (see transcribe()'s catch/cancel handling below) rather than trying
+// to make an already-running whisper.cpp call give up the main thread it is
+// blocking.
+let engine = createEngineClient(workerUrl)
+
 /** The object URL of the file currently loaded, released when the next replaces it. @type {string | null} */
 let currentUrl = null
 /** @type {AudioBuffer | null} */
@@ -212,6 +232,33 @@ function updateExportState() {
   transcriptHint.textContent = words > 0 ? TRANSCRIPT_HINT_TEXT : ''
 }
 
+/**
+ * Say, before someone commits to it, whether pressing Transcribe with the
+ * currently-selected model starts a real download or not -- the option
+ * label already states its size, but not whether that size has already been
+ * paid.
+ *
+ * Stamped with the model id it was asked about and re-checked against the
+ * select's current value before applying: `isModelCached` is async, and a
+ * fast second change while the first check is still in flight must not have
+ * its answer overwritten by the first one arriving late.
+ */
+async function refreshModelHint() {
+  const id = modelSelect.value
+  const model = MODELS[/** @type {keyof typeof MODELS} */ (id)]
+  if (!model) return
+
+  const cached = await isModelCached(model.url, { caches })
+  if (modelSelect.value !== id) return // superseded by a later selection
+
+  modelHint.textContent = cached
+    ? `${model.label} is already downloaded.`
+    : `${model.label} will download ${megabytes(model.bytes)}.`
+}
+
+modelSelect.addEventListener('change', () => void refreshModelHint())
+void refreshModelHint()
+
 // Ctrl/Cmd+Z to undo, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y to redo. Attached to
 // window rather than the transcript container, because a merge or split
 // click may have just had render() replace the element that had focus --
@@ -304,15 +351,41 @@ surface.addEventListener('drop', (event) => {
 
 transcribeButton.addEventListener('click', () => void transcribe())
 
+// The in-flight run's cancellation, if any -- created fresh by transcribe()
+// each time, since an AbortController can't be un-aborted for a second run.
+/** @type {AbortController | null} */
+let cancelling = null
+let cancelled = false
+
+cancelButton.addEventListener('click', () => {
+  cancelled = true
+  cancelling?.abort()
+  // There is no cooperative cancel in the worker protocol -- whisper.cpp
+  // blocks the worker's one thread for the length of a transcribe() call, so
+  // the only way to actually stop one already running is to end the worker
+  // and start over. Doing this unconditionally (even mid-download, when
+  // nothing has been loaded into this engine yet) is simpler than tracking
+  // which phase is active, and costs one extra Worker construction that
+  // does not itself load wasm or a model.
+  engine.destroy()
+  engine = createEngineClient(workerUrl)
+  loadedModel = null
+})
+
 async function transcribe() {
   if (!currentBuffer) return
 
   const id = modelSelect.value
   const model = MODELS[/** @type {keyof typeof MODELS} */ (id)]
   if (!model) return
 
+  const controller = new AbortController()
+  cancelling = controller
+  cancelled = false
+
   transcribeButton.disabled = true
   modelSelect.disabled = true
+  cancelButton.hidden = false
   progress.hidden = false
   progress.removeAttribute('value')
   engineStatus.classList.remove('is-error')
@@ -330,6 +403,7 @@ async function transcribe() {
       const bytes = await downloadModel(model.url, {
         fetch: globalThis.fetch.bind(globalThis),
         caches,
+        signal: controller.signal,
         onProgress: ({ loaded, total, cached: fromCache }) => {
           if (fromCache) return
           engineStatus.textContent = total
@@ -369,12 +443,26 @@ async function transcribe() {
     updateExportState()
     transcriptView.render(transcript)
   } catch (error) {
-    engineStatus.textContent = message(error)
-    engineStatus.classList.add('is-error')
+    // Both the abort()ed fetch and the destroy()ed worker reject with their
+    // own, unrelated errors -- `cancelled` is the one flag set by exactly one
+    // cause, the Cancel button, so it is what distinguishes "asked for this"
+    // from "actually failed" regardless of which phase was interrupted.
+    if (cancelled) {
+      engineStatus.textContent = 'Cancelled.'
+    } else {
+      engineStatus.textContent = message(error)
+      engineStatus.classList.add('is-error')
+    }
   } finally {
+    cancelling = null
     progress.hidden = true
+    cancelButton.hidden = true
     transcribeButton.disabled = false
     modelSelect.disabled = false
+    // A cancelled download leaves nothing cached (downloadModel only stores
+    // it on success), so this correctly falls back to "will download" rather
+    // than assuming the run that just ended left the model behind.
+    void refreshModelHint()
   }
 }
 
 
@@ -290,6 +290,55 @@ noscript p {
   background: transparent;
 }
 
+/* Low-confidence words: dimmed, and given a warning-coloured underline
+   instead of the neutral one every word gets at rest. Absent confidence
+   (whisper didn't report one) draws with neither -- an unknown is not a low
+   score. */
+.transcript-word.is-low-confidence {
+  opacity: 0.6;
+  border-bottom-color: color-mix(in srgb, var(--error) 55%, transparent);
+}
+
+/* The insert control: a slot before every word and after the last one --
+   unlike split, it is valid at a segment's very first and very last gap too,
+   since a new word can be added at either edge. Same rest-state idiom as
+   .transcript-split: invisible until found. */
+.transcript-insert {
+  display: inline-block;
+  position: relative;
+  width: 0.75rem;
+  height: 1em;
+  vertical-align: middle;
+  margin: 0 -0.375rem;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  cursor: text;
+  transition: background-color 140ms ease-out;
+}
+
+.transcript-insert::after {
+  content: '+';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.7em;
+  line-height: 1;
+  color: color-mix(in srgb, var(--muted) 45%, transparent);
+}
+
+.transcript-insert:hover,
+.transcript-insert:focus-visible {
+  background: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.transcript-insert:hover::after,
+.transcript-insert:focus-visible::after {
+  color: var(--fg);
+}
+
 /* Between segments: the drag handle and the merge control share this row,
    the way controls sharing a boundary in a timeline editor usually do -- one
    strip of affordances rather than two competing for the same pixels. */
@@ -337,7 +386,8 @@ noscript p {
 
 .transcript-boundary-handle:focus-visible,
 .transcript-merge:focus-visible,
-.transcript-split:focus-visible {
+.transcript-split:focus-visible,
+.transcript-insert:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
 }
@@ -394,6 +444,20 @@ noscript p {
   color: var(--bg);
 }
 
+/* Cancel: the same --error token .status.is-error already uses, so a
+   cancellable run and a failed one read as related states, not two
+   unrelated colours invented for this one button. */
+.action.is-danger {
+  border-color: var(--error);
+  color: var(--error);
+}
+
+.action.is-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--error) 12%, transparent);
+  border-color: var(--error);
+  color: var(--error);
+}
+
 /* Disabled controls are dimmed rather than hidden. Every one of them is
    disabled for a reason the status line states -- no file open, no transcript
    yet -- and a control that vanishes leaves that sentence answering a question
@@ -419,15 +483,26 @@ noscript p {
   margin-bottom: var(--sp-1);
 }
 
-/* The threading readout. Deliberately quiet -- it is here to be checked, not
-   read. It is also the only externally visible fact about the deploy host, so
-   it survives the placeholder it arrived with. */
-.footer {
-  margin-top: var(--sp-4);
-  padding-top: var(--sp-2);
-  border-top: 1px solid var(--line);
-  font-family: var(--mono);
+/* Two short lines that belong next to the controls they explain: whether the
+   selected model needs downloading, and whether this host runs single- or
+   multi-threaded. Grouped so both can be visible at once (a plausible first
+   visit: an uncached model on a non-isolated host) without each fighting the
+   controls row for its own line. */
+.control-hints {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1);
+  margin: 0 0 var(--sp-1);
+}
+
+.model-hint,
+.speed-hint {
+  margin: 0;
   font-size: 0.8125rem;
-  line-height: 1.6;
   color: var(--muted);
 }
+
+.model-hint:empty,
+.speed-hint:empty {
+  display: none;
+}