Remove deprecated files and scripts to streamline the codebase

- Deleted unused API test files, RTSP diagnostic scripts, and development utility scripts to reduce clutter.
- Removed outdated database schema and modularization proposal documents to maintain focus on current architecture.
- Cleaned up configuration files and logging scripts that are no longer in use, enhancing project maintainability.

vision-system-remote/src/widgets/CameraCountWidget.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+interface CameraCountWidgetProps {
+  cameraCount: number
+  machineCount: number
+}
+
+export const CameraCountWidget: React.FC<CameraCountWidgetProps> = ({
+  cameraCount,
+  machineCount,
+}) => {
+  return (
+    <div className="bg-white overflow-hidden shadow rounded-lg">
+      <div className="p-5">
+        <div className="flex items-center">
+          <div className="flex-shrink-0">
+            <div className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+              {cameraCount} Cameras
+            </div>
+          </div>
+        </div>
+        <div className="mt-4">
+          <div className="text-2xl font-semibold text-gray-900">Devices</div>
+          <div className="mt-1 text-sm text-gray-500">{machineCount} Machines</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

vision-system-remote/src/widgets/MqttStatusWidget.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { StatusWidget } from './StatusWidget'
+import type { SystemStatus } from '../services/api'
+
+interface MqttStatusWidgetProps {
+  systemStatus: SystemStatus | null
+}
+
+export const MqttStatusWidget: React.FC<MqttStatusWidgetProps> = ({ systemStatus }) => {
+  const isConnected = systemStatus?.mqtt_connected ?? false
+  const lastMessage = systemStatus?.last_mqtt_message
+
+  return (
+    <StatusWidget
+      title="MQTT Status"
+      status={isConnected}
+      statusText={isConnected ? 'Connected' : 'Disconnected'}
+      subtitle={lastMessage ? `Last: ${new Date(lastMessage).toLocaleTimeString()}` : 'No messages'}
+      icon={
+        <div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
+      }
+    />
+  )
+}
+

vision-system-remote/src/widgets/RecordingsCountWidget.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+interface RecordingsCountWidgetProps {
+  active: number
+  total: number
+}
+
+export const RecordingsCountWidget: React.FC<RecordingsCountWidgetProps> = ({ active, total }) => {
+  return (
+    <div className="bg-white overflow-hidden shadow rounded-lg">
+      <div className="p-5">
+        <div className="flex items-center">
+          <div className="flex-shrink-0">
+            <div className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+              {active} Active
+            </div>
+          </div>
+        </div>
+        <div className="mt-4">
+          <div className="text-2xl font-semibold text-gray-900">Recordings</div>
+          <div className="mt-1 text-sm text-gray-500">Total: {total}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

vision-system-remote/src/widgets/StatusWidget.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+interface StatusWidgetProps {
+  title: string
+  status: boolean
+  statusText?: string
+  subtitle?: string
+  icon?: React.ReactNode
+  className?: string
+}
+
+export const StatusWidget: React.FC<StatusWidgetProps> = ({
+  title,
+  status,
+  statusText,
+  subtitle,
+  icon,
+  className = '',
+}) => {
+  return (
+    <div className={`bg-white overflow-hidden shadow rounded-lg ${className}`}>
+      <div className="p-5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            {icon && <div className="flex-shrink-0">{icon}</div>}
+            <div className="flex-shrink-0">
+              <div
+                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                  status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                }`}
+              >
+                {statusText || (status ? 'Online' : 'Offline')}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4">
+          <div className="text-2xl font-semibold text-gray-900">{title}</div>
+          {subtitle && (
+            <div className="mt-1 text-sm text-gray-500">{subtitle}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+

vision-system-remote/src/widgets/SystemHealthWidget.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { StatusWidget } from './StatusWidget'
+import { formatUptime } from '../services/api'
+import type { SystemStatus } from '../services/api'
+
+interface SystemHealthWidgetProps {
+  systemStatus: SystemStatus | null
+}
+
+export const SystemHealthWidget: React.FC<SystemHealthWidgetProps> = ({ systemStatus }) => {
+  const isOnline = systemStatus?.system_started ?? false
+  const uptime = systemStatus?.uptime_seconds ?? 0
+
+  return (
+    <StatusWidget
+      title="System Status"
+      status={isOnline}
+      statusText={isOnline ? 'Online' : 'Offline'}
+      subtitle={uptime > 0 ? `Uptime: ${formatUptime(uptime)}` : undefined}
+      icon={
+        <div className={`w-3 h-3 rounded-full ${isOnline ? 'bg-green-500' : 'bg-red-500'}`} />
+      }
+    />
+  )
+}
+