Show reproducible job diagnostics

frontend/src/styles.css

@@ -1346,6 +1346,90 @@ meter {
   white-space: pre-wrap;
 }
 
+.jobDiagnostics {
+  display: grid;
+  gap: 9px;
+  margin-top: 12px;
+}
+
+.jobDetailGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.jobDetailGrid div {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #080a08;
+}
+
+.jobDetailGrid span,
+.jobPath span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.jobDetailGrid strong {
+  min-width: 0;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jobPath {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.jobPath code {
+  display: block;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #080a08;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.jobError {
+  padding: 8px;
+  border: 1px solid rgba(240, 113, 103, 0.45);
+  border-radius: 6px;
+  color: var(--red);
+  background: rgba(240, 113, 103, 0.08);
+  overflow-wrap: anywhere;
+}
+
+.jobDetailBlock {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #080a08;
+}
+
+.jobDetailBlock summary {
+  cursor: pointer;
+  padding: 8px;
+  color: var(--green);
+  font-size: 12px;
+}
+
+.jobDetailBlock pre {
+  min-height: 0;
+  max-height: 180px;
+  margin: 0;
+  border-width: 1px 0 0;
+  border-radius: 0;
+  overflow-wrap: anywhere;
+}
+
 .curvePanel {
   display: grid;
   gap: 10px;
@@ -1479,6 +1563,7 @@ meter {
   .gpuPicker,
   .taskCheckList,
   .agentCheckList,
+  .jobDetailGrid,
   .qualityStats,
   .qualityChecks {
     grid-template-columns: repeat(2, minmax(0, 1fr));