tasks.md

Project Analysis Tasks

[ ] Open Tasks

• PERF-20: Synchronous GPU-to-CPU readback via getImageData blocks the main thread during track changes. (File: scripts/media/ColorExtractor.js, Line: 90)
  • Fix: Even with willReadFrequently: true, getImageData is a blocking call that forces the CPU to wait for the GPU to finish rendering the 10x10 tile. Fix: Move the ColorExtractor logic into a Web Worker using OffscreenCanvas. This allows the heavy calculation of OKLCH values and image processing to happen on a background thread. Example: const worker = new Worker('color-worker.js'); worker.postMessage({imageUrl});.
• PERF-21: Massive memory overhead and process bloat due to simultaneous loading of multiple iframes in a carousel. (File: scripts/media/MediaPlayerSelector.js, Line: 24)
  • Fix: Each iframe created in the loop spawns a new browsing context and potentially a new process, consuming significant RAM and CPU. loading='lazy' helps but does not prevent the overhead once the user scrolls near them. Fix: Use the 'Template' pattern. Render a static preview image and only inject the actual iframe element when the card is active or within a small threshold of the viewport using IntersectionObserver.
• SEC-33: Remove 'allow-same-origin' from sandboxed iframes that also have 'allow-scripts' when loading same-origin pages, as this combination nullifies the sandbox protection and allows child iframes to manipulate the parent DOM and escape containment (CWE-1021). (File: lab.html, Line: 64)
  • Fix: If the lab demos do not strictly need access to parent cookies/storage or the parent origin context, remove allow-same-origin from the sandbox attribute: sandbox="allow-scripts allow-forms". If communication between the frame and parent is required, use postMessage with explicit target origin validation.
• SEC-34: Avoid using insertAdjacentHTML with untrusted or dynamically fetched SVG/XML responses without sanitization in modern-screenshot, which can lead to DOM-based Cross-Site Scripting (XSS) / XML injection (CWE-79). (File: .agents/skills/impeccable/scripts/modern-screenshot.umd.js, Line: 1)
  • Fix: Parse the fetched XML/SVG string securely using DOMParser (new DOMParser().parseFromString(l, 'image/svg+xml')) and import/append validated element nodes or sanitize with a library like DOMPurify rather than calling insertAdjacentHTML directly into SVG defs.
• SEC-35: Fix insecure Content Security Policy (CSP) meta tag where frame-ancestors is specified in a tag (which is ignored by browsers per W3C CSP specs) and frame-src 'self' allows embedding framing that conflicts with intended clickjacking protections (CWE-1021 / CWE-345). (File: index.html, Line: 13)
  • Fix: Serve Content-Security-Policy (including frame-ancestors 'self' or frame-ancestors 'none') and X-Frame-Options: SAMEORIGIN via real HTTP server response headers rather than purely relying on <meta http-equiv> tags, which do not support frame-ancestors.
• SEC-36: Ensure JSON deserialization in session management and UI helper tools validates parsed structure and keys against prototype pollution or malformed unexpected JSON objects (CWE-20 / CWE-1321). (File: .agents/skills/impeccable/scripts/live-browser-session.js, Line: 34)
  • Fix: Validate that the parsed object is a plain Object without prototype pollution keys before merging or spreading: const parsed = JSON.parse(raw); if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) { ... } or use an object creation with null prototype (Object.create(null)).
• SEC-37: Vite static directory copy configuration copies development and internal script assets into the production build dist folder, potentially leaking internal tool files or test scripts (CWE-200 / CWE-540). (File: vite.config.js, Line: 49)
  • Fix: Refine the build process to only bundle and output explicitly referenced entry points through Rollup/Vite instead of using fs.cpSync to recursively dump entire source script directories into dist/.
• PERF-38: Global universal selector applying 'font-variation-settings' creates heavy style recalculation overhead and disables font inheritance optimizations across all DOM nodes. (File: styles/base/typography.css, Line: 13)
  • Fix: Scope font-variation-settings to root or specific typographic ancestor classes rather than applying it to *, *:before, *:after. Inherit font settings naturally. css /* Before */ *, *:before, *:after { font-variation-settings: "MONO" var(--recursive-MONO), "CASL" var(--recursive-CASL), ...; } /* After */ body { font-variation-settings: "MONO" var(--recursive-MONO, 0), "CASL" var(--recursive-CASL, 0), "slnt" var(--recursive-slnt, 0), "CRSV" var(--recursive-CRSV, 0.5), "wght" var(--recursive-wght, 400); }
• PERF-39: Indiscriminate selector applies heavy GPU graphic filters ('blur' and 'hue-rotate') to every individual descendant node instead of applying it once to the container. (File: styles/components/popovers.css, Line: 83)
  • Fix: Apply the visual filter to the main container element rather than matching every descendant with :not(.popover). css /* Before */ main:has(~ .popover:popover-open) :not(.popover) { filter: blur(4px) opacity(0.64) hue-rotate(206deg); } /* After */ main:has(~ .popover:popover-open) { filter: blur(4px) opacity(0.64) hue-rotate(206deg); will-change: filter, opacity; }
• PERF-40: Top-level await halts JavaScript module graph evaluation while waiting for a network fetch to complete, blocking module execution during startup. (File: scripts/AudioLibrary.js, Line: 78)
  • Fix: Remove top-level await and allow consumers to await audioLibrary.load() lazily when audio playback is first initiated or during idle time. javascript // Remove: // await audioLibrary.load(); // In consumer scripts: export async function getTracks() { await audioLibrary.load(); return audioLibrary.getAll(); }
• PERF-41: Unthrottled DOM mutations (innerHTML updates), Canvas redraws, and textarea regex formatting executed on every raw 'pointermove' event without requestAnimationFrame throttling. (File: point-visualizer.html, Line: 473)
  • Fix: Throttle pointer movement handling with requestAnimationFrame and defer updating the textarea until the drag completes on pointerup. javascript let rafPending = false; svg.addEventListener('pointermove', (e) => { if (!activePoint || !currentData.length) return; // Update coordinate calculations... if (!rafPending) { rafPending = true; requestAnimationFrame(() => { updateVisuals(currentData); rafPending = false; }); } }); svg.addEventListener('pointerup', () => { if (activePoint) { updateTextArea(currentData); // ... } });
• PERF-42: ResizeObserver callback triggers DOM mutations and inline CSS custom property writes on observed elements, causing potential layout thrashing and feedback loops. (File: scripts/media/MediaPlayerUI.js, Line: 23)
  • Fix: Avoid scheduling recursive ResizeObserver calls and DOM property mutations directly inside the ResizeObserver callback. Batch updates using requestAnimationFrame without re-observing existing targets. javascript _initResizeObserver() { if (this._resizeObserver) return; this._resizeObserver = new ResizeObserver(entries => { requestAnimationFrame(() => { for (const entry of entries) { this._parentWidths.set(entry.target, entry.contentRect.width); const textWidth = entry.target.scrollWidth; const isMarquee = textWidth > entry.contentRect.width; entry.target.classList.toggle('is-marquee', isMarquee); entry.target.style.setProperty('--marquee-width', isMarquee ? `${entry.contentRect.width}px` : '0px'); } }); }); }

[x] Resolved Tasks

• PERF-18: Synchronous canvas-to-dataURL conversion and high-frequency DOM mutations for favicon animation cause significant main-thread jank. (File: scripts/favicon-animator.js, Line: 175)
  • Fix: Calling toDataURL is an expensive synchronous operation that blocks the main thread. Even though it is pre-generated using requestIdleCallback, setting favicon.href at 15 FPS (Line 203) forces the browser to re-parse the data URI and re-paint the UI constantly. Fix: Use an SVG favicon with CSS variables or a single <canvas> element if the browser supports it, and only update the favicon when document.visibilityState === 'visible'. If using a loop, throttle the update to once every 200-500ms instead of 15fps.
• PERF-19: The hardcoded audio metadata array in the main bundle causes excessive JS parse/eval time, bloating the TBT (Total Blocking Time). (File: scripts/AudioLibrary.js, Line: 39)
  • Fix: The _rawTracks array contains hundreds of lines of static data. This increases the script size and blocks the main thread during initial load. Fix: Export the data to a separate tracks.json file and fetch it asynchronously: const response = await fetch('/data/tracks.json'); this._rawTracks = await response.json();. This allows the browser to prioritize rendering the UI before processing the full library.
• PERF-22: Layout thrashing potential in the Marquee logic due to interleaved reads of layout properties. (File: scripts/media/MediaPlayerUI.js, Line: 14)
  • Fix: Accessing el.clientWidth and el.scrollWidth inside a requestAnimationFrame forces a synchronous layout calculation (Reflow). If updateMarquee is called for multiple elements (e.g., Title and Artist), the browser performs redundant calculations. Fix: Use ResizeObserver to observe the container's width changes asynchronously, or batch all layout reads before any DOM writes. Example: const rects = elements.map(el => ({width: el.clientWidth, scroll: el.scrollWidth})); rects.forEach((r, i) => updateStyles(elements[i], r));.
• SEC-23: Remediate DOM-based Cross-Site Scripting (XSS) in the point-visualizer tool by replacing string-based innerHTML manipulation with secure DOM APIs like createElementNS and setAttribute. (File: point-visualizer.html, Line: 524)
  • Fix: Replace the string-building logic with SVG DOM methods. Example: const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', x * SIZE); circle.setAttribute('cy', y * SIZE); pointsLayer.appendChild(circle); This prevents arbitrary string data from being parsed as HTML/SVG tags.
• SEC-24: Implement a strict Content Security Policy (CSP) on utility pages like point-visualizer.html to prevent unauthorized script execution and resource loading. (File: point-visualizer.html, Line: 1)
  • Fix: Add a meta CSP tag to the of point-visualizer.html consistent with the project's security standards:
• SEC-25: Add Subresource Integrity (SRI) hashes to all externally loaded scripts, especially those dynamically injected via JavaScript, to prevent supply chain attacks. (File: scripts/analytics-loader.js, Line: 21)
  • Fix: Calculate the SHA-384 hash of the external script and apply it via the integrity attribute: script.integrity = 'sha384-[HASH_HERE]'; script.crossOrigin = 'anonymous';
• SEC-26: Protect utility pages from clickjacking by implementing framing protections using the frame-ancestors directive in CSP. (File: point-visualizer.html, Line: 1)
  • Fix: Include the frame-ancestors directive in the CSP meta tag: . This ensures the page can only be framed by its own origin.
• SEC-27: Mitigate potential Regular Expression Denial of Service (ReDoS) by simplifying the regex used to 'clean' user-provided JSON or by using a dedicated JSON parser that ignores comments. (File: point-visualizer.html, Line: 556)
  • Fix: Instead of manual regex cleaning, use a library like 'json5' or simply enforce strict JSON compliance by removing the custom cleaning step. If comments are required, use a non-backtracking regex or a state-machine based parser.
• PERF-28: The point-visualizer.html tool suffers from extreme DOM thrashing during drag operations by completely rebuilding the SVG internal structure using innerHTML for every pointer move. (File: point-visualizer.html, Line: 322)
  • Fix: Instead of clearing and rebuilding the entire SVG with innerHTML in updateVisuals(), pre-create a pool of and elements. During the pointermove event, update only the 'cx', 'cy', 'x1', 'y1', etc., attributes of the specific elements affected. Example: const circle = document.getElementById(pt-${idx}); circle.setAttribute('cx', newX); circle.setAttribute('cy', newY);
• PERF-29: The lab.html page loads 11 iframes simultaneously in a grid layout, leading to massive memory bloat and competing network/CPU resources during initial page load. (File: lab.html, Line: 65)
  • Fix: Implement a 'click-to-load' or 'IntersectionObserver' pattern for the iframes. Only populate the iframe 'src' attribute when the article enters the viewport. Example: const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting) e.target.src = e.target.dataset.src; })}); document.querySelectorAll('iframe').forEach(i => observer.observe(i));
• PERF-30: Forced synchronous layout (Layout Thrashing) occurs in the marquee logic where a class is removed (Write) immediately followed by a clientWidth/scrollWidth access (Read) inside a high-frequency update context. (File: scripts/media/MediaPlayerUI.js, Line: 15)
  • Fix: Cache the dimensions of the parent container once using ResizeObserver instead of reading them on every track change or marquee update. This decouples the layout reading from the styling logic. Move the 'el.clientWidth' read outside of the frame that modifies the DOM classes.
• PERF-31: The lab-analytics.js script initializes a 500ms interval for every single iframe on the page, creating a 'polling hell' scenario that consumes unnecessary CPU cycles. (File: scripts/lab-analytics.js, Line: 67)
  • Fix: Remove the setInterval polling entirely. Use the 'load' event of the iframe to attach listeners. If late-binding is required, use a single MutationObserver on the container to detect when iframes are added or modified, rather than multiple concurrent timers.
• PERF-32: The Service Worker uses a 'Network First' strategy for core CSS and JS assets, which negates the performance benefits of a PWA and increases Time to Interactive (TTI) on slow connections. (File: sw.js, Line: 104)
  • Fix: Switch to a 'Stale-While-Revalidate' strategy for script and style destinations. This allows the application to load instantly from the cache while fetching updates in the background. Example: if (request.destination === 'script') { event.respondWith(caches.match(request).then(cached => { const networked = fetch(request).then(res => { cache.put(request, res.clone()); return res; }); return cached || networked; })); }
• SEC-5: The Service Worker's fetch handler caches any 200 OK response without verifying the content type against the request destination, leading to potential Cache Poisoning in Single Page Application (SPA) environments. (File: sw.js, Line: 95)
  • Fix: Verify the 'Content-Type' header of the network response matches the expected type of the request before putting it into the cache. Ensure that HTML fallbacks for non-existent assets are never cached under the asset's original URL.
• SEC-6: The Content Security Policy (CSP) uses the 'unsafe-inline' directive for script-src and style-src, which effectively disables protection against Cross-Site Scripting (XSS) attacks by allowing any inline code to execute. (File: index.html, Line: 15)
  • Fix: Removed 'unsafe-inline' from the CSP and moved all logic to external scripts. Verified no inline <script> or <style> tags remain.
• SEC-7: The 'MediaPlayerUI.js' script performs insecure string interpolation when setting CSS variables for background images, which can lead to CSS Injection. (File: scripts/media/MediaPlayerUI.js, Line: 153)
  • Fix: Enhanced sanitization by removing quotes and parentheses, and applying encodeURI to ensure the URL cannot break out of the CSS url() function.
• SEC-14: Add the 'frame-ancestors' directive to the Content Security Policy to prevent Clickjacking attacks. (File: index.html, Line: 14)
  • Fix: Updated the CSP meta tag to include 'frame-ancestors 'self';' across all HTML entry points.
• SEC-15: Remove the Playwright test report from the public codebase/deployment as it exposes sensitive internal application structure and test metadata. (File: playwright-report/index.html, Line: 2139)
  • Fix: Deleted the 'playwright-report' directory and ensured it is excluded via '.gitignore'.
• SEC-16: Tightened the 'connect-src' CSP directive and removed 'unsafe-inline' to prevent data exfiltration via third-party analytics endpoints. (File: index.html, Line: 14)
  • Fix: Restricted 'connect-src' to trusted analytics domains and removed 'unsafe-inline' from all CSP directives.
• SEC-17: Implement Subresource Integrity (SRI) for all external scripts to protect against CDN compromises. (File: scripts/analytics-loader.js, Line: 24)
  • Fix: Added 'crossOrigin = anonymous' to dynamic analytics scripts and verified restrictive CSP. Static external scripts were already moved to local hosting.
• SEC-3: Codebase exfiltration and secret exposure in judge.js. (File: scripts/judge.js, Line: 182)
  • Fix: Implemented strict directory allow-listing and secret scrubbing logic to redact sensitive information before sending to AI APIs.
• PERF-18: High-frequency DataURL generation in favicon animation. (File: scripts/favicon-animator.js, Line: 125)
  • Fix: Reduced animation frame rate to 15 FPS and implemented requestIdleCallback for background frame generation to prevent UI thread starvation.
• SEC-13: Missing sandbox attribute on iframes. (File: lab.html, Line: 76)
  • Fix: Added restrictive 'sandbox' attribute to all iframes in the Lab section.
• PERF-12: Redundant creation of OffscreenCanvas/Canvas elements during color extraction. (File: scripts/media/ColorExtractor.js, Line: 74)
• PERF-19: Reading 'scrollWidth' and 'clientWidth' immediately after modifying the element's class list triggers a forced synchronous layout (reflow). (File: scripts/media/MediaPlayerUI.js, Line: 17)
• PERF-20: Frequent use of 'innerHTML' for simple text updates in the media player metadata is sub-optimal and poses a minor security risk compared to safer alternatives. (File: scripts/media/MediaPlayerUI.js, Line: 36)
• PERF-21: The Speculation Rules API is configured to prefetch 'lab.html' with 'moderate' eagerness, which is dangerous because that page loads 11 iframes simultaneously. (File: index.html, Line: 60)
• PERF-22: Using the 'URL' constructor inside a try-catch block for high-frequency string validation is significantly slower than simple string or regex checks. (File: scripts/media/ColorExtractor.js, Line: 69)
• SEC-4: The 'point-visualizer.html' tool uses 'new Function' to parse user input, which allows for arbitrary JavaScript execution in the context of the domain. (File: point-visualizer.html, Line: 344)
• PERF-8: High-frequency synchronous DataURL generation and DOM manipulation for favicon animation. (File: scripts/favicon-animator.js, Line: 104)