Merge pull request 'v1.3.0' (#35) from dev into main

Reviewed-on: #35

.gitignore

@@ -1,5 +1,4 @@
 node_modules/
-js/version.js
 data/*.db
 data/*.db-shm
 data/*.db-wal

css/app.css

@@ -25,6 +25,10 @@
   --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
 }
 
+html {
+  zoom: 1.1;
+}
+
 html, body {
   height: 100%;
   background: var(--bg);
@@ -374,16 +378,25 @@ select:focus { border-color: var(--accent); }
 }
 
 .detail-sub {
-  font-size: 12px;
+  font-size: 13px;
-  color: var(--text3);
+  margin-top: 8px;
-  margin-top: 6px;
   display: flex;
-  gap: 16px;
+  align-items: center;
+  gap: 0;
 }
 
-.detail-sub span { display: flex; gap: 4px; }
+.detail-sub > span {
-.detail-sub .lbl { color: var(--text3); }
+  display: flex;
-.detail-sub .val { color: var(--text2); }
+  align-items: center;
+  gap: 6px;
+}
+.detail-sub > span + span {
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border);
+}
+.detail-sub .lbl { color: var(--text3); font-size: 11px; }
+.detail-sub .val { color: var(--text); }
 
 .detail-actions { display: flex; gap: 8px; }
 
@@ -630,26 +643,25 @@ select:focus { border-color: var(--accent); }
 
 /* ── HISTORY TIMELINE ── */
 .tl-item {
-  display: grid;
+  display: flex;
-  grid-template-columns: 160px 140px 1fr;
+  align-items: center;
-  gap: 0 12px;
+  justify-content: space-between;
-  padding: 7px 0;
+  gap: 24px;
+  padding: 9px 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-event  { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
-.tl-field  { color: var(--text2); }
+.tl-label  { color: var(--text2); }
-.tl-change { display: flex; align-items: baseline; gap: 6px; }
+.tl-sep    { color: var(--text3); user-select: none; }
-.tl-old    { color: var(--text3); text-decoration: line-through; }
+.tl-old    { color: var(--text3); text-decoration: line-through; font-size: 12px; }
-.tl-arrow  { color: var(--text3); }
+.tl-arrow  { color: var(--text3); font-size: 11px; }
-.tl-new    { color: var(--text); }
+.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-field  { color: var(--accent); }
+.tl-created .tl-event { 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

@@ -39,17 +39,25 @@ function esc(str) {
   return d.innerHTML;
 }
 
+// SQLite datetime('now') → 'YYYY-MM-DD HH:MM:SS' (UTC, no timezone marker).
+// Appending 'Z' tells JS to parse it as UTC rather than local time.
+function parseUtc(d) {
+  if (typeof d !== 'string') return new Date(d);
+  const hasZone = d.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(d);
+  return new Date(hasZone ? d : d.replace(' ', 'T') + 'Z');
+}
+
 function fmtDate(d) {
   if (!d) return '—';
   try {
-    return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: getTimezone() });
+    return parseUtc(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: getTimezone() });
   } catch (e) { return d; }
 }
 
 function fmtDateFull(d) {
   if (!d) return '—';
   try {
-    return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: getTimezone(), timeZoneName: 'short' });
+    return parseUtc(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: getTimezone(), timeZoneName: 'short' });
   } catch (e) { return d; }
 }
 
@@ -129,6 +137,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] ?? '';
@@ -141,9 +164,10 @@ function fmtHistVal(field, val) {
 }
 
 async function renderDetailPage(vmid) {
-  const [inst, history] = await Promise.all([getInstance(vmid), getInstanceHistory(vmid)]);
+  const [inst, history, all] = await Promise.all([getInstance(vmid), getInstanceHistory(vmid), getInstances()]);
   if (!inst) { navigate('dashboard'); return; }
   currentVmid = vmid;
+  document.getElementById('nav-count').textContent = `${all.length} instance${all.length !== 1 ? 's' : ''}`;
 
   document.getElementById('detail-vmid-crumb').textContent  = vmid;
   document.getElementById('detail-name').textContent        = inst.name;
@@ -154,7 +178,7 @@ async function renderDetailPage(vmid) {
   document.getElementById('detail-identity').innerHTML = `
     <div class="kv-row"><span class="kv-key">name</span><span class="kv-val highlight">${esc(inst.name)}</span></div>
     <div class="kv-row"><span class="kv-key">state</span><span class="kv-val"><span class="badge ${esc(inst.state)}">${esc(inst.state)}</span></span></div>
-    <div class="kv-row"><span class="kv-key">stack</span><span class="kv-val highlight">${esc(inst.stack) || '—'}</span></div>
+    <div class="kv-row"><span class="kv-key">stack</span><span class="kv-val"><span class="badge ${esc(inst.stack)}">${esc(inst.stack) || '—'}</span></span></div>
     <div class="kv-row"><span class="kv-key">vmid</span><span class="kv-val highlight">${inst.vmid}</span></div>
     <div class="kv-row"><span class="kv-key">internal id</span><span class="kv-val">${inst.id}</span></div>
   `;
@@ -178,19 +202,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>
-            <span class="tl-field">created</span>
-            <span class="tl-change">—</span>
           </div>`;
+        const label = FIELD_LABELS[e.field] ?? esc(e.field);
+        const newCls = (e.field === 'state' || e.field === 'stack')
+          ? `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-event">
-            <span class="tl-field">${esc(e.field)}</span>
+              <span class="tl-label">${label}</span>
-            <span class="tl-change">
+              <span class="tl-sep">·</span>
               <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 class="${newCls}">${fmtHistVal(e.field, e.new_value)}</span>
-            </span>
+            </div>
+            <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
           </div>`;
       }).join('')
     : '<div class="tl-empty">no history yet</div>';

js/version.js

@@ -0,0 +1 @@
+const VERSION = "1.3.0";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "catalyst",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "start": "node server/server.js",

tests/helpers.test.js

@@ -58,16 +58,22 @@ describe('esc', () => {
 
 // ── fmtDate() ─────────────────────────────────────────────────────────────────
 
-function fmtDate(d) {
+function parseUtc(d) {
+  if (typeof d !== 'string') return new Date(d)
+  const hasZone = d.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(d)
+  return new Date(hasZone ? d : d.replace(' ', 'T') + 'Z')
+}
+
+function fmtDate(d, tz = 'UTC') {
   if (!d) return '—'
   try {
-    return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+    return parseUtc(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: tz })
   } catch (e) { return d }
 }
 
 describe('fmtDate', () => {
   it('formats a valid ISO date string', () => {
-    const result = fmtDate('2024-03-15T00:00:00')
+    const result = fmtDate('2024-03-15T12:00:00Z')
     expect(result).toMatch(/Mar/)
     expect(result).toMatch(/15/)
     expect(result).toMatch(/2024/)
@@ -91,7 +97,7 @@ describe('fmtDate', () => {
 function fmtDateFull(d, tz = 'UTC') {
   if (!d) return '—'
   try {
-    return new Date(d).toLocaleString('en-US', {
+    return parseUtc(d).toLocaleString('en-US', {
       year: 'numeric', month: 'short', day: 'numeric',
       hour: '2-digit', minute: '2-digit',
       timeZone: tz, timeZoneName: 'short',
@@ -118,6 +124,12 @@ describe('fmtDateFull', () => {
     expect(result).toMatch(/EDT/)
   })
 
+  it('treats SQLite-format timestamps (space, no Z) as UTC', () => {
+    // SQLite datetime('now') → 'YYYY-MM-DD HH:MM:SS', no timezone marker.
+    // Must parse identically to the same moment expressed as ISO UTC.
+    expect(fmtDateFull('2024-03-15 18:30:00', 'UTC')).toBe(fmtDateFull('2024-03-15T18:30:00Z', 'UTC'))
+  })
+
   it('returns — for null', () => {
     expect(fmtDateFull(null)).toBe('—')
   })