feat: exclude camera entities from stale tracking and remove stale display (#139)

Author: fx

src/components/BinarySensorCard.tsx

@@ -118,11 +118,11 @@ function BinarySensorCardComponent({
         onDelete={onDelete}
         onConfigure={isEditMode && item ? () => setConfigOpen(true) : undefined}
         hasConfiguration={!!item}
-        title={isStale ? 'Entity data may be outdated' : undefined}
+        title={undefined}
         style={{
           backgroundColor: isOn && !isSelected ? 'var(--amber-3)' : undefined,
-          borderColor: isOn && !isSelected && !isStale ? 'var(--amber-6)' : undefined,
-          borderWidth: isSelected || isOn || isStale ? '2px' : '1px',
+          borderColor: isOn && !isSelected ? 'var(--amber-6)' : undefined,
+          borderWidth: isSelected || isOn ? '2px' : '1px',
         }}
       >
         <Flex direction="column" align="center" justify="center" gap="2">

src/components/ButtonCard.tsx

@@ -85,18 +85,18 @@ function ButtonCardComponent({
       onSelect={() => onSelect?.(!isSelected)}
       onDelete={onDelete}
       onClick={handleClick}
-      title={error || (isStale ? 'Entity data may be outdated' : undefined)}
+      title={error || undefined}
       style={{
         backgroundColor: isOn && !isSelected && !error ? 'var(--amber-3)' : undefined,
-        borderColor: isOn && !isSelected && !error && !isStale ? 'var(--amber-6)' : undefined,
-        borderWidth: isSelected || error || isOn || isStale ? '2px' : '1px',
+        borderColor: isOn && !isSelected && !error ? 'var(--amber-6)' : undefined,
+        borderWidth: isSelected || error || isOn ? '2px' : '1px',
       }}
     >
       <Flex direction="column" align="center" justify="center" gap="2">
         <GridCard.Icon>
           <span
             style={{
-              color: isStale ? 'var(--orange-9)' : isOn ? 'var(--amber-9)' : 'var(--gray-9)',
+              color: isOn ? 'var(--amber-9)' : 'var(--gray-9)',
               transform: `scale(${iconScale})`,
               display: 'flex',
               alignItems: 'center',

src/components/CameraCard.css

@@ -0,0 +1,23 @@
+@keyframes recording-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.recording-dot {
+  width: 0.625em;
+  height: 0.625em;
+  background-color: #dc2626;
+  border-radius: 50%;
+  display: inline-block;
+  animation: recording-pulse 1.5s ease-in-out infinite;
+}

src/components/CameraCard.tsx

@@ -1,17 +1,19 @@
-import { Flex, Text, Button } from '@radix-ui/themes'
+import { Flex, Text, Button, Spinner } from '@radix-ui/themes'
 import {
   VideoIcon,
   ReloadIcon,
   EnterFullScreenIcon,
   SpeakerLoudIcon,
   SpeakerOffIcon,
+  ExclamationTriangleIcon,
 } from '@radix-ui/react-icons'
-import { useEntity, useWebRTC } from '~/hooks'
+import { useEntity, useWebRTC, useIsConnecting } from '~/hooks'
 import { memo, useMemo, useState, useRef, useCallback } from 'react'
 import { SkeletonCard, ErrorDisplay, FullscreenModal } from './ui'
 import { GridCardWithComponents as GridCard } from './GridCard'
 import { useDashboardStore } from '~/store'
 import { KeepAlive } from './KeepAlive'
+import './CameraCard.css'
 
 interface CameraCardProps {
   entityId: string
@@ -43,6 +45,8 @@ function CameraControls({
   supportsStream,
   isEditMode,
   isMuted,
+  isReconnecting,
+  hasFrameWarning,
   handleToggleMute,
   handleVideoFullscreen,
   size,
@@ -57,6 +61,8 @@ function CameraControls({
   supportsStream: boolean
   isEditMode: boolean
   isMuted: boolean
+  isReconnecting: boolean
+  hasFrameWarning: boolean
   handleToggleMute: (e: React.MouseEvent) => void
   handleVideoFullscreen: (e: React.MouseEvent) => void
   size: 'small' | 'medium' | 'large'
@@ -100,17 +106,31 @@ function CameraControls({
             lineHeight: 1.2,
             textTransform: 'uppercase',
             fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: `${0.4 * scaleFactor}em`,
           }}
         >
+          {isReconnecting || (supportsStream && !isStreaming && !streamError) ? (
+            <Spinner size="1" />
+          ) : hasFrameWarning && !streamError ? (
+            <ExclamationTriangleIcon style={{ color: '#f59e0b', width: '1em', height: '1em' }} />
+          ) : (isRecording || isStreaming) && !streamError ? (
+            <span className="recording-dot" />
+          ) : null}
           {streamError
             ? 'ERROR'
-            : isRecording
-              ? 'RECORDING'
-              : isStreaming
-                ? 'STREAMING'
-                : isIdle
-                  ? 'IDLE'
-                  : entity.state.toUpperCase()}
+            : isReconnecting || (supportsStream && !isStreaming && !streamError)
+              ? 'CONNECTING'
+              : hasFrameWarning
+                ? 'NO SIGNAL'
+                : supportsStream && isStreaming && (isRecording || entity.state === 'streaming')
+                  ? 'RECORDING'
+                  : supportsStream && isStreaming
+                    ? 'STREAMING'
+                    : isIdle
+                      ? 'IDLE'
+                      : entity.state.toUpperCase()}
         </div>
       </div>
 
@@ -191,6 +211,7 @@ function CameraCardComponent({
   const { entity, isConnected, isStale, isLoading: isEntityLoading } = useEntity(entityId)
   const { mode } = useDashboardStore()
   const isEditMode = mode === 'edit'
+  const isReconnecting = useIsConnecting()
   const [isFullscreen, setIsFullscreen] = useState(false)
   const [isMuted, setIsMuted] = useState(true) // Start muted by default
   const normalContainerRef = useRef<HTMLDivElement>(null)
@@ -221,6 +242,7 @@ function CameraCardComponent({
     isStreaming,
     error: streamError,
     retry: retryStream,
+    hasFrameWarning,
   } = useWebRTC({
     entityId,
     enabled: webRTCEnabled,
@@ -297,19 +319,18 @@ function CameraCardComponent({
         isUnavailable={isUnavailable}
         onSelect={() => onSelect?.(!isSelected)}
         onDelete={onDelete}
-        title={streamError || (isStale ? 'Entity data may be outdated' : undefined)}
+        title={streamError || undefined}
         className="camera-card"
         style={{
           backgroundColor:
             (isRecording || isStreaming_) && !isSelected && !streamError
               ? 'var(--blue-3)'
               : undefined,
           borderColor:
-            (isRecording || isStreaming_) && !isSelected && !streamError && !isStale
+            (isRecording || isStreaming_) && !isSelected && !streamError
               ? 'var(--blue-6)'
               : undefined,
-          borderWidth:
-            isSelected || streamError || isRecording || isStreaming_ || isStale ? '2px' : '1px',
+          borderWidth: isSelected || streamError || isRecording || isStreaming_ ? '2px' : '1px',
         }}
       >
         <div style={{ width: '100%', height: '100%', position: 'relative' }}>
@@ -402,13 +423,24 @@ function CameraCardComponent({
                       }}
                     />
                   </KeepAlive>
+                  {!isStreaming && (
+                    <Flex
+                      align="center"
+                      justify="center"
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'var(--gray-3)',
+                      }}
+                    >
+                      <Spinner size="3" />
+                    </Flex>
+                  )}
                 </>
               )}
-              {!isStreaming && !streamError && (
-                <Text size="2" color="gray">
-                  Connecting...
-                </Text>
-              )}
             </div>
           ) : (
             <Flex
@@ -420,12 +452,8 @@ function CameraCardComponent({
               <GridCard.Icon>
                 <VideoIcon
                   style={{
-                    color: isStale
-                      ? 'var(--orange-9)'
-                      : isRecording || isStreaming_
-                        ? 'var(--blue-9)'
-                        : 'var(--gray-9)',
-                    opacity: isStale ? 0.6 : 1,
+                    color: isRecording || isStreaming_ ? 'var(--blue-9)' : 'var(--gray-9)',
+                    opacity: 1,
                     transition: 'opacity 0.2s ease',
                     width: 20,
                     height: 20,
@@ -454,6 +482,8 @@ function CameraCardComponent({
               supportsStream={supportsStream}
               isEditMode={isEditMode}
               isMuted={isMuted}
+              isReconnecting={isReconnecting}
+              hasFrameWarning={hasFrameWarning}
               handleToggleMute={handleToggleMute}
               handleVideoFullscreen={handleVideoFullscreen}
               size={size}
@@ -508,6 +538,8 @@ function CameraCardComponent({
             supportsStream={supportsStream}
             isEditMode={isEditMode}
             isMuted={isMuted}
+            isReconnecting={isReconnecting}
+            hasFrameWarning={hasFrameWarning}
             handleToggleMute={handleToggleMute}
             handleVideoFullscreen={handleVideoFullscreen}
             size="large"

src/components/ClimateCard.test.tsx

@@ -456,7 +456,7 @@ describe('ClimateCard', () => {
       expect(card).toHaveAttribute('title', 'Service call failed')
     })
 
-    it('shows stale state with dashed border', () => {
+    it('does not show stale state visually (stale display removed)', () => {
       const entity = createMockClimateEntity()
       ;(useEntity as any).mockReturnValue({
         entity,
@@ -467,9 +467,8 @@ describe('ClimateCard', () => {
       renderWithTheme(<ClimateCard entityId="climate.test_thermostat" />)
 
       const card = screen.getByText('Test Thermostat').closest('.climate-card')
-      expect(card).toHaveStyle({
-        borderColor: 'var(--orange-7)',
-        borderWidth: '2px',
+      // Stale state no longer shows visual indication
+      expect(card).not.toHaveStyle({
         borderStyle: 'dashed',
       })
     })

src/components/ClimateCard.tsx

@@ -472,7 +472,7 @@ function ClimateCardComponent({
       isSelected={isSelected}
       onSelect={() => onSelect?.(!isSelected)}
       onDelete={onDelete}
-      title={error || (isStale ? 'Entity data may be outdated' : undefined)}
+      title={error || undefined}
       className="climate-card"
     >
       <Flex