Merge pull request 'feat: rework history timeline for clarity' (#25) from feat/timezone-settings into dev

Reviewed-on: #25

css/app.css

@@ -630,26 +630,21 @@ select:focus { border-color: var(--accent); }
 
 /* ── HISTORY TIMELINE ── */
 .tl-item {
-  display: grid;
+  padding: 12px 0;
-  grid-template-columns: 160px 140px 1fr;
-  gap: 0 12px;
-  padding: 7px 0;
   border-bottom: 1px solid var(--border);
-  font-size: 12px;
-  align-items: baseline;
 }
 .tl-item:last-child { border-bottom: none; }
-.tl-time   { color: var(--text3); font-size: 11px; white-space: nowrap; }
+.tl-time   { display: block; color: var(--text3); font-size: 11px; margin-bottom: 5px; }
-.tl-field  { color: var(--text2); }
+.tl-desc   { display: flex; align-items: baseline; gap: 16px; font-size: 13px; }
-.tl-change { display: flex; align-items: baseline; gap: 6px; }
+.tl-label  { color: var(--text2); min-width: 130px; }
+.tl-change { display: flex; align-items: baseline; gap: 8px; }
 .tl-old    { color: var(--text3); text-decoration: line-through; }
 .tl-arrow  { color: var(--text3); }
-.tl-new    { color: var(--text); }
+.tl-new    { color: var(--text); font-weight: 500; }
 .tl-deployed { color: var(--accent); }
 .tl-testing  { color: var(--amber); }
 .tl-degraded { color: var(--red); }
-.tl-created .tl-field  { color: var(--accent); }
+.tl-created .tl-label { color: var(--accent); font-weight: 500; }
-.tl-created .tl-change { color: var(--text3); }
 .tl-empty  { color: var(--text3); font-size: 12px; padding: 8px 0; }
 
 /* ── SETTINGS MODAL ── */

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>
+            <div class="tl-desc"><span class="tl-label">instance created</span></div>
-            <span class="tl-change">—</span>
           </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>
+            <div class="tl-desc">
-            <span class="tl-change">
+              <span class="tl-label">${label}</span>
-              <span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
+              <span class="tl-change">
-              <span class="tl-arrow">→</span>
+                <span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
-              <span class="tl-new ${stateClass(e.field, e.new_value)}">${fmtHistVal(e.field, e.new_value)}</span>
+                <span class="tl-arrow">→</span>
-            </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>';