{# Children: <li class="ui-timeline-item" data-key?><span class="ui-timeline-dot" aria-hidden="true"></span><div class="ui-timeline-meta"><time datetime>…</time> Badge (+ <span class="ui-sr-only">Key event</span>)</div> then any of <p class="ui-timeline-title">, <p class="ui-timeline-body">, <div class="ui-timeline-reply"><strong>Author</strong>…</div>, <div class="ui-timeline-note">, <div class="ui-timeline-by">.</li> #}
<div style="max-width:600px">
<.timeline>
<li class="ui-timeline-item" data-key><span class="ui-timeline-dot" aria-hidden="true"></span>
<div class="ui-timeline-meta"><time datetime="2026-10-08T14:20">8 Oct 2026, 14:20</time><.badge variant="outline">Escalated</.badge><span class="ui-sr-only">Key event</span></div>
<p class="ui-timeline-title">Moved to priority review</p>
<p class="ui-timeline-body">Customer reported the same billing error on three invoices. Finance confirmed a duplicate charge.</p>
<div class="ui-timeline-reply"><strong>Response from Grace Hopper</strong>Refund issued and the invoice template has been fixed.</div>
<div class="ui-timeline-by">Logged by Ada Lovelace · Read by 3 people</div>
</li>
<li class="ui-timeline-item"><span class="ui-timeline-dot" aria-hidden="true"></span>
<div class="ui-timeline-meta"><time datetime="2026-10-06T09:05">6 Oct 2026, 09:05</time><.badge variant="secondary">Note</.badge></div>
<p class="ui-timeline-body">Called the customer to confirm details of the second invoice.</p>
<div class="ui-timeline-note"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>Corrected on 7 Oct; the original is kept in the history</div>
</li>
<li class="ui-timeline-item"><span class="ui-timeline-dot" aria-hidden="true"></span>
<div class="ui-timeline-meta"><time datetime="2026-10-02T16:41">2 Oct 2026, 16:41</time><.badge variant="secondary">Created</.badge></div>
<p class="ui-timeline-body">Ticket opened from the support inbox.</p>
</li>
</.timeline>
</div>