feat(frontend): polish job detail timeline

frontend/src/pages/JobDetailPage.tsx

@@ -10,6 +10,40 @@ import { EmptyState } from "../components/EmptyState";
 import { StatusBadge } from "../components/StatusBadge";
 import type { Job, JobEvent } from "../types";
 
+type TimelineEvent = JobEvent & {
+  firstId: number;
+  lastId: number;
+  repeatCount: number;
+};
+
+function buildTimeline(events: JobEvent[]) {
+  const grouped: TimelineEvent[] = [];
+
+  [...events]
+    .sort((a, b) => a.id - b.id)
+    .forEach((event) => {
+      const previous = grouped.at(-1);
+      const isSameRun =
+        previous &&
+        previous.type === event.type &&
+        previous.attempt === event.attempt &&
+        previous.worker_id === event.worker_id;
+
+      if (isSameRun) {
+        previous.lastId = event.id;
+        previous.repeatCount += 1;
+        previous.created_at = event.created_at;
+        previous.message = event.message;
+        previous.data = event.data;
+        return;
+      }
+
+      grouped.push({ ...event, firstId: event.id, lastId: event.id, repeatCount: 1 });
+    });
+
+  return grouped.reverse();
+}
+
 export function JobDetailPage() {
   const { jobId } = useParams();
   const [job, setJob] = useState<Job | null>(null);
@@ -28,7 +62,7 @@ export function JobDetailPage() {
     return () => window.clearInterval(id);
   }, [refresh]);
 
-  const sortedEvents = useMemo(() => [...events].sort((a, b) => b.id - a.id), [events]);
+  const timelineEvents = useMemo(() => buildTimeline(events), [events]);
 
   async function retry() {
     if (!job) return;
@@ -54,7 +88,9 @@ export function JobDetailPage() {
       <header className="page-header">
         <div>
           <span className="eyebrow">Job detail</span>
-          <h2>{job.type}</h2>
+          <h2>
+            <code className="inline-code">{job.type}</code>
+          </h2>
         </div>
         <div className="row-actions">
           <Link className="secondary-button" to="/jobs">
@@ -83,69 +119,79 @@ export function JobDetailPage() {
         </div>
         <div className="stat-card">
           <span>Locked by</span>
-          <code>{job.locked_by ?? "-"}</code>
+          <code className="code-token wrap">{job.locked_by ?? "-"}</code>
         </div>
       </section>
 
-      <section className="dashboard-grid">
+      <section className="detail-grid">
         <section className="panel">
           <div className="section-title">
             <h3>Metadata</h3>
           </div>
-          <div className="compact-list">
-            <div className="compact-row">
-              <strong>ID</strong>
-              <code>{job.id}</code>
-              <span />
+          <div className="detail-fields">
+            <div className="detail-field">
+              <span>ID</span>
+              <code className="code-token wrap">{job.id}</code>
             </div>
-            <div className="compact-row">
-              <strong>Available</strong>
-              <span />
+            <div className="detail-field">
+              <span>Available</span>
               <DateTime value={job.available_at} />
             </div>
-            <div className="compact-row">
-              <strong>Locked until</strong>
-              <span />
+            <div className="detail-field">
+              <span>Locked until</span>
               <DateTime value={job.locked_until} />
             </div>
-            <div className="compact-row">
-              <strong>Finished</strong>
-              <span />
+            <div className="detail-field">
+              <span>Finished</span>
               <DateTime value={job.finished_at} />
             </div>
-            <div className="compact-row">
-              <strong>Idempotency</strong>
-              <code>{job.idempotency_key ?? "-"}</code>
-              <span />
+            <div className="detail-field">
+              <span>Idempotency</span>
+              <code className="code-token wrap">{job.idempotency_key ?? "-"}</code>
             </div>
           </div>
         </section>
 
         <section className="panel">
-          <div className="section-title">
-            <h3>Payload</h3>
+          <div className="json-stack">
+            <div>
+              <div className="section-title">
+                <h3>Payload</h3>
+              </div>
+              <pre className="json-block">{JSON.stringify(job.payload, null, 2)}</pre>
+            </div>
+            <div>
+              <div className="section-title">
+                <h3>Result</h3>
+              </div>
+              <pre className="json-block">{JSON.stringify(job.result ?? null, null, 2)}</pre>
+            </div>
+            {job.last_error && <p className="error error-block">{job.last_error}</p>}
           </div>
-          <pre>{JSON.stringify(job.payload, null, 2)}</pre>
-          <div className="section-title result-title">
-            <h3>Result</h3>
-          </div>
-          <pre>{JSON.stringify(job.result ?? null, null, 2)}</pre>
-          {job.last_error && <p className="error">{job.last_error}</p>}
         </section>
 
-        <section className="panel">
+        <section className="panel detail-wide">
           <div className="section-title">
             <h3>Event Timeline</h3>
           </div>
-          <div className="compact-list">
-            {sortedEvents.map((event) => (
-              <div className="compact-row" key={event.id}>
-                <strong>{eventTitle(event.type)}</strong>
-                <span>{event.worker_id ?? `attempt ${event.attempt}`}</span>
-                <DateTime value={event.created_at} />
-              </div>
+          <div className="timeline-list">
+            {timelineEvents.map((event) => (
+              <article className="timeline-item" key={`${event.firstId}-${event.lastId}`}>
+                <span className="timeline-dot" aria-hidden="true" />
+                <div className="timeline-card">
+                  <div className="timeline-heading">
+                    <strong>{eventTitle(event.type)}</strong>
+                    {event.repeatCount > 1 && <span className="timeline-count">{event.repeatCount} events</span>}
+                  </div>
+                  <div className="timeline-meta">
+                    <span>{event.worker_id ?? `attempt ${event.attempt}`}</span>
+                    <DateTime value={event.created_at} />
+                  </div>
+                  {event.message && <p>{event.message}</p>}
+                </div>
+              </article>
             ))}
-            {!sortedEvents.length && <EmptyState title="No events for this job" />}
+            {!timelineEvents.length && <EmptyState title="No events for this job" />}
           </div>
         </section>
       </section>