HACS Lovelace mod - Power usage on switch more info card

I dont know if this is of use to anyone else but "i" (read: AI) have made a card mod for lovelace that shows the power usage of a switch / device on the more info card like below:

The Hacs repo is here:

Hacs readme below:

Power More Info

Power More Info icon

Open this repository in HACS Open dashboard resources in Home Assistant

Show live power usage in Home Assistant more-info dialogs. Power More Info is a frontend-only Lovelace dashboard resource for HACS. It adds a compact, clickable wattage badge below supported controls when the opened entity has a matching power sensor.

It is built for smart plugs, switch entities, lights, fans, appliance plugs, Zigbee/Z-Wave plugs, Tuya plugs, Shelly devices, energy monitoring sensors, and Home Assistant dashboards where you want instant watt values without editing every card.

Power More Info screenshot in a Home Assistant more-info dialog

Search keywords

  • Home Assistant power badge
  • HACS power monitoring
  • Lovelace power usage
  • more-info wattage
  • smart plug watts
  • switch power consumption
  • light power monitoring
  • fan power monitoring
  • Home Assistant energy monitor
  • dashboard resource
  • frontend plugin
  • custom Lovelace plugin
  • HACS dashboard plugin

Features

  • Adds a live W badge to Home Assistant more-info dialogs.
  • Works with switches, lights, fans, and other controllable entities that have a related power sensor.
  • Keeps sensors, helpers, scripts, scenes, buttons, diagnostic entities, and unrelated entities out of scope.
  • Shows a compact card-style badge with a green flash icon and current watts.
  • Opens the matched power sensor history graph when the badge is clicked.
  • Preserves the original more-info control spacing and avoids slider overlap.
  • Supports Dutch and English labels automatically.
  • Requires no dashboard YAML changes and no per-card configuration.

Installation

HACS

Add this repository to HACS with My Home Assistant:

Add Power More Info to HACS

Or install manually:

  1. Open HACS in Home Assistant.
  2. Open the menu and choose Custom repositories.
  3. Add this repository URL:
https://github.com/matrover/lovelace-switch-power-more-info
  1. Select category Dashboard.
  2. Install Power More Info.
  3. Refresh the browser, clear frontend cache, or restart the Home Assistant companion app.

HACS should register this dashboard resource:

/hacsfiles/lovelace-switch-power-more-info/switch-power-more-info.js

Manual resource check

If the badge does not appear after installation, open Dashboard resources with the button above and verify that the resource exists as a JavaScript module.

How It Works

When you open a Home Assistant more-info dialog, the plugin checks the opened entity and tries to find a matching power sensor. If it finds one, it renders a small badge at the bottom of the dialog with the current power usage.

Clicking the badge opens the matched power sensor's more-info dialog, so you can immediately view the history graph.

Power Sensor Matching

Preferred exact sensor IDs:

sensor.<entity_id_without_domain>_electric_consumption_w
sensor.<entity_id_without_domain>_power
sensor.<entity_id_without_domain>_active_power
sensor.<entity_id_without_domain>_instantaneous_power
sensor.<entity_id_without_domain>_power_2

The plugin also accepts sensors with:

  • device_class: power
  • unit W
  • unit kW

Fallback matching is intentionally strict. It can match by entity prefix, useful device codes such as NC24, or a meaningful friendly-name prefix. It avoids broad substring matches, so names like room no longer accidentally match unrelated sensors like stroomverbruik.

Supported Use Cases

  • Smart plug more-info dialogs with live wattage.
  • Zigbee, Z-Wave, Shelly, Tuya, ESPHome, and MQTT power plugs.
  • Lights or fans with separate power sensors.
  • Appliance monitoring for washing machines, dryers, ovens, fridges, pumps, chargers, and media equipment.
  • Home Assistant dashboards where existing cards already open more-info dialogs.

Limitations

  • This is a frontend-only plugin. It does not create sensors, helpers, automations, or integrations.
  • The badge only appears when a matching power sensor already exists.
  • HACS and Home Assistant may require a browser refresh before updated frontend resources are loaded.

Troubleshooting

  • No badge visible: check that a matching sensor exists and has device_class: power, W, or kW.
  • Wrong sensor matched: rename the sensor or entity so they share a useful device code or exact prefix.
  • Old layout still visible: clear the frontend cache or restart the Home Assistant app.
  • Badge visible but not clickable: update to the latest release and hard refresh the browser.

HACS Metadata

Power More Info is a HACS dashboard plugin / Lovelace frontend resource for Home Assistant.

Useful discovery terms include: home-assistant, hacs, hacs-dashboard, hacs-plugin, lovelace, frontend, power-monitoring, energy-monitoring, smart-plug, wattage, more-info, power-sensor.

The project icon is included in the rendered README and HACS detail view. HACS dashboard repositories use the standard dashboard icon in the repository list.

2 Likes

Wow, this works great!! I never knew this was possible, and I'll definitely be keeping it! However, it does not work with lights (and likely fans and such); do you think you could add that? Or are you purposefully keeping it switch only?

(E.g light.sr_inovelli with sensor.sr_inovelli_power (W))

Also, I've just noticed a bug. It adds the badge to every related popup, even the recreate entity IDs menu :rofl:

Edit: happens when you open the switch more info and then any other sensor from the device page. A browser refresh fixes it.

Edit 2: if you open any switch that has a power sensor, it causes the badge to appear on EVERY popup until a reload.

Haha, ok i will let AI look into that.:joy:

1 Like

Exactly what I would have done too :sweat_smile:

Which AI do you use? Claude, Codex, OpenCode, Copilot?

im using codex.

i cannot reproduce the errors you mentioned, could you maybe share a screen recording?
the update for other device types (ligths, fans, etc) is live

1 Like

Sure! It reproduces on latest version. Files/Power badge issue.mov at 9e9a4c7402c1dd55a643e99600b139cc391f57a0 · inventor7777/Files · GitHub

Thanks! AI has analysed your video and pushed an update, i cant reproduce it anymore. let me know if you still have problems

1 Like

Sure! The latest update has made it way better and the problem is gone. Only thing I see is that it pushes the switch too far up. (I tried with like 6 different versions just to make sure)

Looks better with the latest update 0.2.9:

I wish I could say it was issue free but unfortunately, at least when using Browser Mod, this happens. In fact, I mistakenly filed an issue over at [Bug]: Devices page gets squished when Browser Mod is enabled. · Issue #1300 · thomasloven/hass-browser_mod · GitHub

i see, my bad. i was working on this matrover/ha-device-overview-responsive: Home Assistant integration for responsive device overview columns

but they got mixed up. fixed now.

1 Like

Dude that is sweet! Looks awesome on my iPad, but a bit stretched on a large 27" desktop, would you consider adding a "Max width" control?

And the bug with the device page seems gone so :+1:t3:

Ofc, what max width are you thinking of?

Hmmm, depends on the screen honestly. According to my BrowserInfo NGINX server which I built with Codex a screen width of around 1300px is pretty reasonable for a big display, what do you think?

But it would be configurable right?

Hey, tried the latest version and it seems the same in both Opera and Safari. Did you use a development server for testing? If so, then Codex supports viewing your localhost server for fast testing.

I say that because I tried to add the feature myself with Codex and it failed after 6 attempts, so I gave up.

Ive (AI) made it configurable in the integration settings works great if i may say so.

im using my prod instance of HA with Codex via MCP and GPT5.5 on high thinking mode.

1 Like