webcontrol/PRDs/Web Control Page - PRD.md

• 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)

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