jsbeeb 1.6.0 → 1.8.0

package/src/main.js

@@ -33,6 +33,7 @@ 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,
@@ -45,6 +46,7 @@ import {
 
 let processor;
 let video;
+let rewindUI;
 const dbgr = new Debugger();
 let frames = 0;
 let frameSkip = 0;
@@ -450,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();
@@ -791,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) => {
@@ -841,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();
@@ -1036,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);
@@ -1361,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();
 });
 
@@ -1371,37 +1447,31 @@ $("#soft-reset").click(function (event) {
     event.preventDefault();
 });
 
-// Expose rewind to the debugger/console for v1
-window.jsbeebRewind = {
-    step: function () {
-        const snapshot = rewindBuffer.pop();
-        if (!snapshot) {
-            console.log("Rewind buffer empty");
-            return;
-        }
-        const wasRunning = running;
-        if (wasRunning) stop(false);
-        processor.restoreState(snapshot);
-        // Force a repaint so the display updates even while paused
-        video.paint();
-        console.log(`Rewound 1 step (${rewindBuffer.length} remaining)`);
-        // Don't auto-resume - stay paused so user can inspect state
-    },
-    get length() {
-        return rewindBuffer.length;
-    },
-    clear: function () {
-        rewindBuffer.clear();
-        console.log("Rewind buffer cleared");
-    },
-};
-
 $("#save-state").click(async function (event) {
     event.preventDefault();
     const wasRunning = running;
     if (running) stop(false);
     try {
-        const snapshot = createSnapshot(processor, model);
+        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);
@@ -1445,6 +1515,9 @@ async function loadStateFromFile(file) {
             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();
@@ -1597,7 +1670,7 @@ const startPromise = (async () => {
 })();
 
 startPromise
-    .then(() => {
+    .then(async () => {
         switch (needsAutoboot) {
             case "boot":
                 $sthAutoboot.prop("checked", true);
@@ -1627,6 +1700,9 @@ startPromise
             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) {
@@ -1732,6 +1808,17 @@ 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;
@@ -1788,6 +1875,7 @@ function draw(now) {
             if (++rewindFrameCounter >= RewindCaptureInterval) {
                 rewindFrameCounter = 0;
                 rewindBuffer.push(processor.snapshotState());
+                rewindUI.updateButtonState();
             }
         } catch (e) {
             running = false;
@@ -1973,8 +2061,9 @@ 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;
+        }
+    }
+}

package/src/rewind.js

@@ -61,6 +61,19 @@ export class RewindBuffer {
         this.writeIndex = 0;
     }
 
+    /**
+     * Return all snapshots in order from oldest to newest.
+     * @returns {object[]} array of snapshots
+     */
+    getAll() {
+        const result = new Array(this.count);
+        const start = (this.writeIndex - this.count + this.maxSnapshots) % this.maxSnapshots;
+        for (let i = 0; i < this.count; i++) {
+            result[i] = this.snapshots[(start + i) % this.maxSnapshots];
+        }
+        return result;
+    }
+
     /**
      * Number of snapshots currently stored.
      * @returns {number}

package/src/snapshot.js

@@ -4,7 +4,7 @@ import { typedArrayToBase64, base64ToTypedArray } from "./state-utils.js";
 import { findModel } from "./models.js";
 
 const SnapshotFormat = "jsbeeb-snapshot";
-const SnapshotVersion = 1;
+const SnapshotVersion = 2;
 
 /**
  * Check if two model names are compatible for state restore.
@@ -38,19 +38,52 @@ const TypedArrayConstructors = {
 };
 
 /**
- * Create a snapshot of the emulator state.
+ * Create a snapshot of the emulator state for save-to-file.
+ * Disc track pulse data is stripped — on restore, the discs are reloaded
+ * from the source references in the `media` field. (The in-memory rewind
+ * path uses cpu.snapshotState() directly, which retains full disc data.)
  * @param {import('./6502.js').Cpu6502} cpu
  * @param {object} model - the model definition object
+ * @param {object} [media] - optional media source references (disc1, disc2)
  * @returns {object} snapshot object
  */
-export function createSnapshot(cpu, model) {
-    return {
+export function createSnapshot(cpu, model, media) {
+    const state = cpu.snapshotState();
+    // Strip clean disc track data from the save-to-file snapshot.
+    // The FDC/drive mechanical state is kept; only clean tracks
+    // (which can be reloaded from the disc image) are removed.
+    // Dirty tracks (written since disc load) are kept as an overlay.
+    if (state.fdc && state.fdc.drives) {
+        for (const drive of state.fdc.drives) {
+            if (drive.disc) {
+                const dirtyTracks = {};
+                for (const key of Object.keys(drive.disc.tracks)) {
+                    const [sideStr, trackNumStr] = key.split(":");
+                    const isSideUpper = sideStr === "true";
+                    const trackNum = parseInt(trackNumStr, 10);
+                    const dirtyKey = trackNum | (isSideUpper ? 0x100 : 0);
+                    if (drive.disc._everDirtyTracks && drive.disc._everDirtyTracks.has(dirtyKey)) {
+                        dirtyTracks[key] = drive.disc.tracks[key];
+                    }
+                }
+                drive.disc.tracks = {};
+                drive.disc.dirtyTracks = dirtyTracks;
+                // Clean up internal-only fields not needed in serialized state
+                delete drive.disc._everDirtyTracks;
+                delete drive.disc._originalImageData;
+                delete drive.disc._originalImageCrc32;
+            }
+        }
+    }
+    const snapshot = {
         format: SnapshotFormat,
         version: SnapshotVersion,
         model: model.name,
         timestamp: new Date().toISOString(),
-        state: cpu.snapshotState(),
+        state,
     };
+    if (media) snapshot.media = media;
+    return snapshot;
 }
 
 /**

package/src/soundchip.js

@@ -377,11 +377,7 @@ export class InstrumentedSoundChip extends SoundChip {
     /** Read current SN76489 register state in a friendly format. */
     getState() {
         return {
-            tone: [
-                this.registers[0],
-                this.registers[1],
-                this.registers[2],
-            ],
+            tone: [this.registers[0], this.registers[1], this.registers[2]],
             noise: this.registers[3],
             volume: [
                 this._attenuationFromVolume(0),