Add structured job progress tracking

frontend/src/styles.css

@@ -631,8 +631,87 @@ textarea {
   color: var(--ink);
 }
 
+.jobRow {
+  grid-template-columns: 1fr;
+}
+
+.jobRowTop {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.jobRowTop span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .jobRow small {
-  grid-column: 1 / -1;
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.progressBox {
+  display: grid;
+  gap: 5px;
+}
+
+.progressTrack {
+  width: 100%;
+  height: 7px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #080a08;
+  border: 1px solid rgba(238, 242, 232, 0.1);
+}
+
+.progressTrack span {
+  display: block;
+  min-width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--cyan);
+  transition: width 180ms ease;
+}
+
+.progressBox[data-stage="completed"] .progressTrack span,
+.progressBox[data-stage="saving"] .progressTrack span {
+  background: var(--green);
+}
+
+.progressBox[data-stage="failed"] .progressTrack span {
+  background: var(--red);
+}
+
+.progressBox[data-stage="cancelled"] .progressTrack span {
+  background: var(--amber);
+}
+
+.progressMeta {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.progressMeta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.progressMeta strong {
+  color: var(--ink);
+  font-size: 11px;
 }
 
 .pill {
@@ -695,7 +774,7 @@ meter {
   min-height: 340px;
   max-height: 520px;
   overflow: auto;
-  margin: 0;
+  margin: 12px 0 0;
   padding: 14px;
   color: #dbe7d8;
   background: #080a08;