feat: redesign history timeline — single-line, timestamp right-aligned

Each event is now one row: label · old → new on the left, timestamp
right-aligned. Nothing is far from anything else. State changes use the
existing badge component for immediate visual recognition. The created
event reads 'instance created' in accent. Middle-dot separator keeps
field label and change value clearly associated without forced spacing.

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

js/ui.js

@@ -193,21 +193,23 @@ async function renderDetailPage(vmid) {
     ? history.map(e => {
         if (e.field === 'created') return `
           <div class="tl-item tl-created">
+            <span class="tl-event">instance created</span>
             <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
-            <div class="tl-desc"><span class="tl-label">instance created</span></div>
           </div>`;
         const label = FIELD_LABELS[e.field] ?? esc(e.field);
+        const newCls = e.field === 'state'
+          ? `badge ${esc(e.new_value)}`
+          : `tl-new ${stateClass(e.field, e.new_value)}`;
         return `
           <div class="tl-item">
-            <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
-            <div class="tl-desc">
+            <div class="tl-event">
               <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>
+              <span class="tl-sep">·</span>
+              <span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
+              <span class="tl-arrow">→</span>
+              <span class="${newCls}">${fmtHistVal(e.field, e.new_value)}</span>
             </div>
+            <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
           </div>`;
       }).join('')
     : '<div class="tl-empty">no history yet</div>';