web-a2e 1.0.0

package/src/js/debug/memory-heat-map-window.js

@@ -0,0 +1,481 @@
+/*
+ * memory-heat-map-window.js - Real-time memory access heat map visualization
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import { BaseWindow } from "../windows/base-window.js";
+
+// Memory region labels for main memory
+const MAIN_MEMORY_REGIONS = [
+  { name: "Zero Page", start: 0x0000, end: 0x00ff },
+  { name: "Stack", start: 0x0100, end: 0x01ff },
+  { name: "Input Buffer", start: 0x0200, end: 0x02ff },
+  { name: "Vectors/Data", start: 0x0300, end: 0x03ff },
+  { name: "Text Page 1", start: 0x0400, end: 0x07ff },
+  { name: "Text Page 2", start: 0x0800, end: 0x0bff },
+  { name: "Free RAM", start: 0x0c00, end: 0x1fff },
+  { name: "HiRes Page 1", start: 0x2000, end: 0x3fff },
+  { name: "HiRes Page 2", start: 0x4000, end: 0x5fff },
+  { name: "Free RAM", start: 0x6000, end: 0x95ff },
+  { name: "DOS 3.3", start: 0x9600, end: 0xbfff },
+  { name: "I/O Space", start: 0xc000, end: 0xc0ff },
+  { name: "Slot ROMs", start: 0xc100, end: 0xcfff },
+  { name: "ROM/LC RAM", start: 0xd000, end: 0xffff },
+];
+
+// Memory region labels for auxiliary memory
+const AUX_MEMORY_REGIONS = [
+  { name: "Aux Zero Page", start: 0x0000, end: 0x00ff },
+  { name: "Aux Stack", start: 0x0100, end: 0x01ff },
+  { name: "Aux $0200", start: 0x0200, end: 0x03ff },
+  { name: "Aux Text Page 1", start: 0x0400, end: 0x07ff },
+  { name: "Aux Text Page 2", start: 0x0800, end: 0x0bff },
+  { name: "Aux RAM", start: 0x0c00, end: 0x1fff },
+  { name: "Aux HiRes Page 1", start: 0x2000, end: 0x3fff },
+  { name: "Aux HiRes Page 2", start: 0x4000, end: 0x5fff },
+  { name: "Aux RAM", start: 0x6000, end: 0xbfff },
+  { name: "Aux $C000-$FFFF", start: 0xc000, end: 0xffff },
+];
+
+export class MemoryHeatMapWindow extends BaseWindow {
+  constructor(wasmModule) {
+    super({
+      id: "memory-heatmap",
+      title: "Memory Heat Map",
+      defaultWidth: 580,
+      defaultHeight: 435,
+      minWidth: 580,
+      minHeight: 435,
+      maxWidth: 580,
+      maxHeight: 435,
+
+    });
+    this.wasmModule = wasmModule;
+    this.isTracking = false;
+    this.viewMode = "combined"; // combined, reads, writes
+    this.decayEnabled = false;
+    this.onJumpToAddress = null; // Callback for Memory Browser integration
+    this.activeCanvas = "main"; // Which canvas is being hovered
+  }
+
+  renderContent() {
+    return `
+      <div class="heatmap-toolbar">
+        <button class="heatmap-toggle-btn">Start</button>
+        <button class="heatmap-clear-btn">Clear</button>
+        <select class="heatmap-mode-select">
+          <option value="combined">Combined</option>
+          <option value="reads">Reads Only</option>
+          <option value="writes">Writes Only</option>
+        </select>
+        <label class="heatmap-decay-label">
+          <input type="checkbox" class="heatmap-decay-check" />
+          Decay
+        </label>
+      </div>
+      <div class="heatmap-dual-container">
+        <div class="heatmap-panel">
+          <div class="heatmap-panel-title">Main RAM + ROM</div>
+          <div class="heatmap-canvas-container">
+            <canvas class="heatmap-canvas heatmap-canvas-main" width="256" height="256"></canvas>
+          </div>
+        </div>
+        <div class="heatmap-panel">
+          <div class="heatmap-panel-title">Auxiliary RAM</div>
+          <div class="heatmap-canvas-container">
+            <canvas class="heatmap-canvas heatmap-canvas-aux" width="256" height="256"></canvas>
+          </div>
+        </div>
+      </div>
+      <div class="heatmap-legend">
+        <span class="heatmap-legend-item"><span class="legend-color reads"></span> Reads</span>
+        <span class="heatmap-legend-item"><span class="legend-color writes"></span> Writes</span>
+        <span class="heatmap-legend-item"><span class="legend-color both"></span> Both</span>
+      </div>
+      <div class="heatmap-info">
+        <span class="heatmap-addr">$0000</span>
+        <span class="heatmap-region">Zero Page</span>
+        <span class="heatmap-counts">R: 0 W: 0</span>
+      </div>
+    `;
+  }
+
+  onContentRendered() {
+    this.canvasMain = this.contentElement.querySelector(".heatmap-canvas-main");
+    this.canvasAux = this.contentElement.querySelector(".heatmap-canvas-aux");
+    this.ctxMain = this.canvasMain.getContext("2d");
+    this.ctxAux = this.canvasAux.getContext("2d");
+    this.toggleBtn = this.contentElement.querySelector(".heatmap-toggle-btn");
+    this.modeSelect = this.contentElement.querySelector(".heatmap-mode-select");
+    this.decayCheck = this.contentElement.querySelector(".heatmap-decay-check");
+    this.addrSpan = this.contentElement.querySelector(".heatmap-addr");
+    this.regionSpan = this.contentElement.querySelector(".heatmap-region");
+    this.countsSpan = this.contentElement.querySelector(".heatmap-counts");
+
+    // Pre-allocate image data for both canvases
+    this.imageDataMain = this.ctxMain.createImageData(256, 256);
+    this.imageDataAux = this.ctxAux.createImageData(256, 256);
+
+    this.setupHeatmapEventListeners();
+
+    // Apply restored state to UI elements
+    this.modeSelect.value = this.viewMode;
+    this.decayCheck.checked = this.decayEnabled;
+  }
+
+  setupHeatmapEventListeners() {
+    // Toggle tracking
+    this.toggleBtn.addEventListener("click", () => {
+      this.isTracking = !this.isTracking;
+      this.toggleBtn.textContent = this.isTracking ? "Stop" : "Start";
+      this.toggleBtn.classList.toggle("active", this.isTracking);
+      this.wasmModule._enableMemoryTracking(this.isTracking);
+    });
+
+    // Clear tracking data
+    this.contentElement
+      .querySelector(".heatmap-clear-btn")
+      .addEventListener("click", () => {
+        this.wasmModule._clearMemoryTracking();
+      });
+
+    // View mode selection
+    this.modeSelect.addEventListener("change", (e) => {
+      this.viewMode = e.target.value;
+      if (this.onStateChange) this.onStateChange();
+    });
+
+    // Decay toggle
+    this.decayCheck.addEventListener("change", (e) => {
+      this.decayEnabled = e.target.checked;
+      if (this.onStateChange) this.onStateChange();
+    });
+
+    // Canvas hover for main memory
+    this.canvasMain.addEventListener("mousemove", (e) => {
+      this.activeCanvas = "main";
+      const addr = this.getAddressFromEvent(e, this.canvasMain);
+      this.showAddressInfo(addr, MAIN_MEMORY_REGIONS, "Main");
+    });
+
+    // Canvas hover for aux memory
+    this.canvasAux.addEventListener("mousemove", (e) => {
+      this.activeCanvas = "aux";
+      const addr = this.getAddressFromEvent(e, this.canvasAux);
+      this.showAddressInfo(addr, AUX_MEMORY_REGIONS, "Aux");
+    });
+
+    this.canvasMain.addEventListener("mouseleave", () =>
+      this.clearAddressInfo(),
+    );
+    this.canvasAux.addEventListener("mouseleave", () =>
+      this.clearAddressInfo(),
+    );
+
+    // Click to jump to Memory Browser
+    this.canvasMain.addEventListener("click", (e) => {
+      const addr = this.getAddressFromEvent(e, this.canvasMain);
+      if (this.onJumpToAddress) {
+        this.onJumpToAddress(addr);
+      }
+    });
+
+    this.canvasAux.addEventListener("click", (e) => {
+      const addr = this.getAddressFromEvent(e, this.canvasAux);
+      if (this.onJumpToAddress) {
+        this.onJumpToAddress(addr);
+      }
+    });
+  }
+
+  getAddressFromEvent(e, canvas) {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor(((e.clientX - rect.left) / rect.width) * 256);
+    const y = Math.floor(((e.clientY - rect.top) / rect.height) * 256);
+    return y * 256 + x;
+  }
+
+  clearAddressInfo() {
+    this.addrSpan.textContent = "$----";
+    this.regionSpan.textContent = "";
+    this.countsSpan.textContent = "";
+  }
+
+  showAddressInfo(addr, regions, prefix) {
+    if (addr < 0 || addr > 0xffff) return;
+
+    this.addrSpan.textContent = `${prefix} $${this.formatHex(addr, 4)}`;
+
+    // Find region
+    for (const region of regions) {
+      if (addr >= region.start && addr <= region.end) {
+        this.regionSpan.textContent = region.name;
+        break;
+      }
+    }
+
+    // Get counts from WASM memory
+    const readCountsPtr = this.wasmModule._getMemoryReadCounts();
+    const writeCountsPtr = this.wasmModule._getMemoryWriteCounts();
+
+    if (readCountsPtr && writeCountsPtr) {
+      const readCount = this.wasmModule.HEAPU8[readCountsPtr + addr];
+      const writeCount = this.wasmModule.HEAPU8[writeCountsPtr + addr];
+      this.countsSpan.textContent = `R: ${readCount} W: ${writeCount}`;
+    }
+  }
+
+  update(wasmModule) {
+    if (!this.isVisible || !this.canvasMain || !this.canvasAux) return;
+
+    const readCountsPtr = wasmModule._getMemoryReadCounts();
+    const writeCountsPtr = wasmModule._getMemoryWriteCounts();
+    const mainRAMPtr = wasmModule._getMainRAM();
+    const auxRAMPtr = wasmModule._getAuxRAM();
+    const systemROMPtr = wasmModule._getSystemROM();
+
+    if (!readCountsPtr || !writeCountsPtr) return;
+
+    // Update main memory canvas
+    this.updateCanvas(
+      this.imageDataMain,
+      this.ctxMain,
+      readCountsPtr,
+      writeCountsPtr,
+      mainRAMPtr,
+      systemROMPtr,
+    );
+
+    // Update aux memory canvas
+    this.updateCanvasAux(
+      this.imageDataAux,
+      this.ctxAux,
+      readCountsPtr,
+      writeCountsPtr,
+      auxRAMPtr,
+    );
+
+    // Apply decay if enabled
+    if (this.decayEnabled && this.isTracking) {
+      wasmModule._decayMemoryTracking(2);
+    }
+  }
+
+  /**
+   * Render the memory heat map for main RAM and system ROM.
+   *
+   * Color encoding scheme:
+   * - Background brightness: Based on memory content value (0-255 → visible gray level).
+   *   This shows the actual memory contents.
+   * - Read activity: Blue/cyan channel. Higher read count = brighter blue.
+   * - Write activity: Red/orange channel. Higher write count = brighter red.
+   * - Combined read+write: Purple/magenta blend.
+   *
+   * Each pixel represents one memory address. The canvas is 256x256 = 65536 pixels,
+   * covering the entire 64KB address space. Addresses are laid out left-to-right,
+   * top-to-bottom (address 0 at top-left, address 65535 at bottom-right).
+   *
+   * Memory regions:
+   * - $0000-$BFFF: Main RAM (48KB)
+   * - $C000-$CFFF: I/O and soft switches
+   * - $D000-$FFFF: ROM or bank-switched RAM
+   */
+  updateCanvas(
+    imageData,
+    ctx,
+    readCountsPtr,
+    writeCountsPtr,
+    mainRAMPtr,
+    systemROMPtr,
+  ) {
+    const data = imageData.data;
+    const wasmModule = this.wasmModule;
+
+    for (let addr = 0; addr < 65536; addr++) {
+      const readCount = wasmModule.HEAPU8[readCountsPtr + addr];
+      const writeCount = wasmModule.HEAPU8[writeCountsPtr + addr];
+
+      // Get memory content for background brightness
+      let memValue = 0;
+      if (mainRAMPtr && addr < 0xc000) {
+        memValue = wasmModule.HEAPU8[mainRAMPtr + addr];
+      } else if (systemROMPtr && addr >= 0xc000) {
+        memValue = wasmModule.HEAPU8[systemROMPtr + (addr - 0xc000)];
+      }
+
+      const pixelIndex = addr * 4;
+
+      // Base background: visible gray based on memory content (20-60 range)
+      const bgLevel = 20 + Math.floor(memValue * 0.16);
+
+      let r, g, b;
+
+      // Scale activity to be more visible (multiply by 3, cap at 200)
+      const readIntensity = Math.min(200, readCount * 3);
+      const writeIntensity = Math.min(200, writeCount * 3);
+
+      switch (this.viewMode) {
+        case "reads":
+          // Apple Blue (#18ABEA) for reads
+          r = Math.min(255, bgLevel + Math.floor(readIntensity * 0.1));
+          g = Math.min(255, bgLevel + Math.floor(readIntensity * 0.73));
+          b = Math.min(255, bgLevel + readIntensity);
+          break;
+        case "writes":
+          // Apple Orange (#F68D35) for writes
+          r = Math.min(255, bgLevel + writeIntensity);
+          g = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.57));
+          b = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.22));
+          break;
+        case "combined":
+        default:
+          if (readCount > 0 && writeCount > 0) {
+            // Apple Purple (#B55DB6) for both
+            r = Math.min(255, bgLevel + writeIntensity);
+            g = Math.min(
+              255,
+              bgLevel +
+                Math.floor(Math.min(readIntensity, writeIntensity) * 0.51),
+            );
+            b = Math.min(255, bgLevel + readIntensity);
+          } else if (readCount > 0) {
+            // Apple Blue (#18ABEA) for reads only
+            r = Math.min(255, bgLevel + Math.floor(readIntensity * 0.1));
+            g = Math.min(255, bgLevel + Math.floor(readIntensity * 0.73));
+            b = Math.min(255, bgLevel + readIntensity);
+          } else if (writeCount > 0) {
+            // Apple Orange (#F68D35) for writes only
+            r = Math.min(255, bgLevel + writeIntensity);
+            g = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.57));
+            b = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.22));
+          } else {
+            // No activity - gray background
+            r = bgLevel;
+            g = bgLevel;
+            b = bgLevel;
+          }
+          break;
+      }
+
+      data[pixelIndex] = r;
+      data[pixelIndex + 1] = g;
+      data[pixelIndex + 2] = b;
+      data[pixelIndex + 3] = 255;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+  }
+
+  updateCanvasAux(imageData, ctx, readCountsPtr, writeCountsPtr, auxRAMPtr) {
+    const data = imageData.data;
+    const wasmModule = this.wasmModule;
+
+    for (let addr = 0; addr < 65536; addr++) {
+      // Note: tracking counts are for the main address space
+      // Aux memory accesses happen when RAMRD/RAMWRT are set
+      // For now, show aux memory content with dimmed tracking overlay
+      const readCount = wasmModule.HEAPU8[readCountsPtr + addr];
+      const writeCount = wasmModule.HEAPU8[writeCountsPtr + addr];
+
+      // Get aux memory content
+      let memValue = 0;
+      if (auxRAMPtr) {
+        memValue = wasmModule.HEAPU8[auxRAMPtr + addr];
+      }
+
+      const pixelIndex = addr * 4;
+
+      // Base background: visible gray based on memory content (20-60 range)
+      const bgLevel = 20 + Math.floor(memValue * 0.16);
+
+      let r, g, b;
+
+      // Scale activity (dimmed for aux since tracking is address-based)
+      const readIntensity = Math.min(200, readCount * 2);
+      const writeIntensity = Math.min(200, writeCount * 2);
+
+      switch (this.viewMode) {
+        case "reads":
+          // Apple Blue (#18ABEA) for reads
+          r = Math.min(255, bgLevel + Math.floor(readIntensity * 0.1));
+          g = Math.min(255, bgLevel + Math.floor(readIntensity * 0.73));
+          b = Math.min(255, bgLevel + readIntensity);
+          break;
+        case "writes":
+          // Apple Orange (#F68D35) for writes
+          r = Math.min(255, bgLevel + writeIntensity);
+          g = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.57));
+          b = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.22));
+          break;
+        case "combined":
+        default:
+          if (readCount > 0 && writeCount > 0) {
+            // Apple Purple (#B55DB6) for both
+            r = Math.min(255, bgLevel + writeIntensity);
+            g = Math.min(
+              255,
+              bgLevel +
+                Math.floor(Math.min(readIntensity, writeIntensity) * 0.51),
+            );
+            b = Math.min(255, bgLevel + readIntensity);
+          } else if (readCount > 0) {
+            // Apple Blue (#18ABEA) for reads only
+            r = Math.min(255, bgLevel + Math.floor(readIntensity * 0.1));
+            g = Math.min(255, bgLevel + Math.floor(readIntensity * 0.73));
+            b = Math.min(255, bgLevel + readIntensity);
+          } else if (writeCount > 0) {
+            // Apple Orange (#F68D35) for writes only
+            r = Math.min(255, bgLevel + writeIntensity);
+            g = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.57));
+            b = Math.min(255, bgLevel + Math.floor(writeIntensity * 0.22));
+          } else {
+            // No activity - gray background
+            r = bgLevel;
+            g = bgLevel;
+            b = bgLevel;
+          }
+          break;
+      }
+
+      data[pixelIndex] = r;
+      data[pixelIndex + 1] = g;
+      data[pixelIndex + 2] = b;
+      data[pixelIndex + 3] = 255;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+  }
+
+  setJumpCallback(callback) {
+    this.onJumpToAddress = callback;
+  }
+
+  getState() {
+    const base = super.getState();
+    base.viewMode = this.viewMode;
+    base.decayEnabled = this.decayEnabled;
+    return base;
+  }
+
+  restoreState(state) {
+    if (state.viewMode) {
+      this.viewMode = state.viewMode;
+    }
+    if (state.decayEnabled !== undefined) {
+      this.decayEnabled = state.decayEnabled;
+    }
+    super.restoreState(state);
+  }
+
+  hide() {
+    if (this.isTracking) {
+      this.isTracking = false;
+      this.toggleBtn.textContent = "Start";
+      this.toggleBtn.classList.remove("active");
+      this.wasmModule._enableMemoryTracking(false);
+    }
+    super.hide();
+  }
+}

package/src/js/debug/memory-map-window.js

@@ -0,0 +1,206 @@
+/*
+ * memory-map-window.js - Memory bank configuration overview window
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import { BaseWindow } from "../windows/base-window.js";
+
+/**
+ * MemoryMapWindow - Visual representation of memory bank configuration
+ * Shows which memory banks are currently active based on soft switch states
+ */
+export class MemoryMapWindow extends BaseWindow {
+  constructor(wasmModule) {
+    super({
+      id: "memory-map",
+      title: "Memory Map",
+      minWidth: 260,
+      minHeight: 405,
+      maxWidth: 260,
+      maxHeight: 405,
+      defaultWidth: 260,
+      defaultHeight: 405,
+    });
+
+    this.wasmModule = wasmModule;
+  }
+
+  renderContent() {
+    return `
+      <div class="memory-map-content">
+        <div class="bank-map">
+          <div class="bank-row" id="bank-zp">
+            <span class="bank-addr">$0000-$01FF</span>
+            <span class="bank-region bank-main" id="bank-zp-main">Main ZP/Stack</span>
+            <span class="bank-region bank-aux hidden" id="bank-zp-aux">Aux ZP/Stack</span>
+          </div>
+          <div class="bank-row" id="bank-0200">
+            <span class="bank-addr">$0200-$03FF</span>
+            <span class="bank-region bank-main" id="bank-0200-main">Main RAM</span>
+            <span class="bank-region bank-aux hidden" id="bank-0200-aux">Aux RAM</span>
+          </div>
+          <div class="bank-row" id="bank-text1">
+            <span class="bank-addr">$0400-$07FF</span>
+            <span class="bank-region bank-main" id="bank-text1-main">Main Text 1</span>
+            <span class="bank-region bank-aux hidden" id="bank-text1-aux">Aux Text 1</span>
+          </div>
+          <div class="bank-row" id="bank-0800">
+            <span class="bank-addr">$0800-$1FFF</span>
+            <span class="bank-region bank-main" id="bank-0800-main">Main RAM</span>
+            <span class="bank-region bank-aux hidden" id="bank-0800-aux">Aux RAM</span>
+          </div>
+          <div class="bank-row" id="bank-hires1">
+            <span class="bank-addr">$2000-$3FFF</span>
+            <span class="bank-region bank-main" id="bank-hires1-main">Main HiRes 1</span>
+            <span class="bank-region bank-aux hidden" id="bank-hires1-aux">Aux HiRes 1</span>
+          </div>
+          <div class="bank-row" id="bank-hires2">
+            <span class="bank-addr">$4000-$5FFF</span>
+            <span class="bank-region bank-main" id="bank-hires2-main">Main HiRes 2</span>
+            <span class="bank-region bank-aux hidden" id="bank-hires2-aux">Aux HiRes 2</span>
+          </div>
+          <div class="bank-row" id="bank-6000">
+            <span class="bank-addr">$6000-$BFFF</span>
+            <span class="bank-region bank-main" id="bank-6000-main">Main RAM</span>
+            <span class="bank-region bank-aux hidden" id="bank-6000-aux">Aux RAM</span>
+          </div>
+          <div class="bank-row" id="bank-c000">
+            <span class="bank-addr">$C000-$C0FF</span>
+            <span class="bank-region bank-io">I/O Space</span>
+          </div>
+          <div class="bank-row" id="bank-slot">
+            <span class="bank-addr">$C100-$CFFF</span>
+            <span class="bank-region bank-rom" id="bank-slot-int">Internal ROM</span>
+            <span class="bank-region bank-slot hidden" id="bank-slot-card">Slot ROMs</span>
+          </div>
+          <div class="bank-row" id="bank-lc">
+            <span class="bank-addr">$D000-$FFFF</span>
+            <span class="bank-region bank-rom" id="bank-lc-rom">System ROM</span>
+            <span class="bank-region bank-ram hidden" id="bank-lc-ram">LC RAM Bnk1</span>
+            <span class="bank-region bank-ram hidden" id="bank-lc-ram2">LC RAM Bnk2</span>
+          </div>
+        </div>
+        <div class="bank-legend">
+          <span class="legend-item"><span class="legend-box bank-main"></span>Main</span>
+          <span class="legend-item"><span class="legend-box bank-aux"></span>Aux</span>
+          <span class="legend-item"><span class="legend-box bank-rom"></span>ROM</span>
+          <span class="legend-item"><span class="legend-box bank-ram"></span>LC RAM</span>
+          <span class="legend-item"><span class="legend-box bank-io"></span>I/O</span>
+        </div>
+        <div class="bank-status">
+          <div class="bank-status-row">
+            <span class="bank-status-label">Read:</span>
+            <span class="bank-status-value" id="bank-read-status">Main RAM</span>
+          </div>
+          <div class="bank-status-row">
+            <span class="bank-status-label">Write:</span>
+            <span class="bank-status-value" id="bank-write-status">Main RAM</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Update the memory bank map visualization
+   */
+  update(wasmModule) {
+    this.wasmModule = wasmModule;
+
+    // Get soft switch states
+    const stateLow = wasmModule._getSoftSwitchState();
+    const stateHigh = wasmModule._getSoftSwitchStateHigh
+      ? wasmModule._getSoftSwitchStateHigh()
+      : 0;
+
+    // Bit positions for relevant switches
+    const ALTZP = 10;
+    const STORE80 = 6;
+    const PAGE2 = 2;
+    const HIRES = 3;
+    const RAMRD = 7;
+    const RAMWRT = 8;
+    const INTCXROM = 9;
+    const LCRAM = 13;
+    const LCBANK2 = 14;
+    const LCWRITE = 15;
+
+    const altzp = (stateLow & (1 << ALTZP)) !== 0;
+    const store80 = (stateLow & (1 << STORE80)) !== 0;
+    const page2 = (stateLow & (1 << PAGE2)) !== 0;
+    const hires = (stateLow & (1 << HIRES)) !== 0;
+    const ramrd = (stateLow & (1 << RAMRD)) !== 0;
+    const ramwrt = (stateLow & (1 << RAMWRT)) !== 0;
+    const intcxrom = (stateLow & (1 << INTCXROM)) !== 0;
+    const lcram = (stateLow & (1 << LCRAM)) !== 0;
+    const lcbank2 = (stateLow & (1 << LCBANK2)) !== 0;
+    const lcwrite = (stateLow & (1 << LCWRITE)) !== 0;
+
+    // Zero Page / Stack: ALTZP controls
+    this.toggleBankRegion("bank-zp-main", !altzp);
+    this.toggleBankRegion("bank-zp-aux", altzp);
+
+    // $0200-$03FF: RAMRD/RAMWRT controls (not affected by 80STORE)
+    this.toggleBankRegion("bank-0200-main", !ramrd);
+    this.toggleBankRegion("bank-0200-aux", ramrd);
+
+    // Text Page 1 ($0400-$07FF): 80STORE + PAGE2 or RAMRD controls
+    const text1Aux = store80 ? page2 : ramrd;
+    this.toggleBankRegion("bank-text1-main", !text1Aux);
+    this.toggleBankRegion("bank-text1-aux", text1Aux);
+
+    // $0800-$1FFF: RAMRD/RAMWRT controls
+    this.toggleBankRegion("bank-0800-main", !ramrd);
+    this.toggleBankRegion("bank-0800-aux", ramrd);
+
+    // HiRes Page 1 ($2000-$3FFF): 80STORE + HIRES + PAGE2 or RAMRD controls
+    const hires1Aux = store80 && hires ? page2 : ramrd;
+    this.toggleBankRegion("bank-hires1-main", !hires1Aux);
+    this.toggleBankRegion("bank-hires1-aux", hires1Aux);
+
+    // HiRes Page 2 ($4000-$5FFF): RAMRD/RAMWRT controls
+    this.toggleBankRegion("bank-hires2-main", !ramrd);
+    this.toggleBankRegion("bank-hires2-aux", ramrd);
+
+    // $6000-$BFFF: RAMRD/RAMWRT controls
+    this.toggleBankRegion("bank-6000-main", !ramrd);
+    this.toggleBankRegion("bank-6000-aux", ramrd);
+
+    // Slot ROM ($C100-$CFFF): INTCXROM controls
+    this.toggleBankRegion("bank-slot-int", intcxrom);
+    this.toggleBankRegion("bank-slot-card", !intcxrom);
+
+    // Language Card ($D000-$FFFF): LCRAM and LCBANK2 control
+    this.toggleBankRegion("bank-lc-rom", !lcram);
+    this.toggleBankRegion("bank-lc-ram", lcram && !lcbank2);
+    this.toggleBankRegion("bank-lc-ram2", lcram && lcbank2);
+
+    // Update status display
+    const readStatus = this.contentElement.querySelector("#bank-read-status");
+    const writeStatus = this.contentElement.querySelector("#bank-write-status");
+
+    if (readStatus) {
+      let readBank = ramrd ? "Aux RAM" : "Main RAM";
+      if (altzp) readBank += " (Aux ZP)";
+      readStatus.textContent = readBank;
+    }
+
+    if (writeStatus) {
+      let writeBank = ramwrt ? "Aux RAM" : "Main RAM";
+      if (lcwrite) writeBank += " + LC";
+      writeStatus.textContent = writeBank;
+    }
+  }
+
+  /**
+   * Toggle visibility of a bank region element
+   */
+  toggleBankRegion(id, show) {
+    const el = this.contentElement.querySelector(`#${id}`);
+    if (el) {
+      el.classList.toggle("hidden", !show);
+    }
+  }
+}