jsbeeb 1.22.1 → 1.22.3

package/README.md

@@ -1,4 +1,5 @@
 [![jsbeeb tests](https://github.com/mattgodbolt/jsbeeb/actions/workflows/test-and-deploy.yml/badge.svg)](https://github.com/mattgodbolt/jsbeeb/actions/workflows/test-and-deploy.yml)
+[![coverage](https://img.shields.io/endpoint?url=https%3A%2F%2Fbbc.xania.org%2Fcoverage%2Fbadge.json)](https://bbc.xania.org/coverage/index.html)
 
 # jsbeeb - JavaScript BBC Micro Emulator
 
@@ -15,6 +16,7 @@ different peripherals.
 - [Emulator Shortcuts](#emulator-shortcuts)
 - [Printer Output](#printer-output)
 - [Save State and Rewind](#save-state-and-rewind)
+- [Joystick Support](#joystick-support)
 - [Getting Set Up to Run Locally](#getting-set-up-to-run-locally)
 - [Running as a Desktop Application](#running-as-a-desktop-application)
 - [URL Parameters](#url-parameters)
@@ -119,10 +121,10 @@ Save and load full emulator state snapshots from the **State** menu (or `Ctrl+S`
 
 The emulator continuously captures snapshots into a 30-slot rewind buffer (~1 per second). Open the rewind scrubber from **State > Rewind** or press **Alt+PageDown** to browse recent states as a visual filmstrip:
 
-- **Left/Right arrows** — navigate between snapshots (the main screen updates live)
+- **Left/Right arrows**: navigate between snapshots (the main screen updates live)
 - **Click** a thumbnail to jump to that point
-- **Enter** — commit selection and close the panel
-- **Escape** — cancel and restore the original state
+- **Enter**: commit selection and close the panel
+- **Escape**: cancel and restore the original state
 
 ### Joystick Support
 
@@ -145,13 +147,13 @@ presses `SPACE`. To play Superior's Space Invaders on a pad, where `COPY` fires:
 
 The gamepad control names are:
 
-- `FIRE` — every button at once, which is usually what you want for a one-button game
-- `UP` `DOWN` `LEFT` `RIGHT` — both analogue sticks at once, plus one face button each (`UP` is also `A`, `DOWN` is
+- `FIRE`: every button at once, which is usually what you want for a one-button game
+- `UP` `DOWN` `LEFT` `RIGHT`: both analogue sticks at once, plus one face button each (`UP` is also `A`, `DOWN` is
   `X`, `LEFT` is `Y`, `RIGHT` is `B`)
-- `UP1` `DOWN1` `LEFT1` `RIGHT1` — the left stick only; `UP2` `DOWN2` … — the right stick only; `UP3` `DOWN3` … — the
-  face buttons only
-- `A` `B` `X` `Y` `START` `BACK` `LB` `RB` `LT` `RT` — individual buttons, by their Xbox 360 names
-- `FIRE1` `FIRE2` — clicking the left and right sticks
+- `UP1` `DOWN1` `LEFT1` `RIGHT1`: the left stick only; `UP2` `DOWN2` and so on: the right stick only; `UP3` `DOWN3`
+  and so on: the face buttons only
+- `A` `B` `X` `Y` `START` `BACK` `LB` `RB` `LT` `RT`: individual buttons, by their Xbox 360 names
+- `FIRE1` `FIRE2`: clicking the left and right sticks
 
 The BBC key names are the same as for the keyboard, and digits may be written either way round: `GP.A=1` and `GP.A=K1`
 both press `1`. Unlike `KEY.`, gamepad mappings are BBC-only: there's no Atom equivalent. The D-pad's default mapping
@@ -190,7 +192,9 @@ site to make it smaller and faster to load when it's deployed to [https://bbc.xa
 
 ## Running as a Desktop Application
 
-jsbeeb can also run as a standalone desktop application using Electron:
+jsbeeb can also run as a standalone desktop application using Electron. Prebuilt packages (Debian/Ubuntu `.deb`,
+Fedora/RHEL `.rpm` and a Windows installer) are attached to each
+[GitHub release](https://github.com/mattgodbolt/jsbeeb/releases), or you can build your own:
 
 ### Running in Development
 
@@ -234,17 +238,15 @@ USE_SYSTEM_FPM=true npm run electron:build
 **Debian/Ubuntu:**
 
 ```sh
-sudo apt install ./out/dist/jsbeeb_1.0.1_amd64.deb
+sudo apt install ./out/dist/jsbeeb_<version>_amd64.deb
 ```
 
 **Fedora/RHEL/CentOS:**
 
 ```sh
-sudo rpm -i out/dist/jsbeeb-1.0.1.x86_64.rpm
+sudo rpm -i out/dist/jsbeeb-<version>.x86_64.rpm
 ```
 
-**Note:** Electron support was re-enabled in November 2024 after being disabled during the ESM migration in 2021. It now works with Electron 28+ which added full ES Modules support.
-
 ## URL Parameters
 
 - `autoboot` - fakes a shift break
@@ -334,19 +336,11 @@ Note that every update you make means you need to make a new raw link.
 
 If you're looking to help:
 
-- Testing
-  - Play lots of games and report issues either on [GitHub](https://github.com/mattgodbolt/jsbeeb/issues) or by email (
-    matt@godbolt.org).
-- Core
-  - Get the "boo" of the boot "boo-beep" working (disabled currently as the JavaScript startup makes the sound
-    dreadfully choppy on Chrome at least).
-- Save disc support
-  - Local discs need to be made more workable and need an "export" feature
-  - Multiple discs need a UI
-- `git grep -i todo`
-- Optimisation
-  - While every attempt to make things fast has been made, I'm sure there's some more clever things that can be done
-    without compromising emulation accuracy
+- Play lots of games and report anything that doesn't behave like the real machine, either on
+  [GitHub](https://github.com/mattgodbolt/jsbeeb/issues) or by email (matt@godbolt.org).
+- Pick something from the [issue tracker](https://github.com/mattgodbolt/jsbeeb/issues): there's a mix of emulation
+  accuracy work, missing hardware and peripherals, user interface improvements and performance ideas in there, at all
+  levels of difficulty.
 
 ## Tests
 
@@ -369,12 +363,14 @@ For timing correctness, we have:
   correctness-sensitive when it comes to the timers and interrupts of the BBC.
 - Some 65C12-specific read-modify-write tests written by Ed Spittles.
 
-Tests can be run automatically if you have `node` installed - just run `make` and it'll ensure the relevant libraries
-are installed, then it'll run the tests. Please note it can take a while to run the whole test suite.
+Tests are run via npm scripts: `npm test` runs the whole suite. The vitest suites are `npm run test:unit`,
+`npm run test:integration` and `npm run test:shader`; CPU tests are `npm run test:cpu`, and the smoke test is
+`npm run test:smoke` (the shader and smoke tests need Chrome installed). Please note it can take a while to run the
+whole test suite.
 
 ## Thanks
 
-jsbeeb was heavily based on Sarah Walker's C [B-Em emulator](https://github.com/stardot/b-em) -- thanks to her for her
+jsbeeb was heavily based on Sarah Walker's C [B-Em emulator](https://github.com/stardot/b-em); thanks to her for her
 hard work and for open sourcing her code. B-em is now being maintained by a group of enthusiasts - thanks to them too!
 
 Huge thanks to Richard Talbot-Watkins for his advice and help along the way in fathoming out the instruction timings,
@@ -409,7 +405,8 @@ and posted the [video up on YouTube](https://www.youtube.com/watch?v=37jyHQT7fXQ
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the GNU General Public License v3.0 (or later); see the [LICENSE](LICENSE) file for
+details.
 
 ## Contact
 

package/package.json

@@ -7,7 +7,7 @@
   "name": "jsbeeb",
   "description": "Emulate a BBC Micro",
   "repository": "git@github.com:mattgodbolt/jsbeeb.git",
-  "version": "1.22.1",
+  "version": "1.22.3",
   "//engines": "If you change the version of Node, it must also be updated at the top of the Dockerfile.",
   "engines": {
     "node": ">=24.15.0"

package/src/app/electron.js

@@ -4,7 +4,7 @@
 // Handles IPC communication for loading disc/tape images and showing modals from Electron's main process.
 
 function init(args) {
-    const { loadDiscImage, loadTapeImage, loadStateFile, processor, modals, actions, config } = args;
+    const { loadDiscImage, loadTapeImage, loadStateFile, processor, modals, actions, config, media } = args;
     const api = window.electronAPI;
 
     api.onLoadDisc(async (message) => {
@@ -58,7 +58,9 @@ function init(args) {
         config.addEventListener("settings-changed", (e) => {
             api.saveSettings(e.detail);
         });
-        config.addEventListener("media-changed", (e) => {
+    }
+    if (media) {
+        media.addEventListener("media-changed", (e) => {
             api.saveSettings(e.detail);
         });
     }

package/src/basic-loader.js

@@ -1,5 +1,10 @@
 "use strict";
 
+/** Where the OS sits waiting for a keypress, per machine: the place to interrupt with a program. */
+export function basicIdleAddr(model) {
+    return model.isMaster ? 0xe7e6 : 0xe581;
+}
+
 /**
  * Pokes a tokenised BASIC program into memory at PAGE, and sets TOP and
  * VARTOP after it, exactly as if it had just been typed.

package/src/main.js

@@ -22,6 +22,7 @@ import { Display } from "./web/display.js";
 import { Layout } from "./web/layout.js";
 import { EmulationLoop, RewindCaptureInterval } from "./web/emulation-loop.js";
 import { KeyboardSetup } from "./web/keyboard-setup.js";
+import { AccessibilitySwitches } from "./web/accessibility-switches.js";
 import { AnalogueInputs } from "./web/analogue-inputs.js";
 import { FrontPanel } from "./web/front-panel.js";
 import { Machine } from "./web/machine.js";
@@ -63,10 +64,7 @@ const noSeek = !!parsedQuery.noseek;
 const stationId = parsedQuery.stationId !== undefined ? parsedQuery.stationId : 101;
 
 const tryGl = parsedQuery.glEnabled ?? true;
-let lowLatency = true;
-if (parsedQuery.lowLatency !== undefined) {
-    lowLatency = parsedQuery.lowLatency === "true";
-}
+const lowLatency = parsedQuery.lowLatency ?? true;
 
 if (parsedQuery.embed) {
     for (const el of document.querySelectorAll(".embed-hide")) el.style.display = "none";
@@ -95,21 +93,7 @@ const printer = new Printer({
         }),
 });
 
-const keys = new KeyboardSetup({
-    enterDebugger: () => loop.stop(true),
-    reload: () => window.location.reload(),
-    toggleFast: () => loop.toggleFastAsPossible(),
-    openRewind: () => {
-        if (rewindUI) rewindUI.open();
-    },
-    openPrinter: () => frontPanel.checkPrinterWindow(),
-    pause: () => loop.stop(false),
-    resume: () => loop.go(),
-    onAnyKeyDown: () => {
-        audioHandler.tryResume();
-        inputs.ensureMicrophoneRunning();
-    },
-});
+const accessibilitySwitches = new AccessibilitySwitches();
 
 const settings = new Settings({ urlState });
 const { config, speechOutput, keyLayout, displayMode, audioOutput, speakerAmount } = settings;
@@ -138,12 +122,6 @@ if (cpuMultiplier !== 1) console.log(`CPU multiplier set to ${cpuMultiplier}`);
 const cpuSpeed = model.cyclesPerSecond;
 const clocksPerSecond = (cpuMultiplier * cpuSpeed) | 0;
 
-const modals = new Modals({
-    isRunning: () => loop.isRunning(),
-    stop: (debug) => loop.stop(debug),
-    go: () => loop.go(),
-});
-
 const screenCanvas = document.getElementById("screen");
 const display = new Display({
     screenCanvas,
@@ -187,7 +165,7 @@ const quickSettings = new QuickSettings(
 );
 
 // ------------------------------------------------------------------------
-// The machine, and everything that feeds it.
+// The machine, the loop that runs it, and everything that feeds it.
 // ------------------------------------------------------------------------
 
 // Depends on the settings having applied the URL parameters.
@@ -199,7 +177,7 @@ const machine = new Machine({
     cpuMultiplier,
     extraRoms,
     stationId,
-    userPort: keys.userPort,
+    userPort: accessibilitySwitches.userPort,
     printer,
     speechOutput,
     video,
@@ -208,23 +186,63 @@ const machine = new Machine({
 });
 const processor = machine.processor;
 
-const drives = new Drives({ fdc: processor.fdc, driveTracks, areYouSure: modals.areYouSure.bind(modals) });
+const keys = new KeyboardSetup({
+    actions: {
+        enterDebugger: () => loop.stop(true),
+        reload: () => window.location.reload(),
+        toggleFast: () => loop.toggleFastAsPossible(),
+        openRewind: () => rewindUI.open(),
+        openPrinter: () => frontPanel.checkPrinterWindow(),
+        pause: () => loop.stop(false),
+        resume: () => loop.go(),
+        onAnyKeyDown: () => {
+            audioHandler.tryResume();
+            inputs.ensureMicrophoneRunning();
+        },
+    },
+    accessibilitySwitches,
+    processor,
+    dbgr,
+    keyLayout,
+});
+
+const rewindBuffer = new RewindBuffer(30);
+const loop = new EmulationLoop({
+    processor,
+    display,
+    audioHandler,
+    dbgr,
+    gamepad,
+    keyboard: keys,
+    syncLights: () => frontPanel.syncLights(),
+    rewindBuffer,
+    onRewindCaptured: () => rewindUI.updateButtonState(),
+    clocksPerSecond,
+    cpuSpeed,
+    fastTape: !!parsedQuery.fasttape,
+    audioStatsNode,
+});
+
+const debugPause = document.getElementById("debug-pause");
+const debugPlay = document.getElementById("debug-play");
+loop.addEventListener("running", () => {
+    const running = loop.isRunning();
+    keys.setRunning(running);
+    debugPlay.disabled = running;
+    debugPause.disabled = !running;
+});
+
+const modals = new Modals({ loop });
+
+const drives = new Drives({ fdc: processor.fdc, driveTracks, confirm: modals.confirm.bind(modals) });
 const media = new MediaLoader({
     processor,
     model,
     drives,
     urlState,
-    config,
     modals,
     isSnapshotFile,
     loadSnapshot: (file, buffer) => snapshots.loadStateFromFile(file, buffer),
-    // The archives are created further down; each source resolves when used.
-    sources: {
-        sth: (name) => sthPicker.discs.fetch(name),
-        tapeSth: (name) => sthPicker.tapes.fetch(name),
-        hfe: (path) => hfePicker.archive.fetch(path),
-        drive: (cat, layout) => drivePicker.load(cat, layout),
-    },
 });
 const autoBoot = new Autoboot({
     model,
@@ -240,7 +258,7 @@ const sthPicker = new SthPicker({
     processor,
     autoboot: (image) => autoBoot.boot(image),
 });
-const hfePicker = new HfePicker({
+new HfePicker({
     media,
     drives,
     modals,
@@ -248,7 +266,7 @@ const hfePicker = new HfePicker({
     processor,
     autoboot: (image) => autoBoot.boot(image),
 });
-const drivePicker = new GoogleDrivePicker({ media, drives, modals, processor });
+new GoogleDrivePicker({ media, drives, modals, processor });
 const snapshots = new SnapshotUI({
     processor,
     model,
@@ -257,9 +275,7 @@ const snapshots = new SnapshotUI({
     drives,
     urlState,
     modals,
-    isRunning: () => loop.isRunning(),
-    stop: (debug) => loop.stop(debug),
-    go: () => loop.go(),
+    loop,
 });
 
 const inputs = new AnalogueInputs({
@@ -280,55 +296,25 @@ if (parsedQuery.microphoneChannel !== undefined) {
 // Apply ADC source settings from URL parameters
 inputs.updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
 
-keys.attach({ processor, dbgr, keyLayout });
-
 const frontPanel = new FrontPanel({ processor, model, printer });
 
 // ------------------------------------------------------------------------
-// Running it: the loop, rewind and the visualiser.
+// Rewind, the visualiser and the layout.
 // ------------------------------------------------------------------------
 
-const rewindBuffer = new RewindBuffer(30);
-const loop = new EmulationLoop({
-    processor,
-    display,
-    audioHandler,
-    dbgr,
-    gamepad,
-    keyboard: keys,
-    syncLights: () => frontPanel.syncLights(),
-    rewindBuffer,
-    onRewindCaptured: () => rewindUI.updateButtonState(),
-    clocksPerSecond,
-    cpuSpeed,
-    fastTape: !!parsedQuery.fasttape,
-    audioStatsNode,
-});
-
-const debugPause = document.getElementById("debug-pause");
-const debugPlay = document.getElementById("debug-play");
-loop.addEventListener("running", () => {
-    const running = loop.isRunning();
-    keys.setRunning(running);
-    debugPlay.disabled = running;
-    debugPause.disabled = !running;
-});
-
 const rewindUI = new RewindUI({
     rewindBuffer,
     processor,
     video,
     captureInterval: RewindCaptureInterval,
-    stop: (debug) => loop.stop(debug),
-    go: () => loop.go(),
-    isRunning: () => loop.isRunning(),
+    loop,
 });
 rewindUI.updateButtonState();
 
 if (processor.fdc) new DiscVisualiser({ fdc: processor.fdc });
 else document.getElementById("disc-visualiser-open").classList.add("disabled");
 
-new Layout({
+const layout = new Layout({
     screenCanvas,
     display,
     embed: parsedQuery.embed !== undefined,
@@ -336,7 +322,7 @@ new Layout({
 });
 
 // Everything a setting can reach now exists.
-settings.wire({ audioHandler, display, quickSettings, machine, keys, inputs, modals });
+settings.wire({ audioHandler, display, layout, quickSettings, machine, keys, inputs, modals });
 
 // ------------------------------------------------------------------------
 // The page's own handlers.
@@ -391,11 +377,7 @@ window.addEventListener("beforeunload", function (event) {
 });
 
 function hardReset() {
-    if (rewindUI) {
-        rewindUI.close();
-        rewindBuffer.clear();
-        rewindUI.updateButtonState();
-    }
+    rewindUI.reset();
     processor.reset(true);
 }
 
@@ -517,6 +499,7 @@ electron({
     loadTapeImage: media.loadTapeImage.bind(media),
     processor,
     config,
+    media,
     modals: {
         show: (modalId, sthType) => {
             if (modalId === "sth" && sthType) {
@@ -530,7 +513,7 @@ electron({
     actions: {
         "soft-reset": () => processor.reset(false),
         "hard-reset": hardReset,
-        "save-state": () => document.getElementById("save-state").click(),
+        "save-state": () => snapshots.saveState(),
         rewind: () => rewindUI.open(),
         pause: pauseIntoDebugger,
         resume: resumeFromDebugger,

package/src/web/accessibility-switches.js

@@ -0,0 +1,26 @@
+/**
+ * The accessibility switches on the user port. Bits 0-7 correspond to switches
+ * 1-8, active low: 0xff = no switches pressed; a clear bit = that switch held.
+ *
+ * On real hardware, the Brilliant Computing switch interface box and special-ed
+ * joystick connect to the User Port only; they do not touch the analogue port
+ * or the System VIA fire buttons (PB4/PB5), which belong to the standard
+ * analogue joystick connector.
+ */
+export class AccessibilitySwitches {
+    constructor() {
+        this.switchState = 0xff;
+        const switches = this;
+        this.userPort = {
+            write() {},
+            read() {
+                return switches.switchState;
+            },
+        };
+    }
+
+    setSwitch(index, held) {
+        if (held) this.switchState &= ~(1 << index);
+        else this.switchState |= 1 << index;
+    }
+}

package/src/web/analogue-inputs.js

@@ -4,6 +4,8 @@ import { MouseJoystickSource } from "../mouse-joystick-source.js";
 import { calculateMouseCoordinates } from "../mouse-coordinates.js";
 import { toast } from "./toast.js";
 
+const AdcChannelCount = 4;
+
 /**
  * What feeds the analogue port and the touchscreen: the gamepad, the mouse
  * acting as a joystick, and the microphone, with the mouse on the monitor
@@ -59,7 +61,7 @@ export class AnalogueInputs {
     updateAdcSources(mouseJoystickEnabled, microphoneChannel) {
         const { processor } = this;
         // Default all channels to the gamepad source.
-        for (let ch = 0; ch < 4; ch++) {
+        for (let ch = 0; ch < AdcChannelCount; ch++) {
             processor.adconverter.setChannelSource(ch, this.gamepadSource);
         }
 
@@ -73,11 +75,24 @@ export class AnalogueInputs {
         }
 
         // Apply microphone if configured (can override any channel)
-        if (microphoneChannel !== undefined) {
+        if (microphoneChannel === undefined) return;
+        if (Number.isInteger(microphoneChannel) && microphoneChannel >= 0 && microphoneChannel < AdcChannelCount) {
             processor.adconverter.setChannelSource(microphoneChannel, this.microphoneInput);
+        } else {
+            toast(
+                `There is no analogue channel ${microphoneChannel}; channels are 0 to 3. ` +
+                    `The microphone channel has been turned off.`,
+                { title: "Microphone" },
+            );
+            this.clearMicrophoneChannel();
         }
     }
 
+    clearMicrophoneChannel() {
+        this.config.setMicrophoneChannel(undefined);
+        this.urlState.set({ microphoneChannel: undefined });
+    }
+
     async ensureMicrophoneRunning() {
         const { microphoneInput } = this;
         if (microphoneInput.audioContext && microphoneInput.audioContext.state !== "running") {
@@ -93,6 +108,8 @@ export class AnalogueInputs {
     }
 
     async setupMicrophone() {
+        // The channel can have been turned off between the request and now.
+        if (this.urlState.params.microphoneChannel === undefined) return;
         const micPermissionStatus = document.getElementById("micPermissionStatus");
         micPermissionStatus.textContent = "Requesting microphone access...";
 
@@ -110,10 +127,7 @@ export class AnalogueInputs {
             document.addEventListener("click", tryAgain);
         } else {
             micPermissionStatus.textContent = `Error: ${this.microphoneInput.getErrorMessage() || "Unknown error"}`;
-            this.config.setMicrophoneChannel(undefined);
-            // Update URL to remove the parameter
-            delete this.urlState.params.microphoneChannel;
-            this.urlState.updateUrl();
+            this.clearMicrophoneChannel();
         }
     }
 }

package/src/web/archive-list.js

@@ -28,12 +28,7 @@ export class AutobootTicks {
         for (const check of this.checks) {
             check.addEventListener("click", () => {
                 this.show(check.checked);
-                if (check.checked) {
-                    urlState.params.autoboot = "";
-                } else {
-                    delete urlState.params.autoboot;
-                }
-                urlState.updateUrl();
+                urlState.set({ autoboot: check.checked ? true : undefined });
             });
         }
     }

package/src/web/audio-handler.js

@@ -14,8 +14,8 @@ const StallSpikeHeight = 20;
 
 // Nobody is watching an unfocused window, so its sound can run far behind
 // the picture, deep enough to ride out the browser starving the tab.
-export const UnfocusedLatencyMs = 200;
-export const DefaultLatencyMs = 20;
+const UnfocusedLatencyMs = 200;
+const DefaultLatencyMs = 20;
 
 export class AudioHandler {
     constructor({

package/src/web/autoboot.js

@@ -1,7 +1,7 @@
 import * as utils from "../utils.js";
 import * as utils_atom from "../utils_atom.js";
 import * as tokeniser from "../basic-tokenise.js";
-import { installBasic } from "../basic-loader.js";
+import { basicIdleAddr, installBasic } from "../basic-loader.js";
 
 /** Booting and typing for the machine at startup: shift-break, *TAPE incantations and BASIC programs. */
 export class Autoboot {
@@ -69,7 +69,7 @@ export class Autoboot {
         const tokenised = await t.tokenise(prog);
 
         const { processor } = this;
-        const idleAddr = processor.model.isMaster ? 0xe7e6 : 0xe581;
+        const idleAddr = basicIdleAddr(processor.model);
         const hook = processor.debugInstruction.add((addr) => {
             if (addr !== idleAddr) return;
             installBasic(tokenised, {

package/src/web/config.js

@@ -25,7 +25,7 @@ export function fittedRoms({ model, hasEconet, hasMusic5000, hasTeletextAdaptor
 }
 
 /** The settings the dialog presents as checkboxes. `enables` names a control only usable while ticked. */
-export const CheckboxSettings = [
+const CheckboxSettings = [
     { id: "65c02", field: "coProcessor", restartRequired: true, enables: "tubeCpuMultiplier" },
     { id: "hasTeletextAdaptor", field: "hasTeletextAdaptor", restartRequired: true },
     { id: "hasEconet", field: "hasEconet", restartRequired: true },

package/src/web/debug.js

@@ -544,7 +544,7 @@ export class Debugger {
             case "N":
                 this.updatePrevMem();
                 this.cpu.execute(1);
-                self.debug(this.cpu.pc);
+                this.debug(this.cpu.pc);
                 break;
             case "m":
                 this.stepOver();

package/src/web/display.js

@@ -111,9 +111,6 @@ export class Display {
         this.sizeCanvasFor(this.filterClass);
         this.video.paint();
         this.setCrtPic();
-        window.setTimeout(() => window.dispatchEvent(new Event("resize")), 1);
-        // Relayout now as well: the monitor picture may have changed shape.
-        window.dispatchEvent(new Event("resize"));
     }
 
     sizeCanvasFor(filterClass) {

package/src/web/drives.js

@@ -11,7 +11,7 @@ const tracksPerStepFor = (tracks) => (tracks === "40" ? 2 : 1);
  * switches on the Discs menu, and downloading what is in drive 0.
  */
 export class Drives {
-    constructor({ fdc, driveTracks, areYouSure }) {
+    constructor({ fdc, driveTracks, confirm }) {
         this.fdc = fdc;
         this.driveTracks = driveTracks;
         this.saidWritesAreNotKept = false;
@@ -33,7 +33,7 @@ export class Drives {
             if (drive) this.showDriveTracks(driveIndex);
         }
 
-        document.getElementById("download-drive-link").addEventListener("click", () => {
+        document.getElementById("download-drive-link").addEventListener("click", async () => {
             const disc = this.discToDownload();
             if (!disc) return;
             const save = (options) =>
@@ -41,9 +41,8 @@ export class Drives {
             try {
                 save();
             } catch (e) {
-                areYouSure(`${e.message} Save anyway, losing what will not fit?`, "Save anyway", "Cancel", () =>
-                    save({ force: true }),
-                );
+                if (await confirm(`${e.message} Save anyway, losing what will not fit?`, "Save anyway", "Cancel"))
+                    save({ force: true });
             }
         });
 

package/src/web/front-panel.js

@@ -39,8 +39,6 @@ export class FrontPanel {
                     } else {
                         processor.acia.rewindTape();
                     }
-                } else {
-                    console.log("unknown type", type);
                 }
             });
         }

package/src/web/google-drive-picker.js

@@ -16,6 +16,7 @@ export class GoogleDrivePicker {
         this.modals = modals;
         this.processor = processor;
         this.googleDrive = loader;
+        media.addSource("drive", (cat, layout) => this.load(cat, layout));
 
         this.authEl = document.getElementById("google-drive-auth");
         this.el = document.getElementById("google-drive");
@@ -33,18 +34,18 @@ export class GoogleDrivePicker {
 
         // Loading the Google client holds the main thread for ~100ms, so it waits for
         // someone to ask for Drive.
-        document.getElementById("open-drive-link").addEventListener("click", async () => {
+        document.getElementById("open-drive-link").addEventListener("click", async (e) => {
+            e.preventDefault();
             try {
                 await this.googleDrive.initialise();
             } catch (error) {
                 toast(`Google Drive is unavailable: ${errorText(error)}`, { title: "Google Drive" });
-                return false;
+                return;
             }
             const authed = await this.auth(false);
             if (authed) {
                 this.modal.show();
             }
-            return false;
         });
 
         this.el.addEventListener("show.bs.modal", () => this.showList());
@@ -55,9 +56,10 @@ export class GoogleDrivePicker {
         try {
             return await this.googleDrive.authorize(imm);
         } catch (err) {
-            console.log("Error handling google auth: " + err);
+            console.log("Error handling google auth: " + errorText(err));
             this.el.querySelector(".loading").textContent =
-                "There was an error accessing your Google Drive account: " + err;
+                `There was an error accessing your Google Drive account: ${errorText(err)}`;
+            return false;
         }
     }
 
@@ -131,7 +133,6 @@ export class GoogleDrivePicker {
         let name = document.querySelector("#google-drive .disc-name").value;
         if (!name) return;
 
-        this.modals.popupLoading("Connecting to Google Drive");
         this.modal.hide();
         this.modals.popupLoading("Creating '" + name + "' on Google Drive");
 
@@ -150,7 +151,10 @@ export class GoogleDrivePicker {
             // TODO support HFE, I guess?
             const discType = disc.guessDiscTypeFromName(name);
             if (!discType.byteSize) {
-                throw new Error(`Cannot create blank disc of type ${discType.extension} - unknown size`);
+                this.modals.loadingFinished(
+                    `Unable to create ${name} on Google Drive: blank ${discType.extension} discs have no known size`,
+                );
+                return;
             }
             data = new Uint8Array(discType.byteSize);
             if (discType.supportsCatalogue) {

package/src/web/hfe-picker.js

@@ -41,6 +41,7 @@ export class HfePicker {
                 showArchiveMessage("hfe", "hfe-list", "There was an error accessing the HFE archive");
             },
         );
+        media.addSource("hfe", (path) => this.archive.fetch(path));
 
         this.modal = new bootstrap.Modal(document.getElementById("hfe"));
         document.getElementById("hfe").addEventListener("shown.bs.modal", () => {

package/src/web/keyboard-setup.js

@@ -2,36 +2,16 @@ import * as utils from "../utils.js";
 import { Keyboard } from "../keyboard.js";
 import { showNotice } from "./reporting.js";
 
-/**
- * The page's keyboard: the emulated one, the browser shortcuts around it, and
- * the accessibility switches on the user port. Built in two steps because the
- * user port has to exist before the processor does, and the keyboard after.
- */
+/** The page's keyboard: the emulated one and the browser shortcuts around it. */
 export class KeyboardSetup {
     /**
-     * @param {object} actions what each shortcut does, supplied late-bound:
+     * @param {object} opts
+     * @param {object} opts.actions what each shortcut does, supplied late-bound:
      *   enterDebugger, reload, toggleFast, openRewind, openPrinter,
      *   pause, resume, onAnyKeyDown
+     * @param {import("./accessibility-switches.js").AccessibilitySwitches} opts.accessibilitySwitches
      */
-    constructor(actions) {
-        this.actions = actions;
-        this.keyboard = null;
-
-        // Accessibility switch state: bits 0-7 correspond to switches 1-8.
-        // Active low: 0xff = no switches pressed; clearing a bit = that switch is pressed.
-        this.switchState = 0xff;
-        const setup = this;
-        this.userPort = {
-            write() {},
-            read() {
-                return setup.switchState;
-            },
-        };
-    }
-
-    /** Initialise keyboard now that processor exists */
-    attach({ processor, dbgr, keyLayout }) {
-        const { actions } = this;
+    constructor({ actions, accessibilitySwitches, processor, dbgr, keyLayout }) {
         const keyboard = (this.keyboard = new Keyboard({
             processor,
             inputEnabledFunction: () => document.activeElement && document.activeElement.id === "paste-text",
@@ -66,22 +46,11 @@ export class KeyboardSetup {
         keyboard.registerKeyHandler(utils.keyCodes.PAGEDOWN, onDown("pagedown", actions.openRewind), alt);
         keyboard.registerKeyHandler(utils.keyCodes.B, onDown(null, actions.openPrinter), ctrl);
 
-        // Register accessibility switch key handlers.
-        // Keys 1-8 (K1-K8) and function keys F1-F8 both map to user port bits 0-7
-        // (active low: pressing the key clears the corresponding bit in &FE60).
-        //
-        // On real hardware, the Brilliant Computing switch interface box and special-ed
-        // joystick connect to the User Port only; they do not touch the analogue port
-        // or the System VIA fire buttons (PB4/PB5), which belong to the standard
-        // analogue joystick connector.  So we only update switchState here.
-        const handleSwitch = (bit) => (down) => {
-            if (down) this.switchState &= ~(1 << bit);
-            else this.switchState |= 1 << bit;
-        };
-
-        // Alt+1-8 and Alt+F1-F8 trigger the switches.  Using Alt means the underlying
-        // key is never forwarded to the BBC Micro (keyboard.js bails out early when a
-        // handler fires), so typing numbers or using function keys works normally.
+        // Alt+1-8 and Alt+F1-F8 trigger the accessibility switches. Using Alt means
+        // the underlying key is never forwarded to the BBC Micro (keyboard.js bails
+        // out early when a handler fires), so typing numbers or using function keys
+        // works normally.
+        const handleSwitch = (index) => (down) => accessibilitySwitches.setSwitch(index, down);
         for (let i = 0; i < 8; i++) {
             keyboard.registerKeyHandler(utils.keyCodes.K1 + i, handleSwitch(i), alt);
             keyboard.registerKeyHandler(utils.keyCodes.F1 + i, handleSwitch(i), alt);
@@ -96,11 +65,7 @@ export class KeyboardSetup {
     }
 
     sendRawKeyboard(keysToSend, checkCapsAndShiftLocks) {
-        if (this.keyboard) {
-            this.keyboard.sendRawKeyboard(keysToSend, checkCapsAndShiftLocks);
-        } else {
-            console.warn("Tried to send keys before keyboard was initialised");
-        }
+        this.keyboard.sendRawKeyboard(keysToSend, checkCapsAndShiftLocks);
     }
 
     clearKeys() {

package/src/web/media-loader.js

@@ -50,22 +50,20 @@ function readFileAsBinaryString(file) {
  * URL schema can name, the local file inputs, the drop zone and the built-in
  * list. Choosing what goes in a drive funnels through drives.putDiscIn.
  */
-export class MediaLoader {
+export class MediaLoader extends EventTarget {
     /**
      * @param {object} deps
-     * @param {object} deps.sources fetchers keyed by schema: sth, tapeSth and hfe
-     *   resolve an archive name to image data; drive loads a Google Drive file
      * @param {Function} deps.isSnapshotFile says whether a dropped file is a save state
      * @param {Function} deps.loadSnapshot restores a dropped save state
      */
-    constructor({ processor, model, drives, urlState, config, modals, sources, isSnapshotFile, loadSnapshot }) {
+    constructor({ processor, model, drives, urlState, modals, isSnapshotFile, loadSnapshot }) {
+        super();
         this.processor = processor;
         this.model = model;
         this.drives = drives;
         this.urlState = urlState;
-        this.config = config;
         this.modals = modals;
-        this.sources = sources;
+        this.sources = {};
 
         document.getElementById("disc_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
@@ -105,8 +103,7 @@ export class MediaLoader {
                     tapeName = unzipped.name;
                 }
                 this.setProcessorTape(await loadTapeFromData(tapeName, tapeData, model));
-                delete this.params.tape;
-                urlState.updateUrl();
+                urlState.set({ tape: undefined });
                 modals.hide("tapes");
             } catch (error) {
                 reportLoadFailure(file.name, error);
@@ -167,6 +164,11 @@ export class MediaLoader {
         return this.urlState.params;
     }
 
+    /** Register the fetcher behind an image schema; each picker calls this as it is constructed. */
+    addSource(schema, fetcher) {
+        this.sources[schema] = fetcher;
+    }
+
     /** Route tape to the correct interface (ACIA for BBC, PPIA for Atom) */
     setProcessorTape(tape) {
         if (this.model.isAtom) {
@@ -177,22 +179,18 @@ export class MediaLoader {
     }
 
     setDisc1Image(name) {
-        delete this.params.disc;
-        this.params.disc1 = name;
-        this.urlState.updateUrl();
-        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { disc1: name } }));
+        this.urlState.set({ disc: undefined, disc1: name });
+        this.dispatchEvent(new CustomEvent("media-changed", { detail: { disc1: name } }));
     }
 
     setDisc2Image(name) {
-        this.params.disc2 = name;
-        this.urlState.updateUrl();
-        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { disc2: name } }));
+        this.urlState.set({ disc2: name });
+        this.dispatchEvent(new CustomEvent("media-changed", { detail: { disc2: name } }));
     }
 
     setTapeImage(name) {
-        this.params.tape = name;
-        this.urlState.updateUrl();
-        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { tape: name } }));
+        this.urlState.set({ tape: name });
+        this.dispatchEvent(new CustomEvent("media-changed", { detail: { tape: name } }));
     }
 
     async loadHTMLFile(file) {
@@ -207,9 +205,7 @@ export class MediaLoader {
         // Local file: retain the image bytes for embedding in save-to-file snapshots.
         loadedDisc.setOriginalImage(imageData);
         this.drives.putDiscIn(0, loadedDisc);
-        delete this.params.disc;
-        delete this.params.disc1;
-        this.urlState.updateUrl();
+        this.urlState.set({ disc: undefined, disc1: undefined });
         this.modals.hide("discs");
     }
 
@@ -309,6 +305,7 @@ export class MediaLoader {
     }
 
     async loadTapeImage(tapeImage) {
+        if (!tapeImage) return null;
         const split = splitImage(tapeImage);
         tapeImage = split.image;
         const schema = split.schema;

package/src/web/modals.js

@@ -7,7 +7,7 @@ import { toast } from "./toast.js";
  * if it was running before.
  */
 export class Modals {
-    constructor({ isRunning, stop, go }) {
+    constructor({ loop }) {
         this.errorDialog = document.getElementById("error-dialog");
         this.errorModal = new bootstrap.Modal(this.errorDialog);
         this.loadingDialog = document.getElementById("loading-dialog");
@@ -18,11 +18,11 @@ export class Modals {
 
         let savedRunning = false;
         document.addEventListener("show.bs.modal", () => {
-            if (!this.anyVisible()) savedRunning = isRunning();
-            if (isRunning()) stop(false);
+            if (!this.anyVisible()) savedRunning = loop.isRunning();
+            if (loop.isRunning()) loop.stop(false);
         });
         document.addEventListener("hidden.bs.modal", () => {
-            if (!this.anyVisible() && savedRunning) go();
+            if (!this.anyVisible() && savedRunning) loop.go();
         });
     }
 
@@ -58,26 +58,29 @@ export class Modals {
         if (message) toast(message);
     }
 
-    areYouSure(message, yesText, noText, yesFunc) {
+    /** @returns {Promise<boolean>} true for the yes button; false for any other way out of the dialog */
+    confirm(message, yesText, noText) {
         const yesButton = this.aysEl.querySelector(".ays-yes");
         this.aysEl.querySelector(".context").textContent = message;
         this.aysEl.querySelector(".ays-no").textContent = noText;
         yesButton.textContent = yesText;
-        let confirmed = false;
-        const onYes = () => {
-            confirmed = true;
-            this.aysModal.hide();
-        };
-        yesButton.addEventListener("click", onYes, { once: true });
-        // The "no" button, Escape and a click outside raise no event of their own: they only hide the modal.
-        this.aysEl.addEventListener(
-            "hidden.bs.modal",
-            () => {
-                yesButton.removeEventListener("click", onYes);
-                if (confirmed) yesFunc();
-            },
-            { once: true },
-        );
-        this.aysModal.show();
+        return new Promise((resolve) => {
+            let confirmed = false;
+            const onYes = () => {
+                confirmed = true;
+                this.aysModal.hide();
+            };
+            yesButton.addEventListener("click", onYes, { once: true });
+            // The "no" button, Escape and a click outside raise no event of their own: they only hide the modal.
+            this.aysEl.addEventListener(
+                "hidden.bs.modal",
+                () => {
+                    yesButton.removeEventListener("click", onYes);
+                    resolve(confirmed);
+                },
+                { once: true },
+            );
+            this.aysModal.show();
+        });
     }
 }

package/src/web/rewind-ui.js

@@ -13,18 +13,14 @@ export class RewindUI {
      * @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
+     * @param {object} options.loop - the emulation loop, for pausing and resuming
      */
-    constructor({ rewindBuffer, processor, video, captureInterval, stop, go, isRunning }) {
+    constructor({ rewindBuffer, processor, video, captureInterval, loop }) {
         this.rewindBuffer = rewindBuffer;
         this.processor = processor;
         this.video = video;
         this.captureInterval = captureInterval;
-        this.stop = stop;
-        this.go = go;
-        this.isRunning = isRunning;
+        this.loop = loop;
 
         this.panel = document.getElementById("rewind-panel");
         this.filmstrip = document.getElementById("rewind-filmstrip");
@@ -45,6 +41,13 @@ export class RewindUI {
         });
     }
 
+    /** Forget everything captured, as on a hard reset. */
+    reset() {
+        this.close();
+        this.rewindBuffer.clear();
+        this.updateButtonState();
+    }
+
     /** Open the rewind scrubber panel. */
     open() {
         if (this.isOpen) return;
@@ -52,8 +55,8 @@ export class RewindUI {
         this.snapshots = this.rewindBuffer.getAll();
         if (this.snapshots.length === 0) return;
 
-        this.wasRunning = this.isRunning();
-        if (this.wasRunning) this.stop(false);
+        this.wasRunning = this.loop.isRunning();
+        if (this.wasRunning) this.loop.stop(false);
 
         this.isOpen = true;
         this.savedState = this.processor.snapshotState();
@@ -70,7 +73,7 @@ export class RewindUI {
         } catch (e) {
             this.processor.restoreState(this.savedState);
             this._closePanel();
-            if (this.wasRunning) this.go();
+            if (this.wasRunning) this.loop.go();
             throw e;
         }
 
@@ -97,7 +100,7 @@ export class RewindUI {
             this.processor.restoreState(this.snapshots[this.selectedIndex]);
         }
         this._closePanel();
-        if (this.wasRunning) this.go();
+        if (this.wasRunning) this.loop.go();
     }
 
     /**
@@ -107,7 +110,7 @@ export class RewindUI {
         if (!this.isOpen) return;
         this._renderState(this.savedState);
         this._closePanel();
-        if (this.wasRunning) this.go();
+        if (this.wasRunning) this.loop.go();
     }
 
     /** Alias for cancel — closing the panel without explicit commit cancels. */

package/src/web/settings.js

@@ -39,13 +39,13 @@ export class Settings {
                 if (changed.displayMode) this.applyDisplayMode(changed.displayMode);
             },
             (changed) => this.onDialogClosed(changed),
-            () => {
-                this.targets.modals.areYouSure(
+            async () => {
+                const restart = await this.targets.modals.confirm(
                     "Your change is saved, but only takes effect when the emulator restarts. Restart now?",
                     "Restart now",
                     "Later",
-                    () => window.location.reload(),
                 );
+                if (restart) window.location.reload();
             },
         );
 
@@ -106,8 +106,7 @@ export class Settings {
         this.config.setAudioOutput(output);
         this.targets.quickSettings?.showAudioOutput(output);
         window.localStorage.audioOutput = output;
-        this.urlState.params.audioOutput = output;
-        this.urlState.updateUrl();
+        this.urlState.set({ audioOutput: output });
     }
 
     applySpeakerAmount(amount) {
@@ -123,24 +122,25 @@ export class Settings {
     applyDisplayMode(mode) {
         this.displayMode = mode;
         this.targets.display.setMode(mode);
+        // The monitor picture may have changed shape.
+        this.targets.layout.resize();
         this.config.setDisplayMode(mode);
         this.targets.quickSettings?.showDisplayMode(mode);
         window.localStorage.displayMode = mode;
-        this.urlState.params.displayMode = mode;
-        this.urlState.updateUrl();
+        this.urlState.set({ displayMode: mode });
     }
 
     onDialogClosed(changed) {
         const { urlState } = this;
         const { machine, keys, inputs } = this.targets;
         const parsedQuery = urlState.params;
-        Object.assign(parsedQuery, changed);
+        urlState.set(changed);
         if (changed.keyLayout) {
             window.localStorage.keyLayout = changed.keyLayout;
             machine.emulationConfig.keyLayout = changed.keyLayout;
             keys.setKeyLayout(changed.keyLayout);
         }
-        if (changed.mouseJoystickEnabled !== undefined || changed.microphoneChannel !== undefined) {
+        if (changed.mouseJoystickEnabled !== undefined || Object.hasOwn(changed, "microphoneChannel")) {
             inputs.updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
 
             if (changed.microphoneChannel !== undefined) {
@@ -155,6 +155,5 @@ export class Settings {
                 machine.processor.tube.cpuMultiplier = changed.tubeCpuMultiplier;
             }
         }
-        urlState.updateUrl();
     }
 }

package/src/web/snapshot-ui.js

@@ -38,7 +38,7 @@ export function isSnapshotFile(filename, arrayBuffer) {
 }
 
 /** The saved snapshot in whichever of the formats we read the buffer holds. */
-export async function readSnapshot(arrayBuffer) {
+async function readSnapshot(arrayBuffer) {
     if (isBemSnapshot(arrayBuffer)) return await parseBemSnapshot(arrayBuffer);
     if (isUefSnapshot(arrayBuffer)) return parseUefSnapshot(arrayBuffer);
     // Detect gzip (magic bytes 0x1f 0x8b) or plain JSON
@@ -84,7 +84,7 @@ export function snapshotMedia(fdcDrives, params) {
 
 /** Saving and restoring states: the menu item, the file input and the reload across a model change. */
 export class SnapshotUI {
-    constructor({ processor, model, video, media, drives, urlState, modals, isRunning, stop, go }) {
+    constructor({ processor, model, video, media, drives, urlState, modals, loop }) {
         this.processor = processor;
         this.model = model;
         this.video = video;
@@ -92,9 +92,7 @@ export class SnapshotUI {
         this.drives = drives;
         this.urlState = urlState;
         this.modals = modals;
-        this.isRunning = isRunning;
-        this.stop = stop;
-        this.go = go;
+        this.loop = loop;
 
         document.getElementById("save-state").addEventListener("click", async (event) => {
             event.preventDefault();
@@ -110,8 +108,8 @@ export class SnapshotUI {
     }
 
     async saveState() {
-        const wasRunning = this.isRunning();
-        if (wasRunning) this.stop(false);
+        const wasRunning = this.loop.isRunning();
+        if (wasRunning) this.loop.stop(false);
         try {
             const manifest = snapshotMedia(this.processor.fdc.drives, this.urlState.params);
             const snapshot = createSnapshot(this.processor, this.model, manifest);
@@ -122,12 +120,12 @@ export class SnapshotUI {
         } catch (e) {
             this.modals.showError("saving state", e);
         }
-        if (wasRunning) this.go();
+        if (wasRunning) this.loop.go();
     }
 
     async loadStateFromFile(file, preReadBuffer) {
-        const wasRunning = this.isRunning();
-        if (wasRunning) this.stop(false);
+        const wasRunning = this.loop.isRunning();
+        if (wasRunning) this.loop.stop(false);
         try {
             const arrayBuffer = preReadBuffer || (await file.arrayBuffer());
             const snapshot = await readSnapshot(arrayBuffer);
@@ -146,7 +144,7 @@ export class SnapshotUI {
         } catch (e) {
             this.modals.showError("loading state", e);
         }
-        if (wasRunning) this.go();
+        if (wasRunning) this.loop.go();
     }
 
     /** Picks up the state a cross-model reload stashed, once the matching machine is up. */

package/src/web/sth-picker.js

@@ -22,8 +22,18 @@ export class SthPicker {
             document.getElementById("sth-filter").focus();
         });
 
-        const startLoad = () => showArchiveMessage("sth", "sth-list", "Loading catalog from STH archive");
-        const onError = () => showArchiveMessage("sth", "sth-list", "There was an error accessing the STH archive");
+        // Anything that clears the list takes a new ticket; a chain whose ticket is
+        // stale gives up (the same scheme as hfe-picker.js).
+        this.renderTicket = 0;
+
+        const startLoad = () => {
+            this.renderTicket++;
+            showArchiveMessage("sth", "sth-list", "Loading catalog from STH archive");
+        };
+        const onError = () => {
+            this.renderTicket++;
+            showArchiveMessage("sth", "sth-list", "There was an error accessing the STH archive");
+        };
         this.discs = new StairwayToHell(
             startLoad,
             (cat) => this.renderCatalogue(cat, (item) => this.pickDisc(item)),
@@ -36,6 +46,8 @@ export class SthPicker {
             onError,
             true,
         );
+        media.addSource("sth", (name) => this.discs.fetch(name));
+        media.addSource("tapeSth", (name) => this.tapes.fetch(name));
 
         document.addEventListener("click", (e) => {
             const target = e.target.closest("a.sth");
@@ -95,17 +107,19 @@ export class SthPicker {
     }
 
     renderCatalogue(cat, onClick) {
+        const ticket = ++this.renderTicket;
         clearArchiveList("sth-list");
         const sthList = document.getElementById("sth-list");
         document.querySelector("#sth .loading").style.display = "none";
         const template = sthList.querySelector(".template");
 
         const doSome = (all) => {
+            if (ticket !== this.renderTicket) return;
             const MaxAtATime = 100;
             const Delay = 30;
             const batch = all.slice(0, MaxAtATime);
             const remaining = all.slice(MaxAtATime);
-            const filter = document.getElementById("sth-filter").value;
+            const filter = document.getElementById("sth-filter").value.toLowerCase();
             for (const name of batch) {
                 const row = template.cloneNode(true);
                 row.classList.remove("template");
@@ -117,7 +131,7 @@ export class SthPicker {
                 });
                 row.style.display = name.toLowerCase().indexOf(filter) >= 0 ? "" : "none";
             }
-            if (all.length) setTimeout(() => doSome(remaining), Delay);
+            if (remaining.length) setTimeout(() => doSome(remaining), Delay);
         };
 
         doSome(cat);

package/src/web/url-state.js

@@ -18,6 +18,7 @@ export const UrlParamTypes = {
     hasTeletextAdaptor: ParamTypes.BOOL,
     hasEconet: ParamTypes.BOOL,
     glEnabled: ParamTypes.BOOL,
+    lowLatency: ParamTypes.BOOL,
     fakeVideo: ParamTypes.BOOL,
     logFdcCommands: ParamTypes.BOOL,
     logFdcStateChanges: ParamTypes.BOOL,
@@ -55,7 +56,8 @@ export const UrlParamTypes = {
 
 /**
  * The page's settings as carried in its URL. `params` is the one parsed
- * object: whoever changes a setting edits it in place and calls updateUrl.
+ * object: whoever changes a setting hands the change to set(), which edits
+ * it in place and writes the URL in one step.
  */
 export class UrlState {
     constructor(location, history, paramTypes = UrlParamTypes) {
@@ -77,6 +79,15 @@ export class UrlState {
         return buildUrlFromParams(this.baseUrl, { ...this.params, ...overrides }, this.paramTypes);
     }
 
+    /** Apply `changes` to the parameters (undefined deletes a key) and push the new URL. */
+    set(changes) {
+        for (const [key, value] of Object.entries(changes)) {
+            if (value === undefined) delete this.params[key];
+            else this.params[key] = value;
+        }
+        this.updateUrl();
+    }
+
     updateUrl() {
         this.history.pushState(null, null, this.url());
     }

package/tests/test-machine.js

@@ -1,4 +1,4 @@
-import { installBasic } from "../src/basic-loader.js";
+import { basicIdleAddr, installBasic } from "../src/basic-loader.js";
 import * as fdc from "../src/fdc.js";
 import { fake6502 } from "../src/fake6502.js";
 import { findModel } from "../src/models.js";
@@ -182,7 +182,7 @@ export class TestMachine {
             assert(hit, "Atom did not reach keyboard input in time");
             return this.runFor(10 * 1000);
         }
-        const idleAddr = this.processor.model.isMaster ? 0xe7e6 : 0xe581;
+        const idleAddr = basicIdleAddr(this.processor.model);
         let hit = false;
         const hook = this.processor.debugInstruction.add((addr) => {
             if (addr === idleAddr) {