Feature: Add Performance Timeline Dashboard

Overview

Create a comprehensive performance timeline dashboard to help directors and stage managers understand show pacing, identify acts that run long, and compare performances over time.

Current State

• Session elapsed time is tracked in ShowSession.elapsed_time
• Intervals have timers with color-coded warning states (green/orange/red)
• ShowLiveView.vue displays numeric elapsed time with real-time WebSocket updates
• Historical session data is stored but not visualized

Proposed Features

1. Act Duration Timeline

• Horizontal bar chart showing actual vs. expected duration for each act
• Visual comparison: planned duration vs. actual performance time
• Color-coding for acts running over/under expected time
• Per-session view or aggregate across multiple performances

2. Pacing Analysis

• Line graph showing page progression rate over time (pages/minute)
• Identify sections where pacing slows down or speeds up
• Smooth/average trends to filter out normal variation
• Helps directors understand rhythm and flow

3. Interval Tracking Visualization

• Visual timeline of breaks with duration and timing
• Color-coded warning states (green/orange/red based on overrun)
• Compare planned vs. actual interval lengths
• Track interval start/end times relative to overall show progress

4. Performance History Comparison

• Compare multiple show sessions on the same timeline
• Overlay multiple performances to identify patterns
• Statistics: average duration, variance, trends over time
• Filter by date range or specific performances

5. Live Performance View (Optional Enhancement)

• Real-time updating timeline during active show session
• Current position indicator
• Projected end time based on current pacing

User Benefits

• Directors: Understand if shows are running long and which acts need tightening
• Stage Managers: Track pacing consistency across performances
• Production Teams: Identify which sections consistently run over time
• Performance Analysis: Data-driven insights for rehearsal focus

Technical Implementation Notes

• Use D3.js for timeline and interactive charts (or Chart.js for simpler bar/line charts)
• Data sources:
  • ShowSession model: start_date_time, end_date_time, elapsed_time
  • Interval model: start_datetime, end_datetime, initial_length
  • Act/Scene metadata from Show model
• Real-time updates via existing WebSocket mechanism (SOCKET_ONMESSAGE)
• Time scale based on show start time
• Could be added as new view under Show > Performance Analytics or Dashboard section
• Consider exporting performance data (CSV/JSON) for external analysis

Related Components

• client/src/views/show/live/ShowLiveView.vue - live performance display with elapsed time
• server/models/show.py - ShowSession, Interval models
• client/src/store/modules/show.js - show state management

Data Requirements

• May need to enhance session tracking to capture act-level timing (current tracking is show-level)
• Consider adding expected/planned duration fields to Act model for comparison

Priority

High - Provides actionable insights for directors about pacing and timing, directly impacts show quality

Start by reading client/src/views/show/live/ShowLiveView.vue, server/models/show.py, and client/src/store/modules/show.js to understand the existing timing and WebSocket data. Before implementation, narrow the proposed charts, act-level data requirements, and live or historical scope; done should be defined by an agreed analytics view with specified comparisons and supported data.