Major updates and improvements to BZZZ system

- Updated configuration and deployment files
- Improved system architecture and components
- Enhanced documentation and testing
- Fixed various issues and added new features

🤖 Generated with [Claude Code](https://claude.ai/code)

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

deployments/bare-metal/config-ui/app/components/ThemeToggle.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(true) // Default to dark mode
+
+  useEffect(() => {
+    // Check for saved theme preference or default to dark
+    const savedTheme = localStorage.getItem('chorus-theme')
+    const prefersDark = !savedTheme || savedTheme === 'dark'
+    
+    setIsDark(prefersDark)
+    updateTheme(prefersDark)
+  }, [])
+
+  const updateTheme = (dark: boolean) => {
+    const html = document.documentElement
+    if (dark) {
+      html.classList.add('dark')
+      html.classList.remove('light')
+    } else {
+      html.classList.remove('dark')
+      html.classList.add('light')
+    }
+  }
+
+  const toggleTheme = () => {
+    const newIsDark = !isDark
+    setIsDark(newIsDark)
+    updateTheme(newIsDark)
+    
+    // Save preference
+    localStorage.setItem('chorus-theme', newIsDark ? 'dark' : 'light')
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="btn-text flex items-center space-x-2 p-2 rounded-md transition-colors duration-200"
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
+    >
+      {isDark ? (
+        <>
+          <SunIcon className="h-4 w-4" />
+          <span className="text-xs">Light</span>
+        </>
+      ) : (
+        <>
+          <MoonIcon className="h-4 w-4" />
+          <span className="text-xs">Dark</span>
+        </>
+      )}
+    </button>
+  )
+}

deployments/bare-metal/config-ui/app/components/VersionDisplay.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface VersionInfo {
+  version: string
+  full_version: string
+  timestamp: number
+}
+
+export default function VersionDisplay() {
+  const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null)
+
+  useEffect(() => {
+    const fetchVersion = async () => {
+      try {
+        const response = await fetch('/api/version')
+        if (response.ok) {
+          const data = await response.json()
+          setVersionInfo(data)
+        }
+      } catch (error) {
+        console.warn('Failed to fetch version:', error)
+      }
+    }
+
+    fetchVersion()
+  }, [])
+
+  if (!versionInfo) {
+    return (
+      <div className="text-xs text-gray-500">
+        BZZZ
+      </div>
+    )
+  }
+
+  return (
+    <div className="text-xs text-gray-500">
+      BZZZ {versionInfo.full_version}
+    </div>
+  )
+}