feat: add trip ID column (#18517) to history table on Pi and server

FEATURES.md

@@ -159,3 +159,13 @@ dedicated PLAN.md phase (or fold it into the relevant existing work) and mark it
 
 (No entries yet — shipped features land here. Keep the original idea text intact and add the
 shipped phase/date.)
+
+### FEAT-06 — Trip ID column in history table
+- **Status**: `SHIPPED` 2026-08-11
+- **Area**: `static/js/history.js`, `templates/history.html`, `server/templates/history.html`
+- **Phase**: Phase 26 (slipped in during bug-fix pass)
+- **What**: A narrow `#ID` column appears at the left of every trip row on both Pi and server
+  history pages, showing the database trip ID (e.g. `#18517`). Useful for debugging and
+  cross-referencing trips between Pi and server.
+- **Implementation**: `history.js` render function prepends a `<td>` with the ID. Both Pi and
+  server templates add `{"key": "id", "label": "ID", "sortable": false}` to the column list.

server/templates/history.html

@@ -29,6 +29,7 @@
                 {{ data_table(
                     "trip-list",
                     [
+                        {"key": "id", "label": "ID", "sortable": false},
                         {"key": "started", "label": "Started", "sortable": true},
                         {"key": "distance", "label": "km", "sortable": true},
                         {"key": "duration", "label": "Time", "sortable": true},

static/js/history.js

@@ -229,7 +229,7 @@
             row.dataset.tripId = t.id; row.style.cursor = "pointer";
             var db = del ? '<button class="btn btn-sm btn-outline-danger ms-1" type="button" data-delete-trip-id="' + t.id + '" title="Delete"><i class="fas fa-trash fa-fw"></i></button>' : "";
             var cb = bUrl ? '<td class="text-center" onclick="event.stopPropagation()"><input type="checkbox" class="trip-checkbox form-check-input" value="' + t.id + '"></td>' : "";
-            row.innerHTML = cb + "<td>" + fT(t.start_datetime) + "</td><td>" + fK(t.distance_km) + "</td><td>" + fD(t.duration_seconds) + "</td><td>" + fS(t.max_speed_kmh) + "</td><td class=\"text-muted small\">" + (t.odo_start_km != null ? t.odo_start_km.toFixed(0) + " \u2192 " + t.odo_end_km.toFixed(0) + " km" : "\u2014") + "</td><td class=\"text-end text-nowrap d-none d-sm-table-cell\">" + db + "</td>";
+            row.innerHTML = cb + "<td class=\"text-muted small text-end pe-1\" style=\"width:1%\">#" + t.id + "</td><td>" + fT(t.start_datetime) + "</td><td>" + fK(t.distance_km) + "</td><td>" + fD(t.duration_seconds) + "</td><td>" + fS(t.max_speed_kmh) + "</td><td class=\"text-muted small\">" + (t.odo_start_km != null ? t.odo_start_km.toFixed(0) + " \u2192 " + t.odo_end_km.toFixed(0) + " km" : "\u2014") + "</td><td class=\"text-end text-nowrap d-none d-sm-table-cell\">" + db + "</td>";
             body.appendChild(row);
         });
         body.querySelectorAll("input.trip-checkbox").forEach(function (c) { c.addEventListener("change", upBt); });

templates/history.html

@@ -27,6 +27,7 @@
                 {{ data_table(
                     "trip-list",
                     [
+                        {"key": "id", "label": "ID", "sortable": false},
                         {"key": "started", "label": "Started", "sortable": true},
                         {"key": "distance", "label": "km", "sortable": true},
                         {"key": "duration", "label": "Time", "sortable": true},