web-a2e 1.0.0

package/src/js/debug/trace-panel.js

@@ -0,0 +1,291 @@
+/*
+ * trace-panel.js - CPU instruction execution trace panel
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import { BaseWindow } from "../windows/base-window.js";
+import { getSymbolInfo } from "./symbols.js";
+
+/**
+ * Cached opcode mnemonics from WASM disassembler (populated on first use)
+ */
+let MNEMONICS = null;
+let ADDR_MODES = null;
+
+// AddrMode enum values matching disassembler.hpp
+const MODE_IMP = 0;
+const MODE_ACC = 1;
+const MODE_IMM = 2;
+const MODE_ZP  = 3;
+const MODE_ZPX = 4;
+const MODE_ZPY = 5;
+const MODE_ABS = 6;
+const MODE_ABX = 7;
+const MODE_ABY = 8;
+const MODE_IND = 9;
+const MODE_IZX = 10;
+const MODE_IZY = 11;
+const MODE_REL = 12;
+const MODE_ZPI = 13;
+const MODE_AIX = 14;
+const MODE_ZPR = 15;
+
+function getMnemonicTable(wasmModule) {
+  if (MNEMONICS) return MNEMONICS;
+  MNEMONICS = new Array(256);
+  for (let i = 0; i < 256; i++) {
+    const ptr = wasmModule._getOpcodeMnemonic(i);
+    MNEMONICS[i] = ptr ? wasmModule.UTF8ToString(ptr) : "???";
+  }
+  return MNEMONICS;
+}
+
+function getAddrModeTable(wasmModule) {
+  if (ADDR_MODES) return ADDR_MODES;
+  if (!wasmModule._getOpcodeAddressingMode) return null;
+  ADDR_MODES = new Uint8Array(256);
+  for (let i = 0; i < 256; i++) {
+    ADDR_MODES[i] = wasmModule._getOpcodeAddressingMode(i);
+  }
+  return ADDR_MODES;
+}
+
+/**
+ * TracePanelWindow - Displays instruction trace from the WASM ring buffer
+ * with virtual scrolling for performance.
+ */
+export class TracePanelWindow extends BaseWindow {
+  constructor(wasmModule) {
+    super({
+      id: "trace-panel",
+      title: "Instruction Trace",
+      minWidth: 480,
+      minHeight: 300,
+      defaultWidth: 680,
+      defaultHeight: 400,
+    });
+
+    this.wasmModule = wasmModule;
+    this.ROW_HEIGHT = 14;
+    this.scrollTop = 0;
+    this.filterAddr = null; // Optional filter by address range
+    this.recording = false;
+  }
+
+  renderContent() {
+    return `
+      <div class="trace-panel-content">
+        <div class="trace-toolbar">
+          <label class="trace-toggle">
+            <input type="checkbox" id="trace-enabled">
+            <span>Record</span>
+          </label>
+          <button class="trace-clear-btn" id="trace-clear">Clear</button>
+          <span class="trace-count" id="trace-count">0 entries</span>
+        </div>
+        <div class="trace-header">
+          <span class="trace-col-cycle">Cycle</span>
+          <span class="trace-col-pc">PC</span>
+          <span class="trace-col-bytes">Bytes</span>
+          <span class="trace-col-mnemonic">Mnem</span>
+          <span class="trace-col-operand">Operand</span>
+          <span class="trace-col-regs">A  X  Y  SP NV-BDIZC</span>
+        </div>
+        <div class="trace-scroll-container" id="trace-scroll">
+          <div class="trace-scroll-spacer" id="trace-spacer"></div>
+          <div class="trace-rows" id="trace-rows"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  setupContentEventListeners() {
+    const enabledCheck = this.contentElement.querySelector("#trace-enabled");
+    if (enabledCheck) {
+      enabledCheck.addEventListener("change", () => {
+        this.recording = enabledCheck.checked;
+        if (this.wasmModule._setTraceEnabled) {
+          this.wasmModule._setTraceEnabled(enabledCheck.checked);
+        }
+      });
+    }
+
+    const clearBtn = this.contentElement.querySelector("#trace-clear");
+    if (clearBtn) {
+      clearBtn.addEventListener("click", () => {
+        if (this.wasmModule._clearTrace) {
+          this.wasmModule._clearTrace();
+          this.renderVisibleRows();
+        }
+      });
+    }
+
+    const scrollContainer = this.contentElement.querySelector("#trace-scroll");
+    if (scrollContainer) {
+      scrollContainer.addEventListener("scroll", () => {
+        this.scrollTop = scrollContainer.scrollTop;
+        this.renderVisibleRows();
+      });
+    }
+  }
+
+  create() {
+    super.create();
+    this.setupContentEventListeners();
+  }
+
+  update(wasmModule) {
+    this.wasmModule = wasmModule;
+
+    const countEl = this.contentElement.querySelector("#trace-count");
+    if (countEl && this.wasmModule._getTraceCount) {
+      const count = this.wasmModule._getTraceCount();
+      countEl.textContent = `${count} entries`;
+
+      // Auto-scroll to latest entry when recording
+      if (this.recording && count > 0) {
+        const container = this.contentElement.querySelector("#trace-scroll");
+        if (container) {
+          const totalHeight = count * this.ROW_HEIGHT;
+          container.scrollTop = totalHeight - container.clientHeight;
+          this.scrollTop = container.scrollTop;
+        }
+      }
+    }
+
+    this.renderVisibleRows();
+  }
+
+  formatOperand(mode, op1, op2, pc, len) {
+    const b = this.hex2(op1);
+    const w = this.hex2(op2) + this.hex2(op1);
+    switch (mode) {
+      case MODE_IMP: return "";
+      case MODE_ACC: return "A";
+      case MODE_IMM: return `#$${b}`;
+      case MODE_ZP:  return `$${b}`;
+      case MODE_ZPX: return `$${b},X`;
+      case MODE_ZPY: return `$${b},Y`;
+      case MODE_ABS: return `$${w}`;
+      case MODE_ABX: return `$${w},X`;
+      case MODE_ABY: return `$${w},Y`;
+      case MODE_IND: return `($${w})`;
+      case MODE_IZX: return `($${b},X)`;
+      case MODE_IZY: return `($${b}),Y`;
+      case MODE_REL: {
+        const offset = op1 < 128 ? op1 : op1 - 256;
+        const target = (pc + len + offset) & 0xFFFF;
+        return `$${this.hex4(target)}`;
+      }
+      case MODE_ZPI: return `($${b})`;
+      case MODE_AIX: return `($${w},X)`;
+      case MODE_ZPR: {
+        const offset = op2 < 128 ? op2 : op2 - 256;
+        const target = (pc + len + offset) & 0xFFFF;
+        return `$${b},$${this.hex4(target)}`;
+      }
+      default: return "";
+    }
+  }
+
+  renderVisibleRows() {
+    const container = this.contentElement.querySelector("#trace-scroll");
+    const spacer = this.contentElement.querySelector("#trace-spacer");
+    const rowsEl = this.contentElement.querySelector("#trace-rows");
+    if (!container || !spacer || !rowsEl) return;
+    if (!this.wasmModule._getTraceCount || !this.wasmModule._getTraceBuffer) return;
+
+    const count = this.wasmModule._getTraceCount();
+    const head = this.wasmModule._getTraceHead();
+    const capacity = this.wasmModule._getTraceCapacity();
+    const bufPtr = this.wasmModule._getTraceBuffer();
+
+    if (!bufPtr || count === 0) {
+      spacer.style.height = "0px";
+      rowsEl.innerHTML = '<div class="trace-empty">No trace data</div>';
+      return;
+    }
+
+    const totalHeight = count * this.ROW_HEIGHT;
+    spacer.style.height = totalHeight + "px";
+
+    const containerHeight = container.clientHeight;
+    const firstVisible = Math.floor(this.scrollTop / this.ROW_HEIGHT);
+    const visibleCount = Math.ceil(containerHeight / this.ROW_HEIGHT) + 1;
+    const startIdx = Math.max(0, firstVisible);
+    const endIdx = Math.min(count, startIdx + visibleCount);
+
+    // TraceEntry is 16 bytes (packed struct):
+    // uint16_t pc; uint8_t opcode, a, x, y, sp, p;
+    // uint8_t operand1, operand2, instrLen, padding;
+    // uint32_t cycle;
+    const ENTRY_SIZE = 16;
+    const heap = this.wasmModule.HEAPU8;
+    const modes = getAddrModeTable(this.wasmModule);
+
+    let html = "";
+    rowsEl.style.transform = `translateY(${startIdx * this.ROW_HEIGHT}px)`;
+
+    for (let i = startIdx; i < endIdx; i++) {
+      // Ring buffer index: oldest entry is at head (if full), newest is at head-1
+      let ringIdx;
+      if (count < capacity) {
+        ringIdx = i;
+      } else {
+        ringIdx = (head + i) % capacity;
+      }
+
+      const offset = bufPtr + ringIdx * ENTRY_SIZE;
+      const pc = heap[offset] | (heap[offset + 1] << 8);
+      const opcode = heap[offset + 2];
+      const a = heap[offset + 3];
+      const x = heap[offset + 4];
+      const y = heap[offset + 5];
+      const sp = heap[offset + 6];
+      const p = heap[offset + 7];
+      const op1 = heap[offset + 8];
+      const op2 = heap[offset + 9];
+      const len = heap[offset + 10];
+      const cycle = heap[offset + 12] | (heap[offset + 13] << 8) |
+                    (heap[offset + 14] << 16) | (heap[offset + 15] << 24);
+
+      const mnemonic = getMnemonicTable(this.wasmModule)[opcode] || "???";
+      let bytesStr = this.hex2(opcode);
+      if (len >= 2) bytesStr += " " + this.hex2(op1);
+      if (len >= 3) bytesStr += " " + this.hex2(op2);
+
+      const mode = modes ? modes[opcode] : MODE_IMP;
+      const operand = this.formatOperand(mode, op1, op2, pc, len);
+      const flags = this.flagsStr(p);
+
+      html += `<div class="trace-row">` +
+        `<span class="trace-col-cycle">${(cycle >>> 0).toString()}</span>` +
+        `<span class="trace-col-pc">${this.hex4(pc)}</span>` +
+        `<span class="trace-col-bytes">${bytesStr.padEnd(8)}</span>` +
+        `<span class="trace-col-mnemonic">${mnemonic}</span>` +
+        `<span class="trace-col-operand">${operand}</span>` +
+        `<span class="trace-col-regs">${this.hex2(a)} ${this.hex2(x)} ${this.hex2(y)} ${this.hex2(sp)} ${flags}</span>` +
+        `</div>`;
+    }
+
+    rowsEl.innerHTML = html;
+  }
+
+  hex2(v) { return v.toString(16).toUpperCase().padStart(2, "0"); }
+  hex4(v) { return v.toString(16).toUpperCase().padStart(4, "0"); }
+
+  flagsStr(p) {
+    return (
+      ((p & 0x80) ? "N" : ".") +
+      ((p & 0x40) ? "V" : ".") +
+      "-" +
+      ((p & 0x10) ? "B" : ".") +
+      ((p & 0x08) ? "D" : ".") +
+      ((p & 0x04) ? "I" : ".") +
+      ((p & 0x02) ? "Z" : ".") +
+      ((p & 0x01) ? "C" : ".")
+    );
+  }
+}

package/src/js/debug/zero-page-watch-window.js

@@ -0,0 +1,297 @@
+/*
+ * zero-page-watch-window.js - Zero page watch window for monitoring memory locations
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import { BaseWindow } from "../windows/base-window.js";
+import { showToast } from "../ui/toast.js";
+
+// Predefined watches for common Apple II zero page locations
+const PREDEFINED_WATCHES = {
+  "BASIC Pointers": [
+    { addr: 0x67, label: "TXTTAB", size: 16, desc: "Start of BASIC program" },
+    { addr: 0x69, label: "VARTAB", size: 16, desc: "Start of variables" },
+    { addr: 0x6b, label: "ARYTAB", size: 16, desc: "Start of arrays" },
+    { addr: 0x6d, label: "STREND", size: 16, desc: "End of strings" },
+    { addr: 0x6f, label: "FRETOP", size: 16, desc: "Top of string space" },
+    { addr: 0x73, label: "MEMSIZ", size: 16, desc: "Top of memory" },
+    { addr: 0x75, label: "CURLIN", size: 16, desc: "Current BASIC line" },
+    { addr: 0xb8, label: "TXTPTR", size: 16, desc: "BASIC text pointer" },
+  ],
+  "Screen/Window": [
+    { addr: 0x20, label: "WNDLFT", size: 8, desc: "Window left edge" },
+    { addr: 0x21, label: "WNDWDTH", size: 8, desc: "Window width" },
+    { addr: 0x22, label: "WNDTOP", size: 8, desc: "Window top edge" },
+    { addr: 0x23, label: "WNDBTM", size: 8, desc: "Window bottom" },
+    { addr: 0x24, label: "CH", size: 8, desc: "Cursor horizontal" },
+    { addr: 0x25, label: "CV", size: 8, desc: "Cursor vertical" },
+    { addr: 0x28, label: "BASL", size: 16, desc: "Text base address" },
+    { addr: 0x2a, label: "BAS2L", size: 16, desc: "Scroll line base" },
+  ],
+  Graphics: [
+    { addr: 0x26, label: "GBASL", size: 16, desc: "Graphics base address" },
+    { addr: 0x30, label: "COLOR", size: 8, desc: "LoRes color" },
+    { addr: 0xe0, label: "HCOLOR1", size: 8, desc: "HiRes color 1" },
+    { addr: 0xe4, label: "HGRX", size: 16, desc: "HGR X coordinate" },
+    { addr: 0xe6, label: "HGRY", size: 8, desc: "HGR Y coordinate" },
+  ],
+  "DOS 3.3": [
+    { addr: 0xaa, label: "DOSSLOT", size: 8, desc: "DOS slot" },
+    { addr: 0xab, label: "DOSDRIVE", size: 8, desc: "DOS drive" },
+    { addr: 0xac, label: "FILTYP", size: 8, desc: "File type" },
+  ],
+  System: [
+    { addr: 0x00, label: "LOC0", size: 16, desc: "General use" },
+    { addr: 0x02, label: "LOC2", size: 16, desc: "General use" },
+    { addr: 0x36, label: "CSWL", size: 16, desc: "Char output hook" },
+    { addr: 0x38, label: "KSWL", size: 16, desc: "Char input hook" },
+    { addr: 0x3c, label: "A1L", size: 16, desc: "Monitor A1" },
+    { addr: 0x3e, label: "A2L", size: 16, desc: "Monitor A2" },
+    { addr: 0x42, label: "A4L", size: 16, desc: "Monitor A4" },
+    { addr: 0x45, label: "ACC", size: 8, desc: "Accumulator save" },
+    { addr: 0x46, label: "XREG", size: 8, desc: "X register save" },
+    { addr: 0x47, label: "YREG", size: 8, desc: "Y register save" },
+    { addr: 0x48, label: "STATUS", size: 8, desc: "Status save" },
+  ],
+};
+
+export class ZeroPageWatchWindow extends BaseWindow {
+  constructor(wasmModule) {
+    super({
+      id: "zeropage-watch",
+      title: "Zero Page Watch",
+      defaultWidth: 400,
+      defaultHeight: 450,
+      minWidth: 400,
+      minHeight: 300,
+      maxWidth: 400,
+    });
+    this.wasmModule = wasmModule;
+    this.customWatches = this.loadCustomWatches();
+    this.previousValues = new Map();
+    this.changedAddresses = new Set();
+    this.changeTimestamps = new Map();
+    this.expandedGroups = new Set(["BASIC Pointers", "Screen/Window"]);
+  }
+
+  loadCustomWatches() {
+    try {
+      const saved = localStorage.getItem("zp-custom-watches");
+      return saved ? JSON.parse(saved) : [];
+    } catch (e) {
+      console.warn("Failed to load custom watches:", e.message);
+      return [];
+    }
+  }
+
+  saveCustomWatches() {
+    try {
+      localStorage.setItem(
+        "zp-custom-watches",
+        JSON.stringify(this.customWatches),
+      );
+    } catch (e) {
+      console.warn("Failed to save custom watches:", e.message);
+    }
+  }
+
+  getState() {
+    const base = super.getState();
+    base.expandedGroups = [...this.expandedGroups];
+    return base;
+  }
+
+  restoreState(state) {
+    if (state.expandedGroups) {
+      this.expandedGroups = new Set(state.expandedGroups);
+    }
+    super.restoreState(state);
+  }
+
+  renderContent() {
+    return `
+      <div class="zp-toolbar">
+        <button class="zp-add-btn" title="Add custom watch">+ Add Watch</button>
+      </div>
+      <div class="zp-groups"></div>
+    `;
+  }
+
+  onContentRendered() {
+    this.groupsDiv = this.contentElement.querySelector(".zp-groups");
+
+    this.contentElement
+      .querySelector(".zp-add-btn")
+      .addEventListener("click", () => {
+        this.addCustomWatch();
+      });
+
+    this.renderGroups();
+  }
+
+  renderGroups() {
+    let html = "";
+
+    // Render predefined groups
+    for (const [groupName, watches] of Object.entries(PREDEFINED_WATCHES)) {
+      const isExpanded = this.expandedGroups.has(groupName);
+      html += `
+        <div class="zp-group">
+          <div class="zp-group-header" data-group="${groupName}">
+            <span class="zp-expand-icon">${isExpanded ? "▼" : "▶"}</span>
+            <span class="zp-group-name">${groupName}</span>
+          </div>
+          <div class="zp-group-content ${isExpanded ? "" : "collapsed"}">
+            ${watches.map((w) => this.renderWatch(w)).join("")}
+          </div>
+        </div>
+      `;
+    }
+
+    // Render custom watches group if any exist
+    if (this.customWatches.length > 0) {
+      const isExpanded = this.expandedGroups.has("Custom");
+      html += `
+        <div class="zp-group">
+          <div class="zp-group-header" data-group="Custom">
+            <span class="zp-expand-icon">${isExpanded ? "▼" : "▶"}</span>
+            <span class="zp-group-name">Custom Watches</span>
+          </div>
+          <div class="zp-group-content ${isExpanded ? "" : "collapsed"}">
+            ${this.customWatches.map((w, i) => this.renderWatch(w, i)).join("")}
+          </div>
+        </div>
+      `;
+    }
+
+    this.groupsDiv.innerHTML = html;
+
+    // Add event listeners for group headers
+    this.groupsDiv.querySelectorAll(".zp-group-header").forEach((header) => {
+      header.addEventListener("click", () => {
+        const groupName = header.dataset.group;
+        if (this.expandedGroups.has(groupName)) {
+          this.expandedGroups.delete(groupName);
+        } else {
+          this.expandedGroups.add(groupName);
+        }
+        this.renderGroups();
+        if (this.onStateChange) this.onStateChange();
+      });
+    });
+
+    // Add event listeners for removing custom watches
+    this.groupsDiv.querySelectorAll(".zp-remove-btn").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const index = parseInt(btn.dataset.index, 10);
+        this.customWatches.splice(index, 1);
+        this.saveCustomWatches();
+        this.renderGroups();
+      });
+    });
+  }
+
+  renderWatch(watch, customIndex = null) {
+    const isCustom = customIndex !== null;
+    const sizeIndicator = watch.size === 16 ? "16" : "8";
+    return `
+      <div class="zp-watch" data-addr="${watch.addr}" data-size="${watch.size}">
+        <span class="zp-addr">$${this.formatHex(watch.addr, 2)}</span>
+        <span class="zp-label">${watch.label}</span>
+        <span class="zp-size">${sizeIndicator}b</span>
+        <span class="zp-value" data-addr="${watch.addr}" data-size="${watch.size}">----</span>
+        <span class="zp-desc">${watch.desc || ""}</span>
+        ${isCustom ? `<button class="zp-remove-btn" data-index="${customIndex}" title="Remove">×</button>` : ""}
+      </div>
+    `;
+  }
+
+  addCustomWatch() {
+    const addrStr = prompt("Enter zero page address (hex, 00-FF):", "00");
+    if (!addrStr) return;
+
+    const addr = parseInt(addrStr, 16);
+    if (isNaN(addr) || addr < 0 || addr > 0xff) {
+      showToast("Invalid address. Must be 00-FF.", "error");
+      return;
+    }
+
+    const label = prompt(
+      "Enter label for this watch:",
+      `$${this.formatHex(addr, 2)}`,
+    );
+    if (!label) return;
+
+    const sizeStr = prompt("Size (8 or 16 bits):", "8");
+    const size = sizeStr === "16" ? 16 : 8;
+
+    this.customWatches.push({
+      addr,
+      label,
+      size,
+      desc: "Custom watch",
+    });
+
+    this.expandedGroups.add("Custom");
+    this.saveCustomWatches();
+    this.renderGroups();
+  }
+
+  update(wasmModule) {
+    if (!this.isVisible || !this.groupsDiv) return;
+
+    const now = Date.now();
+    const fadeTime = 1000;
+
+    // Update all value displays
+    this.groupsDiv.querySelectorAll(".zp-value").forEach((valueSpan) => {
+      const addr = parseInt(valueSpan.dataset.addr, 10);
+      const size = parseInt(valueSpan.dataset.size, 10);
+
+      let value;
+      if (size === 16) {
+        const low = wasmModule._peekMemory(addr);
+        const high = wasmModule._peekMemory((addr + 1) & 0xff);
+        value = (high << 8) | low;
+      } else {
+        value = wasmModule._peekMemory(addr);
+      }
+
+      const prevValue = this.previousValues.get(addr);
+
+      // Detect changes
+      if (prevValue !== undefined && prevValue !== value) {
+        this.changeTimestamps.set(addr, now);
+      }
+      this.previousValues.set(addr, value);
+
+      // Format value
+      const digits = size === 16 ? 4 : 2;
+      let displayValue = `$${this.formatHex(value, digits)}`;
+
+      // Add decimal value for small numbers
+      if (value < 256) {
+        displayValue += ` (${value})`;
+      }
+
+      valueSpan.textContent = displayValue;
+
+      // Highlight recent changes
+      const watchDiv = valueSpan.closest(".zp-watch");
+      if (this.changeTimestamps.has(addr)) {
+        const elapsed = now - this.changeTimestamps.get(addr);
+        if (elapsed < fadeTime) {
+          watchDiv.classList.add("changed");
+        } else {
+          watchDiv.classList.remove("changed");
+          this.changeTimestamps.delete(addr);
+        }
+      } else {
+        watchDiv.classList.remove("changed");
+      }
+    });
+  }
+}