Add Lovelace strategies (dashboard, view, section) for dynamic UI generation

[raman325]

Summary

Adds Lovelace dashboard, view, and section strategies for Keymaster to dynamically generate the UI, replacing the current copy/paste YAML workflow.

Proposed change

Lovelace strategies allow custom frontend modules to auto-generate dashboard views. This PR extracts lovelace generation code and adds WebSocket commands that return configs to the frontend. A TypeScript module registers the keymaster strategy at dashboard, view, and section levels.

Key features:

• Dashboard strategy - Fetches all Keymaster config entries and creates a view per lock (sorted alphabetically)
• View strategy - Generates complete view with badges and section strategies for code slots
• Section strategy - Generates individual code slot sections (enables lazy loading)
• Two identifiers supported at view/section level:
  • lock_name - User-friendly option for manual configuration
  • config_entry_id - Internal use by dashboard/view strategies (efficient, no lookup)
• View-level overrides: title, icon, path, theme, visible
• Default paths prefixed with keymaster- to avoid conflicts

WebSocket APIs:

• keymaster/get_view_metadata - Returns lock metadata, badges, slot info
• keymaster/get_section_config - Returns single code slot section config

Architecture changes:

• Refactored lovelace.py to use sync functions with @callback decorator
• generate_view_config, generate_badges_config, generate_section_config as public API
• External entity IDs (lock, door sensor) pass through unchanged during entity mapping

Benefits:

• UI changes remain in Python and apply to both YAML and strategy paths
• YAML file generation can be cleanly deprecated
• Section-level strategies enable lazy loading for better performance
• Integration auto-registers the JavaScript resource

Usage

Full Dashboard (all locks)

strategy:
  type: custom:keymaster

Single Lock View (by lock name)

views:
  - strategy:
      type: custom:keymaster
      lock_name: Front Door

With view overrides

views:
  - strategy:
      type: custom:keymaster
      lock_name: Front Door
      title: My Custom Title
      icon: mdi:door-closed-lock
      path: my-lock

Section strategy (advanced)

sections:
  - strategy:
      type: custom:keymaster
      lock_name: Front Door
      slot_num: 1

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (which adds functionality)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR is related to deprecating the YAML lovelace generation workflow
• Adds GitHub Actions for TypeScript linting, building, and testing with Codecov support
• Includes test infrastructure improvements and cleanup

🤖 Generated with Claude Code

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 88.92989% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.81%. Comparing base (a9a30ef) to head (9bdeb78).

Files with missing lines	Patch %	Lines
lovelace_strategy/section-strategy.ts	0.00%	16 Missing ⚠️
custom_components/keymaster/__init__.py	82.14%	5 Missing ⚠️
custom_components/keymaster/lovelace.py	93.61%	3 Missing ⚠️
lovelace_strategy/main.ts	0.00%	3 Missing ⚠️
lovelace_strategy/slugify.ts	75.00%	3 Missing ⚠️
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             beta     #536      +/-   ##
==========================================
+ Coverage   80.86%   81.81%   +0.95%     
==========================================
  Files          19       28       +9     
  Lines        2341     2563     +222     
  Branches        0       24      +24     
==========================================
+ Hits         1893     2097     +204     
- Misses        448      466      +18     

Flag	Coverage Δ
python	82.13% <95.85%> (?)
typescript	71.79% <71.79%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[Copilot]

Pull request overview

This PR adds a Lovelace dashboard and view strategy feature to dynamically generate the Keymaster UI, providing an alternative to the existing manual copy/paste YAML workflow. The implementation includes both frontend TypeScript modules and backend Python websocket APIs to support the strategy system.

Key Changes:

• Adds TypeScript/JavaScript frontend strategy modules that register custom Lovelace strategies for dashboard and view generation
• Implements a websocket API that returns view configurations dynamically based on lock names or config entry IDs
• Refactors the existing lovelace generation code to separate view config generation from file writing, enabling reuse for both strategies
• Adds resource registration/cleanup logic to automatically manage the frontend module in Home Assistant's lovelace resources

Reviewed changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
tsconfig.json	TypeScript configuration for the frontend strategy module
tsconfig.build.json	Build-specific TypeScript configuration that excludes test files
package.json	Node.js package configuration with build scripts and frontend dependencies
rollup.config.js	Rollup bundler configuration to compile TypeScript into a single JavaScript file
lovelace_strategy/*.ts	TypeScript source files implementing dashboard and view strategies
custom_components/keymaster/www/keymaster.js	Compiled JavaScript output from TypeScript sources
custom_components/keymaster/const.py	Adds constants for strategy file paths and URLs
custom_components/keymaster/lovelace.py	Refactors to extract view config generation logic for reuse
custom_components/keymaster/websocket.py	New websocket API handler for retrieving view configurations
custom_components/keymaster/resources.py	Helper functions for registering/unregistering lovelace resources
custom_components/keymaster/init.py	Updates to register websocket API, expose strategy files, and manage resources
custom_components/keymaster/manifest.json	Adds "http" to after_dependencies
tests/conftest.py	Adds mock for hass.http to support static path registration in tests
tests/test_lovelace.py	Comprehensive tests for view generation and file operations
tests/test_resources.py	Tests for resource registration and cleanup logic
tests/test_websocket.py	Tests for websocket API endpoint

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[tykeal]

@raman325 this is one of the features that I love about LCM! It's working for the first case, but if I do it in a view I get the following error:

ERROR: Either config_entry_title or config_entry_id must be provided in the view config, but not both!

I'm adding

  - strategy:
      type: custom:keymaster
      lock_name: ZWaveTestLock

I've tried it In my views section of an existing dashboard and I tried the entire code block in a fresh dashboard which got me the same error.

[tykeal]

I'm going to try this on one of my more complex HA setups with 7 locks to see how it does 😆

[raman325]

Thx for testing I can fix that bug shortly, holdover from before I changed the configuration approach. Will post and tag you again once it's fixed. I tested the dashboard strategy but forgot to test the view strategy so glad you did and nice catch

[firstof9]

Give me a tag when you update that as well, I prefer doing views vs whole dashboards for keymaster.

[raman325]

@firstof9 fixed

[tykeal]

Tab view strategy isn't currently generating a view name so it's getting set as Unnamed View, but the fix for the view solved the problem with rendering.

[firstof9]

Seeing this when trying to add the strategy to a section view:

[firstof9]

Works fine in masonry view however.

[raman325]

@firstof9 Sections are within a view, what do you expect the frontend logic to generate at that level? We could do the exact same thing we do at the view level (as in all the code slot cards for the lock), I just don't know if it would look good

[firstof9]

I wasn't sure if there was an easy way to just clone the entities from the masonry view into a sections view.
That's basically what I do now, everything in sections views.

[raman325]

OK so now we do sections, and the section strategy requires the code slot number since that emulates what we do in the view. So basically @firstof9 , what you tried the first time will now work as long as you provide a slot num. Everything looks good to me so I am marking this as ready for review shortly.

Also worth noting that I checked the lovelace before and after this PR and they are the exact same. I have a refactor coming after this one to clean up the lovelace code and get rid of some extra parts of the payload that are redundant but one step at a time

[raman325]

Here's the documentation I will push to the wiki with this PR so you can test all of the functionality:

Lovelace View

Keymaster provides two ways to add a Lovelace dashboard for managing your locks:

1. Lovelace Strategy (Recommended) - Automatically generates and updates the dashboard
2. Manual YAML (Legacy) - Copy and paste YAML configuration

Option 1: Lovelace Strategy (Recommended)

The Lovelace Strategy dynamically generates your dashboard and keeps it in sync with your lock configuration. No manual updates needed when you add or remove locks.

Prerequisites

Install the Keymaster frontend component. This is typically done automatically when you install Keymaster, but you can verify it's loaded by checking your browser's developer console for the ll-strategy-dashboard-keymaster custom element.

Dashboard Strategy (Easiest)

Create a dedicated Keymaster dashboard that automatically shows all your locks:

1. Open Home Assistant Settings → Dashboards
2. Click Add Dashboard
3. Set a title (e.g., "Keymaster") and icon
4. Click Create
5. Open the new dashboard, click the three-dot menu → Edit dashboard
6. Click the three-dot menu → Raw configuration editor
7. Replace the entire content with:

strategy:
  type: custom:keymaster

8. Click Save and exit the editor

The dashboard will automatically create a tab for each configured lock.

View Strategy (Single Lock)

Add a Keymaster view to an existing dashboard:

1. Open your dashboard's raw configuration editor
2. Add a new view using the view strategy:

views:
  # ... your existing views ...
  - strategy:
      type: custom:keymaster
      lock_name: Front Door

Configuration Options:

Option	Required	Description
lock_name	One of these	The name of the lock (as configured in Keymaster) - recommended
config_entry_id	is required	The config entry ID - primarily for internal use
title	No	Override the view title
icon	No	Override the view icon
path	No	Override the view URL path

Tip: Use lock_name for easier configuration. The config_entry_id option exists primarily for internal use by the dashboard strategy.

Example with overrides:

- strategy:
    type: custom:keymaster
    lock_name: Front Door
    title: Front Door Codes
    icon: mdi:door

Section Strategy (Advanced)

For advanced users who want to embed individual code slot sections into custom views:

sections:
  - strategy:
      type: custom:keymaster
      lock_name: Front Door
      slot_num: 1

Configuration Options:

Option	Required	Description
lock_name	One of these	The name of the lock (as configured in Keymaster) - recommended
config_entry_id	is required	The config entry ID - primarily for internal use
slot_num	Yes	Which code slot to generate (starting from your configured start slot)

This generates the section for a single code slot, allowing you to compose custom layouts.

---

Option 2: Manual YAML (Legacy)

If you prefer manual control or the strategy doesn't work for your setup, you can copy the generated YAML.

Copy the Lovelace YAML

Keymaster generates a lovelace YAML file for each lock. Find it at:

<config directory>/custom_components/keymaster/lovelace/<lock_name>.yaml

1. Open the file in a text editor
2. Select all and copy (Ctrl-A, Ctrl-C)
3. Open your Home Assistant dashboard
4. Click the three-dot menu → Edit Dashboard → three-dot menu → Raw configuration editor
5. Scroll to the bottom and paste the clipboard contents
6. Click Save

Required Frontend Components

For the manual YAML to work, install these frontend cards via HACS:

1. lovelace-auto-entities
2. lovelace-card-tools
3. lovelace-fold-entity-row
4. numberbox-card

Note: The Lovelace Strategy method does not require these additional components.

[raman325]

here's the before and after JSON for the view for this PR (on beta branch and with this PR), they both match 1 for 1
lovelace-view-beta.json
lovelace-view-pr536.json