AI Studio - Auto-Collapse Code Blocks

Auto-collapses code blocks in Google AI Studio by interacting natively with Angular Material components.
Ask a question, post a review, or report the script.
Wrap lines
// ==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 });

})();