"Entity not found" can be very difficult to locate in picture elements (and probably other cards)

[jaymemaurice]

Picture your user has abused picture elements beyond it's typical use to make a floor plan dashboard or whaterver.
It has hundreds of lines of YAML with conditional elements that hide based on state etc. and most importantly it has wife approval factor.
They outgrow their RPi or whatever and migrate to HAOS restoring from backup and deploying on HAOS or whatever. Some of their previous addons extensions or whatever are unavailable... so some entities are missing on restored dashboards.

The picture elements card now has the warning triangle.

Now how do you find it?! The tool-tip tells you "Entity not found" which is not as useful as "Entity not found: <entity_name>". You can't click on it. As you can see in the screenshot, there are no clues in the HTML if you use chrome debug tools and the element selector... no <!-- entity name --> or similar. No clues in applied style.

When editing the card:

I happen to know "sensor.vaccum" is a missing entity (I only have a few state label element and knew the 3 top missing entities are state label, and that I did not restore dorita980 stuff)- there is no warning on the card edit main page... only when I find and click on the element with an invalid entity, then scroll back to the top of the page to where the entity selector is can I find that the entity is missing.

A technical person could solve this by grepping out the entity names from the yaml and iterating them against the valid entities or various other strategies... but a regular user would have to click and scroll through each of the elements.
Using LLM might be possible, but when you get to 10s of thousands of entities, thanks an extension like rtl_433 or bluetooth tracker - that might not even work well.

I think this is far more difficult than it should be.

I propose making the tool tip/alt text more verbose - "Entity not found: <entity_name>" (I assume this should be very easy)

and/or highlighting the elements which have errors on the main edit page - similar to this mockup where I manually applied background-color: var(--ha-color-fill-warning-quiet-resting) to the div element to take the sceenshot (I assume this would be much harder, because elements can be somewhat nested and you would need a way to bubble the error state up through the stack)

To test, just create an element with an invalid entity name.

This annoyance is probably encountered by new users pasting configs, working with LLMs and various other cases as well.
I assume there is other cases where the errors are hidden many layers deep as well.