--- name: jb-ruleset-timeline-ui description: Visual timeline explorer for Juicebox project ruleset history. Shows configuration evolution, upcoming changes, and enables ruleset comparison. --- # Juicebox V5 Ruleset Timeline UI Visual timeline explorer for Juicebox project ruleset history. Shows the evolution of project configurations over time. ## Uses Shared Components This skill uses components from `/shared/`: | Component | Purpose | |-----------|---------| | `styles.css` | Dark theme, cards, buttons, badges | | `wallet-utils.js` | Chain config, formatting utilities | | `chain-config.json` | RPC URLs, contract addresses | | `abis/JBController.json` | Ruleset query functions | ## Overview This skill generates vanilla JS/HTML interfaces for visualizing: - Complete ruleset history for any project - Timeline of configuration changes - Upcoming queued rulesets - Ruleset approval status - Parameter comparisons between rulesets ## Ruleset Timeline UI Template ```html Juicebox Ruleset Timeline

Ruleset Timeline

-
-
Enter a project ID to load timeline

Compare Rulesets

``` ## Key Features ### Timeline Visualization - Vertical timeline with visual indicators - Color-coded status (current, upcoming, past) - Chronological ordering ### Ruleset Comparison - Side-by-side parameter comparison - Highlights changed values - Compare any two rulesets ### Detailed Information - Expandable details for each ruleset - All metadata fields displayed - Approval hook status ## Data Sources The timeline uses on-chain data via: - `currentRulesetOf()` - Active ruleset - `upcomingRulesetOf()` - Next ruleset - `latestQueuedRulesetOf()` - Queued with approval status - `allRulesetsOf()` - Historical rulesets ## Related Skills - `/jb-explorer-ui` - Contract read/write interface - `/jb-event-explorer-ui` - Event history - `/jb-query` - Query project data via CLI