fix(spx-gui): stabilize debug console under heavy logging with ring buffer

[CORCTON]

This PR improves editor debug-console performance under heavy runtime logging by replacing the previous push + splice(0, …) trimming path with a bounded ring buffer (default 500, runtime-selectable 200/500/1000) while preserving ordered output semantics and existing UX (including bottom-sticky behavior); benchmark results show major gains in the write path (average speedups: x52.29 at 100k logs/max=1000, x78.73 at 400k/max=1000, x106.41 at 1M/max=1000, x148.65 at 400k/max=2000), with tests and lint passing.

close: #2812

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the debug console's stability and performance, particularly when dealing with a large volume of logs. By optimizing how logs are stored and rendered, the console now operates much more efficiently, providing a smoother user experience without compromising existing functionality or output order.

Highlights

• Performance Improvement: Replaced the previous push + splice(0, …) trimming path for console outputs with a bounded ring buffer, significantly improving write path performance under heavy logging conditions.
• Virtualized Rendering: Implemented minimal-invasive list virtualization in the ConsolePanel to reduce render load, displaying only visible rows plus overscan and spacer rows.
• Configurable Log Limit: Introduced a runtime-selectable maximum log entries (500/1000/2000) for the debug console, with a default of 1000, allowing users to control memory usage and performance.
• Output Management Refactor: Refactored the Runtime class to manage outputs using a ring buffer, ensuring stable IDs for outputs and correct ordering even when the buffer wraps or its size changes.
• Unit Tests: Added comprehensive unit tests for the new Runtime output management logic, covering scenarios like max size limits, stable IDs, trimming, and change emission.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• spx-gui/src/components/editor/panels/ConsolePanel.vue
  • Added virtualization logic to efficiently render console outputs.
  • Introduced a UI control (UISelect) to allow users to set the maximum number of displayed logs.
  • Modified the template to conditionally render virtualized output rows and spacers.
  • Added new CSS styles for the header, controls, and output spacers.
• spx-gui/src/components/editor/preview/EditorPreview.vue
  • Updated the appendRuntimeOutput function to accept RuntimeOutputInput type, aligning with the new Runtime class changes.
• spx-gui/src/components/editor/runtime.test.ts
  • Added a new test file to validate the functionality of the Runtime class's output management.
  • Included tests for output trimming, stable ID assignment, order preservation with ring buffer wrap-around, and didChangeOutput event emission.
• spx-gui/src/components/editor/runtime.ts
  • Refactored the RuntimeOutput interface to include a unique id for each output.
  • Introduced RuntimeOutputInput type for adding new outputs without requiring an id.
  • Implemented a ring buffer mechanism (outputRing, outputHead, outputCount) to store and manage console outputs.
  • Replaced the direct outputs array with a computed getter that reconstructs the ordered list from the ring buffer.
  • Added setMaxOutputs method to dynamically adjust the ring buffer size and trim existing outputs.
  • Modified addOutput to use the ring buffer logic, assigning stable IDs and handling buffer overflow.
  • Updated clearOutputs to reset the ring buffer state.
  • Removed the watch on outputs.slice() as output changes are now explicitly emitted via emitDidChangeOutput.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[Copilot]

Pull request overview

This PR targets debug console stability/performance under high-volume runtime logging by bounding retained outputs with a ring buffer and reducing DOM work via basic list virtualization in the console panel.

Changes:

• Replace unbounded outputs array trimming with a bounded ring buffer in Runtime, adding stable per-output ids and configurable max retention.
• Add a “Max logs” selector (500/1000/2000) and minimal virtualization (window + overscan + spacer rows) to ConsolePanel.
• Update runtime output append call sites to use the new RuntimeOutputInput type.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
spx-gui/src/components/editor/runtime.ts	Implements ring-buffer-backed outputs, stable ids, and configurable retention.
spx-gui/src/components/editor/runtime.test.ts	Adds unit tests for retention, ordering, ids, and change event emission.
spx-gui/src/components/editor/preview/EditorPreview.vue	Adjusts output append typing to match the new runtime API.
spx-gui/src/components/editor/panels/ConsolePanel.vue	Adds max-log selection UI and virtualized rendering with spacers.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[xgopilot]

Good architectural direction — the ring buffer design is clean and the test coverage is solid. A few issues need addressing before merge:

• The [WIP] prefix in the title should be removed if the implementation is complete.
• Two correctness issues: the useBottomSticky + virtualization interaction creates a scroll-position feedback loop (see inline), and the virtualizedEndIndex overscan is double-counted.
• One reactivity bug: resetOutputs/clearOutputs replace outputRing with a new bare array, breaking Vue reactivity tracking after the first limit change.
• The outputs getter rebuilds the full array on every reactive read — consider caching it to preserve the ring buffer's write-path performance gains.

[gemini-code-assist]

Code Review

This pull request introduces significant performance improvements to the debug console by implementing a ring buffer for log storage and virtualized rendering for the log list. The changes are well-implemented and include corresponding unit tests for the new ring buffer logic. My review includes a few suggestions for further improvement: enhancing the virtualization to handle variable-height log entries for a smoother user experience, optimizing the scroll event handling for better rendering performance, and simplifying a helper method for improved code maintainability.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[CORCTON]

/gemini review

[xgopilot]

@CORCTON Thanks for the trigger request.

This repository currently enforces member-only triggers, and your account does not have repository membership access, so xgopilot cannot run for this request.

To proceed, you can:

• Ask a repository maintainer to add you as a collaborator/member, or
• Update .xgopilot.yml and set require_member_to_trigger: false.

[gemini-code-assist]

Code Review

This pull request introduces a ring buffer to manage debug console logs, which is a great improvement for performance under heavy logging, and includes a new feature allowing users to select the log limit. No vulnerabilities were found in the provided code changes. I have one suggestion regarding the ring buffer's resizing logic to further optimize performance.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[CORCTON]

/gemini review

[xgopilot]

@CORCTON Thanks for the trigger request.

This repository currently enforces member-only triggers, and your account does not have repository membership access, so xgopilot cannot run for this request.

To proceed, you can:

• Ask a repository maintainer to add you as a collaborator/member, or
• Update .xgopilot.yml and set require_member_to_trigger: false.

[gemini-code-assist]

Code Review

This pull request introduces a significant performance improvement for the debug console by replacing an inefficient array-based logging mechanism with a ring buffer. This change effectively addresses performance issues under heavy logging. The implementation in runtime.ts is robust, incorporating a ring buffer, caching, and throttled updates for efficient UI rendering. Additionally, a new UI control has been added to allow users to configure the maximum number of log entries, and comprehensive unit tests have been included to validate the new logic. The changes are well-executed and significantly enhance the editor's stability. I have one minor suggestion to improve code conciseness.