completion-kit 0.4.2 → 0.4.7

data/app/assets/stylesheets/completion_kit/application.css

@@ -41,6 +41,7 @@
 html {
   font-size: 18px;
   line-height: 1.5;
+  scrollbar-gutter: stable;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -206,11 +207,16 @@ form.button_to {
   font-family: var(--ck-mono);
   font-size: 0.8rem;
   font-weight: 500;
+  line-height: 1.2;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ck-dim);
 }
 
+.ck-kicker + .ck-results-table {
+  margin-top: 0.45rem;
+}
+
 .ck-title,
 .ck-section-title,
 .ck-card-title,
@@ -430,6 +436,12 @@ tr:hover .ck-chip--publish {
   color: var(--ck-danger);
 }
 
+.ck-chip--done {
+  background: rgba(52, 211, 153, 0.08);
+  border-color: rgba(52, 211, 153, 0.3);
+  color: var(--ck-success);
+}
+
 .ck-badge--high {
   background: var(--ck-success-soft);
   border: 1px solid rgba(34, 197, 94, 0.25);
@@ -865,7 +877,11 @@ tr:hover .ck-chip--publish {
 
 .ck-run-status__action {
   margin: 0;
-  display: inline-block;
+  flex: 1 0 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 0.85rem;
+  border-top: 1px dashed var(--ck-line);
 }
 
 .ck-run-status__retry {
@@ -889,6 +905,97 @@ tr:hover .ck-chip--publish {
   border-color: var(--ck-danger);
 }
 
+.ck-run-status__cells {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 2.5rem;
+  width: 100%;
+}
+
+.ck-run-status__label-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.ck-run-status__pill {
+  margin: 0;
+  padding: 0.18rem 0.5rem 0.18rem 0.45rem;
+  font-size: 0.62rem;
+  letter-spacing: 0.16em;
+  background: rgba(0, 0, 0, 0.25);
+  border-color: var(--ck-line-strong);
+}
+
+.ck-run-status__pill .ck-status-badge__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.ck-run-status__cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.55rem;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+.ck-run-status__cell--grow {
+  flex: 1 1 auto;
+}
+
+.ck-run-status__cell-value {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+}
+
+.ck-run-status__summary-line {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  font-family: var(--ck-mono);
+  font-size: 0.95rem;
+  color: var(--ck-text);
+}
+
+.ck-run-status__summary-num {
+  font-family: var(--ck-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ck-text);
+  line-height: 1;
+}
+
+.ck-run-status__summary-text {
+  font-family: var(--ck-mono);
+  color: var(--ck-muted);
+}
+
+.ck-run-status__summary-sep {
+  color: var(--ck-line-strong);
+  margin: 0 0.15rem;
+}
+
+.ck-run-status__cell-empty {
+  font-family: var(--ck-mono);
+  font-size: 1.4rem;
+  color: var(--ck-dim);
+  line-height: 1;
+}
+
+.ck-badge--lg {
+  font-size: 1.05rem;
+  padding: 0.35rem 0.8rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
 .ck-chip--retry {
   appearance: none;
   font-family: var(--ck-mono);
@@ -977,16 +1084,6 @@ tr:hover .ck-chip--publish {
 }
 
 .ck-model-table thead th .ck-info-toggle {
-  width: 16px;
-  height: 16px;
-  font-size: 0.7rem;
-  font-family: var(--ck-sans);
-  font-weight: 600;
-  letter-spacing: 0;
-  text-indent: 0;
-  line-height: 1;
-  margin-left: 0.4rem;
-  vertical-align: middle;
   position: relative;
   top: -1px;
 }
@@ -1144,14 +1241,6 @@ tr:hover .ck-chip--publish {
   color: var(--ck-warning);
 }
 
-.ck-score {
-  margin: 0.25rem 0 0;
-  font-family: var(--ck-mono);
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.04em;
-  color: var(--ck-accent);
-}
 
 .ck-form-card {
   display: grid;
@@ -1163,6 +1252,7 @@ tr:hover .ck-chip--publish {
   font-family: var(--ck-sans);
   font-size: 0.8rem;
   line-height: 1.4;
+  min-height: 1.12rem;
   margin: 0;
   color: var(--ck-muted);
 }
@@ -1197,6 +1287,32 @@ tr:hover .ck-chip--publish {
   color: var(--ck-danger);
 }
 
+.ck-prompt-summary {
+  margin-top: 0.5rem;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.ck-prompt-summary__description {
+  margin: 0;
+  font-family: var(--ck-sans);
+  font-size: 0.82rem;
+  color: var(--ck-muted);
+}
+
+.ck-prompt-summary__template {
+  margin: 0;
+  padding: 0.5rem 0.65rem;
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  color: var(--ck-muted);
+  background: var(--ck-bg);
+  border-left: 2px solid var(--ck-line);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .ck-run-config {
   display: grid;
   gap: 0;
@@ -1361,8 +1477,8 @@ tr:hover .ck-chip--publish {
 }
 
 .ck-star--filled {
-  fill: var(--ck-accent);
-  stroke: var(--ck-accent);
+  fill: var(--ck-warning);
+  stroke: var(--ck-warning);
 }
 
 .ck-star--empty {
@@ -1534,6 +1650,136 @@ tr:hover .ck-chip--publish {
   font-weight: 700;
 }
 
+.ck-banner {
+  display: grid;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  padding: 0.85rem 1rem;
+  border-radius: var(--ck-radius);
+  border: 1px solid transparent;
+  font-family: var(--ck-sans);
+}
+
+.ck-banner--warn {
+  border-color: rgba(224, 164, 88, 0.3);
+  background: rgba(224, 164, 88, 0.08);
+  color: var(--ck-text);
+}
+
+.ck-banner__title {
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ck-warning);
+}
+
+.ck-banner__body {
+  margin: 0;
+  font-size: 0.88rem;
+  line-height: 1.5;
+  color: var(--ck-muted);
+}
+
+.ck-csv-table-wrap {
+  margin-top: 0.5rem;
+  border: 1px solid var(--ck-line);
+  border-radius: var(--ck-radius);
+  background: var(--ck-bg-strong);
+  overflow: auto;
+  max-height: 60vh;
+}
+
+.ck-modal__body .ck-csv-table-wrap {
+  margin-top: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  max-height: none;
+  overflow: visible;
+}
+
+.ck-csv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--ck-mono);
+  font-size: 0.82rem;
+}
+
+.ck-csv-table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--ck-surface);
+  border-bottom: 1px solid var(--ck-line);
+  text-align: left;
+  padding: 0.55rem 0.75rem;
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--ck-muted);
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.ck-csv-table tbody td {
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--ck-line);
+  color: var(--ck-text);
+  vertical-align: top;
+  max-width: 32rem;
+  transition: background 0.15s;
+}
+
+.ck-csv-table tbody tr:hover td {
+  background: var(--ck-surface-soft);
+}
+
+.ck-csv-cell {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  overflow: hidden;
+  max-height: 1.55em;
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ck-csv-row--expanded .ck-csv-cell {
+  -webkit-line-clamp: 99;
+  line-clamp: 99;
+  max-height: 30em;
+}
+
+.ck-csv-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.ck-csv-table thead th.ck-csv-table__rownum,
+.ck-csv-table tbody td.ck-csv-table__rownum {
+  font-family: var(--ck-mono);
+  font-size: 0.72rem;
+  color: var(--ck-dim);
+  white-space: nowrap;
+  text-align: right;
+  padding-right: 0.85rem;
+  user-select: none;
+  width: 1%;
+}
+
+.ck-banner__code {
+  display: inline-block;
+  font-family: var(--ck-mono);
+  font-size: 0.82rem;
+  padding: 0.05rem 0.35rem;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--ck-line);
+  color: var(--ck-text);
+}
+
 .ck-error-list {
   margin: 0.5rem 0 0;
   padding-left: 1.25rem;
@@ -1602,6 +1848,17 @@ select.ck-input {
   text-align: right;
   color: var(--ck-dim);
   font-size: 1.1rem;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.ck-results-table td:first-child,
+.ck-results-table td:has(time[data-relative-time]) {
+  white-space: nowrap;
+}
+
+.ck-results-table td:has(time[data-relative-time]) {
+  width: 1%;
 }
 
 .ck-details {
@@ -1652,41 +1909,208 @@ select.ck-input {
   border-top: 1px solid var(--ck-line);
 }
 
+.ck-run-config__dataset {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+}
 
-.ck-response-list {
-  display: grid;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+.ck-run-config__dataset-meta {
+  font-family: var(--ck-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+  color: var(--ck-muted);
 }
 
-.ck-response-card {
-  border: 1px solid var(--ck-line);
-  border-radius: var(--ck-radius-lg);
-  background: var(--ck-surface);
-  padding: 1.5rem;
-  transition: border-color 0.15s;
+.ck-run-config__dataset-preview {
+  appearance: none;
+  background: transparent;
+  border: 1px solid rgba(6, 182, 212, 0.4);
+  border-radius: 999px;
+  color: var(--ck-accent);
+  cursor: pointer;
+  font-family: var(--ck-mono);
+  font-size: 0.66rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 0.2rem 0.6rem;
+  transition: background 0.15s;
 }
 
-.ck-response-card:hover {
-  border-color: var(--ck-line-strong);
+.ck-run-config__dataset-preview:hover {
+  background: rgba(6, 182, 212, 0.12);
 }
 
-.ck-response-card--low {
-  border-color: rgba(239, 68, 68, 0.25);
+.ck-modal {
+  padding: 0;
+  margin: auto;
+  border: none;
+  background: transparent;
+  max-width: min(92vw, 880px);
+  width: 100%;
+  color: var(--ck-text);
 }
 
-.ck-response-card--low:hover {
-  border-color: rgba(239, 68, 68, 0.4);
+.ck-modal::backdrop {
+  background: rgba(8, 11, 20, 0.72);
+  backdrop-filter: blur(4px);
 }
 
-.ck-response-card__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
+.ck-modal[open] {
+  animation: ck-modal-in 0.18s ease-out;
 }
 
-.ck-response-card__body {
+@keyframes ck-modal-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.985); }
+  to { opacity: 1; transform: none; }
+}
+
+.ck-modal__panel {
+  display: flex;
+  flex-direction: column;
+  max-height: 82vh;
+  background: var(--ck-surface);
+  border: 1px solid var(--ck-line-strong);
+  border-radius: var(--ck-radius-lg);
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+}
+
+.ck-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.1rem 1.5rem 0.85rem;
+}
+
+.ck-modal__heading {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.85rem;
+  min-width: 0;
+}
+
+.ck-modal__title {
+  margin: 0;
+  font-family: var(--ck-mono);
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ck-text);
+}
+
+.ck-modal__meta {
+  margin: 0;
+  font-family: var(--ck-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  color: var(--ck-dim);
+  text-transform: uppercase;
+}
+
+.ck-modal__close {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 50%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ck-dim);
+  font-family: var(--ck-sans);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+.ck-modal__close:hover {
+  color: var(--ck-text);
+  background: var(--ck-surface-hover);
+}
+
+.ck-modal__close:focus-visible {
+  outline: 2px solid var(--ck-accent);
+  outline-offset: 2px;
+}
+
+.ck-modal__body {
+  flex: 1;
+  margin: 0;
+  background: transparent;
+  overflow: auto;
+  padding: 0 1.5rem;
+}
+
+.ck-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  padding: 0.95rem 1.5rem 1.1rem;
+}
+
+.ck-modal__close-btn {
+  appearance: none;
+  font-family: var(--ck-mono);
+  font-size: 0.74rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 0.55rem 0.95rem;
+  border: 1px solid var(--ck-line-strong);
+  background: transparent;
+  color: var(--ck-text);
+  border-radius: var(--ck-radius);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.ck-modal__close-btn:hover {
+  background: var(--ck-surface-hover);
+}
+
+
+.ck-response-list {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.ck-response-card {
+  border: 1px solid var(--ck-line);
+  border-radius: var(--ck-radius-lg);
+  background: var(--ck-surface);
+  padding: 1.5rem;
+  transition: border-color 0.15s;
+}
+
+.ck-response-card:hover {
+  border-color: var(--ck-line-strong);
+}
+
+.ck-response-card--low {
+  border-color: rgba(239, 68, 68, 0.25);
+}
+
+.ck-response-card--low:hover {
+  border-color: rgba(239, 68, 68, 0.4);
+}
+
+.ck-response-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.ck-response-card__body {
   display: grid;
   gap: 1rem;
 }
@@ -1746,41 +2170,49 @@ select.ck-input {
 
 .ck-dot {
   display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   flex-shrink: 0;
   vertical-align: text-top;
   margin-top: 0.3em;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
 }
 
 .ck-dot--pending {
   background: var(--ck-accent);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(6, 182, 212, 0.45);
 }
 
 .ck-dot--running {
   background: var(--ck-accent);
   animation: ck-pulse 1.5s ease-in-out infinite;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px rgba(6, 182, 212, 0.6);
 }
 
 .ck-dot--completed {
   background: var(--ck-success);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(45, 212, 168, 0.5);
 }
 
 .ck-dot--high {
   background: var(--ck-success);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(45, 212, 168, 0.5);
 }
 
 .ck-dot--medium {
   background: var(--ck-warning);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(224, 164, 88, 0.5);
 }
 
 .ck-dot--low {
   background: var(--ck-danger);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(248, 113, 113, 0.5);
 }
 
 .ck-dot--failed {
   background: var(--ck-danger);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(248, 113, 113, 0.5);
 }
 
 @keyframes ck-pulse {
@@ -1791,7 +2223,12 @@ select.ck-input {
 .ck-run-name {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.6rem;
+}
+
+.ck-run-name .ck-dot {
+  margin: 0;
+  vertical-align: baseline;
 }
 
 .ck-title .ck-run-name {
@@ -2131,24 +2568,200 @@ select.ck-input {
   }
 }
 
+.ck-metric-groups {
+  display: grid;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+}
+
+.ck-metric-groups__label {
+  font-family: var(--ck-mono);
+  font-size: 0.66rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+}
+
+.ck-metric-groups__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.ck-metric-group-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.32rem 0.7rem;
+  background: transparent;
+  border: 1px solid var(--ck-line);
+  border-radius: 999px;
+  color: var(--ck-muted);
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.ck-metric-group-pill:hover {
+  border-color: rgba(6, 182, 212, 0.5);
+  color: var(--ck-text);
+}
+
+.ck-metric-group-pill__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  border: 1px solid var(--ck-line-strong);
+  border-radius: 3px;
+  font-size: 0.62rem;
+  color: transparent;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.ck-metric-group-pill__count {
+  font-family: var(--ck-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.04em;
+  color: var(--ck-dim);
+  padding: 0 0.35rem;
+  border-left: 1px solid var(--ck-line);
+  margin-left: 0.1rem;
+}
+
+.ck-metric-group-pill--active {
+  border-color: var(--ck-accent);
+  color: var(--ck-text);
+  background: rgba(6, 182, 212, 0.08);
+}
+
+.ck-metric-group-pill--active .ck-metric-group-pill__check {
+  background: var(--ck-accent);
+  border-color: var(--ck-accent);
+  color: var(--ck-bg);
+}
+
+.ck-metric-group-pill--active .ck-metric-group-pill__count {
+  color: var(--ck-accent);
+  border-left-color: rgba(6, 182, 212, 0.4);
+}
+
+.ck-metric-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0.15rem 0 0.35rem;
+  color: var(--ck-dim);
+  font-family: var(--ck-mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.ck-metric-divider::before,
+.ck-metric-divider::after {
+  content: "";
+  flex: 1;
+  border-top: 1px dashed var(--ck-line);
+}
+
 .ck-metric-checkboxes {
   display: grid;
-  gap: 0.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.5rem 0.85rem;
 }
 
 .ck-checkbox-label {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  align-items: flex-start;
+  gap: 0.6rem;
   font-family: var(--ck-sans);
-  font-size: 0.9rem;
-  color: var(--ck-text);
+  font-size: 0.88rem;
+  color: var(--ck-muted);
   cursor: pointer;
   padding: 0.35rem 0;
 }
 
-.ck-checkbox-label:hover {
-  color: var(--ck-accent);
+.ck-checkbox-label__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.ck-checkbox-label__text {
+  font-family: var(--ck-mono);
+  font-size: 0.85rem;
+  letter-spacing: -0.01em;
+}
+
+.ck-checkbox-label__hint {
+  font-family: var(--ck-sans);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  color: var(--ck-dim);
+}
+
+.ck-checkbox-label__box {
+  margin-top: 1px;
+}
+
+.ck-checkbox-label input.ck-checkbox {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+
+.ck-checkbox-label__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ck-line-strong);
+  border-radius: 4px;
+  background: var(--ck-surface);
+  flex-shrink: 0;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.ck-checkbox-label__box::after {
+  content: "";
+  width: 8px;
+  height: 4px;
+  border-left: 1.5px solid var(--ck-bg);
+  border-bottom: 1.5px solid var(--ck-bg);
+  transform: rotate(-45deg) translate(1px, -1px) scale(0);
+  transition: transform 0.12s ease-out;
+}
+
+.ck-checkbox-label input.ck-checkbox:checked + .ck-checkbox-label__box {
+  background: var(--ck-accent);
+  border-color: var(--ck-accent);
+}
+
+.ck-checkbox-label input.ck-checkbox:checked + .ck-checkbox-label__box::after {
+  transform: rotate(-45deg) translate(1px, -1px) scale(1);
+}
+
+.ck-checkbox-label input.ck-checkbox:focus-visible + .ck-checkbox-label__box {
+  outline: 2px solid var(--ck-accent);
+  outline-offset: 2px;
+}
+
+.ck-checkbox-label:hover .ck-checkbox-label__box {
+  border-color: var(--ck-accent);
+}
+
+.ck-checkbox-label:hover .ck-checkbox-label__text,
+.ck-checkbox-label input.ck-checkbox:checked ~ .ck-checkbox-label__text {
+  color: var(--ck-text);
 }
 
 .ck-response-row {
@@ -2187,10 +2800,184 @@ select.ck-input {
   white-space: nowrap;
 }
 
+.ck-response-row__metrics {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
 .ck-response-row__score {
   flex-shrink: 0;
 }
 
+.ck-prompts-table th {
+  white-space: nowrap;
+}
+
+.ck-prompts-table th:nth-child(n+2),
+.ck-prompts-table td:nth-child(n+2) {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.ck-prompts-table__runs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  line-height: 1.2;
+}
+
+.ck-prompts-table__runs-count {
+  font-family: var(--ck-mono);
+  color: var(--ck-text);
+}
+
+.ck-prompts-table__runs-when {
+  font-family: var(--ck-sans);
+  font-size: 0.78rem;
+  color: var(--ck-dim);
+}
+
+.ck-prompts-table__dim {
+  color: var(--ck-dim);
+}
+
+.ck-metrics-table__groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+a.ck-metric-group-pill {
+  text-decoration: none;
+}
+
+.ck-metrics-table__dim {
+  color: var(--ck-dim);
+}
+
+.ck-responses-table th {
+  white-space: nowrap;
+}
+
+.ck-responses-table th:first-child {
+  text-align: right;
+  padding-right: 0.85rem;
+}
+
+.ck-responses-table th:not(:nth-child(2)),
+.ck-responses-table td:not(:nth-child(2)) {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.ck-runs-table th {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ck-runs-table td {
+  vertical-align: middle;
+  padding-top: 0.7rem;
+  padding-bottom: 0.7rem;
+}
+
+.ck-runs-table th:nth-child(n+2),
+.ck-runs-table td:nth-child(n+2) {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.ck-runs-table__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.ck-runs-table .ck-run-name {
+  line-height: 1.2;
+}
+
+.ck-runs-table__config {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  color: var(--ck-muted);
+  padding-left: 1.2rem;
+  white-space: nowrap;
+}
+
+.ck-runs-table__config-link {
+  color: var(--ck-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.ck-runs-table__config-link:hover {
+  color: var(--ck-accent);
+}
+
+.ck-runs-table__version {
+  font-family: var(--ck-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  color: var(--ck-dim);
+}
+
+.ck-runs-table__sep {
+  color: var(--ck-line-strong);
+}
+
+.ck-runs-table__dim {
+  color: var(--ck-dim);
+}
+
+.ck-runs-table__count {
+  font-family: var(--ck-mono);
+  white-space: nowrap;
+}
+
+.ck-runs-table__count-of {
+  color: var(--ck-dim);
+  margin-left: 0.15rem;
+}
+
+.ck-runs-table__when {
+  font-family: var(--ck-sans);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--ck-muted);
+  white-space: nowrap;
+}
+
+.ck-response-cell__index {
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  color: var(--ck-dim);
+  text-align: right;
+  width: 1%;
+  padding-right: 0.85rem !important;
+}
+
+.ck-response-cell__text {
+  width: 100%;
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ck-muted);
+}
+
+.ck-response-cell__error {
+  color: var(--ck-danger);
+}
+
+.ck-response-cell__dim {
+  color: var(--ck-dim);
+}
+
 .ck-response-row--pending .ck-response-row__text,
 .ck-response-row--retrying .ck-response-row__text {
   color: var(--ck-dim);
@@ -2206,17 +2993,6 @@ select.ck-input {
   font-size: 0.82rem;
 }
 
-.ck-score {
-  font-size: 0.85rem;
-  color: var(--ck-muted);
-  white-space: nowrap;
-}
-
-.ck-score__star {
-  font-size: 1rem;
-  color: #f59e0b;
-}
-
 .ck-prompt-preview {
   margin-top: 1rem;
 }
@@ -2318,16 +3094,21 @@ select.ck-input {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
   border: 1px solid var(--ck-line-strong);
   color: var(--ck-muted);
-  font-size: 0.65rem;
-  font-weight: 700;
+  font-family: var(--ck-sans);
+  font-size: 0.7rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0;
+  text-indent: 0;
+  text-transform: none;
   cursor: help;
   vertical-align: middle;
-  margin-left: 0.35rem;
+  margin-left: 0.4rem;
   position: relative;
 }