* **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" }
      ]
    }
  ]
}

```