Add location and color styling to HUD task detail overlay

- Display ServicePointName in task detail overlay when available
- Style task details text in the bar's category color

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

hud/hud.js

@@ -294,6 +294,16 @@ const HUD = {
     document.getElementById('detailWaiting').textContent = this.formatElapsed(elapsed);
     document.getElementById('detailInfo').textContent = task.Details || '-';
 
+    // Show location if available
+    const locationRow = document.getElementById('detailLocationRow');
+    const locationValue = document.getElementById('detailLocation');
+    if (task.ServicePointName && task.ServicePointName.length > 0) {
+      locationValue.textContent = task.ServicePointName;
+      locationRow.style.display = 'flex';
+    } else {
+      locationRow.style.display = 'none';
+    }
+
     detail.style.setProperty('--detail-color', categoryColor);
     overlay.classList.add('visible');
   },

hud/index.html

@@ -355,6 +355,10 @@
   <div class="task-overlay" id="taskOverlay">
     <div class="task-detail" id="taskDetail">
       <h2 id="detailTitle">Task Details</h2>
+      <div class="detail-row" id="detailLocationRow">
+        <span class="detail-label">Location</span>
+        <span class="detail-value" id="detailLocation">-</span>
+      </div>
       <div class="detail-row">
         <span class="detail-label">Category</span>
         <span class="detail-value" id="detailCategory">-</span>
@@ -369,7 +373,7 @@
       </div>
       <div class="detail-row">
         <span class="detail-label">Details</span>
-        <span class="detail-value" id="detailInfo">-</span>
+        <span class="detail-value" id="detailInfo" style="color: var(--detail-color, #fff);">-</span>
       </div>
       <div class="actions">
         <button class="btn-close" onclick="closeOverlay()">Close</button>