feat: rework history timeline for clarity

Timestamp now sits on its own line above each event so it's visually
separate from the change description. Field names use a friendly label
map (hardware_acceleration → hw acceleration, tailscale_ip → tailscale ip,
etc.). The created event reads "instance created" in accent colour instead
of a raw "created / —". Padding between rows increased.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

js/ui.js

@@ -129,6 +129,21 @@ async function filterInstances() {
 
 const BOOL_FIELDS = ['atlas','argus','semaphore','patchmon','tailscale','andromeda','hardware_acceleration'];
 
+const FIELD_LABELS = {
+  name:                  'name',
+  state:                 'state',
+  stack:                 'stack',
+  vmid:                  'vmid',
+  tailscale_ip:          'tailscale ip',
+  atlas:                 'atlas',
+  argus:                 'argus',
+  semaphore:             'semaphore',
+  patchmon:              'patchmon',
+  tailscale:             'tailscale',
+  andromeda:             'andromeda',
+  hardware_acceleration: 'hw acceleration',
+};
+
 function stateClass(field, val) {
   if (field !== 'state') return '';
   return { deployed: 'tl-deployed', testing: 'tl-testing', degraded: 'tl-degraded' }[val] ?? '';
@@ -179,18 +194,20 @@ async function renderDetailPage(vmid) {
         if (e.field === 'created') return `
           <div class="tl-item tl-created">
             <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
-            <span class="tl-field">created</span>
-            <span class="tl-change">—</span>
+            <div class="tl-desc"><span class="tl-label">instance created</span></div>
           </div>`;
+        const label = FIELD_LABELS[e.field] ?? esc(e.field);
         return `
           <div class="tl-item">
             <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
-            <span class="tl-field">${esc(e.field)}</span>
-            <span class="tl-change">
-              <span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
-              <span class="tl-arrow">→</span>
-              <span class="tl-new ${stateClass(e.field, e.new_value)}">${fmtHistVal(e.field, e.new_value)}</span>
-            </span>
+            <div class="tl-desc">
+              <span class="tl-label">${label}</span>
+              <span class="tl-change">
+                <span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
+                <span class="tl-arrow">→</span>
+                <span class="tl-new ${stateClass(e.field, e.new_value)}">${fmtHistVal(e.field, e.new_value)}</span>
+              </span>
+            </div>
           </div>`;
       }).join('')
     : '<div class="tl-empty">no history yet</div>';