jsbeeb 1.23.0 → 1.24.0

package/src/web/media-loader.js

@@ -1,9 +1,12 @@
-import * as utils from "../utils.js";
 import * as disc from "../fdc.js";
+import { localDisc } from "./local-disc.js";
 import { DiscLayout } from "../disc.js";
 import { loadTapeFromData } from "../tapes.js";
 import { toast } from "./toast.js";
-import { errorText, reportIgnoredFiles, reportLoadFailure, unzipAndReport } from "./reporting.js";
+import { errorText, reportIgnoredFiles, reportLoadFailure } from "./reporting.js";
+import { MediaResolver, openIfZip, splitImage } from "../media-resolver.js";
+import { stringToUint8Array } from "../binary.js";
+import { noteEvent } from "./analytics.js";
 
 /** The images offered on the Discs dialog's built-in list. */
 export const BuiltInImages = [
@@ -24,13 +27,6 @@ export const BuiltInImages = [
     },
 ];
 
-export function splitImage(image) {
-    const match = image.match(/(([^:]+):\/?\/?|[!^|])?(.*)/);
-    const schema = match[2] || match[1] || "";
-    image = match[3];
-    return { image: image, schema: schema };
-}
-
 function readFileAsBinaryString(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -63,11 +59,12 @@ export class MediaLoader extends EventTarget {
         this.drives = drives;
         this.urlState = urlState;
         this.modals = modals;
-        this.sources = {};
+        this.resolver = new MediaResolver();
+        this.driveSource = null;
 
         document.getElementById("disc_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
-            utils.noteEvent("local", "click"); // NB no filename here
+            noteEvent("local", "click"); // NB no filename here
             const file = evt.target.files[0];
             try {
                 await this.loadHTMLFile(file);
@@ -79,7 +76,7 @@ export class MediaLoader extends EventTarget {
 
         document.getElementById("fs_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
-            utils.noteEvent("local", "click"); // NB no filename here
+            noteEvent("local", "click"); // NB no filename here
             const file = evt.target.files[0];
             try {
                 await this.loadSCSIFile(file);
@@ -92,17 +89,15 @@ export class MediaLoader extends EventTarget {
         document.getElementById("tape_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
             const file = evt.target.files[0];
-            utils.noteEvent("local", "clickTape"); // NB no filename here
+            noteEvent("local", "clickTape"); // NB no filename here
 
             try {
-                let tapeData = await readFileAsBinaryString(file);
-                let tapeName = file.name;
-                if (/\.zip/i.test(tapeName)) {
-                    const unzipped = await unzipAndReport(utils.stringToUint8Array(tapeData));
-                    tapeData = unzipped.data;
-                    tapeName = unzipped.name;
-                }
-                this.setProcessorTape(await loadTapeFromData(tapeName, tapeData, model));
+                const { name, data, ignored } = await openIfZip(
+                    file.name,
+                    stringToUint8Array(await readFileAsBinaryString(file)),
+                );
+                reportIgnoredFiles(name, ignored);
+                this.setProcessorTape(await loadTapeFromData(name, data, model));
                 urlState.set({ tape: undefined });
                 modals.hide("tapes");
             } catch (error) {
@@ -119,7 +114,7 @@ export class MediaLoader extends EventTarget {
             event.dataTransfer.dropEffect = "copy";
         });
         pastetext.addEventListener("drop", async (event) => {
-            utils.noteEvent("local", "drop");
+            noteEvent("local", "drop");
             const file = event.dataTransfer.files[0];
             if (!file) return;
             try {
@@ -148,7 +143,7 @@ export class MediaLoader extends EventTarget {
             elem.querySelector(".name").textContent = image.name;
             elem.querySelector(".description").textContent = image.desc;
             elem.addEventListener("click", async () => {
-                utils.noteEvent("images", "click", image.file);
+                noteEvent("images", "click", image.file);
                 this.setDisc1Image(image.file);
                 modals.hide("discs");
                 try {
@@ -166,16 +161,12 @@ export class MediaLoader extends EventTarget {
 
     /** Register the fetcher behind an image schema; each picker calls this as it is constructed. */
     addSource(schema, fetcher) {
-        this.sources[schema] = fetcher;
+        if (schema === "drive") this.driveSource = fetcher;
+        else this.resolver.addSource(schema, fetcher);
     }
 
-    /** Route tape to the correct interface (ACIA for BBC, PPIA for Atom) */
     setProcessorTape(tape) {
-        if (this.model.isAtom) {
-            this.processor.atomppia.setTape(tape);
-        } else {
-            this.processor.acia.setTape(tape);
-        }
+        this.processor.tapeInterface.setTape(tape);
     }
 
     setDisc1Image(name) {
@@ -194,14 +185,8 @@ export class MediaLoader extends EventTarget {
     }
 
     async loadHTMLFile(file) {
-        const imageData = utils.stringToUint8Array(await readFileAsBinaryString(file));
-        const loadedDisc = disc.discFor(
-            this.processor.fdc,
-            file.name,
-            imageData,
-            undefined,
-            this.drives.layoutForDrive(0),
-        );
+        const imageData = stringToUint8Array(await readFileAsBinaryString(file));
+        const loadedDisc = disc.discFor(file.name, imageData, undefined, this.drives.layoutForDrive(0));
         // Local file: retain the image bytes for embedding in save-to-file snapshots.
         loadedDisc.setOriginalImage(imageData);
         this.drives.putDiscIn(0, loadedDisc);
@@ -213,7 +198,7 @@ export class MediaLoader extends EventTarget {
         const { processor } = this;
         if (!processor.filestore) return;
         const binaryData = await readFileAsBinaryString(file);
-        processor.filestore.scsi = utils.stringToUint8Array(binaryData);
+        processor.filestore.scsi = stringToUint8Array(binaryData);
 
         processor.filestore.PC = 0x400;
         processor.filestore.SP = 0xff;
@@ -229,128 +214,34 @@ export class MediaLoader extends EventTarget {
 
     async loadDiscImage(discImage, layout = DiscLayout.auto) {
         if (!discImage) return null;
-        const split = splitImage(discImage);
-        discImage = split.image;
-        const schema = split.schema;
+        const { schema, image } = splitImage(discImage);
         if (schema[0] === "!" || schema === "local") {
-            return disc.localDisc(this.processor.fdc, discImage, layout, (error) =>
+            return localDisc(image, layout, (error) =>
                 toast(
-                    `Browser storage would not take changes to ${discImage} (${errorText(error)}). Use Discs, Download to keep a copy.`,
+                    `Browser storage would not take changes to ${image} (${errorText(error)}). Use Discs, Download to keep a copy.`,
                     { title: "Disc", quietKey: "quietLocalDiscSaveFailed" },
                 ),
             );
         }
-        // TODO: come up with a decent UX for passing an 'onChange' parameter to each of these.
+        if (schema === "gd") {
+            const [, id, name = "(unknown)"] = image.match(/([^/]+)\/?(.*)/) ?? [null, image];
+            return this.driveSource({ name, id }, layout);
+        }
+        // TODO(#822) come up with a decent UX for passing an 'onChange' parameter to each of these.
         // Consider:
         // * hashing contents and making a local disc image named by original disc hash, save by that, and offer
         //   to load the modified disc on load.
         // * popping up a message that notes the disc has changed, and offers a way to make a local image
         // * Dialog box (ugh) saying "is this ok?"
-        switch (schema) {
-            case "|":
-            case "sth": {
-                const { name, data, ignored } = await this.sources.sth(discImage);
-                reportIgnoredFiles(name, ignored);
-                return disc.discFor(this.processor.fdc, name, data, undefined, layout);
-            }
-
-            case "hfe":
-                return disc.discFor(
-                    this.processor.fdc,
-                    discImage,
-                    await this.sources.hfe(discImage),
-                    undefined,
-                    layout,
-                );
-
-            case "gd": {
-                const splat = discImage.match(/([^/]+)\/?(.*)/);
-                let name = "(unknown)";
-                if (splat) {
-                    discImage = splat[1];
-                    name = splat[2];
-                }
-                return this.sources.drive({ name, id: discImage }, layout);
-            }
-            case "b64data":
-                return disc.discFor(this.processor.fdc, "disk.ssd", atob(discImage), undefined, layout);
-
-            case "data": {
-                const arr = Array.prototype.map.call(atob(discImage), (x) => x.charCodeAt(0));
-                const { name, data } = await unzipAndReport(arr);
-                return disc.discFor(this.processor.fdc, name, data, undefined, layout);
-            }
-            case "http":
-            case "https":
-            case "file": {
-                const asUrl = `${schema}://${discImage}`;
-                // url may end in query params etc, which can upset the DSD/SSD etc detection on the extension.
-                discImage = new URL(asUrl).pathname;
-                let discData = await utils.loadData(asUrl);
-                if (/\.zip/i.test(discImage)) {
-                    const unzipped = await unzipAndReport(discData);
-                    discData = unzipped.data;
-                    discImage = unzipped.name;
-                }
-                return disc.discFor(this.processor.fdc, discImage, discData, undefined, layout);
-            }
-            default:
-                return disc.discFor(
-                    this.processor.fdc,
-                    discImage,
-                    await disc.load("discs/" + discImage),
-                    undefined,
-                    layout,
-                );
-        }
+        const { name, data, ignored } = await this.resolver.resolve("disc", discImage);
+        reportIgnoredFiles(name, ignored);
+        return disc.discFor(name, data, undefined, layout);
     }
 
     async loadTapeImage(tapeImage) {
         if (!tapeImage) return null;
-        const split = splitImage(tapeImage);
-        tapeImage = split.image;
-        const schema = split.schema;
-
-        switch (schema) {
-            case "|":
-            case "sth": {
-                const { name, data, ignored } = await this.sources.tapeSth(tapeImage);
-                reportIgnoredFiles(name, ignored);
-                return await loadTapeFromData(name, data, this.model);
-            }
-
-            case "data": {
-                const arr = Array.prototype.map.call(atob(tapeImage), (x) => x.charCodeAt(0));
-                const { name, data } = await unzipAndReport(arr);
-                return await loadTapeFromData(name, data, this.model);
-            }
-
-            case "http":
-            case "https":
-            case "file": {
-                const asUrl = `${schema}://${tapeImage}`;
-                // url may end in query params etc, which can upset file handling
-                tapeImage = new URL(asUrl).pathname;
-                let tapeData = await utils.loadData(asUrl);
-                if (/\.zip/i.test(tapeImage)) {
-                    const unzipped = await unzipAndReport(tapeData);
-                    tapeData = unzipped.data;
-                    tapeImage = unzipped.name;
-                }
-                return await loadTapeFromData(tapeImage, tapeData, this.model);
-            }
-
-            default: {
-                const tapePath = "tapes/" + tapeImage;
-                let tapeData = await utils.loadData(tapePath);
-                let tapeName = tapeImage;
-                if (/\.zip/i.test(tapeName)) {
-                    const unzipped = await unzipAndReport(tapeData);
-                    tapeData = unzipped.data;
-                    tapeName = unzipped.name;
-                }
-                return await loadTapeFromData(tapeName, tapeData, this.model);
-            }
-        }
+        const { name, data, ignored } = await this.resolver.resolve("tape", tapeImage);
+        reportIgnoredFiles(name, ignored);
+        return loadTapeFromData(name, data, this.model);
     }
 }

package/src/{microphone-input.js → web/microphone-input.js}

@@ -1,4 +1,4 @@
-import { AnalogueSource } from "./analogue-source.js";
+import { AnalogueSource } from "../analogue-source.js";
 import { createAudioContext } from "./audio-utils.js";
 
 /**

package/src/web/modals.js

@@ -12,17 +12,16 @@ export class Modals {
         this.errorModal = new bootstrap.Modal(this.errorDialog);
         this.loadingDialog = document.getElementById("loading-dialog");
         this.loadingModal = new bootstrap.Modal(this.loadingDialog);
-        this.googleDriveAuth = document.getElementById("google-drive-auth");
         this.aysEl = document.getElementById("are-you-sure");
         this.aysModal = new bootstrap.Modal(this.aysEl);
 
-        let savedRunning = false;
-        document.addEventListener("show.bs.modal", () => {
-            if (!this.anyVisible()) savedRunning = loop.isRunning();
-            if (loop.isRunning()) loop.stop(false);
+        const holds = new WeakMap();
+        document.addEventListener("show.bs.modal", (event) => {
+            if (!holds.has(event.target)) holds.set(event.target, loop.pause(`the ${event.target.id} dialog`));
         });
-        document.addEventListener("hidden.bs.modal", () => {
-            if (!this.anyVisible() && savedRunning) loop.go();
+        document.addEventListener("hidden.bs.modal", (event) => {
+            holds.get(event.target)?.();
+            holds.delete(event.target);
         });
     }
 
@@ -48,12 +47,10 @@ export class Modals {
 
     popupLoading(msg) {
         this.loadingDialog.querySelector(".loading").textContent = msg;
-        this.googleDriveAuth.style.display = "none";
         this.loadingModal.show();
     }
 
     loadingFinished(message) {
-        this.googleDriveAuth.style.display = "none";
         this.loadingModal.hide();
         if (message) toast(message);
     }

package/src/web/page-actions.js

@@ -0,0 +1,88 @@
+import { downloadDriveData } from "./dom-utils.js";
+
+const UnloadWarning =
+    "It seems like you're still using the emulator. If you're in Chrome, it's impossible for jsbeeb to prevent some shortcuts (like ctrl-W) from performing their default behaviour (e.g. closing the window).\n" +
+    "As a workaround, create an 'Application Shortcut' from the Tools menu.  When jsbeeb runs as an application, it *can* prevent ctrl-W from closing the window.";
+
+/**
+ * The page around the emulator: the reset menu items and the filestore
+ * download, what focus and unload do to the machine, the drop guard, the
+ * dialogs a URL can ask for, and the version stamp.
+ */
+export class PageActions {
+    constructor({ loop, processor, keyboard, audioHandler, rewindUI, modals, parsedQuery, version }) {
+        this.processor = processor;
+        this.rewindUI = rewindUI;
+        this.pageListeners = new AbortController();
+        const { signal } = this.pageListeners;
+
+        for (const el of document.querySelectorAll(".initially-hidden")) el.classList.remove("initially-hidden");
+        document.getElementById("paste-form").addEventListener("submit", (event) => event.preventDefault());
+
+        window.addEventListener(
+            "blur",
+            () => {
+                keyboard.clearKeys();
+                loop.setEmulationLead(audioHandler.setWindowFocused(false));
+            },
+            { signal },
+        );
+        window.addEventListener("focus", () => loop.setEmulationLead(audioHandler.setWindowFocused(true)), { signal });
+
+        // To lower the chance of data loss, only the drop zone in the menu bar accepts drops.
+        document.addEventListener(
+            "dragover",
+            (event) => {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "none";
+            },
+            { signal },
+        );
+        document.addEventListener("drop", (event) => event.preventDefault(), { signal });
+
+        window.addEventListener(
+            "beforeunload",
+            (event) => {
+                if (!loop.isRunning() || !processor.sysvia.hasAnyKeyDown()) return;
+                event.preventDefault();
+                event.returnValue = UnloadWarning;
+            },
+            { signal },
+        );
+
+        document.getElementById("hard-reset").addEventListener("click", (event) => {
+            event.preventDefault();
+            this.hardReset();
+        });
+        document.getElementById("soft-reset").addEventListener("click", (event) => {
+            event.preventDefault();
+            this.softReset();
+        });
+        document.getElementById("download-filestore-link").addEventListener("click", () => this.downloadFilestore());
+
+        if (Object.hasOwn(parsedQuery, "about")) modals.show("info");
+        if (Object.hasOwn(parsedQuery, "pp-tos")) modals.show("pp-tos");
+
+        const versionElement = document.getElementById("jsbeeb-version");
+        if (versionElement) versionElement.textContent = `Version ${version}`;
+    }
+
+    /** Stops listening to the window and document; the elements go with the page. */
+    dispose() {
+        this.pageListeners.abort();
+    }
+
+    hardReset() {
+        this.rewindUI.reset();
+        this.processor.reset(true);
+    }
+
+    softReset() {
+        this.processor.reset(false);
+    }
+
+    downloadFilestore() {
+        if (!this.processor.filestore) return;
+        downloadDriveData(this.processor.filestore.scsi, "scsi", ".dat");
+    }
+}

package/src/web/quick-settings.js

@@ -1,44 +1,45 @@
 import { AudioOutputs } from "../audio-output.js";
 
 /**
- * The sound output, speaker amount and display mode controls on the top bar.
- * Choices go to the callbacks; what is shown follows the show methods, so the
- * bar can be kept in step with the same settings elsewhere.
+ * The sound output, speaker amount and display mode controls on the top bar:
+ * a view of those three settings, and a way to set them.
  */
 export class QuickSettings {
-    constructor({ onAudioOutput, onSpeakerAmount, onDisplayMode }, { audioOutput, speakerAmount, displayMode }) {
+    constructor(settings) {
         this.output = document.getElementById("audio-output");
         this.amount = document.getElementById("speaker-amount");
         this.display = document.getElementById("display-mode");
         if (!this.output || !this.amount || !this.display) return;
 
-        this.showAudioOutput(audioOutput);
-        this.showSpeakerAmount(speakerAmount);
-        this.showDisplayMode(displayMode);
+        this.showAudioOutput(settings.audioOutput);
+        this.showSpeakerAmount(settings.speakerAmount);
+        this.showDisplayMode(settings.displayMode);
+        settings.on("audioOutput", (audioOutput) => this.showAudioOutput(audioOutput));
+        settings.on("speakerAmount", (speakerAmount) => this.showSpeakerAmount(speakerAmount));
+        settings.on("displayMode", (displayMode) => this.showDisplayMode(displayMode));
 
         this.output.addEventListener("click", (e) => {
-            const value = e.target.closest("[data-output]")?.dataset.output;
-            if (value) onAudioOutput(value);
+            const audioOutput = e.target.closest("[data-output]")?.dataset.output;
+            if (audioOutput) settings.set({ audioOutput });
         });
-        this.amount.addEventListener("input", () => onSpeakerAmount(parseFloat(this.amount.value)));
+        this.amount.addEventListener("input", () => settings.set({ speakerAmount: parseFloat(this.amount.value) }));
         this.display.addEventListener("click", (e) => {
-            const mode = e.target.closest("[data-mode]")?.dataset.mode;
-            if (mode) onDisplayMode(mode);
+            const displayMode = e.target.closest("[data-mode]")?.dataset.mode;
+            if (displayMode) settings.set({ displayMode });
         });
     }
 
     showAudioOutput(audioOutput) {
-        if (!this.output) return;
         select(this.output.querySelectorAll("[data-output]"), (b) => b.dataset.output === audioOutput);
         this.amount.disabled = audioOutput !== AudioOutputs.speaker;
     }
 
     showSpeakerAmount(speakerAmount) {
-        if (this.amount) this.amount.value = speakerAmount;
+        this.amount.value = speakerAmount;
     }
 
     showDisplayMode(mode) {
-        if (this.display) select(this.display.querySelectorAll("[data-mode]"), (b) => b.dataset.mode === mode);
+        select(this.display.querySelectorAll("[data-mode]"), (b) => b.dataset.mode === mode);
     }
 }
 

package/src/web/reporting.js

@@ -1,4 +1,3 @@
-import * as utils from "../utils.js";
 import { toast } from "./toast.js";
 
 export const errorText = (error) => error?.message ?? `${error}`;
@@ -15,12 +14,6 @@ export function reportIgnoredFiles(name, ignored) {
     });
 }
 
-export async function unzipAndReport(data) {
-    const unzipped = await utils.unzipDiscImage(data);
-    reportIgnoredFiles(unzipped.name, unzipped.ignored);
-    return unzipped;
-}
-
 /** Handles a component's "notice" event by toasting it. */
 export function showNotice(event) {
     const { message, title, quietKey } = event.detail;

package/src/{rewind-thumbnail.js → web/rewind-thumbnail.js}

@@ -1,5 +1,3 @@
-"use strict";
-
 const ThumbnailWidth = 160;
 const ThumbnailHeight = 128;
 const FramebufferWidth = 1024;

package/src/web/rewind-ui.js

@@ -1,6 +1,8 @@
-"use strict";
+import { renderThumbnails, executeUntilFrame } from "./rewind-thumbnail.js";
+import { RewindBuffer } from "../rewind.js";
+import { RewindCaptureInterval } from "./emulation-loop.js";
 
-import { renderThumbnails, executeUntilFrame } from "../rewind-thumbnail.js";
+const RewindBufferSnapshots = 30;
 
 /**
  * Rewind scrubber UI — a filmstrip overlay showing thumbnails of recent
@@ -9,18 +11,16 @@ import { renderThumbnails, executeUntilFrame } from "../rewind-thumbnail.js";
 export class RewindUI {
     /**
      * @param {object} options
-     * @param {object} options.rewindBuffer - RewindBuffer instance
      * @param {object} options.processor - Cpu6502 instance
      * @param {object} options.video - Video instance
-     * @param {number} options.captureInterval - rewind capture interval in frames
-     * @param {object} options.loop - the emulation loop, for pausing and resuming
+     * @param {object} options.loop - the emulation loop: says when to capture, and is held while the panel is open
      */
-    constructor({ rewindBuffer, processor, video, captureInterval, loop }) {
-        this.rewindBuffer = rewindBuffer;
+    constructor({ processor, video, loop }) {
+        this.rewindBuffer = new RewindBuffer(RewindBufferSnapshots);
         this.processor = processor;
         this.video = video;
-        this.captureInterval = captureInterval;
         this.loop = loop;
+        loop.addEventListener("rewind-capture", () => this.capture());
 
         this.panel = document.getElementById("rewind-panel");
         this.filmstrip = document.getElementById("rewind-filmstrip");
@@ -28,7 +28,7 @@ export class RewindUI {
         this.openBtn = document.getElementById("rewind-open");
 
         this.isOpen = false;
-        this.wasRunning = false;
+        this.resumeLoop = null;
         this.selectedIndex = -1;
         this.snapshots = [];
         this.savedState = null;
@@ -41,6 +41,11 @@ export class RewindUI {
         });
     }
 
+    capture() {
+        this.rewindBuffer.push(this.processor.snapshotState());
+        this.updateButtonState();
+    }
+
     /** Forget everything captured, as on a hard reset. */
     reset() {
         this.close();
@@ -55,37 +60,32 @@ export class RewindUI {
         this.snapshots = this.rewindBuffer.getAll();
         if (this.snapshots.length === 0) return;
 
-        this.wasRunning = this.loop.isRunning();
-        if (this.wasRunning) this.loop.stop(false);
-
+        this.resumeLoop = this.loop.pause("the rewind panel");
         this.isOpen = true;
-        this.savedState = this.processor.snapshotState();
-
         try {
+            this.savedState = this.processor.snapshotState();
             const thumbnails = renderThumbnails(
                 this.processor,
                 this.snapshots,
                 this.video,
-                this.captureInterval,
+                RewindCaptureInterval,
                 this.savedState,
             );
             this._populateFilmstrip(thumbnails);
+            this.panel.hidden = false;
+            // Use capture phase so keys don't leak to the emulator's keyboard handler
+            document.addEventListener("keydown", this._onKeyDown, true);
+
+            // Select the newest snapshot ("now") and jump to it
+            this.selectedIndex = this.snapshots.length - 1;
+            this._restoreAndPaint(this.selectedIndex);
+            this._updateSelectionHighlight();
+            this.filmstrip.scrollLeft = this.filmstrip.scrollWidth;
         } catch (e) {
-            this.processor.restoreState(this.savedState);
+            if (this.savedState) this.processor.restoreState(this.savedState);
             this._closePanel();
-            if (this.wasRunning) this.loop.go();
             throw e;
         }
-
-        this.panel.hidden = false;
-        // Use capture phase so keys don't leak to the emulator's keyboard handler
-        document.addEventListener("keydown", this._onKeyDown, true);
-
-        // Select the newest snapshot ("now") and jump to it
-        this.selectedIndex = this.snapshots.length - 1;
-        this._restoreAndPaint(this.selectedIndex);
-        this._updateSelectionHighlight();
-        this.filmstrip.scrollLeft = this.filmstrip.scrollWidth;
     }
 
     /**
@@ -100,7 +100,6 @@ export class RewindUI {
             this.processor.restoreState(this.snapshots[this.selectedIndex]);
         }
         this._closePanel();
-        if (this.wasRunning) this.loop.go();
     }
 
     /**
@@ -110,7 +109,6 @@ export class RewindUI {
         if (!this.isOpen) return;
         this._renderState(this.savedState);
         this._closePanel();
-        if (this.wasRunning) this.loop.go();
     }
 
     /** Alias for cancel — closing the panel without explicit commit cancels. */
@@ -146,6 +144,8 @@ export class RewindUI {
         this.snapshots = [];
         this.savedState = null;
         document.removeEventListener("keydown", this._onKeyDown, true);
+        this.resumeLoop?.();
+        this.resumeLoop = null;
     }
 
     /**

package/src/web/run-controls.js

@@ -0,0 +1,39 @@
+/**
+ * The play and pause buttons on the top bar, kept in step with the loop's
+ * running state. pause() and resume() are also the desktop app's menu actions.
+ */
+export class RunControls {
+    /**
+     * @param {object} options
+     * @param {object} options.loop - the emulation loop
+     * @param {object} options.dbgr - the debugger, hidden on resume
+     * @param {object} options.keyboard - the machine keyboard, told the running state
+     */
+    constructor({ loop, dbgr, keyboard }) {
+        this.loop = loop;
+        this.dbgr = dbgr;
+        this.keyboard = keyboard;
+        this.playButton = document.getElementById("debug-play");
+        this.pauseButton = document.getElementById("debug-pause");
+
+        loop.addEventListener("running", () => {
+            const running = loop.isRunning();
+            keyboard.setRunning(running);
+            this.playButton.disabled = running;
+            this.pauseButton.disabled = !running;
+        });
+        this.pauseButton.addEventListener("click", () => this.pause());
+        this.playButton.addEventListener("click", () => this.resume());
+    }
+
+    /** Stop the loop into the debugger. */
+    pause() {
+        this.loop.stop(true);
+    }
+
+    /** Hide the debugger; the keyboard's resume event restarts the loop. */
+    resume() {
+        this.dbgr.hide();
+        this.keyboard.resumeEmulation();
+    }
+}