jsbeeb 1.15.0 → 1.17.0

package/src/main.js

@@ -12,6 +12,7 @@ import * as utils_atom from "./utils_atom.js";
 import { LoadSD } from "./mmc.js";
 import { Cmos } from "./cmos.js";
 import { StairwayToHell } from "./sth.js";
+import { BbcDiscArchive, describe as describeHfe } from "./bbcdiscs.js";
 import { GamePad } from "./gamepads.js";
 import * as disc from "./fdc.js";
 import { loadTapeFromData } from "./tapes.js";
@@ -19,14 +20,15 @@ import { GoogleDriveLoader } from "./google-drive.js";
 import * as tokeniser from "./basic-tokenise.js";
 import * as canvasLib from "./canvas.js";
 import { Config } from "./config.js";
-import { tubeModelFor } from "./models.js";
+import { DefaultModel, findModel, tubeModelFor } from "./models.js";
 import { initialise as electron } from "./app/electron.js";
 import { AudioHandler } from "./web/audio-handler.js";
 import { Econet } from "./econet.js";
-import { toSsdOrDsd } from "./disc.js";
+import { DiscLayout, toSsdOrDsd } from "./disc.js";
 import { toHfe } from "./disc-hfe.js";
 import { Keyboard } from "./keyboard.js";
 import { GamepadSource } from "./gamepad-source.js";
+import { toast } from "./web/toast.js";
 import { MicrophoneInput } from "./microphone-input.js";
 import { SpeechOutput } from "./speech-output.js";
 import { MouseJoystickSource } from "./mouse-joystick-source.js";
@@ -44,14 +46,17 @@ import { isBemSnapshot, parseBemSnapshot } from "./bem-snapshot.js";
 import { isUefSnapshot, parseUefSnapshot } from "./uef-snapshot.js";
 import { RewindBuffer } from "./rewind.js";
 import { RewindUI } from "./rewind-ui.js";
+import { DiscVisualiser } from "./disc-visualiser.js";
 import { downloadBlob } from "./dom-utils.js";
 import {
     buildUrlFromParams,
+    DriveTracks,
     guessModelFromHostname,
     ParamTypes,
     parseMediaParams,
     parseQueryString,
     processAutobootParams,
+    processDriveTrackParams,
     processInputParams,
 } from "./url-params.js";
 
@@ -64,6 +69,7 @@ let frameSkip = 0;
 let syncLights;
 let discSth;
 let tapeSth;
+let hfeArchive;
 let running;
 let model;
 
@@ -152,6 +158,8 @@ const paramTypes = {
     keyLayout: ParamTypes.STRING,
     autotype: ParamTypes.STRING,
     displayMode: ParamTypes.STRING,
+    drive0Tracks: ParamTypes.STRING,
+    drive1Tracks: ParamTypes.STRING,
 };
 
 // Parse the query string with parameter types
@@ -172,6 +180,7 @@ let econet = null;
 
 // Parse disc and tape images from query parameters
 const { discImage: queryDiscImage, secondDiscImage: querySecondDisc, mmcImage } = parseMediaParams(parsedQuery);
+const { settings: driveTracks, warnings: driveTrackWarnings } = processDriveTrackParams(parsedQuery);
 
 // Only assign if values are provided
 if (queryDiscImage) discImage = queryDiscImage;
@@ -232,9 +241,10 @@ speechOutput.enabled = !!parsedQuery.speechOutput;
 const config = new Config(
     function onChange(changed) {
         if (changed.displayMode) {
-            displayModeFilter = getFilterForMode(changed.displayMode);
+            // swapCanvas settles displayModeFilter on whatever was really
+            // built, so take the picture from that rather than the request.
+            swapCanvas(getFilterForMode(changed.displayMode));
             setCrtPic(displayModeFilter);
-            swapCanvas(displayModeFilter);
             // Trigger window resize to recalculate layout with new dimensions
             window.dispatchEvent(new Event("resize"));
         }
@@ -280,7 +290,13 @@ const config = new Config(
 // Perform mapping of legacy models to the new format
 config.mapLegacyModels(parsedQuery);
 
-config.setModel(parsedQuery.model || guessModelFromHostname(window.location.hostname));
+const requestedModelName = parsedQuery.model || guessModelFromHostname(window.location.hostname);
+const requestedModel = findModel(requestedModelName);
+if (!requestedModel)
+    toast(`There is no model called "${requestedModelName}". Using ${DefaultModel.name} instead.`, {
+        title: "Model",
+    });
+config.setModel((requestedModel ?? DefaultModel).name);
 config.setKeyLayout(keyLayout);
 config.setTubeCpuMultiplier(parsedQuery.tubeCpuMultiplier || 1);
 config.setMicrophoneChannel(parsedQuery.microphoneChannel);
@@ -352,7 +368,7 @@ sbBind(document.querySelector(".sidebar.bottom"), parsedQuery.sbBottom, function
 });
 
 if (cpuMultiplier !== 1) console.log(`CPU multiplier set to ${cpuMultiplier}`);
-const cpuSpeed = model.clockMhz * 1000 * 1000;
+const cpuSpeed = model.cyclesPerSecond;
 const clocksPerSecond = (cpuMultiplier * cpuSpeed) | 0;
 const MaxCyclesPerFrame = clocksPerSecond / 10;
 
@@ -381,16 +397,87 @@ function showError(context, error) {
     errorDialogModal.show();
 }
 
+const errorText = (error) => error?.message ?? `${error}`;
+
+function showNotice(event) {
+    const { message, title, quietKey } = event.detail;
+    toast(message, { title, quietKey });
+}
+
 if (keyMappingWarnings.length) {
-    showError("applying the key mappings in the URL", keyMappingWarnings.join(" "));
+    toast(`${keyMappingWarnings.join(" ")} The key names are listed in the README.`, {
+        title: "Mappings in the URL",
+    });
+}
+
+if (driveTrackWarnings.length) {
+    toast(`${driveTrackWarnings.join(" ")} Auto is in use instead; pick 40 or 80 from the Discs menu.`, {
+        title: "Disc drives",
+    });
+}
+
+/** @returns {string} the DiscLayout to load an image for this drive with */
+function layoutForDrive(driveIndex) {
+    return driveTracks[driveIndex] === DriveTracks.eighty ? DiscLayout.contiguous : DiscLayout.auto;
+}
+
+/** @returns {Number|undefined} the tracksPerStep the user fixed this drive at, if they fixed one */
+function tracksPerStepForDrive(driveIndex) {
+    if (driveTracks[driveIndex] === DriveTracks.auto) return undefined;
+    return driveTracks[driveIndex] === DriveTracks.forty ? 2 : 1;
+}
+
+function putDiscIn(driveIndex, loadedDisc) {
+    const drive = processor.fdc.drives[driveIndex];
+    const fixed = tracksPerStepForDrive(driveIndex);
+    const was = drive.tracksPerStep;
+    processor.fdc.loadDisc(driveIndex, loadedDisc, fixed);
+    showDriveTracks(driveIndex);
+    // A switch the user fixed does not move, so anything it does is not news.
+    if (fixed === undefined && drive.tracksPerStep !== was) noteDriveTracks(driveIndex, loadedDisc.name);
+}
+
+const tracksPerStepFor = (tracks) => (tracks === "40" ? 2 : 1);
+
+function showDriveTracks(driveIndex) {
+    const drive = processor.fdc?.drives[driveIndex];
+    if (!drive) return;
+    for (const button of driveTracksButtons(driveIndex))
+        button.classList.toggle("active", tracksPerStepFor(button.dataset.tracks) === drive.tracksPerStep);
+}
+
+function driveTracksButtons(driveIndex) {
+    return document.querySelectorAll(`.drive-tracks[data-drive="${driveIndex}"] [data-tracks]`);
+}
+
+function noteDriveTracks(driveIndex, discName) {
+    const tracks = processor.fdc.drives[driveIndex].tracksPerStep === 2 ? "40" : "80";
+    toast(`Drive ${driveIndex} switched to ${tracks} track for ${discName}.`, {
+        title: "Disc drive",
+        quietKey: "quietDriveTracks",
+    });
 }
 
 function createCanvasForFilter(filterClass) {
+    // Not `config`: that is the emulator's live configuration object, declared
+    // at module scope and used throughout this file.
+    const displayConfig = filterClass.getDisplayConfig();
+    // Each mode says how many pixels it wants to draw into. Set this before
+    // creating the context, which fixes its initial viewport.
+    screenCanvas.width = displayConfig.canvasWidth;
+    screenCanvas.height = displayConfig.canvasHeight;
+
     const newCanvas = tryGl ? canvasLib.bestCanvas(screenCanvas, filterClass) : new canvasLib.Canvas(screenCanvas);
 
-    if (filterClass.requiresGl() && !newCanvas.isWebGl()) {
-        const config = filterClass.getDisplayConfig();
-        showError(`enabling ${config.name} mode`, `${config.name} requires WebGL. Using standard display instead.`);
+    // Test which filter was actually built, not merely whether we got WebGL: a
+    // filter can decline a context that works perfectly well for other modes,
+    // in which case bestCanvas quietly gives us an unfiltered GL canvas.
+    if (newCanvas.filterClass !== filterClass) {
+        const reason = newCanvas.fallbackReason ? ` (${newCanvas.fallbackReason})` : "";
+        toast(`${displayConfig.name} is not available on this device, so the standard display is in use${reason}.`, {
+            title: "Display",
+            quietKey: "quietDisplayFallback",
+        });
     }
 
     return newCanvas;
@@ -398,20 +485,33 @@ function createCanvasForFilter(filterClass) {
 
 let displayModeFilter = canvasLib.getFilterForMode(parsedQuery.displayMode || "rgb");
 function swapCanvas(newFilterClass) {
+    const oldCanvas = canvas;
     const newCanvas = createCanvasForFilter(newFilterClass);
+    // Carry the picture over; the buffers differ in height, so copy what fits.
+    newCanvas.fb32.set(oldCanvas.fb32.subarray(0, newCanvas.fb32.length));
+    // Only once the replacement exists, so a failure to build it leaves the
+    // display we already had. The two share a GL context but no GL objects.
+    oldCanvas.dispose();
     video.fb32 = newCanvas.fb32;
     video.paint_ext = function paint(minx, miny, maxx, maxy) {
         frames++;
         if (frames < frameSkip) return;
         frames = 0;
-        newCanvas.paint(minx, miny, maxx, maxy, this.frameCount);
+        newCanvas.paint(minx, miny, maxx, maxy, { frameCount: this.frameCount, lineGrid: this.lineGrid });
     };
     canvas = newCanvas;
-    displayModeFilter = newFilterClass;
+    // Follow the filter we ended up with, not the one we asked for: everything
+    // downstream — the monitor picture, the canvas geometry, how large a
+    // drawing buffer to ask for — comes from its display config.
+    displayModeFilter = newCanvas.filterClass;
+    // Nothing else will redraw: the mode is changed from a modal, which stops
+    // the emulator.
+    video.paint();
     window.setTimeout(() => window.dispatchEvent(new Event("resize")), 1);
 }
 
 let canvas = createCanvasForFilter(displayModeFilter);
+displayModeFilter = canvas.filterClass;
 
 video = new Video(
     model.isMaster,
@@ -420,7 +520,7 @@ video = new Video(
         frames++;
         if (frames < frameSkip) return;
         frames = 0;
-        canvas.paint(minx, miny, maxx, maxy, this.frameCount);
+        canvas.paint(minx, miny, maxx, maxy, { frameCount: this.frameCount, lineGrid: this.lineGrid });
     },
     { isAtom: model.isAtom },
 );
@@ -488,10 +588,10 @@ function downloadDriveData(data, name, extension) {
 
 async function loadHTMLFile(file) {
     const imageData = utils.stringToUint8Array(await readFileAsBinaryString(file));
-    const loadedDisc = disc.discFor(processor.fdc, file.name, imageData);
+    const loadedDisc = disc.discFor(processor.fdc, file.name, imageData, undefined, layoutForDrive(0));
     // Local file: retain the image bytes for embedding in save-to-file snapshots.
     loadedDisc.setOriginalImage(imageData);
-    processor.fdc.loadDisc(0, loadedDisc);
+    putDiscIn(0, loadedDisc);
     delete parsedQuery.disc;
     delete parsedQuery.disc1;
     updateUrl();
@@ -533,7 +633,7 @@ pastetext.addEventListener("drop", async function (event) {
         await loadStateFromFile(file, arrayBuffer);
     } else if (file.name.toLowerCase().endsWith(".uef")) {
         // Regular UEF tape image (not a BeebEm save state)
-        setProcessorTape(await loadTapeFromData(file.name, new Uint8Array(arrayBuffer), model.isAtom));
+        setProcessorTape(await loadTapeFromData(file.name, new Uint8Array(arrayBuffer), model));
     } else {
         await loadHTMLFile(file);
     }
@@ -619,7 +719,7 @@ window.addEventListener("beforeunload", function (event) {
 });
 
 if (config.hasEconet) {
-    econet = new Econet(stationId);
+    econet = new Econet(stationId, model.cyclesPerSecond);
 } else {
     document.getElementById("fsmenuitem").style.display = "none";
 }
@@ -668,14 +768,14 @@ processor = new CpuClass(model, {
     econet,
 });
 
-processor.teletextAdaptor?.addEventListener("showError", (e) => showError(e.detail.context, e.detail.error));
+processor.teletextAdaptor?.addEventListener("notice", showNotice);
 
 // Create input sources
 const gamepadSource = new GamepadSource(emulationConfig.getGamepads);
 // Create MicrophoneInput but don't enable by default
 const microphoneInput = new MicrophoneInput();
 microphoneInput.setErrorCallback((message) => {
-    showError("accessing microphone", message);
+    toast(`${message} The microphone channel has been turned off.`, { title: "Microphone" });
 });
 
 // Create MouseJoystickSource but don't enable by default
@@ -776,7 +876,7 @@ keyboard = new Keyboard({
     keyLayout,
     dbgr,
 });
-keyboard.addEventListener("showError", (e) => showError(e.detail.context, e.detail.error));
+keyboard.addEventListener("notice", showNotice);
 keyboard.addEventListener("pause", () => stop(false));
 keyboard.addEventListener("resume", () => go());
 keyboard.addEventListener("break", (e) => {
@@ -911,15 +1011,26 @@ function setTapeImage(name) {
     config.dispatchEvent(new CustomEvent("media-changed", { detail: { tape: name } }));
 }
 
-function sthClearList() {
-    for (const el of document.querySelectorAll("#sth-list li:not(.template)")) el.remove();
+function clearArchiveList(listId) {
+    for (const el of document.querySelectorAll(`#${listId} li:not(.template)`)) el.remove();
+}
+
+function showArchiveMessage(modalId, listId, message) {
+    const loading = document.querySelector(`#${modalId} .loading`);
+    loading.textContent = message;
+    loading.style.display = "";
+    clearArchiveList(listId);
+}
+
+function filterArchiveList(listId, filter) {
+    filter = filter.toLowerCase();
+    for (const el of document.querySelectorAll(`#${listId} li:not(.template)`)) {
+        el.style.display = el.textContent.toLowerCase().includes(filter) ? "" : "none";
+    }
 }
 
 function sthStartLoad() {
-    const sthLoading = document.querySelector("#sth .loading");
-    sthLoading.textContent = "Loading catalog from STH archive";
-    sthLoading.style.display = "";
-    sthClearList();
+    showArchiveMessage("sth", "sth-list", "Loading catalog from STH archive");
 }
 
 async function discSthClick(item) {
@@ -932,8 +1043,8 @@ async function discSthClick(item) {
 
     popupLoading("Loading " + item);
     try {
-        const disc = await loadDiscImage(parsedQuery.disc1);
-        processor.fdc.loadDisc(0, disc);
+        const loaded = await loadDiscImage(parsedQuery.disc1, layoutForDrive(0));
+        putDiscIn(0, loaded);
         loadingFinished();
 
         if (needsAutoboot) {
@@ -941,7 +1052,7 @@ async function discSthClick(item) {
         }
     } catch (err) {
         console.error("Error loading disc image:", err);
-        loadingFinished(err);
+        loadingFinished(`Unable to load ${item} from the STH archive: ${errorText(err)}`);
     }
 }
 
@@ -956,7 +1067,7 @@ async function tapeSthClick(item) {
         loadingFinished();
     } catch (err) {
         console.error("Error loading tape image:", err);
-        loadingFinished(err);
+        loadingFinished(`Unable to load ${item} from the STH archive: ${errorText(err)}`);
     }
 }
 
@@ -967,7 +1078,7 @@ document.getElementById("sth").addEventListener("shown.bs.modal", () => {
 
 function makeOnCat(onClick) {
     return function (cat) {
-        sthClearList();
+        clearArchiveList("sth-list");
         const sthList = document.getElementById("sth-list");
         document.querySelector("#sth .loading").style.display = "none";
         const template = sthList.querySelector(".template");
@@ -997,24 +1108,30 @@ function makeOnCat(onClick) {
 }
 
 function sthOnError() {
-    const sthLoading = document.querySelector("#sth .loading");
-    sthLoading.textContent = "There was an error accessing the STH archive";
-    sthLoading.style.display = "";
-    sthClearList();
+    showArchiveMessage("sth", "sth-list", "There was an error accessing the STH archive");
 }
 
 discSth = new StairwayToHell(sthStartLoad, makeOnCat(discSthClick), sthOnError, false);
 tapeSth = new StairwayToHell(sthStartLoad, makeOnCat(tapeSthClick), sthOnError, true);
-
-const sthAutoboot = document.querySelector("#sth .autoboot");
-sthAutoboot.addEventListener("click", function () {
-    if (sthAutoboot.checked) {
-        parsedQuery.autoboot = "";
-    } else {
-        delete parsedQuery.autoboot;
-    }
-    updateUrl();
-});
+hfeArchive = new BbcDiscArchive(hfeStartLoad, hfeOnCat, hfeOnError);
+
+// Every archive picker offers the same autoboot choice, and it is one setting,
+// so ticking it in either has to show in both.
+const autobootChecks = document.querySelectorAll("#sth .autoboot, #hfe .autoboot");
+function showAutoboot(checked) {
+    for (const check of autobootChecks) check.checked = checked;
+}
+for (const check of autobootChecks) {
+    check.addEventListener("click", function () {
+        showAutoboot(check.checked);
+        if (check.checked) {
+            parsedQuery.autoboot = "";
+        } else {
+            delete parsedQuery.autoboot;
+        }
+        updateUrl();
+    });
+}
 
 document.addEventListener("click", function (e) {
     const target = e.target.closest("a.sth");
@@ -1030,16 +1147,94 @@ document.addEventListener("click", function (e) {
 });
 
 function setSthFilter(filter) {
-    filter = filter.toLowerCase();
-    for (const el of document.querySelectorAll("#sth-list li:not(.template)")) {
-        el.style.display = el.textContent.toLowerCase().indexOf(filter) >= 0 ? "" : "none";
-    }
+    filterArchiveList("sth-list", filter);
 }
 
 const sthFilter = document.getElementById("sth-filter");
 sthFilter.addEventListener("change", () => setSthFilter(sthFilter.value));
 sthFilter.addEventListener("keyup", () => setSthFilter(sthFilter.value));
 
+// Rendering is spread over several turns of the event loop, so a list that has
+// been emptied may still have a chain of appends heading for it. Anything that
+// clears the list takes a new ticket; a chain whose ticket is stale gives up.
+let hfeRender = 0;
+
+function hfeStartLoad() {
+    hfeRender++;
+    showArchiveMessage("hfe", "hfe-list", "Loading catalogue from HFE archive");
+}
+
+function hfeOnError() {
+    hfeRender++;
+    showArchiveMessage("hfe", "hfe-list", "There was an error accessing the HFE archive");
+}
+
+async function hfeClick(file) {
+    utils.noteEvent("hfe", "click", file.path);
+    setDisc1Image("hfe:" + file.path);
+    const needsAutoboot = parsedQuery.autoboot !== undefined;
+    if (needsAutoboot) processor.reset(true);
+
+    const name = describeHfe(file).title;
+    popupLoading("Loading " + name);
+    try {
+        const disc = await loadDiscImage(parsedQuery.disc1);
+        processor.fdc.loadDisc(0, disc);
+        loadingFinished();
+        if (needsAutoboot) autoboot(name);
+    } catch (err) {
+        console.error("Error loading disc image:", err);
+        loadingFinished(err);
+    }
+}
+
+function hfeOnCat(catalogue) {
+    const ticket = ++hfeRender;
+    clearArchiveList("hfe-list");
+    const list = document.getElementById("hfe-list");
+    document.querySelector("#hfe .loading").style.display = "none";
+    const template = list.querySelector(".template");
+
+    const addSome = (remaining) => {
+        if (ticket !== hfeRender) return;
+        const MaxAtATime = 100;
+        const Delay = 30;
+        // Read per batch: the filter can be typed into while this is still going.
+        const filter = document.getElementById("hfe-filter").value.toLowerCase();
+        for (const file of remaining.slice(0, MaxAtATime)) {
+            const { title, publisher, detail } = describeHfe(file);
+            const row = template.cloneNode(true);
+            row.classList.remove("template");
+            row.querySelector(".name").textContent = title;
+            row.querySelector(".publisher").textContent = publisher;
+            row.querySelector(".detail").textContent = detail;
+            if (file.notes) row.title = file.notes;
+            // The row is an anchor, and letting it navigate to "#" would push a
+            // history entry of its own on top of the one updateUrl pushes.
+            row.addEventListener("click", (event) => {
+                event.preventDefault();
+                hfeClick(file);
+                $hfeModal.hide();
+            });
+            row.style.display = row.textContent.toLowerCase().includes(filter) ? "" : "none";
+            list.appendChild(row);
+        }
+        if (remaining.length > MaxAtATime) setTimeout(() => addSome(remaining.slice(MaxAtATime)), Delay);
+    };
+    addSome(catalogue);
+}
+
+const $hfeModal = new bootstrap.Modal(document.getElementById("hfe"));
+document.getElementById("hfe").addEventListener("shown.bs.modal", () => {
+    document.getElementById("hfe-filter").focus();
+});
+document.getElementById("hfe").addEventListener("show.bs.modal", () => hfeArchive.populate());
+
+const hfeFilter = document.getElementById("hfe-filter");
+const onHfeFilter = () => filterArchiveList("hfe-list", hfeFilter.value);
+hfeFilter.addEventListener("change", onHfeFilter);
+hfeFilter.addEventListener("keyup", onHfeFilter);
+
 function sendRawKeyboard(keysToSend, checkCapsAndShiftLocks) {
     if (keyboard) {
         keyboard.sendRawKeyboard(keysToSend, checkCapsAndShiftLocks);
@@ -1110,10 +1305,13 @@ async function reloadSnapshotMedia(media) {
         const imageDataKey = discKey + "ImageData";
         const crcKey = discKey + "Crc32";
 
+        // A snapshot from before layout detection has no field, and was contiguous.
+        const layout = media[discKey + "Layout"] ?? DiscLayout.contiguous;
+
         let loadedDisc = null;
         if (media[discKey]) {
             // URL-based disc — reload from source
-            loadedDisc = await loadDiscImage(media[discKey]);
+            loadedDisc = await loadDiscImage(media[discKey], layout);
         } else if (media[imageDataKey]) {
             // Locally-loaded disc — reconstruct from embedded image data
             const imageData =
@@ -1121,7 +1319,7 @@ async function reloadSnapshotMedia(media) {
                     ? media[imageDataKey]
                     : new Uint8Array(Object.values(media[imageDataKey]));
             const discName = media[discKey + "Name"] || "snapshot.ssd";
-            loadedDisc = disc.discFor(processor.fdc, discName, imageData);
+            loadedDisc = disc.discFor(processor.fdc, discName, imageData, undefined, layout);
             // Retain the image bytes so subsequent saves can re-embed them.
             loadedDisc.setOriginalImage(imageData);
         }
@@ -1130,14 +1328,14 @@ async function reloadSnapshotMedia(media) {
         // 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.",
+                toast(
+                    `${loadedDisc.name} has changed since this state was saved. The state has been restored anyway and may not run correctly.`,
+                    { title: "Restoring state" },
                 );
             }
         }
 
-        processor.fdc.loadDisc(driveIndex, loadedDisc);
+        putDiscIn(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.
@@ -1148,13 +1346,13 @@ async function reloadSnapshotMedia(media) {
     }
 }
 
-async function loadDiscImage(discImage) {
+async function loadDiscImage(discImage, layout = DiscLayout.auto) {
     if (!discImage) return null;
     const split = splitImage(discImage);
     discImage = split.image;
     const schema = split.schema;
     if (schema[0] === "!" || schema === "local") {
-        return disc.localDisc(processor.fdc, discImage);
+        return disc.localDisc(processor.fdc, discImage, layout);
     }
     // TODO: come up with a decent UX for passing an 'onChange' parameter to each of these.
     // Consider:
@@ -1164,8 +1362,13 @@ async function loadDiscImage(discImage) {
     // * Dialog box (ugh) saying "is this ok?"
     switch (schema) {
         case "|":
-        case "sth":
-            return disc.discFor(processor.fdc, discImage, await discSth.fetch(discImage));
+        case "sth": {
+            const { name, data } = await discSth.fetch(discImage);
+            return disc.discFor(processor.fdc, name, data, undefined, layout);
+        }
+
+        case "hfe":
+            return disc.discFor(processor.fdc, discImage, await hfeArchive.fetch(discImage));
 
         case "gd": {
             const splat = discImage.match(/([^/]+)\/?(.*)/);
@@ -1174,15 +1377,15 @@ async function loadDiscImage(discImage) {
                 discImage = splat[1];
                 name = splat[2];
             }
-            return gdLoad({ name, id: discImage });
+            return gdLoad({ name, id: discImage }, layout);
         }
         case "b64data":
-            return disc.discFor(processor.fdc, "disk.ssd", atob(discImage));
+            return disc.discFor(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 utils.unzipDiscImage(arr);
-            return disc.discFor(processor.fdc, name, data);
+            return disc.discFor(processor.fdc, name, data, undefined, layout);
         }
         case "http":
         case "https":
@@ -1196,10 +1399,10 @@ async function loadDiscImage(discImage) {
                 discData = unzipped.data;
                 discImage = unzipped.name;
             }
-            return disc.discFor(processor.fdc, discImage, discData);
+            return disc.discFor(processor.fdc, discImage, discData, undefined, layout);
         }
         default:
-            return disc.discFor(processor.fdc, discImage, await disc.load("discs/" + discImage));
+            return disc.discFor(processor.fdc, discImage, await disc.load("discs/" + discImage), undefined, layout);
     }
 }
 
@@ -1207,17 +1410,18 @@ async function loadTapeImage(tapeImage) {
     const split = splitImage(tapeImage);
     tapeImage = split.image;
     const schema = split.schema;
-    const isAtom = model.isAtom;
 
     switch (schema) {
         case "|":
-        case "sth":
-            return await loadTapeFromData(tapeImage, await tapeSth.fetch(tapeImage), isAtom);
+        case "sth": {
+            const { name, data } = await tapeSth.fetch(tapeImage);
+            return await loadTapeFromData(name, data, model);
+        }
 
         case "data": {
             const arr = Array.prototype.map.call(atob(tapeImage), (x) => x.charCodeAt(0));
             const { name, data } = await utils.unzipDiscImage(arr);
-            return await loadTapeFromData(name, data, isAtom);
+            return await loadTapeFromData(name, data, model);
         }
 
         case "http":
@@ -1232,7 +1436,7 @@ async function loadTapeImage(tapeImage) {
                 tapeData = unzipped.data;
                 tapeImage = unzipped.name;
             }
-            return await loadTapeFromData(tapeImage, tapeData, isAtom);
+            return await loadTapeFromData(tapeImage, tapeData, model);
         }
 
         default: {
@@ -1244,7 +1448,7 @@ async function loadTapeImage(tapeImage) {
                 tapeData = unzipped.data;
                 tapeName = unzipped.name;
             }
-            return await loadTapeFromData(tapeName, tapeData, isAtom);
+            return await loadTapeFromData(tapeName, tapeData, model);
         }
     }
 }
@@ -1277,7 +1481,7 @@ document.getElementById("tape_load").addEventListener("change", async function (
         tapeData = unzipped.data;
         tapeName = unzipped.name;
     }
-    setProcessorTape(await loadTapeFromData(tapeName, tapeData, model.isAtom));
+    setProcessorTape(await loadTapeFromData(tapeName, tapeData, model));
     delete parsedQuery.tape;
     updateUrl();
     bootstrap.Modal.getInstance(document.getElementById("tapes"))?.hide();
@@ -1310,17 +1514,10 @@ function popupLoading(msg) {
     loadingDialogModal.show();
 }
 
-function loadingFinished(error) {
+function loadingFinished(message) {
     googleDriveAuth.style.display = "none";
-    if (error) {
-        loadingDialogModal.show();
-        loadingDialog.querySelector(".loading").textContent = "Error: " + error;
-        setTimeout(function () {
-            loadingDialogModal.hide();
-        }, 5000);
-    } else {
-        loadingDialogModal.hide();
-    }
+    loadingDialogModal.hide();
+    if (message) toast(message);
 }
 
 const googleDrive = new GoogleDriveLoader();
@@ -1345,7 +1542,7 @@ document.querySelector("#google-drive-auth form").addEventListener("submit", asy
     else googleDriveLoadingReject(new Error("Unable to authorize Google Drive"));
 });
 
-async function gdLoad(cat) {
+async function gdLoad(cat, layout) {
     // TODO: have a onclose flush event, handle errors
     /*
      $(window).bind("beforeunload", function() {
@@ -1369,13 +1566,13 @@ async function gdLoad(cat) {
             });
         }
 
-        const ssd = await googleDrive.load(processor.fdc, cat.id);
+        const ssd = await googleDrive.load(processor.fdc, cat.id, layout);
         console.log("Google Drive loading finished");
         loadingFinished();
         return ssd;
     } catch (error) {
         console.error("Google Drive loading error:", error);
-        loadingFinished(error);
+        loadingFinished(`Unable to load ${cat.name} from Google Drive: ${errorText(error)}`);
     }
 }
 
@@ -1413,8 +1610,8 @@ googleDriveEl.addEventListener("show.bs.modal", async function () {
             utils.noteEvent("google-drive", "click", item.name);
             setDisc1Image(`gd:${item.id}/${item.name}`);
             googleDriveModal.hide();
-            const ssd = await gdLoad(item);
-            if (ssd) processor.fdc.loadDisc(0, ssd);
+            const ssd = await gdLoad(item, layoutForDrive(0));
+            if (ssd) putDiscIn(0, ssd);
         });
     }
 });
@@ -1430,7 +1627,7 @@ for (const image of availableImages) {
         utils.noteEvent("images", "click", image.file);
         setDisc1Image(image.file);
         $discsModal.hide();
-        processor.fdc.loadDisc(0, await loadDiscImage(parsedQuery.disc1));
+        putDiscIn(0, await loadDiscImage(parsedQuery.disc1, layoutForDrive(0)));
     });
 }
 
@@ -1449,7 +1646,7 @@ document.querySelector("#google-drive form").addEventListener("submit", async fu
         try {
             data = discType.saver(processor.fdc.drives[0].disc);
         } catch (e) {
-            loadingFinished(`Create failed: ${e.message}`);
+            loadingFinished(`Unable to create ${name} on Google Drive: ${errorText(e)}`);
             return;
         }
         name = replaceOrAddExtension(name, discType.extension);
@@ -1470,11 +1667,11 @@ document.querySelector("#google-drive form").addEventListener("submit", async fu
     try {
         const result = await googleDrive.create(processor.fdc, name, data);
         setDisc1Image("gd:" + result.fileId + "/" + name);
-        processor.fdc.loadDisc(0, result.disc);
+        putDiscIn(0, result.disc);
         loadingFinished();
     } catch (error) {
         console.error(`Error creating Google Drive disc: ${error}`, error);
-        loadingFinished(`Create failed: ${error}`);
+        loadingFinished(`Unable to create ${name} on Google Drive: ${errorText(error)}`);
     }
 });
 
@@ -1540,6 +1737,9 @@ document.getElementById("save-state").addEventListener("click", async function (
             const discKey = driveIndex === 0 ? "disc1" : "disc2";
             const crcKey = discKey + "Crc32";
             media[crcKey] = driveDisc.originalImageCrc32;
+            // The snapshot's dirty tracks are indexed by physical track, so restoring has to lay
+            // the disc out the way this one was rather than work it out again.
+            media[discKey + "Layout"] = driveDisc.is40Track ? DiscLayout.expanded40 : DiscLayout.contiguous;
             if (!media[discKey] && driveDisc.originalImageData) {
                 media[discKey + "ImageData"] = driveDisc.originalImageData;
                 media[discKey + "Name"] = driveDisc.name;
@@ -1715,90 +1915,85 @@ const startPromise = (async () => {
     // Ideally would start the loads first. But their completion needs the FDC from the processor
     const imageLoads = [];
 
+    function startImageLoad(description, load) {
+        const loading = (async () => {
+            try {
+                await load();
+            } catch (error) {
+                console.error(`Error loading ${description}:`, error);
+                toast(`Could not load ${description}: ${error?.message ?? error}`, { title: "Loading" });
+            }
+        })();
+        imageLoads.push(loading);
+        return loading;
+    }
+
     if (discImage) {
-        imageLoads.push(
-            (async () => {
-                const disc = await loadDiscImage(discImage);
-                processor.fdc.loadDisc(0, disc);
-            })(),
+        startImageLoad(`disc ${discImage}`, async () =>
+            putDiscIn(0, await loadDiscImage(discImage, layoutForDrive(0))),
         );
     }
 
     if (secondDiscImage) {
-        imageLoads.push(
-            (async () => {
-                const disc = await loadDiscImage(secondDiscImage);
-                processor.fdc.loadDisc(1, disc);
-            })(),
+        startImageLoad(`disc ${secondDiscImage}`, async () =>
+            putDiscIn(1, await loadDiscImage(secondDiscImage, layoutForDrive(1))),
         );
     }
 
     if (parsedQuery.tape) {
-        imageLoads.push(
-            (async () => {
-                const tape = await loadTapeImage(parsedQuery.tape);
-                setProcessorTape(tape);
-            })(),
-        );
+        startImageLoad(`tape ${parsedQuery.tape}`, async () => setProcessorTape(await loadTapeImage(parsedQuery.tape)));
     }
 
     if (mmcImage && model.isAtom) {
-        imageLoads.push(
-            (async () => {
-                const files = await LoadSD(mmcImage);
-                processor.atommc.SetMMCData(files);
-            })(),
-        );
+        startImageLoad(`MMC image ${mmcImage}`, async () => processor.atommc.SetMMCData(await LoadSD(mmcImage)));
     }
 
     async function insertBasic(getBasicPromise, needsRun) {
-        const basicLoadPromise = (async () => {
-            const prog = await getBasicPromise;
-            const t = await tokeniser.create();
-            const tokenised = await t.tokenise(prog);
-
-            const idleAddr = processor.model.isMaster ? 0xe7e6 : 0xe581;
-            const hook = processor.debugInstruction.add(function (addr) {
-                if (addr !== idleAddr) return;
-                const page = processor.readmem(0x18) << 8;
-                for (let i = 0; i < tokenised.length; ++i) {
-                    processor.writemem(page + i, tokenised.charCodeAt(i));
-                }
-                // Set VARTOP (0x12/3) and TOP(0x02/3)
-                const end = page + tokenised.length;
-                const endLow = end & 0xff;
-                const endHigh = (end >>> 8) & 0xff;
-                processor.writemem(0x02, endLow);
-                processor.writemem(0x03, endHigh);
-                processor.writemem(0x12, endLow);
-                processor.writemem(0x13, endHigh);
-                hook.remove();
-                if (needsRun) {
-                    autoRunBasic();
-                }
-            });
-            return tokenised; // Explicitly return the result
-        })();
-
-        imageLoads.push(basicLoadPromise);
-        return basicLoadPromise; // Return promise for caller to await if needed
+        const prog = await getBasicPromise;
+        const t = await tokeniser.create();
+        const tokenised = await t.tokenise(prog);
+
+        const idleAddr = processor.model.isMaster ? 0xe7e6 : 0xe581;
+        const hook = processor.debugInstruction.add(function (addr) {
+            if (addr !== idleAddr) return;
+            const page = processor.readmem(0x18) << 8;
+            for (let i = 0; i < tokenised.length; ++i) {
+                processor.writemem(page + i, tokenised.charCodeAt(i));
+            }
+            // Set VARTOP (0x12/3) and TOP(0x02/3)
+            const end = page + tokenised.length;
+            const endLow = end & 0xff;
+            const endHigh = (end >>> 8) & 0xff;
+            processor.writemem(0x02, endLow);
+            processor.writemem(0x03, endHigh);
+            processor.writemem(0x12, endLow);
+            processor.writemem(0x13, endHigh);
+            hook.remove();
+            if (needsRun) {
+                autoRunBasic();
+            }
+        });
     }
 
     if (parsedQuery.loadBasic) {
         const needsRun = needsAutoboot === "run";
         needsAutoboot = "";
 
-        await insertBasic(
-            (async () => {
-                const data = await utils.loadData(parsedQuery.loadBasic);
-                return String.fromCharCode.apply(null, data);
-            })(),
-            needsRun,
+        await startImageLoad(`BASIC program ${parsedQuery.loadBasic}`, () =>
+            insertBasic(
+                (async () => {
+                    const data = await utils.loadData(parsedQuery.loadBasic);
+                    return String.fromCharCode.apply(null, data);
+                })(),
+                needsRun,
+            ),
         );
     }
 
     if (parsedQuery.embedBasic) {
-        await insertBasic(Promise.resolve(parsedQuery.embedBasic), true);
+        await startImageLoad("the BASIC program from the URL", () =>
+            insertBasic(Promise.resolve(parsedQuery.embedBasic), true),
+        );
     }
 
     return Promise.all(imageLoads);
@@ -1810,7 +2005,7 @@ const startPromise = (async () => {
 
         switch (needsAutoboot) {
             case "boot":
-                sthAutoboot.checked = true;
+                showAutoboot(true);
                 autoboot(discImage);
                 break;
             case "type":
@@ -1823,7 +2018,7 @@ const startPromise = (async () => {
                 autoRunTape();
                 break;
             default:
-                sthAutoboot.checked = false;
+                showAutoboot(false);
                 break;
         }
 
@@ -1940,7 +2135,7 @@ function VirtualSpeedUpdater() {
         if (this.cycles) {
             const thisMHz = this.cycles / this.time / 1000;
             this.v.textContent = thisMHz.toFixed(1);
-            if (this.cycles >= 10 * 2 * 1000 * 1000) {
+            if (this.cycles >= 10 * cpuSpeed) {
                 this.cycles = this.time = 0;
             }
             this.header.style.color = this.speedy ? "red" : "white";
@@ -1968,6 +2163,26 @@ rewindUI = new RewindUI({
 });
 rewindUI.updateButtonState();
 
+if (processor.fdc) new DiscVisualiser({ fdc: processor.fdc });
+else document.getElementById("disc-visualiser-open").classList.add("disabled");
+
+for (const item of document.querySelectorAll(".drive-tracks")) {
+    const driveIndex = Number(item.dataset.drive);
+    const drive = processor.fdc?.drives[driveIndex];
+    const fixed = drive ? tracksPerStepForDrive(driveIndex) : undefined;
+    if (fixed !== undefined) drive.tracksPerStep = fixed;
+    for (const button of driveTracksButtons(driveIndex)) {
+        button.disabled = !drive;
+        button.addEventListener("click", (event) => {
+            // Setting a switch is not picking from a menu, so leave the menu where it is.
+            event.stopPropagation();
+            drive.tracksPerStep = tracksPerStepFor(button.dataset.tracks);
+            showDriveTracks(driveIndex);
+        });
+    }
+    if (drive) showDriveTracks(driveIndex);
+}
+
 function draw(now) {
     if (!running) {
         last = 0;
@@ -2083,6 +2298,9 @@ function stop(debug) {
     updateDebugButtons();
 }
 
+/** Steps the drawing buffer grows in, as a multiple of the base canvas size. */
+const CanvasScaleStep = 0.25;
+
 (function () {
     const resizeCubMonitor = document.getElementById("cub-monitor");
     const resizeCubMonitorPic = document.getElementById("cub-monitor-pic");
@@ -2135,6 +2353,25 @@ function stop(debug) {
         resizeCubMonitor.style.width = width + "px";
         resizeCubMonitorPic.style.height = height + "px";
         resizeCubMonitorPic.style.width = width + "px";
+        // A mode that reconstructs detail wants to draw at the size it will be
+        // seen at, up to the limit it asks for. Drawing more than the display
+        // can show costs fragments and buys nothing, and for an expensive
+        // shader that is the difference between comfortable and not.
+        if (displayConfig.maxCanvasScale) {
+            const wanted = (finalCanvasWidth * (window.devicePixelRatio || 1)) / displayConfig.canvasWidth;
+            // Quantised, because resize fires continuously while a window is
+            // dragged and every distinct value reallocates the drawing buffer.
+            const quantised = Math.round(wanted / CanvasScaleStep) * CanvasScaleStep;
+            const scale = Math.min(displayConfig.maxCanvasScale, Math.max(1, quantised));
+            const backingWidth = Math.round(displayConfig.canvasWidth * scale);
+            if (screenCanvas.width !== backingWidth) {
+                screenCanvas.width = backingWidth;
+                screenCanvas.height = Math.round(displayConfig.canvasHeight * scale);
+                // Resizing threw the drawing buffer away.
+                video.paint();
+            }
+        }
+
         screenCanvas.style.width = finalCanvasWidth + "px";
         screenCanvas.style.height = finalCanvasHeight + "px";
         screenCanvas.style.left = canvasOrigLeft * containerScale + "px";