Vercel Deployment History Overlay

WHAT IT DOES

This userscript adds a compact deployment history monitor to your Vercel project pages. It reads deployment entries from the page—extracting deployment timestamps, status (ready, building, error), commit messages, and durations—and displays a color-coded history overlay directly in the project header. Each deployment is shown with a status indicator: green for ready, yellow for building, and red for error. A summary panel shows total deployments, success rate, average build duration, and the latest deployment status. The overlay includes a one-click button to open the full deployment log. This is invaluable for developers, DevOps engineers, and team leads who need to monitor deployment health, track build performance, and quickly identify failed deployments without navigating away from the project page.

WHERE IT RUNS

The script runs on all Vercel web application pages at *.vercel.com/*, with automatic detection of project pages and deployment lists (paths containing /projects/ or /deployments). It works across all Vercel interfaces by using multiple selector strategies to find deployment entries, status indicators, timestamps, commit messages, and durations. The script detects dynamic content loading and re-renders the overlay when the deployment list updates. It runs across the entire Vercel domain, ensuring coverage whether you're viewing the main project dashboard, a specific deployment list, or a deployment detail page.

HOW TO USE

Install the script via the BotGentz extension and navigate to any Vercel project page. The deployment history overlay will appear in the header automatically, showing your deployment timeline with color-coded status indicators. The summary panel shows total deployments, success rate, average duration, and latest deployment status. The deployment list displays recent deployments with status dots, relative timestamps, commit messages (toggleable), and duration. Click the ↗ button next to any deployment to open its full log in a new tab. Use the panel controls to customize your experience: toggle the deployment overlay on or off, show or hide the summary statistics, enable or disable commit message display, or adjust the number of recent deployments shown (3-50). The "Refresh" button manually rescans the page for updated deployment data, and the "Copy" button exports the full deployment history to your clipboard for reporting.

THE MECHANISM - DEPLOYMENT EXTRACTION, STATUS DETECTION, AND METRICS AGGREGATION

This script identifies deployment entries by scanning the DOM for known Vercel deployment elements. It uses a cascading selector strategy that looks for deployment items (.deployment-item, .deployment-row, .deployment-entry), then extracts status from status badges or state indicators, timestamps from date elements or relative time strings, commit messages from message elements, and durations from duration or elapsed time elements. Status is normalized to "ready," "building," or "error" using text matching and class analysis. Success rate is calculated as (ready / total) × 100. Average duration is calculated across all deployments with duration data. The overlay is built as a DOM element with inline styles and inserted into the project header. The deployment list shows entries in reverse chronological order with color-coded status indicators. The deployment log button opens the full log using GM_openInTab.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Vercel page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📊), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, the recent count control, action buttons, and a status legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Vercel, with the deployment overlay updating automatically as you move between projects.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Vercel users who need to monitor deployment history and performance. The script reads only visible deployment data from the DOM—it does not access Vercel's API, your account credentials, or any sensitive information. All settings (overlay visibility, summary toggle, commit message toggle, recent count, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Vercel data—it only reads and visualizes visible deployment information. The success rate and average duration are calculated based on deployments visible on the current page; if the list is paginated, the metrics may not represent your full deployment history. If Vercel updates its website structure, the script may need to be updated to match new selectors. The deployment log button opens the deployment detail page in a new tab; ensure your browser allows pop-ups for this functionality.