fix(dashboard): pre-select active model, clickable labels, keyboard shortcuts

- ModelQuickControl: dropdown pre-selects the currently active model
- ModelQuickControl: label count is clickable — opens labels dialog
- DashboardPage: M key toggles smart mode, R key toggles recording
- LiveFeedPage: R key toggles recording
- Keyboard handlers skip events when focused on input/select/textarea

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: alireza787b

dashboard/src/components/ModelQuickControl.js

@@ -11,10 +11,11 @@
  * Design: Matches RecordingQuickControl / OSDToggle pattern.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box, Chip, Select, MenuItem, FormControl, InputLabel, IconButton,
   Typography, Tooltip, CircularProgress, Button,
+  Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
@@ -23,14 +24,16 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import MemoryIcon from '@mui/icons-material/Memory';
 import KeyboardIcon from '@mui/icons-material/Keyboard';
 import { Link } from 'react-router-dom';
-import { useActiveModel, useModels, useSwitchModel } from '../hooks/useModels';
+import { useActiveModel, useModels, useSwitchModel, useModelLabels } from '../hooks/useModels';
 
 const ModelQuickControl = () => {
   const { activeModel, runtime, loading: activeLoading } = useActiveModel(5000);
   const { models, loading: modelsLoading } = useModels(15000);
   const { switchModel, switching } = useSwitchModel();
+  const { fetchLabels, loading: labelsLoading } = useModelLabels();
   const [selectedModelPath, setSelectedModelPath] = useState('');
   const [selectedDevice, setSelectedDevice] = useState('auto');
+  const [labelsDialog, setLabelsDialog] = useState({ open: false, labels: [], modelName: '' });
 
   // activeModel is the full active_model_summary object from /api/models/active
   const modelName = runtime?.model_name || activeModel?.model_name || 'None';
@@ -44,10 +47,26 @@ const ModelQuickControl = () => {
 
   const modelList = models ? Object.entries(models) : [];
 
+  // Pre-select the active model in the dropdown when it changes
+  const activeModelPath = activeModel?.model_path || '';
+  useEffect(() => {
+    if (activeModelPath) {
+      setSelectedModelPath(activeModelPath);
+    }
+  }, [activeModelPath]);
+
   const handleSwitch = async () => {
     if (!selectedModelPath) return;
     await switchModel(selectedModelPath, selectedDevice);
-    setSelectedModelPath('');
+  };
+
+  const handleViewLabels = async () => {
+    const modelId = activeModel?.model_id;
+    if (!modelId) return;
+    const result = await fetchLabels(modelId);
+    if (result.success) {
+      setLabelsDialog({ open: true, labels: result.labels, modelName: modelName });
+    }
   };
 
   if (activeLoading) {
@@ -110,9 +129,20 @@ const ModelQuickControl = () => {
         <Typography variant="caption" color="text.secondary" sx={{ fontSize: 10 }}>
           Task: <b>{task}</b>
         </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ fontSize: 10 }}>
-          Classes: <b>{numLabels}</b>
-        </Typography>
+        <Tooltip title={hasModel ? 'Click to view class labels' : ''}>
+          <Typography
+            variant="caption"
+            color={hasModel ? 'primary' : 'text.secondary'}
+            onClick={hasModel ? handleViewLabels : undefined}
+            sx={{
+              fontSize: 10,
+              cursor: hasModel ? 'pointer' : 'default',
+              '&:hover': hasModel ? { textDecoration: 'underline' } : {},
+            }}
+          >
+            Classes: <b>{labelsLoading ? '...' : numLabels}</b>
+          </Typography>
+        </Tooltip>
       </Box>
 
       {/* Quick Switch Row */}
@@ -184,6 +214,37 @@ const ModelQuickControl = () => {
           </Typography>
         </Tooltip>
       </Box>
+
+      {/* Labels Dialog */}
+      <Dialog
+        open={labelsDialog.open}
+        onClose={() => setLabelsDialog({ open: false, labels: [], modelName: '' })}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>Labels: {labelsDialog.modelName}</DialogTitle>
+        <DialogContent dividers>
+          {labelsDialog.labels.length === 0 ? (
+            <Typography color="text.secondary">No labels available.</Typography>
+          ) : (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {labelsDialog.labels.map((item, idx) => (
+                <Chip
+                  key={idx}
+                  label={typeof item === 'object' ? `${item.class_id}: ${item.label}` : `${idx}: ${item}`}
+                  size="small"
+                  variant="outlined"
+                />
+              ))}
+            </Box>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setLabelsDialog({ open: false, labels: [], modelName: '' })}>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };

dashboard/src/pages/DashboardPage.js

@@ -1,5 +1,5 @@
 // dashboard/src/pages/DashboardPage.js
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Container, Typography, CircularProgress, Box, Grid, Snackbar, Alert,
   FormControl, InputLabel, Select, MenuItem, Card, CardContent,
@@ -183,6 +183,27 @@ const DashboardPage = () => {
 
   const handleSnackbarClose = () => setSnackbarOpen(false);
 
+  // Keyboard shortcuts: M = toggle smart mode, R = toggle recording
+  const handleKeyboardShortcut = useCallback((e) => {
+    const tag = e.target.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || e.target.isContentEditable) return;
+
+    const key = e.key.toLowerCase();
+    if (key === 'm') {
+      handleToggleSmartMode();
+    } else if (key === 'r') {
+      fetch(endpoints.recordingToggle, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      }).catch((err) => console.error('Recording toggle failed:', err));
+    }
+  }, []);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyboardShortcut);
+    return () => window.removeEventListener('keydown', handleKeyboardShortcut);
+  }, [handleKeyboardShortcut]);
+
   useEffect(() => {
     if (streamingProtocol === 'websocket' || streamingProtocol === 'webrtc' || streamingProtocol === 'auto') {
       setLoading(false);

dashboard/src/pages/LiveFeedPage.js

@@ -1,5 +1,5 @@
 // dashboard/src/pages/LiveFeedPage.js
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Container,
   Typography,
@@ -22,7 +22,7 @@ import GStreamerQGCPanel from '../components/GStreamerQGCPanel';
 import StreamingStats from '../components/StreamingStats';
 import RecordingQuickControl from '../components/RecordingQuickControl';
 import RecordingIndicator from '../components/RecordingIndicator';
-import { videoFeed } from '../services/apiEndpoints';
+import { videoFeed, endpoints } from '../services/apiEndpoints';
 
 const LiveFeedPage = () => {
   const [loading, setLoading] = useState(true);
@@ -81,6 +81,23 @@ const LiveFeedPage = () => {
 
   const connectionState = getConnectionState();
 
+  // Keyboard shortcut: R = toggle recording
+  const handleKeyboardShortcut = useCallback((e) => {
+    const tag = e.target.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || e.target.isContentEditable) return;
+    if (e.key.toLowerCase() === 'r') {
+      fetch(endpoints.recordingToggle, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      }).catch((err) => console.error('Recording toggle failed:', err));
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyboardShortcut);
+    return () => window.removeEventListener('keydown', handleKeyboardShortcut);
+  }, [handleKeyboardShortcut]);
+
   useEffect(() => {
     if (streamingProtocol === 'websocket' || streamingProtocol === 'webrtc' || streamingProtocol === 'auto') {
       // WebSocket/WebRTC/Auto manage their own connection state