UI Modernization & Native Sonos Integration 🎵🎨

A massive structural and visual update has landed! The Edge-AI Home Monitoring System dashboard has been rewritten into a production-grade, single-page interface using the modern Inter typeface family. Alongside this visual overhaul, we are introducing native, local-only support for Sonos Smart Audio Devices.

What’s New

1. High-End Minimalist UI & CSS Token Architecture

The new interface shifts away from crowded layouts to a highly scannable, component-driven architecture featuring a strict color and spacing utility system built directly into :root.

Unified Palette System: Built entirely on minimal token foundations: light-mode canvas backgrounds (#fafafa), precise surface modules (#ffffff), and structural crisp border outlines (#e7e7e7 / #d9d9d9).
Blur-Effects Navigation Header (.topbar): A sticky system header utilizing backdrop-filter: blur(8px) that embeds the new brand mark (A Home) alongside a live status strip displaying the total device count, registered automations, and an immediate visual green heartbeat indicator (.live-dot).
Decoupled Grid Control (.grid): Devices are rendered dynamically using a responsive auto-fill layout (minmax(240px, 1fr)) with explicit styling classes for device actions (.btn.on for soft green feedback, .btn.off for soft red, and .btn.accent for special triggers).
Asynchronous AI Assistant Component (.ai-panel): A dedicated section housing the local LLM interaction logic, optimized with a smooth CSS-animated text typing loop (@keyframes dotfade) to indicate processing states without blocking UI interactions.

2. Native Sonos Smart Audio Core Integration

Audio control joins our local device tree. The system now natively communicates with Sonos devices over the local network via unified backend hooks, matching our privacy-first design patterns.

The control grid maps the specific target API endpoints directly to native UI inputs, enabling immediate transmission of core execution parameters:

play — Resumes audio streaming (.btn.on)
pause — Pauses current media layout tracking
stop — Breaks audio buffering completely (.btn.off)
volume_up & volume_down — Alters hardware volume steps

Real-Time “Now Playing” UI Subview

Sonos control cards now dynamically build and inject an interactive media HUD element (.now-playing).

Dynamic Media Binding: Communicates with the new /api/music/current endpoint via explicit POST JSON payloads ({ room, type, number, command: 'get', device }).
Visual Playback Flags: Implements dynamic active toggles (.now-playing.playing) that shift asset opacity states depending on network audio feedback.
Non-Blocking Control Pulls: The inline manual update button (.np-refresh) relies on an isolated asynchronous CSS loop wrapper (@keyframes spin) allowing updates without triggering full dashboard asset re-renders.