Basecamp To-Do Age Highlighter

WHAT IT DOES

This userscript transforms your Basecamp to-do list into a visual priority dashboard. It reads each to-do item's creation date, calculates how many days have passed, and applies color-coded highlighting to every to-do item. The color system uses a four-tier gradient: green for new to-dos (0-2 days), yellow for recent (3-5 days), orange for aging (6-10 days), and red for stale (11+ days). Each to-do displays a compact badge next to its title showing the exact age in days and a category label. This visual system helps project managers and team members quickly identify which tasks are aging and need attention, which items might be blocked, and where follow-ups are overdue. The script also offers a summary panel showing counts of to-dos in each age category, and a filter bar to show only to-dos in a specific age range, helping you focus on the most urgent tasks first.

WHERE IT RUNS

The script runs on all Basecamp web application pages at *.basecamp.com/*, with automatic detection of to-do lists, project pages, and any page displaying to-do items. It works on both classic and new Basecamp interfaces by using multiple selector strategies to find to-do items, creation dates, and titles. The script detects dynamic content loading and re-applies highlighting whenever the to-do list changes, including after filtering, sorting, or adding new items. It runs across the entire Basecamp domain, ensuring coverage whether you're viewing a project's to-do list, a specific assignment, or a filtered view.

HOW TO USE

Install the script via the BotGentz extension and navigate to any Basecamp to-do list. Highlighting will apply automatically to all visible to-do items. Each to-do row gets a subtle background tint and a colored left border matching its age category, along with a badge on the to-do title showing the exact age and label. The summary panel appears above your to-do list showing total to-dos and a breakdown by age category with counts and percentages. The filter bar appears as a sticky row with buttons for each age category—click any button to show only to-dos in that category, or click "All" to reset the view. Use the panel controls to toggle highlighting on or off, show or hide the summary panel, enable or disable the filter bar, or choose whether to show the age in days on the badge. You can customize the day thresholds for each color category to match your team's workflow. The "Refresh" button manually reapplies all highlighting if the page updates.

THE MECHANISM - DATE PARSING, AGE CALCULATION, AND VISUAL PRIORITIZATION

This script identifies to-do age by scanning each to-do item for creation or last activity timestamps. It uses a cascading selector strategy that looks for Basecamp's specific date elements including .created-at, .todo-created, .todo-date, time tags, and data attributes containing timestamps. When relative time strings are found ("2 days ago"), the script parses them into absolute timestamps. For absolute timestamps, it converts them to Date objects directly. The age is calculated as the difference between the current time and the creation time, expressed in days. This age is then mapped to a color category using the user-defined thresholds. The highlighting is applied via inline styles on each to-do item (background and border-left) that override Basecamp's default styling. The badge is inserted into the to-do title element using DOM manipulation. For the summary, the script counts to-dos in each category and calculates percentage distributions. The filter bar uses display toggling to show or hide to-dos based on their age category.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Basecamp 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, threshold controls, action buttons, and a color legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Basecamp, with highlighting updating automatically as you move between projects and to-do lists.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Basecamp users who need to manage aging tasks and prioritize work effectively. The script reads only visible to-do data from the DOM—it does not access Basecamp's API, your account credentials, or any sensitive information. All settings (threshold values, toggle states, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Basecamp data—it only enhances the visual presentation of the to-do list. Age calculations are based on your system's current time and the timestamps visible on the page; if Basecamp updates its website structure, the script may need to be updated to match new selectors. The filter bar works on all to-dos currently visible in the list; if the list is paginated, the filter applies only to the current page. Completed to-dos are not filtered out by default, but they are included in the age calculation if they remain visible on the page.