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>

css/app.css

@@ -630,26 +630,21 @@ select:focus { border-color: var(--accent); }
 
 /* ── HISTORY TIMELINE ── */
 .tl-item {
-  display: grid;
-  grid-template-columns: 160px 140px 1fr;
-  gap: 0 12px;
-  padding: 7px 0;
+  padding: 12px 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-field  { color: var(--text2); }
-.tl-change { display: flex; align-items: baseline; gap: 6px; }
+.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-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-change { color: var(--text3); }
+.tl-created .tl-label { color: var(--accent); font-weight: 500; }
 .tl-empty  { color: var(--text3); font-size: 12px; padding: 8px 0; }
 
 /* ── SETTINGS MODAL ── */