Auto-collapses code blocks in Google AI Studio by interacting natively with Angular Material components.
// ==UserScript==
// @name AI Studio - Auto-Collapse Code Blocks
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Auto-collapses code blocks in Google AI Studio by interacting natively with Angular Material components.
// @author csanchez
// @match https://aistudio.google.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Set up a MutationObserver to monitor the injection of new nodes into the DOM
const observer = new MutationObserver(() => {
// Look for <mat-expansion-panel> components that haven't been processed yet.
// The selector ignores those that already have our custom 'data-script-collapsed' attribute.
const unhandledPanels = document.querySelectorAll('mat-expansion-panel:not([data-script-collapsed])');
unhandledPanels.forEach(panel => {
// Mark the panel immediately to ensure the observer doesn't process it in a loop
panel.setAttribute('data-script-collapsed', 'true');
// Locate the panel header, which is the element Angular makes clickable
const header = panel.querySelector('mat-expansion-panel-header');
if (header) {
// Apply a 100ms delay. This is crucial in SPAs (Single Page Applications)
// to give the framework time to finish rendering the component and
// attach its event listeners (like the native click).
setTimeout(() => {
// Check if Angular initialized the panel in an expanded state
if (panel.classList.contains('mat-expanded') || header.getAttribute('aria-expanded') === 'true') {
// Trigger the click. Angular Material will detect this and close the panel
// with its default animation, instantly hiding the code
// while the AI generation continues invisibly in the background.
header.click();
}
}, 100);
}
});
});
// Start observing the entire document body
observer.observe(document.body, { childList: true, subtree: true });
})();