tempo-cli 0.4.0

# Testing the Animations - Quick Guide

## 🚀 Quick Start

### Option 1: Test with Dashboard (Easiest)

```bash
# Launch the animated dashboard
./target/release/tempo dashboard
```

### Option 2: Test with Daemon Running (Full Features)

```bash
# Terminal 1: Start daemon
./target/release/tempo daemon start

# Terminal 2: Launch dashboard
./target/release/tempo dashboard
```

---

## 🎬 What to Look For

### 1. **60 FPS Smooth Rendering**

**How to observe:**
- The entire UI should feel smooth and responsive
- No stuttering or frame drops
- Cursor movements and updates are fluid

**Before:** UI updated ~10 times per second (choppy)
**After:** UI updates 60 times per second (buttery smooth)

---

### 2. **Animated Daemon Status Spinner**

**Location:** Top-right corner of the dashboard

**What you'll see:**
- If daemon is running: `Daemon: ⠋ Running` (spinner rotates through ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏)
- If daemon is offline: `Daemon: Offline` (static, red text)

**How to test:**
```bash
# Watch the spinner animate
./target/release/tempo dashboard

# The spinner should rotate smoothly every ~80ms
```

---

### 3. **Pulsing Timer Borders (Focused View)**

**How to access:**
1. Launch dashboard: `./target/release/tempo dashboard`
2. Press `1` or `f` to enter Focused Session view
3. If you have an active session, the timer box border will pulse

**What you'll see:**
- Border color smoothly transitions between two shades of green
- 2-second breathing cycle (slow, gentle pulsing)
- Only pulses when a session is active

**Color cycle:**
- `CLEAN_GREEN` (RGB 100, 200, 100) → `PRIMARY_FOCUS` (RGB 51, 255, 153) → back

---

### 4. **View Transition Animations**

**How to test:**
```bash
./target/release/tempo dashboard
```

Then try these keyboard shortcuts:

| Key | Action | Animation Type |
|-----|--------|----------------|
| `1` | Focused Session view | Slide Right (from any other view) |
| `2` | Overview Dashboard | Fade In |
| `3` | History Browser | Fade In |
| `4` | Projects Grid | Fade In |
| `Tab` | Cycle through views | Direction varies |
| `ESC` | Exit focused mode | Slide Left |

**What you'll see:**
- Smooth 200ms transitions between views
- Subtle sliding or fading effects
- No jarring view changes

**Test sequence:**
```
1. Press `1` → Focused view slides in from right
2. Press `2` → Overview fades in
3. Press `Tab` → History fades in
4. Press `Tab` → Projects fades in
5. Press `Tab` → Focused slides in from right
```

---

### 5. **Pulsing Active Session Panel (Overview)**

**How to access:**
1. Start a session: `./target/release/tempo session start <project-name>`
2. Launch dashboard: `./target/release/tempo dashboard`
3. Press `2` to view Overview Dashboard
4. Look at the "Active Session" panel (top-left)

**What you'll see:**
- Panel border pulses when session is active
- Border transitions between `PRIMARY_DASHBOARD` (blue) and `PRIMARY_FOCUS` (cyan)
- 2-second breathing cycle
- Static gray border when no session is active

---

## 🎮 Interactive Testing Checklist

### Basic Navigation Test
```bash
./target/release/tempo dashboard
```

- [ ] Dashboard loads smoothly at 60 FPS
- [ ] Press `1` - Focused view appears with smooth transition
- [ ] Press `2` - Overview appears with smooth transition
- [ ] Press `3` - History appears with smooth transition
- [ ] Press `4` - Projects appears with smooth transition
- [ ] Press `Tab` multiple times - Views cycle smoothly
- [ ] Press `ESC` - Returns to previous view smoothly
- [ ] Press `q` - Exits cleanly

### Animation Features Test
```bash
./target/release/tempo dashboard
```

- [ ] **Daemon spinner**: Top-right shows rotating Braille spinner (if daemon running)
- [ ] **Timer pulsing**: Press `1`, timer border pulses if session active
- [ ] **Panel pulsing**: Press `2`, active session panel border pulses
- [ ] **Smooth movement**: All UI feels smooth and responsive
- [ ] **No lag**: No stuttering or frame drops

### With Active Session Test
```bash
# Start a test session
./target/release/tempo session start test-project

# Launch dashboard
./target/release/tempo dashboard
```

- [ ] Press `1` - Large timer has pulsing green border
- [ ] Timer counts up smoothly every second
- [ ] Press `2` - Active session panel has pulsing border
- [ ] Project name displays correctly
- [ ] Time displays correctly

---

## 🔍 Performance Testing

### CPU Usage Check
```bash
# Terminal 1: Run dashboard
./target/release/tempo dashboard

# Terminal 2: Monitor CPU
top -pid $(pgrep tempo)
```

**Expected:**
- CPU usage: ~2-5% idle
- No spikes or sustained high usage
- Smooth rendering even with low CPU

### Memory Check
```bash
# Check memory usage
ps aux | grep tempo
```

**Expected:**
- Memory usage: ~5-15 MB
- No memory leaks over time

---

## 🎨 Visual Comparison

### Before (10 FPS)
- Choppy updates every 100ms
- Static borders (no pulsing)
- Instant view switches (jarring)
- No loading indicators

### After (60 FPS)
- Smooth updates every 16ms
- Breathing border effects on active sessions
- Smooth 200ms view transitions
- Animated spinners for status

---

## 🐛 Troubleshooting

### Animation not visible
```bash
# Make sure you're running the release build
cargo build --release
./target/release/tempo dashboard
```

### Choppy animations
```bash
# Check terminal emulator performance
# Try a different terminal (iTerm2, Alacritty, etc.)
# Ensure terminal size is reasonable (not tiny)
```

### No pulsing borders
```bash
# Start a session first
./target/release/tempo session start my-project

# Then launch dashboard
./target/release/tempo dashboard

# Press `1` for focused view - you should see pulsing timer border
```

### Daemon spinner not showing
```bash
# Start the daemon
./target/release/tempo daemon start

# Launch dashboard
./target/release/tempo dashboard

# Look at top-right corner - you should see: Daemon: ⠋ Running
```

---

## 📹 Recording a Demo

Want to record the animations?

### Using asciinema
```bash
# Install asciinema
brew install asciinema

# Record session
asciinema rec tempo-demo.cast

# Run dashboard
./target/release/tempo dashboard

# Navigate around, test animations
# Press Ctrl+D when done

# Play back
asciinema play tempo-demo.cast
```

### Using screen recording
```bash
# macOS: QuickTime Player or Screenshot.app
# Record terminal window while using dashboard
```

---

## ✅ Expected Results Summary

After running `./target/release/tempo dashboard`, you should see:

1. ✨ Buttery smooth 60 FPS rendering
2. 🎯 Rotating Braille spinner next to "Daemon: Running" (if daemon active)
3. 💚 Pulsing green borders on active timer (Focused view, press `1`)
4. 💙 Pulsing blue borders on active session panel (Overview, press `2`)
5. 🎬 Smooth 200ms transitions when switching views (press `1-4` or `Tab`)
6. 🎮 Responsive, fluid navigation
7. 🚀 Professional "Claude Code feel"

---

## 🎓 Advanced Testing

### Test Different Terminal Sizes
```bash
# Resize terminal window while dashboard is running
# Animations should adapt smoothly
./target/release/tempo dashboard
```

### Test with Multiple Sessions
```bash
# Create multiple projects
./target/release/tempo project create proj1 ~/proj1
./target/release/tempo project create proj2 ~/proj2

# Start session
./target/release/tempo session start proj1

# Launch dashboard and observe animations
./target/release/tempo dashboard
```

### Stress Test (Long Running)
```bash
# Leave dashboard running for 5+ minutes
./target/release/tempo dashboard

# Verify:
# - No memory leaks
# - Animations still smooth
# - CPU usage stays low
```

---

## 💡 Tips

1. **Use a modern terminal** - iTerm2, Alacritty, or kitty for best performance
2. **Full screen** - View animations best in full screen mode
3. **Dark theme** - Animations designed for dark backgrounds
4. **Watch closely** - Some animations are subtle (by design!)
5. **Compare views** - Switch between views to see transitions

---

## 📊 Benchmark Comparison

### Frame Rate
- **Before:** ~10 FPS (100ms event polling)
- **After:** 60 FPS (16ms frame intervals)
- **Improvement:** 6x smoother

### Transition Time
- **Before:** 0ms (instant, jarring)
- **After:** 200ms (smooth, professional)

### Visual Feedback
- **Before:** Static UI
- **After:** Pulsing borders, animated spinners, smooth transitions

---

Enjoy testing the animations! 🎉