jsbeeb 1.15.0 → 1.16.0

package/src/disc.js

@@ -257,10 +257,12 @@ class Sector {
      * @param {Track} track
      * @param {boolean} isMfm
      * @param {Number} idPosBitOffset
+     * @param {function(string): void} [warn] where to report anomalies; the console by default
      */
-    constructor(track, isMfm, idPosBitOffset) {
+    constructor(track, isMfm, idPosBitOffset, warn = console.log) {
         this.track = track;
         this.isMfm = isMfm;
+        this._warn = warn;
         this.idPosBitOffset = idPosBitOffset;
         this.dataPosBitOffset = null;
         this.isDeleted = false;
@@ -271,7 +273,7 @@ class Sector {
         const idReader = this._readerAt(this.idPosBitOffset);
         const { data: headerData, iffyPulses } = idReader.read(6);
         if (iffyPulses) {
-            console.log(`Iffy pulse in sector header ${this.description}`);
+            this._warn(`Iffy pulse in sector header ${this.description}`);
         }
         this.header = headerData;
         let crc = idReader.initialCrc;
@@ -304,7 +306,7 @@ class Sector {
     read(nextSector) {
         const pulsesPerByte = this.isMfm ? 16 : 32; // todo put in reader
         if (this.dataPosBitOffset === null) {
-            console.log(`"Sector header without data ${this.description}"`);
+            this._warn(`Sector header without data ${this.description}`);
             return;
         }
 
@@ -331,7 +333,7 @@ class Sector {
             sectorSize = sectorSize >>> 1;
         } while (sectorSize >= 128);
         if (seenIffyData) {
-            console.log(`"Iffy pulse in sector data ${this.description}"`);
+            this._warn(`Iffy pulse in sector data ${this.description}`);
         }
     }
 
@@ -355,6 +357,61 @@ class Sector {
     }
 }
 
+/**
+ * A 64 bit shift register, held as a pair of unsigned 32 bit halves. BigInt would say this more
+ * directly but costs an order of magnitude more per bit shifted.
+ */
+export class BitWindow64 {
+    constructor() {
+        this.hi = 0;
+        this.lo = 0;
+    }
+
+    /**
+     * @param {Number} bit 0 or 1, shifted into bit 0
+     * @returns {Number} the bit shifted out of bit 63
+     */
+    shiftIn(bit) {
+        const shiftedOut = this.hi >>> 31;
+        this.hi = ((this.hi << 1) | (this.lo >>> 31)) >>> 0;
+        this.lo = ((this.lo << 1) | bit) >>> 0;
+        return shiftedOut;
+    }
+
+    /**
+     * @returns {boolean} whether all 64 bits match the halves given
+     */
+    equals(hi, lo) {
+        return this.hi === hi && this.lo === lo;
+    }
+
+    /**
+     * @param {Number} nibble
+     * @returns {Number} the length of the run of `nibble` ending at bit 0
+     */
+    countTrailingNibbles(nibble) {
+        const nibblesPerHalf = 8;
+        let count = 0;
+        for (let bits = this.lo; (bits & 0xf) === nibble; bits >>>= 4) count++;
+        // Only a low half that matched all the way up can have a run continuing into the high half.
+        if (count === nibblesPerHalf) for (let bits = this.hi; (bits & 0xf) === nibble; bits >>>= 4) count++;
+        return count;
+    }
+}
+
+// What the mark detector holds at an address mark. The FM case only pins down the high half,
+// the tail of the zero sync run; the low half is the marker byte itself, decoded separately.
+const FmSyncHi = 0x88888888;
+const MfmMarkerHi = 0xaaaa4489;
+const MfmMarkerLo = 0x44894489;
+// One data bit of zero, FM encoded with its clock, is the pulse nibble 0x8.
+const FmZeroBitPulses = 0x8;
+// FmSyncHi is eight of those, so a match has already seen this much of the sync run.
+const FmSyncHiZeroBits = 8;
+// Sync is counted in zero data bits, so a run no longer than two bytes' worth is short enough
+// to be worth logging.
+const ShortSyncZeros = 16;
+
 class Track {
     constructor(upper, trackNum, initialByte) {
         this.length = IbmDiscFormat.bytesPerTrack; // Default size, will be updated when track is populated
@@ -371,10 +428,11 @@ class Track {
 
     /**
      * Debug functionality to try and interpret the track.
+     * @param {function(string): void} [warn] where to report anomalies; the console by default
      * @returns {Sector[]}
      */
-    findSectors() {
-        const sectors = this.findSectorIds();
+    findSectors(warn = console.log) {
+        const sectors = this.findSectorIds(warn);
         for (let sectorIndex = 0; sectorIndex !== sectors.length; ++sectorIndex) {
             const nextSector = sectors[sectorIndex + 1]; // Will be unset for last
             sectors[sectorIndex].read(nextSector);
@@ -383,9 +441,10 @@ class Track {
     }
 
     /**
+     * @param {function(string): void} [warn] where to report anomalies; the console by default
      * @returns {Sector[]}
      */
-    findSectorIds() {
+    findSectorIds(warn = console.log) {
         const sectors = [];
         // Pass 1: walk the track and find header and data markers.
         const bitLength = this.length * 32;
@@ -394,40 +453,30 @@ class Track {
         let doMfmMarkerByte = false;
         let isMfm = false;
         let pulses = 0;
-        let markDetector = 0n;
-        let markDetectorPrev = 0n;
-        const all64b = 0xffffffffffffffffn;
-        const top32of64b = 0xffffffff00000000n;
-        const fmMarker = 0x8888888800000000n;
-        const mfmMarker = 0xaaaa448944894489n;
+        // The mark detector is a 64 bit sliding window over the pulse stream; the bits leaving it
+        // spill into a second window, which the sync run length is counted from.
+        const markDetector = new BitWindow64();
+        const markDetectorPrev = new BitWindow64();
         let dataByte;
         let sector = null;
         for (let pulseIndex = 0; pulseIndex < bitLength; ++pulseIndex) {
             if ((pulseIndex & 31) === 0) pulses = this.pulses2Us[pulseIndex >>> 5];
-            markDetectorPrev = (markDetectorPrev << 1n) & all64b;
-            markDetectorPrev |= markDetector >> 63n;
-            markDetector = (markDetector << 1n) & all64b;
-            shiftRegister = (shiftRegister << 1) & 0xffffffff;
+            const pulseBit = pulses >>> 31;
+            markDetectorPrev.shiftIn(markDetector.shiftIn(pulseBit));
+            shiftRegister = ((shiftRegister << 1) | pulseBit) & 0xffffffff;
             numShifts++;
-            if (pulses & 0x80000000) {
-                markDetector |= 1n;
-                shiftRegister |= 1;
-            }
             pulses = (pulses << 1) & 0xffffffff;
-            if ((markDetector & top32of64b) === fmMarker) {
-                const { clocks, data, iffyPulses } = IbmDiscFormat._2usPulsesToFm(Number(markDetector & 0xffffffffn));
+            if (markDetector.hi === FmSyncHi) {
+                const { clocks, data, iffyPulses } = IbmDiscFormat._2usPulsesToFm(markDetector.lo);
                 if (iffyPulses || clocks !== IbmDiscFormat.markClockPattern) continue;
                 isMfm = false;
                 doMfmMarkerByte = false;
-                let num0s = 8;
-                for (let bits = markDetectorPrev; (bits & 0xfn) === 0x8n; bits >>= 4n) {
-                    num0s++;
-                }
-                if (num0s <= 16) {
-                    console.log(`Short zeros sync ${this.description}`);
+                const num0s = FmSyncHiZeroBits + markDetectorPrev.countTrailingNibbles(FmZeroBitPulses);
+                if (num0s <= ShortSyncZeros) {
+                    warn(`Short zeros sync ${this.description}`);
                 }
                 dataByte = data;
-            } else if (markDetector === mfmMarker) {
+            } else if (markDetector.equals(MfmMarkerHi, MfmMarkerLo)) {
                 // Next byte is MFM marker.
                 isMfm = true;
                 doMfmMarkerByte = true;
@@ -442,7 +491,7 @@ class Track {
             }
             switch (dataByte) {
                 case IbmDiscFormat.idMarkDataPattern: {
-                    sector = new Sector(this, isMfm, pulseIndex + 1);
+                    sector = new Sector(this, isMfm, pulseIndex + 1, warn);
                     sectors.push(sector);
                     shiftRegister = 0;
                     numShifts = 0;
@@ -451,7 +500,7 @@ class Track {
                 case IbmDiscFormat.dataMarkDataPattern:
                 case IbmDiscFormat.deletedDataMarkDataPattern:
                     if (!sector || sector.dataPosBitOffset) {
-                        console.log(
+                        warn(
                             `Sector data without header ${this.description}; mark bitpos ${pulseIndex}; previous good sector ${sector ? sector.description : "none"}`,
                         );
                     } else {
@@ -464,7 +513,7 @@ class Track {
                     }
                     break;
                 default:
-                    console.log(`Unknown marker byte ${hexbyte(dataByte)} ${this.description}`);
+                    warn(`Unknown marker byte ${hexbyte(dataByte)} ${this.description}`);
             }
         }
         return sectors;
@@ -580,16 +629,14 @@ export function loadSsd(disc, data, isDsd, onChange) {
         // Create a dataCopy large enough for all the sectors and tracks.
         const dataCopy = new Uint8Array(maxSize);
         dataCopy.set(data);
-        disc.setWriteTrackCallback(
+        disc.addTrackWriteListener(
             /** @param {Track} trackObj  */
             (side, trackNum, trackObj) => {
                 const trackOffset =
                     SsdFormat.sectorSize * SsdFormat.sectorsPerTrack * (trackNum * numSides + (side ? 1 : 0));
-                for (const sector of trackObj.findSectors()) {
-                    const sectorOffset = sector.sectorNumber * SsdFormat.sectorSize;
-                    for (let x = 0; x < SsdFormat.sectorSize; ++x)
-                        dataCopy[trackOffset + sectorOffset + x] = sector.sectorData[x];
-                }
+                for (const sector of trackObj.findSectors())
+                    if (!sectorShortfall(sector, trackNum))
+                        dataCopy.set(sector.sectorData, trackOffset + sector.sectorNumber * SsdFormat.sectorSize);
                 onChange(dataCopy);
             },
         );
@@ -764,7 +811,7 @@ export class Disc {
         this.tracksUsed = 0;
         this.isDoubleSided = false;
 
-        this.writeTrackCallback = undefined;
+        this._trackWriteListeners = new Set();
         this.isWriteable = isWriteable;
 
         // Track which tracks have been written since the last snapshot.
@@ -791,8 +838,14 @@ export class Disc {
         this.initSurface(0);
     }
 
-    setWriteTrackCallback(callback) {
-        this.writeTrackCallback = callback;
+    /** @param {function(boolean, Number, Track): void} listener called once per flushed track */
+    addTrackWriteListener(listener) {
+        this._trackWriteListeners.add(listener);
+    }
+
+    /** @param {function(boolean, Number, Track): void} listener */
+    removeTrackWriteListener(listener) {
+        this._trackWriteListeners.delete(listener);
     }
 
     /**
@@ -902,10 +955,9 @@ export class Disc {
         this.isDirty = false;
         this.dirtySide = -1;
         this.dirtyTrack = -1;
-        if (!this.writeTrackCallback) return;
         const trackObj = this.getTrack(dirtySide, dirtyTrack);
-        this.writeTrackCallback(dirtySide, dirtyTrack, trackObj);
         this.setTrackUsed(dirtySide, dirtyTrack);
+        for (const listener of this._trackWriteListeners) listener(dirtySide, dirtyTrack, trackObj);
     }
 
     /**

package/src/econet.js

@@ -1,6 +1,9 @@
 // Code ported from Beebem (C to .js) by Jason Robson
 // The majority of the commentary here is also from Beebem
 
+// How long a four-way handshake may stall before we resend.
+const RetryTimeoutSecs = 0.5;
+
 // Econet support classes
 class ADLC {
     constructor() {
@@ -57,10 +60,11 @@ export class ReceiveBlock {
 
 // Econet class definition
 export class Econet {
-    constructor(stationId_) {
+    constructor(stationId_, cyclesPerSecond) {
         // Config parameters
         this.TIME_BETWEEN_BYTES = 128;
         this.SERVER_STATION_ID = 254;
+        this.retryCycles = (cyclesPerSecond * RetryTimeoutSecs) | 0;
 
         // 4-way handshake states
         this.FWH_Idle = 0;
@@ -156,7 +160,7 @@ export class Econet {
             }
 
             // Re-tries
-            if (this.pollTotalCycles > this.wireStateEntryTimer + 1000000) {
+            if (this.pollTotalCycles > this.wireStateEntryTimer + this.retryCycles) {
                 if (this.wireState !== this.FWH_Idle) {
                     switch (this.wireState) {
                         case this.FWH_RX_Scout_Received:

package/src/jsbeeb.css

@@ -441,6 +441,132 @@ small {
   pointer-events: none;
 }
 
+#disc-panel {
+  position: fixed;
+  top: 56px;
+  right: 8px;
+  width: min(420px, 46vw);
+  max-height: calc(100vh - 104px);
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.9);
+  border: 1px solid #555;
+  border-radius: 4px;
+  z-index: 10;
+  padding: 8px;
+}
+
+.disc-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 8px;
+  cursor: move;
+  user-select: none;
+  /* Claim touch gestures, or a drag scrolls the page instead. */
+  touch-action: none;
+}
+
+.disc-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.disc-header button {
+  cursor: pointer;
+}
+
+.disc-title {
+  color: #ccc;
+  font-size: 12px;
+  font-weight: bold;
+  flex: none;
+}
+
+/* The only item in the header with no bound on its width, so it is the one that yields. */
+#disc-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #888;
+  font-family: consolas, monospace;
+  font-size: 11px;
+}
+
+#disc-close {
+  flex: none;
+  margin-left: auto;
+}
+
+.disc-stack {
+  position: relative;
+}
+
+.disc-stack canvas {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+}
+
+#disc-overlay {
+  position: absolute;
+  inset: 0;
+  cursor: crosshair;
+  /* Claim wheel and drag gestures, or the page scrolls instead. */
+  touch-action: none;
+}
+
+.disc-legend {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  margin-top: 8px;
+  color: #aaa;
+  font-size: 10px;
+}
+
+.disc-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.disc-legend-grow {
+  flex: 1;
+  min-width: 150px;
+}
+
+.disc-legend-ramp {
+  flex: 1;
+  min-width: 40px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.disc-legend-swatch {
+  width: 12px;
+  height: 8px;
+  border-radius: 2px;
+  flex: none;
+}
+
+.disc-status {
+  margin-top: 4px;
+  color: #ccc;
+  font-family: consolas, monospace;
+  font-size: 11px;
+  /* Rewritten every frame, so the height must not depend on the content. */
+  min-height: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 div.smoothie-chart-tooltip {
   background: #444;
   padding: 1em;

package/src/main.js

@@ -44,6 +44,7 @@ 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,
@@ -232,9 +233,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"));
         }
@@ -352,7 +354,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;
 
@@ -386,11 +388,24 @@ if (keyMappingWarnings.length) {
 }
 
 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) {
+        showError(
+            `enabling ${displayConfig.name} mode`,
+            `${displayConfig.name} is not available on this device. Using standard display instead.`,
+        );
     }
 
     return newCanvas;
@@ -398,20 +413,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 +448,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 },
 );
@@ -533,7 +561,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 +647,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";
 }
@@ -1207,17 +1235,16 @@ 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);
+            return await loadTapeFromData(tapeImage, await tapeSth.fetch(tapeImage), 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 +1259,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 +1271,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 +1304,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();
@@ -1940,7 +1967,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 +1995,9 @@ rewindUI = new RewindUI({
 });
 rewindUI.updateButtonState();
 
+if (processor.fdc) new DiscVisualiser({ fdc: processor.fdc });
+else document.getElementById("disc-visualiser-open").classList.add("disabled");
+
 function draw(now) {
     if (!running) {
         last = 0;
@@ -2083,6 +2113,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 +2168,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";

package/src/models.js

@@ -35,6 +35,15 @@ class Model {
         this.cmosOverride = cmosOverride;
     }
 
+    /**
+     * How many CPU cycles this machine runs in a second. Everything that
+     * converts between real time and emulated cycles should ask here rather
+     * than assuming a clock speed.
+     */
+    get cyclesPerSecond() {
+        return this.clockMhz * 1000 * 1000;
+    }
+
     get nmos() {
         return this._cpuModel === CpuModel.MOS6502;
     }
@@ -225,8 +234,8 @@ export const allModels = [
         name: "Tube65C02",
         synonyms: [],
         os: ["tube/6502Tube.rom"],
-        // TODO(#746): the external second processor was an NMOS 6502A.
-        cpuModel: CpuModel.CMOS65C02,
+        // The production wedge's GTE 65SC02 has no Rockwell bit instructions.
+        cpuModel: CpuModel.CMOS65C12,
         isMaster: false,
         clockMhz: 3,
     }),
@@ -234,7 +243,8 @@ export const allModels = [
         name: "Tube65C102",
         synonyms: [],
         os: ["tube/65C102Tube.rom"],
-        // TODO(#746): Acorn's 65C102 has no Rockwell bit instructions.
+        // Boards are reported with both Rockwell and GTE parts, so keep the superset of the two
+        // until #756 lets the fitted co-processor be chosen.
         cpuModel: CpuModel.CMOS65C02,
         isMaster: false,
         clockMhz: 4,