Add filterable artifact browser

frontend/src/styles.css

@@ -936,8 +936,9 @@ textarea {
 }
 
 .jobRow, .resultList a {
+  min-width: 0;
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
   gap: 8px;
   text-align: left;
   padding: 10px;
@@ -952,6 +953,64 @@ textarea {
   grid-template-columns: 1fr;
 }
 
+.resultList span,
+.resultList small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.resultList small {
+  color: var(--muted);
+}
+
+.resultBrowser {
+  display: grid;
+  gap: 10px;
+}
+
+.resultFilters {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.resultFilters label {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.resultFilters span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.resultFilters select {
+  width: 100%;
+  height: 36px;
+  padding: 0 9px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: var(--field);
+  color: var(--ink);
+}
+
+.resultSummary {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.resultSummary strong {
+  color: var(--green);
+  font-size: 24px;
+  line-height: 1;
+}
+
 .jobRowTop {
   min-width: 0;
   display: grid;