This document provides ASCII art mockups of the episode timeline UI in various states.
- Desktop - Default State
- Desktop - Hover State
- Desktop - Episode 2 Active
- Mobile - Stacked Layout
- Segmentation Viewer Integration
- Many Episodes (5+)
- Episode with Bookmarks
- Episode Comparison View
┌──────────────────────────────────────────────────────────────────────────────┐
│ Capture Viewer - turn-off-nightshift │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ Screenshot Display Area │ │
│ │ │ │
│ │ [System Settings Window] │ │
│ │ │ │
│ │ Step 1 of 5 │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ Episode Timeline ─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Current: Episode 1 of 2 - "Navigate to System Settings" │ │
│ │ │ │
│ │ Episode Labels: │ │
│ │ ┌────────────────────────┐┌────────────────────────┐ │ │
│ │ │ Navigate to Settings ││ Disable Night Shift │ │ │
│ │ │ 3.5s ││ 3.2s │ │ │
│ │ └────────────────────────┘└────────────────────────┘ │ │
│ │ │ │ │ │ │
│ │ ━━━━━━━━━━━━━━━━━━━━━━━━|━━━━━━━━━━━━━━━━━━━━━━━ │ │
│ │ ● │ │ │
│ │ 0.0s 3.5s 6.7s │ │
│ │ │ │
│ │ [◄ Previous Episode] [⏸ Pause] [Next Episode ►] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ Action Details ────────────────────────────────────────────────────────┐ │
│ │ Type: CLICK │ │
│ │ Position: (85%, 5%) │ │
│ │ Description: Click System Settings icon │ │
│ │ Timestamp: 0.0s │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
COLOR KEY:
- Episode 1 label: Blue gradient (#3b82f6 → #2563eb)
- Episode 2 label: Purple gradient (#8b5cf6 → #7c3aed)
- Current episode: Bright + glowing border
- Timeline segments: Same colors as labels
- Current position marker (●): Cyan (#00d4aa)
- Boundary marker (|): White semi-transparent
┌──────────────────────────────────────────────────────────────────────────────┐
│ Episode Timeline (Hovering "Disable Night Shift") │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: Episode 1 of 2 - "Navigate to System Settings" │
│ │
│ ┌────────────────────────┐┌────────────────────────┐ │
│ │ Navigate to Settings ││ Disable Night Shift │◄─ HOVERED (scaled up) │
│ │ 3.5s ││ 3.2s │ │
│ └────────────────────────┘└────────────────────────┘ │
│ │ ▲ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━|━━━━━━━━━│━━━━━━━━━━━━━ │
│ ● │ │ │
│ 0.0s 3.5s │ │
│ │ │
│ ┌─────────────────────┴─────────────────────────┐ │
│ │ Disable Night Shift │ │
│ │ ───────────────────────────────────────────── │ │
│ │ User scrolls down to find Night Shift settings │ │
│ │ and toggles it off. │ │
│ │ │ │
│ │ 3.2s • 3 steps • Confidence: 95% │ │
│ │ │ │
│ │ Click to jump to this episode │ │
│ └─────────────────────────────────────────────────┘ │
│ ▲ │
│ TOOLTIP (on hover) │
│ │
│ [◄ Previous Episode] [⏸ Pause] [Next Episode ►] │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
INTERACTIONS:
- Mouse over episode label → Label scales up (1.02x)
- Tooltip appears after 200ms delay
- Tooltip positioned above label, centered
- Box shadow increases on label
- Cursor: pointer
┌──────────────────────────────────────────────────────────────────────────────┐
│ Episode Timeline (Playing Episode 2) │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: Episode 2 of 2 - "Disable Night Shift" ◄─ Updated │
│ │
│ ┌────────────────────────┐┌────────────────────────┐ │
│ │ Navigate to Settings ││ Disable Night Shift │◄─ CURRENT (glowing) │
│ │ 3.5s ││ 3.2s │ │
│ └────────────────────────┘└────────────────────────┘ │
│ │ ← PAST (dimmed 50%) │ │ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━|━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │ ● │ │
│ 0.0s 3.5s 4.2s 6.7s │
│ ▲ │
│ CURRENT TIME │
│ │
│ [◄ Previous Episode] [▶ Play] [Next Episode ►] ◄─ Next disabled │
│ (at last episode) │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
VISUAL STATES:
- Episode 1 (past): Opacity 50%, no glow
- Episode 2 (current): Opacity 100%, cyan glow, bright colors
- Timeline segment for Ep2: Brighter (filter: brightness(1.2))
- Current marker (●): At 4.2s within Episode 2
- Next button: Disabled (opacity 40%, cursor: not-allowed)
┌─────────────────────────────────────┐
│ turn-off-nightshift │ ← 375px wide
├─────────────────────────────────────┤
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ [Screenshot] │ │
│ │ │ │
│ │ Step 1 of 5 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─ Episode Timeline ───────────┐ │
│ │ │ │
│ │ Episode 1 of 2 │ │
│ │ Navigate to Settings │ │
│ │ │ │
│ │ Episodes (stacked): │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ Navigate to Settings │ │ │
│ │ │ 3.5s │ │ │
│ │ └──────────────────────┘ │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ Disable Night Shift │ │ │
│ │ │ 3.2s │ │ │
│ │ └──────────────────────┘ │ │
│ │ │ │
│ │ ━━━━━━━━━━━━━━━━━━━━━━━ │ │
│ │ ● │ │
│ │ 0.0s 3.5s 6.7s │ │
│ │ │ │
│ │ [ ◄ ] [⏸] [ ► ] │ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
│ ┌─ Action Details ──────────────┐ │
│ │ Type: CLICK │ │
│ │ Desc: Click Settings icon │ │
│ └───────────────────────────────┘ │
│ │
└─────────────────────────────────────┘
MOBILE FEATURES:
- Labels stack vertically (full width)
- Button text hidden (icons only)
- Smaller font sizes (12px → 11px)
- Timeline height reduced (8px → 6px)
- Touch-friendly spacing (min 44px)
- Swipe gestures enabled
- Long-press for tooltip
┌──────────────────────────────────────────────────────────────────────────────┐
│ Segmentation Results Viewer │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─ Episode Card ──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ [Thumbnail] │ │ │
│ │ │ │ │ │
│ │ └─────────────────────┘ │ │
│ │ │ │
│ │ Disable Night Shift │ │
│ │ User scrolls down to find Night Shift settings and toggles it off. │ │
│ │ │ │
│ │ 3 steps • 3.2s │ │
│ │ │ │
│ │ ┌─ Mini Timeline Preview ──────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ Position in recording: │ │ │
│ │ │ ━━━━━━━━━━━━━━━━━━━━━━━━|━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │
│ │ │ ├───────────┤ │ │ │
│ │ │ 3.5s 6.7s │ │ │
│ │ │ This episode ^^^ │ │ │
│ │ │ │ │ │
│ │ │ Full recording: 6.7s total │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [View Full Recording →] [View Steps] [Export] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ Episode Card ──────────────────────────────────────────────────────────┐ │
│ │ ... │ │
│ └───────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
ENHANCEMENT:
- Each episode card includes mini timeline
- Shows episode position in context of full recording
- Highlighted segment shows episode duration
- Helps users understand recording structure at a glance
┌──────────────────────────────────────────────────────────────────────────────┐
│ Complex Recording with 5 Episodes │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: Episode 3 of 5 - "Configure Display Settings" │
│ │
│ ┌──────┐┌──────┐┌────────┐┌──────┐┌──────┐ │
│ │ Open ││Navigate││Configure││ Test ││Close │ │
│ │ App ││to Disp.││Settings ││Change││Window│ │
│ │ 2.1s ││ 1.8s ││ 3.5s ││ 1.2s ││ 0.8s │ │
│ └──────┘└──────┘└────────┘└──────┘└──────┘ │
│ │ │ │ CURRENT │ │ │
│ ━━━━━━━━|━━━━━━━|━━━━━━━━━|━━━━━━━|━━━━━━━ │
│ │ │ │ ● │ │ │
│ 0s 2.1s 3.9s 5.2s 7.4s 8.6s 9.4s │
│ │
│ [◄ Previous] [▶ Play] [Next ►] [Jump to Episode... ▼] │
│ │
│ ┌─ Episode Details ──────────────────────────────────────────────────────┐ │
│ │ Configure Display Settings (Episode 3 of 5) │ │
│ │ • Adjust brightness slider │ │
│ │ • Change resolution dropdown │ │
│ │ • Toggle Night Shift setting │ │
│ │ Duration: 3.5s • Confidence: 94% │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
CONSIDERATIONS:
- Labels get narrower with more episodes
- Text may truncate: "Config..." instead of "Configure Display Settings"
- Color rotation: Ep1=Blue, Ep2=Purple, Ep3=Pink, Ep4=Orange, Ep5=Green, Ep6=Blue...
- Add dropdown for quick jump if 10+ episodes
- Consider collapsible labels on very small screens
┌──────────────────────────────────────────────────────────────────────────────┐
│ Episode Timeline with Bookmarks │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current: Episode 2 of 2 - "Disable Night Shift" │
│ │
│ ┌────────────────────────┐┌────────────────────────┐ │
│ │ Navigate to Settings ││ Disable Night Shift │ │
│ │ ⭐ 3.5s ││ ⭐⭐ 3.2s │ │
│ └────────────────────────┘└────────────────────────┘ │
│ │ ⭐ │ ⭐ ⭐ │ │
│ ━━━━━━━━━━|━━━━━━━━━━━━|━━━━|━━|━━━━━━━━━━━━━━━━ │
│ │ ↑ │ ↑ ↑● │ │
│ 0.0s 1.2s 3.5s 4.0s 4.5s 6.7s │
│ │ │ │ │ │
│ Bookmark 1 Boundary │ Current Time │
│ Bookmark 2 & 3 │
│ │
│ [◄ Prev] [▶ Play] [Next ►] [★ Bookmark] ◄─ Add bookmark at current time │
│ │
│ ┌─ Bookmarks ──────────────────────────────────────────────────────────┐ │
│ │ ⭐ Click System Settings icon │ │
│ │ Ep 1 • 0:01.2 • Jan 17 │ │
│ │ [Jump] [Edit] [Delete] │ │
│ │ ───────────────────────────────────────────────────────────────── │ │
│ │ ⭐ Scroll down in settings │ │
│ │ Ep 2 • 0:04.0 • Jan 17 │ │
│ │ [Jump] [Edit] [Delete] │ │
│ │ ───────────────────────────────────────────────────────────────── │ │
│ │ ⭐ Toggle Night Shift off │ │
│ │ Ep 2 • 0:04.5 • Jan 17 │ │
│ │ [Jump] [Edit] [Delete] │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
BOOKMARK FEATURES:
- ⭐ star icon on timeline at bookmark position
- Hover star → Show bookmark note
- Click star → Jump to bookmark
- Bookmark panel lists all bookmarks
- Persist in localStorage
- Export bookmarks as JSON
- Episode label shows bookmark count badge (⭐ 3.5s = 1 bookmark in this episode)
┌──────────────────────────────────────────────────────────────────────────────┐
│ Recording Comparison: turn-off-nightshift vs turn-off-nightshift-v2 │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─ Recording A ─────────────────────┐┌─ Recording B ─────────────────────┐ │
│ │ turn-off-nightshift ││ turn-off-nightshift-v2 │ │
│ │ ││ │ │
│ │ Episodes: ││ Episodes: │ │
│ │ ┌──────────┐┌──────────┐ ││ ┌─────┐┌─────┐┌──────────┐ │ │
│ │ │Navigate ││ Disable │ ││ │Open ││Navg.││ Toggle │ │ │
│ │ │Settings ││Night Shft│ ││ │Prefs││Displ││NightShift│ │ │
│ │ │ 3.5s ││ 3.2s │ ││ │1.8s ││2.1s ││ 2.5s │ │ │
│ │ └──────────┘└──────────┘ ││ └─────┘└─────┘└──────────┘ │ │
│ │ ━━━━━━━━━━━|━━━━━━━━━━━ ││ ━━━━━━━|━━━━━━|━━━━━━━━━━ │ │
│ │ 0s 3.5s 6.7s ││ 0s 1.8s 3.9s 6.4s │ │
│ │ ││ │ │
│ │ Metrics: ││ Metrics: │ │
│ │ • 2 episodes ││ • 3 episodes │ │
│ │ • 6.7s total ││ • 6.4s total │ │
│ │ • 5 steps ││ • 6 steps │ │
│ │ • 100% coverage ││ • 100% coverage │ │
│ │ ││ │ │
│ └────────────────────────────────────┘└───────────────────────────────────┘ │
│ │
│ ┌─ Comparison Analysis ──────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Differences Found: │ │
│ │ ✓ Recording B has 1 additional episode ("Open Preferences") │ │
│ │ ✓ Recording B is 0.3s faster (4.5% improvement) │ │
│ │ ✓ Episode names 67% similar (different granularity) │ │
│ │ ✓ Step sequences 83% similar │ │
│ │ │ │
│ │ Recommendations: │ │
│ │ • Consider merging "Open Prefs" into "Navigate" episode in B │ │
│ │ • Recording B demonstrates more efficient workflow │ │
│ │ │ │
│ │ [Export Comparison Report] [Swap Sides] [Choose Different Recordings] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
COMPARISON FEATURES:
- Side-by-side timeline view
- Synchronized playback (optional)
- Difference highlighting
- Metrics comparison
- Episode alignment suggestions
- Export comparison report
- Use case: Compare workflows, evaluate optimizations, benchmark performance
┌──────────────────────────────────────────────────────────────────────────────┐
│ Refine Episode Boundaries │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ⚠ Refinement Mode Active - Drag boundaries to adjust episode splits │
│ │
│ ┌────────────────────────┐┌────────────────────────┐ │
│ │ Navigate to Settings ││ Disable Night Shift │ │
│ │ 3.5s → 3.2s (adjust) ││ 3.5s (adjust) → 6.7s │ │
│ └────────────────────────┘└────────────────────────┘ │
│ │ │ │ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━◄═►━━━━━━━━━━━━━━━━━━━━━━━ │
│ │ ↕ │ │
│ 0.0s DRAG ME 6.7s │
│ (boundary) │
│ │
│ ┌─ Boundary Details ──────────────────────────────────────────────────┐ │
│ │ Boundary at: 3.5s │ │
│ │ Confidence: 92% │ │
│ │ │ │
│ │ Current split: │ │
│ │ • Episode 1: 0.0s → 3.5s (3.5s) - "Navigate to Settings" │ │
│ │ • Episode 2: 3.5s → 6.7s (3.2s) - "Disable Night Shift" │ │
│ │ │ │
│ │ ✨ AI Suggestion: │ │
│ │ Move boundary to 3.2s for better alignment │ │
│ │ Reason: Action completes at 3.2s, 0.3s pause before next action │ │
│ │ │ │
│ │ [Apply Suggestion] [Reset to Original] [Delete Boundary] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ [✓ Save Changes] [✗ Cancel] [← Exit Refinement Mode] │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
REFINEMENT FEATURES:
- Drag boundary markers left/right
- Visual feedback while dragging (preview new split)
- AI suggestions for better boundaries
- Confidence score displayed
- Undo/redo support
- Save changes to episode JSON
- Validation (ensure episodes don't overlap, min duration, etc.)
┌──────────────────────────────────────────────────────────────────────────────┐
│ Capture Viewer ┌──────────────────┐ │
│ │ 🔹 Entering │ │
│ │ Episode 2 │ │
│ ┌────────────────────────────────────────┐ │ │ │
│ │ │ │ "Disable Night │ │
│ │ [Screenshot] │ │ Shift" │ │
│ │ │ │ │ │
│ └────────────────────────────────────────┘ │ [View Details] ✕ │ │
│ └──────────────────┘ │
│ ┌─ Timeline ───────────────────────────┐ ▲ │
│ │ [Ep1] │ [Ep2] │ │ │
│ │ ━━━━━━━━━━|━━━━●━━━━━━━━━━━━━ │ TOAST NOTIFICATION │
│ │ 3.5s ↑ (crossed boundary) │ (auto-dismiss in 4s) │
│ └──────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
TOAST STYLES:
┌─ Success ──────────────┐ ┌─ Error ────────────────┐ ┌─ Info ──────────────┐
│ ✓ Episode bookmark │ │ ✗ Failed to load │ │ ℹ Episode ends in │
│ saved │ │ episodes │ │ 3 seconds │
│ [Undo] ✕ │ │ [Retry] ✕ │ │ [Skip] ✕ │
└────────────────────────┘ └────────────────────────┘ └─────────────────────┘
Green background Red background Blue background
┌──────────────────────────────────────────────────────────────────────────────┐
│ Keyboard Shortcuts [Press ? to hide]
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Episode Navigation: │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ ← → Previous / Next Episode │ │
│ │ Home Jump to First Episode │ │
│ │ End Jump to Last Episode │ │
│ │ 1-9 Jump to Episode by Number │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Playback: │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ Space Play / Pause │ │
│ │ ↑ ↓ Speed Up / Slow Down │ │
│ │ , . Previous / Next Step (frame-by-frame) │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Other: │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ B Add Bookmark at Current Position │ │
│ │ / Focus Search │ │
│ │ ? Toggle This Help │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ [Close] │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
OVERLAY FEATURES:
- Triggered by pressing "?" key
- Semi-transparent dark backdrop
- Centered modal
- ESC or click backdrop to close
- Shown on first load (with "Don't show again" option)
Episode Colors (cycling palette):
┌────────┬────────┬────────┬────────┬────────┐
│ 1 │ 2 │ 3 │ 4 │ 5 │
│ Blue │ Purple │ Pink │ Orange │ Green │
├────────┼────────┼────────┼────────┼────────┤
│ #3b82f6│ #8b5cf6│ #ec4899│ #f59e0b│ #10b981│
└────────┴────────┴────────┴────────┴────────┘
States:
• Current Episode: Bright + cyan glow + border
• Past Episodes: 50% opacity
• Future Episodes: 30% opacity
• Hovered: Scale 1.02 + shadow
Timeline Elements:
• ━━━ Timeline track (dark gray)
• ● Current position marker (cyan)
• │ Episode boundary (white semi-transparent)
• ⭐ Bookmark marker (gold)
Component Size Weight Color
─────────────────────────────────────────────
Episode Label 12px 600 White
Label Duration 11px 500 White 80%
Current Indicator 16px 700 Accent
Episode Name 16px 700 Primary
Tooltip Header 14px 600 Accent
Tooltip Body 13px 400 Secondary
Tooltip Meta 11px 500 Muted
Element Padding Margin Gap
────────────────────────────────────────────────
Timeline Container 16px 16px 0 -
Episode Labels 6px 12px 0 8px
Timeline Track 0 8px 0 -
Nav Buttons 8px 16px 12px 0 12px
Tooltip 12px - -
Desktop: 1024px+ ┌─────────┐┌─────────┐ Labels side-by-side
Tablet: 768-1023 ┌────────┐┌────────┐ Smaller labels
Mobile: 375-767 ┌──────────────────┐ Labels stacked
┌──────────────────┐
Small: <375 ┌────────────────┐ Compact, icons only
End of Mockups
These ASCII mockups provide a visual reference for implementing the episode timeline UI. Use them alongside the detailed design specifications in EPISODE_TIMELINE_DESIGN.md for implementation.