⚡ Real-time Dashboard
Live collaboration with real-time updates, presence tracking, and instant notifications powered by WebSockets.
Overview
Real-time Dashboard provides:
- Live query result updates
- User presence tracking ("who's online")
- Collaborative editing indicators
- Instant notifications
- Real-time chat badges
- Live agent status updates
📦 Plan Requirement
Real-time features are available in Scale plan only.
Features
Presence Tracking
See who's online and what they're working on:
- Online/Offline status
- Last seen timestamp
- Current workspace/page
- Idle detection (inactive after 5 minutes)
- Avatar display with status indicator
// User presence states
{
"status": "online", // online, offline, idle
"user_id": 123,
"workspace": "queries",
"last_seen": "2024-01-10T15:30:00Z",
"current_page": "/queries/456"
}
Live Query Updates
Query results update automatically:
- New data appears instantly
- No manual refresh needed
- Show "updating" indicator
- Smooth transitions
- Conflict handling for concurrent edits
Real-time Notifications
Instant alerts for important events:
- Query completion
- Agent execution results
- Approval requests
- New chat messages
- System alerts
- Workflow triggers
Chat Message Badges
Live chat support indicators:
- Unread message count
- New chat session alerts
- Updates without page refresh
- Auto-clear when viewed
WebSocket Connection
Establishing Connection
// Frontend connects automatically
const ws = new WebSocket('ws://localhost:8000/ws');
ws.onopen = () => {
console.log('Real-time connection established');
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
handleRealtimeUpdate(data);
};
Connection States
- Connecting: Yellow indicator, attempting connection
- Connected: Green indicator, live updates active
- Disconnected: Red indicator, auto-reconnect in progress
- Error: Fallback to polling mode
Real-time Events
Presence Events
// User comes online
{
"type": "presence_update",
"user_id": 123,
"status": "online",
"workspace": "queries"
}
// User goes offline
{
"type": "presence_update",
"user_id": 123,
"status": "offline",
"last_seen": "2024-01-10T15:30:00Z"
}
Query Events
// Query started
{
"type": "query_started",
"query_id": 456,
"started_by": 123
}
// Query completed
{
"type": "query_completed",
"query_id": 456,
"result_count": 100,
"execution_time": 2.5
}
Agent Events
// Agent execution
{
"type": "agent_executed",
"agent_id": 789,
"status": "completed",
"insights_found": 3,
"needs_approval": false
}
Chat Events
// New chat message
{
"type": "new_chat_message",
"session_id": 999,
"message": "Hello, I need help",
"sender": "visitor"
}
// New chat session
{
"type": "new_chat_session",
"session_id": 1000,
"visitor_location": "New York, US"
}
Collaborative Features
Concurrent Editing Protection
When multiple users edit the same resource:
- Show "User X is editing" banner
- Lock certain fields to prevent conflicts
- Merge changes intelligently
- Warn before overwriting
Live Cursors
See where teammates are working (premium feature):
- Colored cursor with name tag
- Real-time position updates
- Selection highlighting
- Collaborative query building
Performance Optimization
Throttling
Prevent overwhelming clients:
- Batch rapid updates
- Debounce presence updates (10s)
- Rate limit notifications
- Buffer chat messages
Selective Subscriptions
Only receive relevant updates:
// Subscribe to specific channels
{
"action": "subscribe",
"channels": [
"presence",
"queries",
"chat_sessions"
]
}
Fallback Mechanisms
Connection Failures
When WebSocket unavailable:
- Automatic retry with exponential backoff
- Fall back to HTTP polling (30s interval)
- Show degraded mode indicator
- Queue updates for when reconnected
Browser Compatibility
- Modern browsers: Full WebSocket support
- Older browsers: Long-polling fallback
- Mobile: Optimized for battery life
- Offline: Queue for sync
Dashboard Widgets
Online Users Widget
Shows team activity:
- List of online users
- Profile pictures
- Status indicators
- Current activity
- Click to view details
Live Activity Feed
Recent team actions:
- Queries executed
- Templates created
- Agents triggered
- Files uploaded
- Auto-scroll to latest
Best Practices
- Stable Connection: Use wired connection for best experience
- Browser Tabs: Limit open tabs for optimal performance
- Notification Preferences: Configure which events you want real-time
- Mobile Usage: Aware of battery drain on mobile devices
- Team Awareness: Check presence before editing shared resources
⚠️ Firewall Configuration
WebSocket connections require port 8000. Ensure your firewall allows WebSocket traffic for full real-time functionality.
Monitoring
Connection Health
System admins can monitor:
- Active WebSocket connections
- Connection duration
- Reconnection attempts
- Failed connections
- Bandwidth usage
Performance Metrics
- Message delivery time
- Update propagation delay
- Connection stability
- Client-side errors
Permissions
Required for real-time features:
- Scale plan subscription
- WebSocket-enabled infrastructure