From 82c314f85ce8907e41f0dd2eae446f9cc097dccc Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 28 Mar 2026 15:06:09 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20history=20timeline=20?=
 =?UTF-8?q?=E2=80=94=20single-line,=20timestamp=20right-aligned?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 css/app.css | 20 ++++++++++++--------
 js/ui.js    | 18 ++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/css/app.css b/css/app.css
index 9dd5ede..61fbc58 100644
--- a/css/app.css
+++ b/css/app.css
@@ -630,21 +630,25 @@ select:focus { border-color: var(--accent); }
 
 /* ── HISTORY TIMELINE ── */
 .tl-item {
-  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 9px 0;
   border-bottom: 1px solid var(--border);
 }
 .tl-item:last-child { border-bottom: none; }
-.tl-time   { display: block; color: var(--text3); font-size: 11px; margin-bottom: 5px; }
-.tl-desc   { display: flex; align-items: baseline; gap: 16px; font-size: 13px; }
-.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-event  { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
+.tl-label  { color: var(--text2); }
+.tl-sep    { color: var(--text3); user-select: none; }
+.tl-old    { color: var(--text3); text-decoration: line-through; font-size: 12px; }
+.tl-arrow  { color: var(--text3); font-size: 11px; }
 .tl-new    { color: var(--text); font-weight: 500; }
+.tl-time   { color: var(--text3); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
 .tl-deployed { color: var(--accent); }
 .tl-testing  { color: var(--amber); }
 .tl-degraded { color: var(--red); }
-.tl-created .tl-label { color: var(--accent); font-weight: 500; }
+.tl-created .tl-event { color: var(--accent); font-weight: 500; }
 .tl-empty  { color: var(--text3); font-size: 12px; padding: 8px 0; }
 
 /* ── SETTINGS MODAL ── */
diff --git a/js/ui.js b/js/ui.js
index d3fb403..672ba3f 100644
--- a/js/ui.js
+++ b/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>';