Feature: Add Cue Timeline & Density Visualization

Overview

Add visual timeline and density visualization for cue distribution across the script to help technical directors identify cue-heavy sections, balance crew workload, and spot potential timing conflicts.

Current State

• CueCountStats.vue displays a table showing cue counts per act/scene
• Cues are displayed inline during performance
• CueAssociation model links cues to specific script lines within revisions
• Multiple cue types exist with custom color coding

Proposed Features

1. Cue Timeline

• Horizontal timeline showing when each cue occurs in the script (by page number or line position)
• Color-coded by cue type using existing CueType.color values
• Interactive: hover to see cue details, click to navigate to that script position
• Revision-aware: filter/switch between different script revisions

2. Density Heatmap

• Color-coded visualization showing cue concentration across acts/scenes
• Intensity indicates number of cues in each section
• Helps identify cue-heavy sections requiring extra crew attention

3. Type Distribution

• Stacked area chart or timeline showing how different cue types (lights, sound, props) are distributed throughout the script
• Visual breakdown of technical workload by category

4. Gap Analysis

• Visual indicators for long stretches without cues
• Highlight periods with cue clustering
• Helps identify optimal equipment change windows

User Benefits

• Technical Directors: Visualize cue distribution to balance crew workload
• Stage Managers: Identify sections requiring extra coordination
• Crew Planning: Spot potential timing conflicts before they occur
• Equipment Management: Plan changes during identified gaps

Technical Implementation Notes

• Use D3.js (already in dependencies from revision graph implementation)
• Data source: CueAssociation model (revision-scoped: revision_id, line_id, cue_id)
• Scale based on ScriptLineRevisionAssociation ordering
• Must be revision-aware since cue placements differ across script versions
• Could be added to Show Config > Cues section
• Real-time updates via WebSocket for live performance tracking (optional enhancement)

Related Components

• client/src/vue_components/show/config/cues/CueCountStats.vue - existing stats table
• client/src/vue_components/show/config/script/RevisionGraph.vue - reference for D3.js patterns
• server/models/cue.py - data models

Priority

High - Solves real technical coordination problems with highly visual, actionable insights

Start with client/src/vue_components/show/config/cues/CueCountStats.vue and client/src/vue_components/show/config/script/RevisionGraph.vue to understand the existing stats view and D3.js patterns. Review server/models/cue.py and the CueAssociation data described in the issue, then define how revision ordering feeds the visualizations. Done means the cue timeline, density, type distribution, and gap indicators work across script revisions in the Cues section.