Improve output rendering performance to reduce lag

Author: ctoth

src/components/output.css

@@ -228,3 +228,16 @@ a.exit {
 .output .output-line.focused-line {
   scroll-margin: 20px;
 }
+
+.history-exposure-toggle {
+  display: block;
+  font-family: inherit;
+  font-size: 0.85em;
+  color: var(--color-bg-deepest, #000);
+  background-color: #c0c0c0;
+  border: 1px solid #808080;
+  border-radius: 3px;
+  padding: var(--space-1, 2px) var(--space-2, 6px);
+  margin-bottom: var(--space-2, 6px);
+  cursor: pointer;
+}

src/components/output.test.tsx

@@ -248,3 +248,156 @@ describe("Output persistence", () => {
     expect(setItemSpy).not.toHaveBeenCalled();
   });
 });
+
+describe("Output accessibility-tree exposure cap", () => {
+  const makeLines = (count: number): OutputLine[] =>
+    Array.from({ length: count }, (_, i) => ({
+      content: <div>{`line ${i}`}</div>,
+      id: i,
+      sourceContent: `line ${i}`,
+      sourceType: "test",
+      type: OutputType.ServerMessage,
+    }));
+
+  // Instantiate an Output with history and a real frozen container so
+  // freezeOverflow/trimFrozen operate on actual DOM.
+  const makeOutput = (lines: OutputLine[]): Output => {
+    const output = new Output({ client: {} as MudClient });
+    Object.defineProperty(output, "allLines", { value: lines, writable: true });
+    const frozenDiv = document.createElement("div");
+    Object.defineProperty(output, "frozenRef", { value: { current: frozenDiv } });
+    return output;
+  };
+
+  const frozen = (output: Output): HTMLDivElement =>
+    (output as unknown as { frozenRef: { current: HTMLDivElement } }).frozenRef.current;
+
+  const freeze = (output: Output) =>
+    (output as unknown as { freezeOverflow: () => void }).freezeOverflow();
+
+  const hiddenCount = (output: Output): number =>
+    frozen(output).querySelectorAll('[aria-hidden="true"]').length;
+
+  it("hides frozen lines beyond the exposure cap, oldest first", () => {
+    const total = Output.LIVE_WINDOW_SIZE + Output.A11Y_EXPOSED_FROZEN_LINES + 50;
+    const output = makeOutput(makeLines(total));
+
+    freeze(output);
+
+    const frozenDiv = frozen(output);
+    expect(frozenDiv.children.length).toBe(total - Output.LIVE_WINDOW_SIZE);
+    expect(hiddenCount(output)).toBe(50);
+    // The oldest lines are hidden; the most recent frozen lines are exposed.
+    expect(frozenDiv.children[0].getAttribute("aria-hidden")).toBe("true");
+    expect(frozenDiv.children[49].getAttribute("aria-hidden")).toBe("true");
+    expect(frozenDiv.children[50].hasAttribute("aria-hidden")).toBe(false);
+    expect(
+      frozenDiv.children[frozenDiv.children.length - 1].hasAttribute("aria-hidden")
+    ).toBe(false);
+  });
+
+  it("exposes everything while under the cap", () => {
+    const output = makeOutput(
+      makeLines(Output.LIVE_WINDOW_SIZE + Output.A11Y_EXPOSED_FROZEN_LINES)
+    );
+
+    freeze(output);
+
+    expect(frozen(output).children.length).toBe(Output.A11Y_EXPOSED_FROZEN_LINES);
+    expect(hiddenCount(output)).toBe(0);
+  });
+
+  it("hides incrementally as more lines freeze", () => {
+    const start = Output.LIVE_WINDOW_SIZE + Output.A11Y_EXPOSED_FROZEN_LINES;
+    const output = makeOutput(makeLines(start));
+    freeze(output);
+    expect(hiddenCount(output)).toBe(0);
+
+    (output as unknown as { allLines: OutputLine[] }).allLines = makeLines(start + 10);
+    freeze(output);
+
+    expect(hiddenCount(output)).toBe(10);
+  });
+
+  it("keeps the hidden count consistent across trims from the front", () => {
+    const total = Output.LIVE_WINDOW_SIZE + Output.A11Y_EXPOSED_FROZEN_LINES + 30;
+    const output = makeOutput(makeLines(total));
+    freeze(output);
+    expect(hiddenCount(output)).toBe(30);
+
+    (output as unknown as { trimFrozen: (n: number) => void }).trimFrozen(30);
+
+    // The 30 hidden (oldest) lines were removed; nothing exposed got hidden.
+    expect(hiddenCount(output)).toBe(0);
+    expect(frozen(output).children.length).toBe(Output.A11Y_EXPOSED_FROZEN_LINES);
+
+    // Freezing more lines re-hides from the new front, incrementally.
+    (output as unknown as { allLines: OutputLine[] }).allLines = makeLines(total - 30 + 5);
+    freeze(output);
+    expect(hiddenCount(output)).toBe(5);
+  });
+});
+
+describe("Output history exposure toggle", () => {
+  const makeLines = (count: number): OutputLine[] =>
+    Array.from({ length: count }, (_, i) => ({
+      content: <div>{`line ${i}`}</div>,
+      id: i,
+      sourceContent: `line ${i}`,
+      sourceType: "test",
+      type: OutputType.ServerMessage,
+    }));
+
+  const makeOutput = (lines: OutputLine[]): Output => {
+    const output = new Output({ client: {} as MudClient });
+    Object.defineProperty(output, "allLines", { value: lines, writable: true });
+    const frozenDiv = document.createElement("div");
+    Object.defineProperty(output, "frozenRef", { value: { current: frozenDiv } });
+    return output;
+  };
+
+  const frozen = (output: Output): HTMLDivElement =>
+    (output as unknown as { frozenRef: { current: HTMLDivElement } }).frozenRef.current;
+
+  const freeze = (output: Output) =>
+    (output as unknown as { freezeOverflow: () => void }).freezeOverflow();
+
+  const hiddenCount = (output: Output): number =>
+    frozen(output).querySelectorAll('[aria-hidden="true"]').length;
+
+  const setRevealed = (output: Output, historyRevealed: boolean) => {
+    Object.assign(output.state, { historyRevealed });
+  };
+
+  it("exposes all frozen lines while revealed, including new arrivals", () => {
+    const total = Output.LIVE_WINDOW_SIZE + Output.A11Y_EXPOSED_FROZEN_LINES + 40;
+    const output = makeOutput(makeLines(total));
+    freeze(output);
+    expect(hiddenCount(output)).toBe(40);
+
+    setRevealed(output, true);
+    freeze(output);
+    expect(hiddenCount(output)).toBe(0);
+
+    // New lines freezing while revealed stay exposed too.
+    (output as unknown as { allLines: OutputLine[] }).allLines = makeLines(total + 10);
+    freeze(output);
+    expect(hiddenCount(output)).toBe(0);
+  });
+
+  it("re-hides everything beyond the cap when revealed is switched off", () => {
+    const total = Output.LIVE_WINDOW_SIZE + Output.A11Y_EXPOSED_FROZEN_LINES + 40;
+    const output = makeOutput(makeLines(total));
+    setRevealed(output, true);
+    freeze(output);
+    expect(hiddenCount(output)).toBe(0);
+
+    setRevealed(output, false);
+    freeze(output);
+
+    const frozenDiv = frozen(output);
+    expect(hiddenCount(output)).toBe(40);
+    expect(frozenDiv.children[0].getAttribute("aria-hidden")).toBe("true");
+    expect(frozenDiv.children[40].hasAttribute("aria-hidden")).toBe(false);
+  });
+});

src/components/output.tsx

@@ -84,6 +84,7 @@ interface State {
   newLinesCount: number; // Added to track the count of new lines
   localEchoActive: boolean; // To store the current local echo preference
   focusedLineIndex: number | null; // Index of currently focused line for keyboard navigation
+  historyRevealed: boolean; // Expose beyond-cap history to the accessibility tree
 }
 
 // Add a small threshold for scroll calculations to handle browser differences
@@ -94,6 +95,15 @@ class Output extends React.Component<Props, State> {
   private frozenRef: React.RefObject<HTMLDivElement> = React.createRef();
   static MAX_OUTPUT_LENGTH = 3000; // Maximum number of messages to keep
   static LIVE_WINDOW_SIZE = 200; // Number of lines React manages (rest are frozen HTML)
+  // Frozen lines beyond this stay visible but are removed from the
+  // accessibility tree (aria-hidden). Screen readers pay a per-announcement
+  // cost that scales with the document's accessibility-tree size: with a full
+  // 3000-line buffer exposed, NVDA took multiple seconds to speak each new
+  // message; capping exposure at ~1000 total lines (~50KB) restored instant
+  // announcements (measured live with NVDA + Chrome, 2026-08).
+  // Review commands (reviewRecentOutputLine etc.) read allLines directly and
+  // are unaffected. See investigations/output-large-burst-perf.md.
+  static A11Y_EXPOSED_FROZEN_LINES = 800;
   static LOCAL_STORAGE_KEY = "outputLog"; // Key for saving output in LocalStorage
   static SAVE_DEBOUNCE_MS = 500; // Coalesce bursts of server lines into one write
   messageKey: number = 0;
@@ -111,6 +121,8 @@ class Output extends React.Component<Props, State> {
   private allLines: OutputLine[] = [];
   // How many lines have been rendered into the frozen container
   private frozenCount: number = 0;
+  // How many frozen lines (from the front) carry aria-hidden
+  private frozenHiddenCount: number = 0;
   // Total lines ever added (monotonically increasing, survives trimming)
   private totalLinesAdded: number = 0;
   private prevTotalLinesAdded: number = 0;
@@ -126,6 +138,7 @@ class Output extends React.Component<Props, State> {
       newLinesCount: 0,
       localEchoActive: usePreferences.getState().general.localEcho,
       focusedLineIndex: null,
+      historyRevealed: false,
     };
   }
 
@@ -411,8 +424,45 @@ componentDidUpdate(
       frozenDiv.appendChild(wrapper);
       this.frozenCount++;
     }
+
+    // Hide frozen lines that crossed the exposure boundary from the
+    // accessibility tree (or expose everything while historyRevealed).
+    // Incremental: only lines whose state changes are touched.
+    const shouldBeHidden = this.state.historyRevealed
+      ? 0
+      : Math.max(0, frozenDiv.children.length - Output.A11Y_EXPOSED_FROZEN_LINES);
+    while (this.frozenHiddenCount < shouldBeHidden) {
+      frozenDiv.children[this.frozenHiddenCount].setAttribute('aria-hidden', 'true');
+      this.frozenHiddenCount++;
+    }
+    while (this.frozenHiddenCount > shouldBeHidden) {
+      this.frozenHiddenCount--;
+      frozenDiv.children[this.frozenHiddenCount].removeAttribute('aria-hidden');
+    }
+  }
+
+  /** Lines currently (or potentially) excluded from the accessibility tree. */
+  private beyondCapLineCount(): number {
+    return Math.max(
+      0,
+      this.allLines.length - Output.LIVE_WINDOW_SIZE - Output.A11Y_EXPOSED_FROZEN_LINES
+    );
   }
 
+  toggleHistoryExposure = () => {
+    const revealing = !this.state.historyRevealed;
+    const count = this.beyondCapLineCount();
+    // freezeOverflow applies the new exposure in componentDidUpdate.
+    this.setState({ historyRevealed: revealing }, () => {
+      announce(
+        revealing
+          ? `${count} earlier messages shown to screen reader`
+          : 'Earlier messages hidden from screen reader',
+        'polite'
+      );
+    });
+  };
+
   /**
    * Remove old lines from the front of the frozen container.
    */
@@ -426,6 +476,8 @@ componentDidUpdate(
       }
     }
     this.frozenCount = Math.max(0, this.frozenCount - count);
+    // Trimmed lines come off the front, which is where the hidden ones are.
+    this.frozenHiddenCount = Math.max(0, this.frozenHiddenCount - count);
   }
 
 
@@ -693,6 +745,7 @@ scrollToBottom = () => { const output = this.outputRef.current; if (output) {
     this.cancelScheduledSave();
     this.allLines = [];
     this.frozenCount = 0;
+    this.frozenHiddenCount = 0;
     this.totalLinesAdded = 0;
     this.prevTotalLinesAdded = 0;
     const frozenDiv = this.frozenRef.current;
@@ -920,6 +973,17 @@ scrollToBottom = () => { const output = this.outputRef.current; if (output) {
         tabIndex={0}
         aria-label="Game output log - use arrow keys to navigate"
       >
+        {this.beyondCapLineCount() > 0 && (
+          <button
+            type="button"
+            className="history-exposure-toggle"
+            onClick={this.toggleHistoryExposure}
+          >
+            {this.state.historyRevealed
+              ? "Hide earlier history from screen reader"
+              : `Show ${this.beyondCapLineCount()} earlier messages to screen reader`}
+          </button>
+        )}
         <div ref={this.frozenRef} />
         {visibleLiveOutput.map((line, index) => (
           <div