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>

frontend/src/styles.css

@@ -357,7 +357,7 @@ label {
 .stats-grid {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(4, minmax(160px, 1fr));
+  grid-template-columns: repeat(3, minmax(160px, 1fr));
 }
 
 .stat-card {
@@ -442,6 +442,16 @@ label {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.detail-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
+}
+
+.detail-wide {
+  grid-column: 1 / -1;
+}
+
 .circle-grid {
   display: grid;
   gap: 12px;
@@ -807,6 +817,141 @@ label {
   padding: 9px;
 }
 
+.detail-fields,
+.json-stack,
+.timeline-list {
+  display: grid;
+  gap: 10px;
+}
+
+.detail-field {
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 10px;
+}
+
+.detail-field > span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.code-token {
+  max-width: 100%;
+  min-width: 0;
+  padding: 6px 8px;
+}
+
+.code-token.wrap {
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.json-block {
+  max-height: 320px;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.error-block {
+  background: color-mix(in srgb, var(--red) 10%, var(--panel-raised));
+  border: 1px solid color-mix(in srgb, var(--red) 34%, var(--border));
+  border-radius: 6px;
+  margin: 0;
+  padding: 10px;
+}
+
+.timeline-item {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 18px minmax(0, 1fr);
+  position: relative;
+}
+
+.timeline-item::before {
+  background: var(--border);
+  bottom: -10px;
+  content: "";
+  left: 8px;
+  position: absolute;
+  top: 18px;
+  width: 1px;
+}
+
+.timeline-item:last-child::before {
+  display: none;
+}
+
+.timeline-dot {
+  background: var(--cyan);
+  border: 3px solid var(--panel);
+  border-radius: 999px;
+  box-shadow: 0 0 0 1px var(--border);
+  display: block;
+  height: 16px;
+  margin-top: 10px;
+  position: relative;
+  width: 16px;
+  z-index: 1;
+}
+
+.timeline-card {
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  padding: 10px;
+}
+
+.timeline-heading,
+.timeline-meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.timeline-heading {
+  justify-content: space-between;
+}
+
+.timeline-meta,
+.timeline-card p {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.timeline-meta > span,
+.timeline-card p {
+  overflow-wrap: anywhere;
+}
+
+.timeline-card p {
+  margin: 0;
+}
+
+.timeline-count {
+  background: var(--subtle);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--ink);
+  font-size: 11px;
+  font-weight: 900;
+  padding: 3px 8px;
+}
+
 .toolbar,
 .filter-grid {
   display: grid;
@@ -1223,6 +1368,7 @@ code {
   }
 
   .dashboard-grid,
+  .detail-grid,
   .stats-grid {
     grid-template-columns: 1fr 1fr;
   }
@@ -1321,9 +1467,11 @@ code {
   }
 
   .dashboard-grid,
+  .detail-grid,
   .stats-grid,
   .circle-grid,
   .filter-grid,
+  .preset-grid,
   .toolbar,
   .compact-row,
   .dot-chart-row {