Expose evaluation agents in the web console

frontend/src/styles.css

@@ -610,6 +610,82 @@ textarea {
   white-space: nowrap;
 }
 
+.agentPanel {
+  min-height: 360px;
+}
+
+.agentScore {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: end;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.agentScore strong {
+  font-size: 38px;
+  line-height: 1;
+}
+
+.agentScore span {
+  min-width: 0;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.suggestionList,
+.agentCheckList {
+  display: grid;
+  gap: 8px;
+}
+
+.suggestionList {
+  margin-bottom: 12px;
+}
+
+.suggestionList div,
+.agentCheckList div {
+  min-width: 0;
+  padding: 9px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.suggestionList div {
+  color: var(--ink);
+  line-height: 1.45;
+}
+
+.agentCheckList {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  max-height: 310px;
+  overflow: auto;
+}
+
+.agentCheckList div.ok {
+  border-color: rgba(157, 226, 111, 0.32);
+}
+
+.agentCheckList div.bad {
+  border-color: rgba(240, 113, 103, 0.55);
+}
+
+.agentCheckList span,
+.agentCheckList small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentCheckList small {
+  color: var(--muted);
+  margin-top: 2px;
+}
+
 .datasetCard {
   width: 100%;
   display: block;
@@ -1126,6 +1202,7 @@ meter {
   .opGrid,
   .sampleStrip,
   .taskCheckList,
+  .agentCheckList,
   .qualityStats,
   .qualityChecks {
     grid-template-columns: repeat(2, minmax(0, 1fr));