jsbeeb 1.5.0 → 1.7.0

package/src/main.js

@@ -30,6 +30,10 @@ import { MicrophoneInput } from "./microphone-input.js";
 import { SpeechOutput } from "./speech-output.js";
 import { MouseJoystickSource } from "./mouse-joystick-source.js";
 import { getFilterForMode } from "./canvas.js";
+import { createSnapshot, restoreSnapshot, snapshotToJSON, snapshotFromJSON, modelsCompatible } from "./snapshot.js";
+import { isBemSnapshot, parseBemSnapshot } from "./bem-snapshot.js";
+import { RewindBuffer } from "./rewind.js";
+import { RewindUI } from "./rewind-ui.js";
 import {
     buildUrlFromParams,
     guessModelFromHostname,
@@ -42,6 +46,7 @@ import {
 
 let processor;
 let video;
+let rewindUI;
 const dbgr = new Debugger();
 let frames = 0;
 let frameSkip = 0;
@@ -327,6 +332,16 @@ const $screen = $("#screen");
 const $errorDialog = $("#error-dialog");
 const $errorDialogModal = new bootstrap.Modal($errorDialog[0]);
 
+async function compressBlob(blob) {
+    const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
+    return new Response(stream).blob();
+}
+
+async function decompressBlob(blob) {
+    const stream = blob.stream().pipeThrough(new DecompressionStream("gzip"));
+    return new Response(stream).blob();
+}
+
 function showError(context, error) {
     $errorDialog.find(".context").text(context);
     $errorDialog.find(".error").text(error);
@@ -437,8 +452,11 @@ function downloadDriveData(data, name, extension) {
 }
 
 async function loadHTMLFile(file) {
-    const binaryData = await readFileAsBinaryString(file);
-    processor.fdc.loadDisc(0, disc.discFor(processor.fdc, file.name, binaryData));
+    const imageData = utils.stringToUint8Array(await readFileAsBinaryString(file));
+    const loadedDisc = disc.discFor(processor.fdc, file.name, imageData);
+    // Local file: retain the image bytes for embedding in save-to-file snapshots.
+    loadedDisc.setOriginalImage(imageData);
+    processor.fdc.loadDisc(0, loadedDisc);
     delete parsedQuery.disc;
     delete parsedQuery.disc1;
     updateUrl();
@@ -474,7 +492,11 @@ $pastetext.on("dragover", function (event) {
 $pastetext.on("drop", async function (event) {
     utils.noteEvent("local", "drop");
     const file = event.originalEvent.dataTransfer.files[0];
-    await loadHTMLFile(file);
+    if (isSnapshotFile(file.name)) {
+        await loadStateFromFile(file);
+    } else {
+        await loadHTMLFile(file);
+    }
 });
 
 const $cub = $("#cub-monitor");
@@ -774,6 +796,17 @@ keyboard.registerKeyHandler(
     { alt: false, ctrl: true },
 );
 
+keyboard.registerKeyHandler(
+    utils.keyCodes.PAGEDOWN,
+    (down) => {
+        if (down) {
+            utils.noteEvent("keyboard", "press", "pagedown");
+            if (rewindUI) rewindUI.open();
+        }
+    },
+    { alt: true, ctrl: false },
+);
+
 keyboard.registerKeyHandler(
     utils.keyCodes.B,
     (down) => {
@@ -824,6 +857,12 @@ function setDisc1Image(name) {
     config.emit("media-changed", { disc1: name });
 }
 
+function setDisc2Image(name) {
+    parsedQuery.disc2 = name;
+    updateUrl();
+    config.emit("media-changed", { disc2: name });
+}
+
 function setTapeImage(name) {
     parsedQuery.tape = name;
     updateUrl();
@@ -1019,6 +1058,51 @@ function splitImage(image) {
     return { image: image, schema: schema };
 }
 
+async function reloadSnapshotMedia(media) {
+    if (!media) return;
+    for (let driveIndex = 0; driveIndex < 2; driveIndex++) {
+        const discKey = driveIndex === 0 ? "disc1" : "disc2";
+        const imageDataKey = discKey + "ImageData";
+        const crcKey = discKey + "Crc32";
+
+        let loadedDisc = null;
+        if (media[discKey]) {
+            // URL-based disc — reload from source
+            loadedDisc = await loadDiscImage(media[discKey]);
+        } else if (media[imageDataKey]) {
+            // Locally-loaded disc — reconstruct from embedded image data
+            const imageData =
+                media[imageDataKey] instanceof Uint8Array
+                    ? media[imageDataKey]
+                    : new Uint8Array(Object.values(media[imageDataKey]));
+            const discName = media[discKey + "Name"] || "snapshot.ssd";
+            loadedDisc = disc.discFor(processor.fdc, discName, imageData);
+            // Retain the image bytes so subsequent saves can re-embed them.
+            loadedDisc.setOriginalImage(imageData);
+        }
+        if (!loadedDisc) continue;
+
+        // Verify CRC32 if present
+        if (media[crcKey] != null && loadedDisc.originalImageCrc32 != null) {
+            if (loadedDisc.originalImageCrc32 !== media[crcKey]) {
+                showError(
+                    "loading state",
+                    "The disc image appears to have changed since this snapshot was saved. The restored state may not work correctly.",
+                );
+            }
+        }
+
+        processor.fdc.loadDisc(driveIndex, loadedDisc);
+        // Only update the URL/query for URL-sourced discs. For embedded
+        // (local-file) discs, setting parsedQuery would put a bogus source
+        // in the URL and break subsequent saves/reloads.
+        if (media[discKey]) {
+            if (driveIndex === 0) setDisc1Image(media[discKey]);
+            else setDisc2Image(media[discKey]);
+        }
+    }
+}
+
 async function loadDiscImage(discImage) {
     if (!discImage) return null;
     const split = splitImage(discImage);
@@ -1344,8 +1428,17 @@ $("#download-filestore-link").on("click", function () {
     downloadDriveData(processor.filestore.scsi, "scsi", ".dat");
 });
 
-$("#hard-reset").click(function (event) {
+function hardReset() {
+    if (rewindUI) {
+        rewindUI.close();
+        rewindBuffer.clear();
+        rewindUI.updateButtonState();
+    }
     processor.reset(true);
+}
+
+$("#hard-reset").click(function (event) {
+    hardReset();
     event.preventDefault();
 });
 
@@ -1354,6 +1447,98 @@ $("#soft-reset").click(function (event) {
     event.preventDefault();
 });
 
+$("#save-state").click(async function (event) {
+    event.preventDefault();
+    const wasRunning = running;
+    if (running) stop(false);
+    try {
+        const media = {};
+        if (parsedQuery.disc1 || parsedQuery.disc) media.disc1 = parsedQuery.disc1 || parsedQuery.disc;
+        if (parsedQuery.disc2) media.disc2 = parsedQuery.disc2;
+
+        // For each drive with a disc loaded, include CRC32 for verification
+        // and embed original image data if no URL source exists (local file).
+        const drives = processor.fdc.drives;
+        for (let driveIndex = 0; driveIndex < 2; driveIndex++) {
+            const driveDisc = drives[driveIndex].disc;
+            if (!driveDisc || driveDisc.originalImageCrc32 == null) continue;
+            const discKey = driveIndex === 0 ? "disc1" : "disc2";
+            const crcKey = discKey + "Crc32";
+            media[crcKey] = driveDisc.originalImageCrc32;
+            if (!media[discKey] && driveDisc.originalImageData) {
+                media[discKey + "ImageData"] = driveDisc.originalImageData;
+                media[discKey + "Name"] = driveDisc.name;
+            }
+        }
+
+        const snapshot = createSnapshot(processor, model, Object.keys(media).length > 0 ? media : undefined);
+        const json = snapshotToJSON(snapshot);
+        const blob = await compressBlob(new Blob([json]));
+        const url = URL.createObjectURL(blob);
+        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `jsbeeb-${model.name}-${timestamp}.json.gz`;
+        a.click();
+        URL.revokeObjectURL(url);
+    } catch (e) {
+        showError("saving state", e);
+    }
+    if (wasRunning) go();
+});
+
+async function loadStateFromFile(file) {
+    const wasRunning = running;
+    if (running) stop(false);
+    try {
+        const arrayBuffer = await file.arrayBuffer();
+        let snapshot;
+        if (isBemSnapshot(arrayBuffer)) {
+            snapshot = await parseBemSnapshot(arrayBuffer);
+        } else {
+            // Detect gzip (magic bytes 0x1f 0x8b) or plain JSON
+            const bytes = new Uint8Array(arrayBuffer);
+            let text;
+            if (bytes[0] === 0x1f && bytes[1] === 0x8b) {
+                const decompressed = await decompressBlob(new Blob([arrayBuffer]));
+                text = await decompressed.text();
+            } else {
+                text = new TextDecoder().decode(arrayBuffer);
+            }
+            snapshot = snapshotFromJSON(text);
+        }
+        if (!modelsCompatible(snapshot.model, model.name)) {
+            // Model mismatch: stash state and reload with correct model
+            sessionStorage.setItem("jsbeeb-pending-state", snapshotToJSON(snapshot));
+            const newQuery = { ...parsedQuery, model: snapshot.model };
+            const baseUrl = window.location.origin + window.location.pathname;
+            window.location.href = buildUrlFromParams(baseUrl, newQuery, paramTypes);
+            return;
+        }
+        // Order matters: reload disc media first so the base disc is in the
+        // drive before restoreSnapshot applies dirty track overlays on top.
+        await reloadSnapshotMedia(snapshot.media);
+        restoreSnapshot(processor, model, snapshot);
+        // Force a repaint so the display updates even while paused
+        video.paint();
+    } catch (e) {
+        showError("loading state", e);
+    }
+    if (wasRunning) go();
+}
+
+function isSnapshotFile(filename) {
+    const lower = filename.toLowerCase();
+    return lower.endsWith(".snp") || lower.endsWith(".json") || lower.endsWith(".json.gz") || lower.endsWith(".gz");
+}
+
+$("#load-state").on("change", async function (event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    event.target.value = "";
+    await loadStateFromFile(file);
+});
+
 $("#tape-menu a").on("click", function (e) {
     const type = $(e.target).attr("data-id");
     if (type === undefined) return;
@@ -1485,7 +1670,7 @@ const startPromise = (async () => {
 })();
 
 startPromise
-    .then(() => {
+    .then(async () => {
         switch (needsAutoboot) {
             case "boot":
                 $sthAutoboot.prop("checked", true);
@@ -1509,6 +1694,22 @@ startPromise
             dbgr.setPatch(parsedQuery.patch);
         }
 
+        // Restore pending state from a cross-model load (sessionStorage)
+        const pendingState = sessionStorage.getItem("jsbeeb-pending-state");
+        if (pendingState) {
+            sessionStorage.removeItem("jsbeeb-pending-state");
+            try {
+                const snapshot = snapshotFromJSON(pendingState);
+                // Order matters: reload disc media first so the base disc is in the
+                // drive before restoreSnapshot applies dirty track overlays on top.
+                await reloadSnapshotMedia(snapshot.media);
+                restoreSnapshot(processor, model, snapshot);
+                processor.execute(40000);
+            } catch (e) {
+                showError("restoring saved state", e);
+            }
+        }
+
         go();
     })
     .catch((error) => {
@@ -1603,6 +1804,21 @@ function VirtualSpeedUpdater() {
 
 const virtualSpeedUpdater = new VirtualSpeedUpdater();
 
+const rewindBuffer = new RewindBuffer(30);
+let rewindFrameCounter = 0;
+const RewindCaptureInterval = 50; // ~1 second at 50fps
+
+rewindUI = new RewindUI({
+    rewindBuffer,
+    processor,
+    video,
+    captureInterval: RewindCaptureInterval,
+    stop,
+    go,
+    isRunning: () => running,
+});
+rewindUI.updateButtonState();
+
 function draw(now) {
     if (!running) {
         last = 0;
@@ -1655,6 +1871,12 @@ function draw(now) {
             }
             const end = performance.now();
             virtualSpeedUpdater.update(cycles, end - now, speedy);
+            // Capture rewind snapshot periodically
+            if (++rewindFrameCounter >= RewindCaptureInterval) {
+                rewindFrameCounter = 0;
+                rewindBuffer.push(processor.snapshotState());
+                rewindUI.updateButtonState();
+            }
         } catch (e) {
             running = false;
             utils.noteEvent("exception", "thrown", e.stack);
@@ -1836,9 +2058,12 @@ electron({
             }
         },
     },
+    loadStateFile: loadStateFromFile,
     actions: {
         "soft-reset": () => processor.reset(false),
-        "hard-reset": () => processor.reset(true),
+        "hard-reset": hardReset,
+        "save-state": () => $("#save-state").trigger("click"),
+        rewind: () => rewindUI.open(),
     },
 });
 

package/src/rewind-thumbnail.js

@@ -0,0 +1,118 @@
+"use strict";
+
+const ThumbnailWidth = 160;
+const ThumbnailHeight = 128;
+const FramebufferWidth = 1024;
+const FramebufferHeight = 625;
+const VisiblePixels = FramebufferWidth * FramebufferHeight;
+const CyclesPerChunk = 8000;
+// Safety limit to prevent infinite loops if video state is broken
+const MaxChunks = 100;
+
+// Reusable offscreen canvas and ImageData for captureThumbnail to avoid
+// allocating a full 1024x625 buffer per thumbnail.
+let srcCanvas = null;
+let srcCtx = null;
+let srcImageData = null;
+
+function ensureSrcCanvas() {
+    if (srcCanvas) return;
+    srcCanvas = document.createElement("canvas");
+    srcCanvas.width = FramebufferWidth;
+    srcCanvas.height = FramebufferHeight;
+    srcCtx = srcCanvas.getContext("2d", { alpha: false });
+    srcImageData = srcCtx.createImageData(FramebufferWidth, FramebufferHeight);
+}
+
+/**
+ * Render a single thumbnail canvas from a framebuffer Uint32Array.
+ * Reuses a shared offscreen canvas for the full-size copy, then
+ * downscales into a new small canvas for the thumbnail.
+ * @param {Uint32Array} fb32 - the framebuffer to capture
+ * @returns {HTMLCanvasElement} a small canvas with the downscaled image
+ */
+function captureThumbnail(fb32) {
+    ensureSrcCanvas();
+    // fb32 may be 1024x1024 (WebGL) or 1024x625 (2D) — only copy the visible region
+    new Uint32Array(srcImageData.data.buffer).set(fb32.subarray(0, VisiblePixels));
+    srcCtx.putImageData(srcImageData, 0, 0);
+
+    const thumb = document.createElement("canvas");
+    thumb.width = ThumbnailWidth;
+    thumb.height = ThumbnailHeight;
+    const thumbCtx = thumb.getContext("2d", { alpha: false });
+    thumbCtx.drawImage(srcCanvas, 0, 0, FramebufferWidth, FramebufferHeight, 0, 0, ThumbnailWidth, ThumbnailHeight);
+    return thumb;
+}
+
+/**
+ * Execute cycles until a complete top-to-bottom frame is in fb32.
+ *
+ * Snapshots may be mid-frame, so we run through two vsyncs:
+ * 1. First vsync completes the partial frame and clears fb32 normally.
+ * 2. Second vsync rasterises a full frame; we suppress clearPaintBuffer
+ *    so fb32 retains the completed frame for capture.
+ */
+function executeUntilFrame(processor, video) {
+    const startFrame = video.frameCount;
+
+    // Phase 1: run to first vsync (completes partial frame, clears fb32)
+    for (let i = 0; i < MaxChunks; i++) {
+        if (processor.execute(CyclesPerChunk) === false) break;
+        if (video.frameCount !== startFrame) break;
+    }
+
+    // Phase 2: run to second vsync with clear suppressed (full frame in fb32)
+    const secondFrame = video.frameCount;
+    const origClear = video.clearPaintBuffer;
+    video.clearPaintBuffer = function () {};
+    try {
+        for (let i = 0; i < MaxChunks; i++) {
+            if (processor.execute(CyclesPerChunk) === false) return;
+            if (video.frameCount !== secondFrame) return;
+        }
+    } finally {
+        video.clearPaintBuffer = origClear;
+    }
+}
+
+/**
+ * Generate thumbnail canvases for all snapshots in a rewind buffer.
+ *
+ * While the emulator is paused:
+ * 1. Saves the current state
+ * 2. For each snapshot (oldest first), restores it, runs until a full
+ *    frame has been rasterised, and captures a downscaled thumbnail
+ * 3. Restores the original state
+ *
+ * @param {object} processor - the Cpu6502 instance
+ * @param {object[]} snapshots - array of snapshots (oldest first)
+ * @param {object} video - the Video instance (used to access fb32)
+ * @param {number} captureInterval - rewind capture interval in frames (~50)
+ * @param {object} [savedState] - pre-saved state to restore after rendering (avoids double snapshot)
+ * @returns {{canvas: HTMLCanvasElement, index: number, ageSeconds: number}[]}
+ */
+export function renderThumbnails(processor, snapshots, video, captureInterval, savedState) {
+    if (snapshots.length === 0) return [];
+
+    if (!savedState) savedState = processor.snapshotState();
+    const framesPerSecond = 50;
+    const results = [];
+
+    try {
+        for (let i = 0; i < snapshots.length; i++) {
+            processor.restoreState(snapshots[i]);
+            executeUntilFrame(processor, video);
+            const canvas = captureThumbnail(video.fb32);
+            const stepsFromNewest = snapshots.length - 1 - i;
+            const ageSeconds = Math.round((stepsFromNewest * captureInterval) / framesPerSecond);
+            results.push({ canvas, index: i, ageSeconds });
+        }
+    } finally {
+        processor.restoreState(savedState);
+    }
+
+    return results;
+}
+
+export { executeUntilFrame };

package/src/rewind-ui.js

@@ -0,0 +1,230 @@
+"use strict";
+
+import { renderThumbnails, executeUntilFrame } from "./rewind-thumbnail.js";
+
+/**
+ * Rewind scrubber UI — a filmstrip overlay showing thumbnails of recent
+ * emulator states, allowing the user to click to restore any of them.
+ */
+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 {function} options.stop - function to pause the emulator
+     * @param {function} options.go - function to resume the emulator
+     * @param {function} options.isRunning - function returning current running state
+     */
+    constructor({ rewindBuffer, processor, video, captureInterval, stop, go, isRunning }) {
+        this.rewindBuffer = rewindBuffer;
+        this.processor = processor;
+        this.video = video;
+        this.captureInterval = captureInterval;
+        this.stop = stop;
+        this.go = go;
+        this.isRunning = isRunning;
+
+        this.panel = document.getElementById("rewind-panel");
+        this.filmstrip = document.getElementById("rewind-filmstrip");
+        this.closeBtn = document.getElementById("rewind-close");
+        this.openBtn = document.getElementById("rewind-open");
+
+        this.isOpen = false;
+        this.wasRunning = false;
+        this.selectedIndex = -1;
+        this.snapshots = [];
+        this.savedState = null;
+
+        this._onKeyDown = this._onKeyDown.bind(this);
+        this.closeBtn.addEventListener("click", () => this.close());
+        this.openBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            this.open();
+        });
+    }
+
+    /** Open the rewind scrubber panel. */
+    open() {
+        if (this.isOpen) return;
+
+        this.snapshots = this.rewindBuffer.getAll();
+        if (this.snapshots.length === 0) return;
+
+        this.wasRunning = this.isRunning();
+        if (this.wasRunning) this.stop(false);
+
+        this.isOpen = true;
+        this.savedState = this.processor.snapshotState();
+
+        try {
+            const thumbnails = renderThumbnails(
+                this.processor,
+                this.snapshots,
+                this.video,
+                this.captureInterval,
+                this.savedState,
+            );
+            this._populateFilmstrip(thumbnails);
+        } catch (e) {
+            this.processor.restoreState(this.savedState);
+            this._closePanel();
+            if (this.wasRunning) this.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;
+    }
+
+    /**
+     * Close the rewind panel, committing the selected snapshot.
+     * The emulator resumes from the exact snapshot state.
+     */
+    commit() {
+        if (!this.isOpen) return;
+        // Re-restore the snapshot so the CPU resumes from the exact point,
+        // not from the state advanced by executeUntilFrame during preview.
+        if (this.selectedIndex >= 0 && this.selectedIndex < this.snapshots.length) {
+            this.processor.restoreState(this.snapshots[this.selectedIndex]);
+        }
+        this._closePanel();
+        if (this.wasRunning) this.go();
+    }
+
+    /**
+     * Close the rewind panel, restoring the state from before it was opened.
+     */
+    cancel() {
+        if (!this.isOpen) return;
+        this._renderState(this.savedState);
+        this._closePanel();
+        if (this.wasRunning) this.go();
+    }
+
+    /** Alias for cancel — closing the panel without explicit commit cancels. */
+    close() {
+        this.cancel();
+    }
+
+    /**
+     * Restore the emulator to the snapshot at the given index and update
+     * both the main display and the filmstrip selection highlight.
+     * @param {number} index - index into the snapshots array
+     */
+    selectSnapshot(index) {
+        if (index < 0 || index >= this.snapshots.length) return;
+
+        this.selectedIndex = index;
+        this._restoreAndPaint(index);
+        this._updateSelectionHighlight();
+        this._scrollToSelected();
+    }
+
+    /** Update the disabled state of the Rewind menu item. */
+    updateButtonState() {
+        if (this.openBtn) {
+            this.openBtn.classList.toggle("disabled", this.rewindBuffer.length === 0);
+        }
+    }
+
+    _closePanel() {
+        this.isOpen = false;
+        this.panel.hidden = true;
+        this.filmstrip.innerHTML = "";
+        this.snapshots = [];
+        this.savedState = null;
+        document.removeEventListener("keydown", this._onKeyDown, true);
+    }
+
+    /**
+     * Render a snapshot's frame to the display without advancing CPU state.
+     * Restores the snapshot, runs to vsync for a complete frame, paints it,
+     * then re-restores the snapshot so the CPU stays at the exact point.
+     */
+    _restoreAndPaint(index) {
+        this._renderState(this.snapshots[index]);
+    }
+
+    /** Render a state to the display, restoring it afterwards. */
+    _renderState(state) {
+        this.processor.restoreState(state);
+        executeUntilFrame(this.processor, this.video);
+        this.video.paint();
+        this.processor.restoreState(state);
+    }
+
+    _updateSelectionHighlight() {
+        const thumbs = this.filmstrip.querySelectorAll(".rewind-thumb");
+        for (const thumb of thumbs) {
+            thumb.classList.toggle("selected", Number(thumb.dataset.index) === this.selectedIndex);
+        }
+    }
+
+    _scrollToSelected() {
+        const selected = this.filmstrip.querySelector(".rewind-thumb.selected");
+        if (selected) {
+            selected.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
+        }
+    }
+
+    _populateFilmstrip(thumbnails) {
+        this.filmstrip.innerHTML = "";
+        for (const { canvas, index, ageSeconds } of thumbnails) {
+            const wrapper = document.createElement("div");
+            wrapper.className = "rewind-thumb";
+            wrapper.dataset.index = index;
+            wrapper.appendChild(canvas);
+
+            const label = document.createElement("span");
+            label.className = "rewind-thumb-label";
+            label.textContent = ageSeconds === 0 ? "now" : `-${ageSeconds}s`;
+            wrapper.appendChild(label);
+
+            wrapper.addEventListener("click", () => this.selectSnapshot(index));
+            this.filmstrip.appendChild(wrapper);
+        }
+    }
+
+    _onKeyDown(e) {
+        switch (e.key) {
+            case "Escape":
+                e.preventDefault();
+                e.stopPropagation();
+                this.cancel();
+                break;
+            case "Enter":
+                e.preventDefault();
+                e.stopPropagation();
+                this.commit();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.selectedIndex > 0) {
+                    this.selectSnapshot(this.selectedIndex - 1);
+                }
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.selectedIndex < this.snapshots.length - 1) {
+                    this.selectSnapshot(this.selectedIndex + 1);
+                }
+                break;
+            default:
+                // Block keys from reaching the emulator but allow browser
+                // shortcuts (Tab, accessibility keys, etc.) to work normally
+                e.stopPropagation();
+                break;
+        }
+    }
+}