Expand Seg task coverage and coverage dashboard

frontend/src/styles.css

@@ -182,7 +182,7 @@ h2 {
 }
 
 .metrics {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   margin-bottom: 16px;
 }
 
@@ -233,7 +233,7 @@ h2 {
 
 .taskColumns {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 10px;
 }
 
@@ -397,6 +397,85 @@ textarea {
   overflow: auto;
 }
 
+.coverageGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.coverageGrid div {
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #101310;
+}
+
+.coverageGrid span,
+.coverageGrid strong {
+  display: block;
+}
+
+.coverageGrid span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.coverageGrid strong {
+  margin-top: 6px;
+  font-size: 24px;
+}
+
+.coverageStatus {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+}
+
+.coverageStatus code {
+  min-width: 0;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid var(--line);
+  background: #080a08;
+  color: var(--ink);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.taskCheckList {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  max-height: 280px;
+  overflow: auto;
+}
+
+.taskCheckList div {
+  min-width: 0;
+  padding: 9px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.taskCheckList div.ok {
+  border-color: rgba(157, 226, 111, 0.32);
+}
+
+.taskCheckList div.bad {
+  border-color: rgba(240, 113, 103, 0.55);
+}
+
+.taskCheckList span,
+.taskCheckList small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .datasetCard {
   padding: 12px;
   border: 1px solid var(--line);
@@ -589,8 +668,11 @@ meter {
 @media (max-width: 1180px) {
   body { min-width: 960px; }
   .shell { grid-template-columns: 220px 1fr; }
+  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .taskColumns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .opGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .coverageGrid,
+  .taskCheckList { grid-template-columns: 1fr; }
   .grid.three { grid-template-columns: 1fr; }
   .grid.two { grid-template-columns: 1fr; }
 }