HA improvements: entity overflow fix, live % fetch on device page, searchable entity dropdown

templates/device_detail.html

@@ -31,8 +31,20 @@
     {% if ha_enabled and device.ha_entity_id %}
     <tr>
       <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Entity</td>
-      <td style="border:none;"><code>{{ device.ha_entity_id }}</code></td>
+      <td style="border:none;"><code style="word-break:break-all;">{{ device.ha_entity_id }}</code></td>
     </tr>
+    {% if ha_live_pct is not none %}
+    <tr>
+      <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Live %</td>
+      <td style="border:none;">
+        {% if ha_live_pct < 20 %}
+          <span class="badge badge-warning">⚠ {{ ha_live_pct }}%</span>
+        {% else %}
+          {{ ha_live_pct }}%
+        {% endif %}
+      </td>
+    </tr>
+    {% endif %}
     {% endif %}
   </table>
 </div>
@@ -200,7 +212,10 @@ function addInstallRow() {
       <label for="edit-ha-entity">Home Assistant Entity ID</label>
       <input type="text" id="edit-ha-entity" name="ha_entity_id"
              value="{{ device.ha_entity_id or '' }}"
-             placeholder="e.g. sensor.tv_remote_battery">
+             placeholder="e.g. sensor.tv_remote_battery"
+             list="ha-entities-list" autocomplete="off">
+      <datalist id="ha-entities-list"></datalist>
+      <small class="text-muted" id="ha-entities-status" style="display:block;margin-top:0.25rem;font-size:0.8rem;"></small>
     </div>
     {% endif %}
     <button class="btn btn-primary" type="submit">Save Changes</button>
@@ -218,4 +233,39 @@ function addInstallRow() {
 </div>
 
 <a class="text-muted" href="{{ url_for('device_list') }}">&larr; Back to Devices</a>
+
+{% if ha_enabled %}
+<script>
+(function() {
+  var datalist = document.getElementById('ha-entities-list');
+  var status   = document.getElementById('ha-entities-status');
+  if (!datalist) return;
+
+  function populate(entities) {
+    datalist.innerHTML = '';
+    entities.forEach(function(e) {
+      var opt = document.createElement('option');
+      opt.value = e.entity_id;
+      if (e.friendly_name && e.friendly_name !== e.entity_id) opt.label = e.friendly_name;
+      datalist.appendChild(opt);
+    });
+    if (status) status.textContent = entities.length ? entities.length + ' battery entities available' : '';
+  }
+
+  try {
+    var cached = sessionStorage.getItem('ha_battery_entities');
+    if (cached) { populate(JSON.parse(cached)); return; }
+  } catch(e) {}
+
+  if (status) status.textContent = 'Loading HA entities\u2026';
+  fetch('/ha/entities')
+    .then(function(r) { return r.json(); })
+    .then(function(entities) {
+      try { sessionStorage.setItem('ha_battery_entities', JSON.stringify(entities)); } catch(e) {}
+      populate(entities);
+    })
+    .catch(function() { if (status) status.textContent = ''; });
+}());
+</script>
+{% endif %}
 {% endblock %}