Usage Dashboard

Keyboard: Cmd+Shift+U (macOS) / Ctrl+Shift+U (Windows/Linux)
Menu: View → Usage Dashboard

// Keyboard shortcuts
Cmd+Shift+[ - Previous tab
Cmd+Shift+] - Next tab
Arrow keys  - Navigate when tabs focused

type StatsTimeRange = 'day' | 'week' | 'month' | 'quarter' | 'year' | 'all'

interface HeatmapCell {
  day: string      // Day of week
  hour: number     // 0-23
  count: number    // Query count
  intensity: 0-1   // Normalized for color
}

interface AgentComparisonData {
  provider: string       // claude-code, codex, etc.
  count: number         // Query count
  duration: number      // Total duration (ms)
  avgDuration: number   // Average duration (ms)
}

interface SourceData {
  source: 'User' | 'Auto Run'
  count: number
  percentage: number
}

interface PeakHourData {
  hour: number        // 0-23
  count: number       // Query count
  label: string       // "12 AM", "1 PM", etc.
}

interface DurationTrendData {
  date: string          // YYYY-MM-DD
  avgDuration: number   // Average duration (ms)
  count: number         // Query count
}

interface AgentUsageData {
  date: string
  [sessionId: string]: number  // Query count per agent
}

interface StatsAggregation {
  totalQueries: number
  totalDuration: number
  avgDuration: number
  byAgent: Record<string, { count: number; duration: number }>
  bySource: { user: number; auto: number }
  byLocation: { local: number; remote: number }
  byDay: Array<{ date: string; count: number; duration: number }>
  byHour: Array<{ hour: number; count: number; duration: number }>
  totalSessions: number
  sessionsByAgent: Record<string, number>
  avgSessionDuration: number
}

// Subscribe to stats updates
const unsubscribe = window.maestro.stats.onStatsUpdate(() => {
  // Debounced refresh (1 second)
  fetchStats(true)  // isRealTimeUpdate = true
})

// Show "Updated" indicator briefly
setShowNewDataIndicator(true)
setTimeout(() => setShowNewDataIndicator(false), 3000)

// Export for selected time range
const csv = await window.maestro.stats.exportCsv(timeRange)

// CSV format:
// timestamp,agent_id,agent_name,provider,duration_ms,source,location,session_id
// 2024-01-15T10:30:00Z,abc123,My Agent,claude-code,1250,user,local,xyz789
// ...

// Section navigation
interface SectionNavigation {
  ArrowUp: () => void      // Previous section
  ArrowDown: () => void    // Next section  
  Home: () => void         // First section
  End: () => void          // Last section
  Tab: () => void          // Focus next section
}

// Enable in Settings → Accessibility
colorBlindMode: boolean

// Uses deuteranopia-friendly colors:
- Blue (#0066CC)
- Orange (#FF6600)  
- Yellow (#FFCC00)
- Purple (#9933CC)

// Indexed database queries
CREATE INDEX idx_stats_timestamp ON ai_stats(timestamp)
CREATE INDEX idx_stats_agent ON ai_stats(agent_id)
CREATE INDEX idx_stats_source ON ai_stats(source)

// Typical query times:
// - Day range: <10ms
// - Week range: <50ms
// - Month range: <200ms  
// - All time: <500ms

// Virtual scrolling for long tables
// Debounced chart rebuilds (300ms)
// Memoized expensive calculations
// ResizeObserver for responsive charts

// Performance thresholds
const PERFORMANCE_THRESHOLDS = {
  DASHBOARD_LOAD: 1000,      // Max initial load time
  CHART_RENDER: 500,         // Max chart render time
  INTERACTION_RESPONSE: 100   // Max UI response time
}

// Cleanup on unmount
useEffect(() => {
  return () => {
    unsubscribe()           // Stop stats updates
    clearTimeout(timers)    // Clear debounce timers
    resizeObserver.disconnect()  // Stop resize observer
  }
}, [])

// Display database size
const dbSize = await window.maestro.stats.getDatabaseSize()

formatDatabaseSize(dbSize)
// "1.5 MB" or "125 KB"

<span className="beta-badge">Beta</span>