Init Commit

PRDs/Web Control Page - PRD.md

@@ -0,0 +1,72 @@
+* **Frontend Framework:** Vue 3 (Composition API) is lightweight, highly reactive, and very popular in the Home Assistant community.
+* **Build Tool:** Vite provides an incredibly fast development environment.
+* **Home Assistant Integration:** The official `home-assistant-js-websocket` library. This allows real-time state updates and entity control without needing to constantly poll the REST API.
+* **Configuration:** A static `config.json` or `config.yaml` file hosted in the public directory. This allows you to edit the rooms and rotation speed without rebuilding the entire application.
+* **Hosting:** Since it's a frontend-only SPA, it can be hosted on any lightweight web server (NGINX, Apache, or even directly as a Home Assistant Add-on).
+
+Here is the initial draft of the PRD based on your requirements.
+
+---
+
+# Product Requirements Document (PRD): Dynamic Home Assistant Room Dashboard
+
+## 1. Project Overview
+
+A web-based, dynamic dashboard interfacing with the Home Assistant API. The application provides room-by-room view and control of smart home entities. It features a tabbed navigation system with an automated "Rotate Rooms" mode, allowing the display to cycle through configured rooms at a defined interval.
+
+## 2. Core Features
+
+### 2.1 Configuration-Driven Architecture
+
+* **External Config File:** The application will load a `config.json` (or YAML) file at runtime.
+* **Room Management:** Users can create, edit, or remove rooms entirely via the config file without altering the codebase.
+* **Entity Mapping:** Each room in the config will specify which Home Assistant entity IDs to display and what type of control they require (e.g., light toggle, climate control, sensor readout).
+* **Rotation Interval:** The duration (in seconds) that each room is displayed during the rotation cycle will be defined in the config.
+
+### 2.2 Navigation and UI
+
+* **Room Tabs:** A persistent navigation bar displaying tabs for each configured room, plus a dedicated "Rotate Rooms" tab.
+* **Manual Selection:** Clicking a specific room tab immediately stops any active rotation and displays that room's entities.
+* **Dynamic Rotation Mode:** * Clicking the "Rotate Rooms" tab initiates the automatic cycle.
+* **Visual Indicators:** When active, the "Rotate Rooms" tab will have a distinct active state (e.g., bold border, primary color). Simultaneously, the tab of the *currently displayed room* will be highlighted in a lighter, secondary tone to provide clear context on what is being viewed.
+
+
+
+### 2.3 Home Assistant Integration
+
+* **Real-Time State:** The dashboard will connect to Home Assistant via WebSockets to listen for state changes and update the UI instantly.
+* **Entity Control:** Users can interact with the UI elements (buttons, sliders) to send service calls back to Home Assistant (e.g., `light.turn_on`, `climate.set_temperature`).
+
+## 3. Initial Scope (Version 1.0)
+
+* **Default Rooms:** The initial configuration will ship with three predefined rooms (e.g., Living Room, Kitchen, Bedroom).
+* **Supported Entity Types:** Basic UI components for Lights (toggle/brightness), Switches (toggle), and Sensors (read-only values).
+
+## 4. Proposed Configuration Structure (Example)
+
+```json
+{
+  "settings": {
+    "rotationIntervalSeconds": 15
+  },
+  "rooms": [
+    {
+      "id": "living_room",
+      "name": "Living Room",
+      "entities": [
+        { "entity_id": "light.living_room_main", "type": "light" },
+        { "entity_id": "sensor.living_room_temperature", "type": "sensor" }
+      ]
+    },
+    {
+      "id": "kitchen",
+      "name": "Kitchen",
+      "entities": [
+        { "entity_id": "switch.kitchen_coffee_maker", "type": "switch" }
+      ]
+    }
+  ]
+}
+
+```
+