completion-kit 0.4.1 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/completion_kit/application.css +1882 -785
  3. data/app/controllers/completion_kit/runs_controller.rb +34 -19
  4. data/app/controllers/completion_kit/suggestions_controller.rb +24 -0
  5. data/app/jobs/completion_kit/generate_row_job.rb +7 -0
  6. data/app/jobs/completion_kit/judge_review_job.rb +2 -0
  7. data/app/jobs/completion_kit/model_discovery_job.rb +9 -4
  8. data/app/models/completion_kit/dataset.rb +9 -0
  9. data/app/models/completion_kit/provider_credential.rb +12 -1
  10. data/app/models/completion_kit/response.rb +7 -0
  11. data/app/models/completion_kit/run.rb +47 -9
  12. data/app/services/completion_kit/anthropic_client.rb +33 -14
  13. data/app/services/completion_kit/model_discovery_service.rb +133 -30
  14. data/app/services/completion_kit/ollama_client.rb +31 -10
  15. data/app/services/completion_kit/open_ai_client.rb +35 -13
  16. data/app/services/completion_kit/open_router_client.rb +34 -13
  17. data/app/services/completion_kit/worker_health.rb +4 -1
  18. data/app/views/completion_kit/datasets/index.html.erb +1 -1
  19. data/app/views/completion_kit/datasets/show.html.erb +47 -9
  20. data/app/views/completion_kit/metrics/_form.html.erb +1 -1
  21. data/app/views/completion_kit/metrics/index.html.erb +15 -2
  22. data/app/views/completion_kit/metrics/show.html.erb +1 -1
  23. data/app/views/completion_kit/prompts/index.html.erb +27 -8
  24. data/app/views/completion_kit/prompts/show.html.erb +6 -36
  25. data/app/views/completion_kit/provider_credentials/_discovery_status.html.erb +6 -4
  26. data/app/views/completion_kit/provider_credentials/_form.html.erb +1 -32
  27. data/app/views/completion_kit/provider_credentials/_models_card.html.erb +70 -0
  28. data/app/views/completion_kit/provider_credentials/index.html.erb +1 -1
  29. data/app/views/completion_kit/responses/show.html.erb +27 -6
  30. data/app/views/completion_kit/runs/_actions.html.erb +3 -0
  31. data/app/views/completion_kit/runs/_form.html.erb +114 -20
  32. data/app/views/completion_kit/runs/_response_row.html.erb +52 -22
  33. data/app/views/completion_kit/runs/_row.html.erb +50 -0
  34. data/app/views/completion_kit/runs/_sort_toolbar.html.erb +5 -4
  35. data/app/views/completion_kit/runs/_status_header.html.erb +7 -31
  36. data/app/views/completion_kit/runs/_status_panel.html.erb +80 -0
  37. data/app/views/completion_kit/runs/index.html.erb +4 -16
  38. data/app/views/completion_kit/runs/show.html.erb +111 -17
  39. data/app/views/completion_kit/suggestions/show.html.erb +65 -0
  40. data/app/views/layouts/completion_kit/application.html.erb +71 -0
  41. data/config/routes.rb +8 -2
  42. data/db/migrate/20260507000001_add_discovery_error_to_provider_credentials.rb +5 -0
  43. data/db/migrate/20260507150000_add_temperature_ignored_to_runs.rb +5 -0
  44. data/lib/completion_kit/version.rb +1 -1
  45. metadata +9 -4
  46. data/app/views/completion_kit/runs/_progress.html.erb +0 -18
  47. data/app/views/completion_kit/runs/suggestion.html.erb +0 -47
data/app/assets/stylesheets/completion_kit/application.css CHANGED
@@ -41,6 +41,7 @@
41
41
  html {
42
42
  font-size: 18px;
43
43
  line-height: 1.5;
44
+ scrollbar-gutter: stable;
44
45
  -webkit-font-smoothing: antialiased;
45
46
  -moz-osx-font-smoothing: grayscale;
46
47
  }
@@ -206,11 +207,16 @@ form.button_to {
206
207
  font-family: var(--ck-mono);
207
208
  font-size: 0.8rem;
208
209
  font-weight: 500;
210
+ line-height: 1.2;
209
211
  letter-spacing: 0.08em;
210
212
  text-transform: uppercase;
211
213
  color: var(--ck-dim);
212
214
  }
213
215
 
216
+ .ck-kicker + .ck-results-table {
217
+ margin-top: 0.45rem;
218
+ }
219
+
214
220
  .ck-title,
215
221
  .ck-section-title,
216
222
  .ck-card-title,
@@ -430,6 +436,12 @@ tr:hover .ck-chip--publish {
430
436
  color: var(--ck-danger);
431
437
  }
432
438
 
439
+ .ck-chip--done {
440
+ background: rgba(52, 211, 153, 0.08);
441
+ border-color: rgba(52, 211, 153, 0.3);
442
+ color: var(--ck-success);
443
+ }
444
+
433
445
  .ck-badge--high {
434
446
  background: var(--ck-success-soft);
435
447
  border: 1px solid rgba(34, 197, 94, 0.25);
@@ -724,1167 +736,2246 @@ tr:hover .ck-chip--publish {
724
736
  color: var(--ck-text);
725
737
  }
726
738
 
727
- .ck-progress-block {
728
- padding: 0.5rem 1rem 0.75rem;
729
- border-top: 1px solid var(--ck-line);
730
- font-size: 0.72rem;
739
+ .ck-status-badge {
740
+ display: inline-flex;
741
+ align-items: center;
742
+ gap: 0.55rem;
743
+ padding: 0.35rem 0.7rem 0.35rem 0.65rem;
744
+ margin: 0 0 0.85rem;
745
+ border-radius: 999px;
746
+ border: 1px solid var(--ck-line);
747
+ background: var(--ck-surface-soft);
731
748
  font-family: var(--ck-mono);
749
+ font-size: 0.72rem;
750
+ font-weight: 600;
751
+ letter-spacing: 0.16em;
752
+ text-transform: uppercase;
753
+ line-height: 1;
754
+ color: var(--ck-text);
755
+ }
756
+
757
+ .ck-status-badge__dot {
758
+ width: 8px;
759
+ height: 8px;
760
+ border-radius: 50%;
761
+ flex-shrink: 0;
762
+ background: var(--ck-dim);
763
+ }
764
+
765
+ .ck-status-badge--pending {
766
+ border-color: rgba(139, 154, 181, 0.25);
732
767
  color: var(--ck-muted);
733
- display: flex;
734
- flex-direction: column;
735
- gap: 0.25rem;
768
+ }
769
+ .ck-status-badge--pending .ck-status-badge__dot {
770
+ background: var(--ck-dim);
736
771
  }
737
772
 
738
- .ck-progress-line {
739
- display: flex;
740
- gap: 0.4rem;
741
- align-items: baseline;
773
+ .ck-status-badge--running {
774
+ border-color: rgba(6, 182, 212, 0.4);
775
+ background: rgba(6, 182, 212, 0.08);
776
+ color: var(--ck-accent);
777
+ }
778
+ .ck-status-badge--running .ck-status-badge__dot {
779
+ background: var(--ck-accent);
780
+ box-shadow: 0 0 10px rgba(6, 182, 212, 0.7);
781
+ animation: ck-pulse 1.5s ease-in-out infinite;
782
+ }
783
+
784
+ .ck-status-badge--completed {
785
+ border-color: rgba(45, 212, 168, 0.35);
786
+ background: rgba(45, 212, 168, 0.08);
787
+ color: var(--ck-success);
788
+ }
789
+ .ck-status-badge--completed .ck-status-badge__dot {
790
+ background: var(--ck-success);
791
+ box-shadow: 0 0 8px rgba(45, 212, 168, 0.6);
742
792
  }
743
793
 
744
- .ck-progress-failed {
794
+ .ck-status-badge--failed {
795
+ border-color: rgba(248, 113, 113, 0.4);
796
+ background: rgba(248, 113, 113, 0.08);
745
797
  color: var(--ck-danger);
746
798
  }
799
+ .ck-status-badge--failed .ck-status-badge__dot {
800
+ background: var(--ck-danger);
801
+ box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
802
+ }
747
803
 
748
- .ck-model-list-details summary {
749
- list-style: none;
804
+ .ck-run-status {
805
+ display: flex;
806
+ flex-wrap: wrap;
807
+ align-items: center;
808
+ justify-content: space-between;
809
+ gap: 1.5rem;
810
+ padding: 1.4rem 1.6rem;
811
+ margin: 2rem 0 1.25rem;
812
+ border: 1px solid var(--ck-line);
813
+ border-radius: var(--ck-radius-lg);
814
+ background: var(--ck-surface);
750
815
  }
751
816
 
752
- .ck-model-list-details summary::before {
753
- content: '▸ ';
754
- color: var(--ck-dim);
817
+ .ck-run-status--running {
818
+ border-color: rgba(6, 182, 212, 0.25);
819
+ background: linear-gradient(180deg, rgba(6, 182, 212, 0.05), var(--ck-surface) 70%);
755
820
  }
756
821
 
757
- .ck-model-list-details[open] summary::before {
758
- content: '▾ ';
822
+ .ck-run-status--completed {
823
+ border-color: rgba(45, 212, 168, 0.2);
759
824
  }
760
825
 
761
- .ck-model-list {
826
+ .ck-run-status__metrics {
762
827
  display: flex;
763
828
  flex-wrap: wrap;
764
- gap: 0.3rem;
765
- margin-top: 0.5rem;
766
- max-height: 240px;
767
- overflow-y: auto;
829
+ gap: 2.5rem;
830
+ align-items: flex-start;
768
831
  }
769
832
 
770
- .ck-model-list__item {
771
- display: inline-flex;
772
- align-items: baseline;
773
- gap: 0.35rem;
774
- padding: 0.2rem 0.5rem;
833
+ .ck-run-status__metric-label {
834
+ display: block;
835
+ margin: 0 0 0.4rem;
775
836
  font-family: var(--ck-mono);
776
837
  font-size: 0.7rem;
777
- color: var(--ck-muted);
778
- background: var(--ck-surface-soft);
779
- border: 1px solid var(--ck-line);
780
- border-radius: 3px;
838
+ font-weight: 500;
839
+ letter-spacing: 0.14em;
840
+ text-transform: uppercase;
841
+ color: var(--ck-dim);
781
842
  }
782
843
 
783
- .ck-model-list__badge {
784
- font-size: 0.6rem;
785
- color: var(--ck-dim);
786
- text-transform: uppercase;
787
- letter-spacing: 0.05em;
844
+ .ck-run-status__metric-value {
845
+ display: flex;
846
+ align-items: baseline;
847
+ gap: 0.4rem;
848
+ margin: 0;
849
+ font-family: var(--ck-mono);
850
+ line-height: 1;
788
851
  }
789
852
 
790
- .ck-button--warning {
791
- background: transparent;
792
- border-color: rgba(245, 158, 11, 0.4);
793
- color: var(--ck-warning);
853
+ .ck-run-status__metric-num {
854
+ font-size: 1.6rem;
855
+ font-weight: 700;
856
+ letter-spacing: -0.02em;
857
+ color: var(--ck-text);
794
858
  }
795
859
 
796
- .ck-button--warning:hover {
797
- background: var(--ck-warning-soft);
798
- border-color: var(--ck-warning);
860
+ .ck-run-status__metric-total {
861
+ font-size: 1rem;
862
+ color: var(--ck-muted);
799
863
  }
800
864
 
801
- .ck-button--info {
802
- background: transparent;
803
- border-color: rgba(59, 130, 246, 0.4);
804
- color: var(--ck-info);
865
+ .ck-run-status__metric-fail {
866
+ margin-left: 0.35rem;
867
+ padding: 0.18rem 0.45rem;
868
+ border: 1px solid rgba(248, 113, 113, 0.35);
869
+ background: rgba(248, 113, 113, 0.08);
870
+ border-radius: 3px;
871
+ font-size: 0.66rem;
872
+ font-weight: 600;
873
+ letter-spacing: 0.12em;
874
+ text-transform: uppercase;
875
+ color: var(--ck-danger);
805
876
  }
806
877
 
807
- .ck-button--info:hover {
808
- background: var(--ck-info-soft);
809
- border-color: var(--ck-info);
878
+ .ck-run-status__action {
879
+ margin: 0;
880
+ flex: 1 0 100%;
881
+ display: flex;
882
+ justify-content: flex-end;
883
+ padding-top: 0.85rem;
884
+ border-top: 1px dashed var(--ck-line);
810
885
  }
811
886
 
812
- .ck-code,
813
- .ck-note-box {
814
- margin-top: 0.5rem;
887
+ .ck-run-status__retry {
888
+ appearance: none;
889
+ font-family: var(--ck-mono);
890
+ font-size: 0.74rem;
891
+ font-weight: 600;
892
+ letter-spacing: 0.12em;
893
+ text-transform: uppercase;
894
+ padding: 0.7rem 1.1rem;
895
+ border: 1px solid rgba(248, 113, 113, 0.5);
896
+ background: rgba(248, 113, 113, 0.08);
897
+ color: var(--ck-danger);
815
898
  border-radius: var(--ck-radius);
816
- padding: 0.85rem;
817
- font-size: 0.82rem;
818
- line-height: 1.65;
899
+ cursor: pointer;
900
+ transition: background 0.15s, border-color 0.15s;
819
901
  }
820
902
 
821
- .ck-code {
822
- font-family: var(--ck-mono);
823
- background: var(--ck-bg);
824
- border: 1px solid var(--ck-line);
825
- color: var(--ck-text);
826
- font-size: 0.9rem;
903
+ .ck-run-status__retry:hover {
904
+ background: rgba(248, 113, 113, 0.16);
905
+ border-color: var(--ck-danger);
827
906
  }
828
907
 
829
- .ck-code--dark {
830
- background: #020409;
831
- border-color: var(--ck-line);
832
- color: var(--ck-accent);
908
+ .ck-run-status__cells {
909
+ display: flex;
910
+ align-items: stretch;
911
+ flex-wrap: wrap;
912
+ gap: 2.5rem;
913
+ width: 100%;
833
914
  }
834
915
 
835
- .ck-note-box {
836
- background: var(--ck-surface-soft);
837
- border: 1px solid var(--ck-line);
838
- color: var(--ck-muted);
839
- font-family: var(--ck-sans);
916
+ .ck-run-status__label-row {
917
+ display: inline-flex;
918
+ align-items: center;
919
+ gap: 0.6rem;
840
920
  }
841
921
 
842
- .ck-note-box--strong {
843
- background: var(--ck-warning-soft);
844
- border-color: rgba(245, 158, 11, 0.25);
845
- color: var(--ck-warning);
922
+ .ck-run-status__pill {
923
+ margin: 0;
924
+ padding: 0.18rem 0.5rem 0.18rem 0.45rem;
925
+ font-size: 0.62rem;
926
+ letter-spacing: 0.16em;
927
+ background: rgba(0, 0, 0, 0.25);
928
+ border-color: var(--ck-line-strong);
846
929
  }
847
930
 
848
- .ck-score {
849
- margin: 0.25rem 0 0;
850
- font-family: var(--ck-mono);
851
- font-size: 2rem;
852
- font-weight: 700;
853
- letter-spacing: -0.04em;
854
- color: var(--ck-accent);
931
+ .ck-run-status__pill .ck-status-badge__dot {
932
+ width: 6px;
933
+ height: 6px;
855
934
  }
856
935
 
857
- .ck-form-card {
858
- display: grid;
859
- gap: 1rem;
860
- max-width: 36rem;
936
+ .ck-run-status__cell {
937
+ display: flex;
938
+ flex-direction: column;
939
+ align-items: flex-start;
940
+ gap: 0.55rem;
941
+ flex-shrink: 0;
942
+ min-width: 0;
861
943
  }
862
944
 
863
- .ck-field-hint {
864
- font-family: var(--ck-sans);
865
- font-size: 0.8rem;
866
- line-height: 1.4;
867
- margin: 0;
868
- color: var(--ck-muted);
945
+ .ck-run-status__cell--grow {
946
+ flex: 1 1 auto;
869
947
  }
870
948
 
871
- .ck-field--info #refresh-status,
872
- .ck-field--warn #refresh-status,
873
- .ck-field--error #refresh-status {
874
- color: var(--ck-muted);
949
+ .ck-run-status__cell-value {
950
+ display: flex;
951
+ align-items: center;
952
+ min-height: 2rem;
875
953
  }
876
954
 
877
- .ck-field--info .ck-input {
878
- border-color: var(--ck-accent);
955
+ .ck-run-status__summary-line {
956
+ margin: 0;
957
+ display: flex;
958
+ align-items: baseline;
959
+ flex-wrap: wrap;
960
+ gap: 0.4rem;
961
+ font-family: var(--ck-mono);
962
+ font-size: 0.95rem;
963
+ color: var(--ck-text);
879
964
  }
880
965
 
881
- .ck-field--info .ck-field-hint {
882
- color: var(--ck-accent);
966
+ .ck-run-status__summary-num {
967
+ font-family: var(--ck-mono);
968
+ font-size: 1.4rem;
969
+ font-weight: 700;
970
+ letter-spacing: -0.02em;
971
+ color: var(--ck-text);
972
+ line-height: 1;
883
973
  }
884
974
 
885
- .ck-field--warn .ck-input {
886
- border-color: var(--ck-warning);
975
+ .ck-run-status__summary-text {
976
+ font-family: var(--ck-mono);
977
+ color: var(--ck-muted);
887
978
  }
888
979
 
889
- .ck-field--warn .ck-field-hint {
890
- color: var(--ck-warning);
980
+ .ck-run-status__summary-sep {
981
+ color: var(--ck-line-strong);
982
+ margin: 0 0.15rem;
891
983
  }
892
984
 
893
- .ck-field--error .ck-input {
894
- border-color: var(--ck-danger);
985
+ .ck-run-status__cell-empty {
986
+ font-family: var(--ck-mono);
987
+ font-size: 1.4rem;
988
+ color: var(--ck-dim);
989
+ line-height: 1;
895
990
  }
896
991
 
897
- .ck-field--error .ck-field-hint {
992
+ .ck-badge--lg {
993
+ font-size: 1.05rem;
994
+ padding: 0.35rem 0.8rem;
995
+ letter-spacing: 0;
996
+ text-transform: none;
997
+ }
998
+
999
+ .ck-chip--retry {
1000
+ appearance: none;
1001
+ font-family: var(--ck-mono);
1002
+ font-size: 0.7rem;
1003
+ font-weight: 600;
1004
+ letter-spacing: 0.12em;
1005
+ text-transform: uppercase;
1006
+ padding: 0.25rem 0.55rem;
1007
+ border: 1px solid rgba(248, 113, 113, 0.5);
1008
+ background: rgba(248, 113, 113, 0.08);
898
1009
  color: var(--ck-danger);
1010
+ border-radius: 4px;
1011
+ cursor: pointer;
1012
+ transition: background 0.15s;
1013
+ text-decoration: none;
899
1014
  }
900
1015
 
901
- .ck-run-config {
902
- display: grid;
903
- gap: 0;
904
- max-width: 32rem;
905
- border: 1px solid var(--ck-line);
906
- border-radius: var(--ck-radius-lg);
907
- background: var(--ck-surface);
908
- overflow: hidden;
1016
+ .ck-chip--retry:hover {
1017
+ background: rgba(248, 113, 113, 0.18);
909
1018
  }
910
1019
 
911
- .ck-run-config__row {
912
- display: flex;
913
- align-items: center;
914
- gap: 0.75rem;
915
- padding: 0.65rem 1rem;
916
- min-height: 2.75rem;
917
- font-family: var(--ck-sans);
918
- font-size: 0.88rem;
1020
+ @media (max-width: 720px) {
1021
+ .ck-run-status {
1022
+ flex-direction: column;
1023
+ align-items: stretch;
1024
+ }
1025
+ .ck-run-status__metrics {
1026
+ gap: 1.5rem;
1027
+ }
919
1028
  }
920
1029
 
921
- .ck-run-config__row + .ck-run-config__row {
922
- border-top: 1px solid var(--ck-line);
1030
+ .ck-model-list-details summary {
1031
+ list-style: none;
923
1032
  }
924
1033
 
925
- .ck-run-config__key {
926
- flex-shrink: 0;
927
- width: 5rem;
928
- font-family: var(--ck-mono);
929
- font-size: 0.72rem;
930
- font-weight: 500;
931
- letter-spacing: 0.06em;
932
- text-transform: uppercase;
1034
+ .ck-model-list-details summary::before {
1035
+ content: '▸ ';
933
1036
  color: var(--ck-dim);
934
1037
  }
935
1038
 
936
- .ck-run-config__none {
937
- color: var(--ck-dim);
1039
+ .ck-model-list-details[open] summary::before {
1040
+ content: '▾ ';
938
1041
  }
939
1042
 
940
- .ck-run-config__warn {
941
- color: var(--ck-warning);
942
- font-size: 0.82rem;
943
- }
944
-
945
- .ck-run-config__note {
946
- border-top: 1px solid var(--ck-line);
947
- padding: 0.55rem 1rem;
948
- min-height: 2.75rem;
949
- display: flex;
950
- align-items: center;
951
- font-family: var(--ck-sans);
952
- font-size: 0.82rem;
953
- color: var(--ck-accent);
954
- background: var(--ck-accent-soft);
1043
+ .ck-model-list__progress {
1044
+ margin-top: 0.65rem;
955
1045
  }
956
1046
 
957
- .ck-status-indicator {
958
- display: flex;
959
- align-items: center;
960
- gap: 0.75rem;
961
- margin-bottom: 1.25rem;
1047
+ .ck-model-list__progress .ck-discovery-bar {
1048
+ padding: 0;
962
1049
  }
963
1050
 
964
- .ck-field {
965
- display: grid;
966
- gap: 0.4rem;
1051
+ .ck-model-table-wrap {
1052
+ margin-top: 0.85rem;
1053
+ border: 1px solid var(--ck-line);
1054
+ border-radius: var(--ck-radius);
1055
+ background: var(--ck-surface);
967
1056
  }
968
1057
 
969
- .ck-field--spacious {
970
- margin-top: 0.3rem;
1058
+ .ck-model-table {
1059
+ width: 100%;
1060
+ border-collapse: collapse;
1061
+ font-family: var(--ck-mono);
1062
+ font-size: 0.8rem;
971
1063
  }
972
1064
 
973
- .ck-field--tight {
974
- gap: 0.3rem;
1065
+ .ck-model-table thead th {
1066
+ position: sticky;
1067
+ top: 0;
1068
+ z-index: 1;
1069
+ padding: 0.5rem 0.85rem;
1070
+ background: var(--ck-surface-soft);
1071
+ border-bottom: 1px solid var(--ck-line);
1072
+ font-size: 0.66rem;
1073
+ font-weight: 500;
1074
+ letter-spacing: 0.14em;
1075
+ text-transform: uppercase;
1076
+ color: var(--ck-dim);
1077
+ text-align: left;
975
1078
  }
976
1079
 
977
- .ck-input {
978
- width: 100%;
979
- padding: 0.65rem 0.85rem;
980
- border: 1px solid var(--ck-line-strong);
981
- border-radius: var(--ck-radius);
982
- background: var(--ck-bg);
983
- color: var(--ck-text);
984
- font-family: var(--ck-sans);
985
- font-size: 0.95rem;
986
- transition: border-color 0.15s, box-shadow 0.15s;
1080
+ .ck-model-table thead th.ck-model-table__cap {
1081
+ text-align: center;
1082
+ width: 6.5rem;
1083
+ white-space: nowrap;
987
1084
  }
988
1085
 
989
- .ck-input:focus {
990
- outline: none;
991
- border-color: var(--ck-accent);
992
- box-shadow: 0 0 0 3px var(--ck-accent-soft);
1086
+ .ck-model-table thead th .ck-info-toggle {
1087
+ position: relative;
1088
+ top: -1px;
993
1089
  }
994
1090
 
995
- .ck-input::placeholder {
996
- color: var(--ck-dim);
1091
+ .ck-model-table tbody tr {
1092
+ border-top: 1px solid var(--ck-line);
997
1093
  }
998
1094
 
999
- .ck-input--area {
1000
- min-height: 10rem;
1001
- resize: vertical;
1095
+ .ck-model-table tbody tr:first-child {
1096
+ border-top: 0;
1002
1097
  }
1003
1098
 
1004
- .ck-input--code {
1005
- font-family: var(--ck-mono);
1006
- font-size: 0.9rem;
1099
+ .ck-model-table tbody tr:hover {
1100
+ background: var(--ck-surface-hover);
1007
1101
  }
1008
1102
 
1009
- .ck-checkbox {
1010
- width: 1rem;
1011
- height: 1rem;
1012
- accent-color: var(--ck-accent);
1103
+ .ck-model-table td {
1104
+ padding: 0.55rem 0.85rem;
1105
+ vertical-align: middle;
1013
1106
  }
1014
1107
 
1015
- .ck-section-title {
1016
- font-size: 1.05rem;
1017
- font-weight: 600;
1108
+ .ck-model-table td.ck-model-table__name {
1018
1109
  color: var(--ck-text);
1110
+ letter-spacing: -0.01em;
1019
1111
  }
1020
1112
 
1021
- .ck-rubric-builder,
1022
- .ck-rubric-display {
1023
- display: grid;
1024
- gap: 0.5rem;
1025
- margin-top: 0.75rem;
1113
+ .ck-model-table td.ck-model-table__cap {
1114
+ text-align: center;
1115
+ width: 6.5rem;
1026
1116
  }
1027
1117
 
1028
- .ck-rubric-row {
1029
- display: grid;
1030
- grid-template-columns: 5.5rem minmax(0, 1fr);
1031
- gap: 0.85rem;
1032
- align-items: flex-start;
1033
- padding: 0.85rem;
1034
- border: 1px solid var(--ck-line);
1035
- border-radius: var(--ck-radius);
1036
- background: var(--ck-surface-soft);
1118
+ .ck-model-table__tick {
1119
+ display: inline-flex;
1120
+ align-items: center;
1121
+ justify-content: center;
1122
+ width: 1.25rem;
1123
+ height: 1.25rem;
1124
+ border-radius: 50%;
1125
+ background: rgba(45, 212, 168, 0.12);
1126
+ color: var(--ck-success);
1127
+ font-size: 0.78rem;
1128
+ font-weight: 700;
1129
+ line-height: 1;
1037
1130
  }
1038
1131
 
1039
- .ck-rubric-row--display {
1040
- background: var(--ck-bg-strong);
1132
+ .ck-model-table__dash {
1133
+ color: var(--ck-dim);
1134
+ font-size: 0.85rem;
1041
1135
  }
1042
1136
 
1043
- .ck-rubric-row__stars {
1137
+ .ck-model-list__summary {
1044
1138
  display: flex;
1045
1139
  align-items: center;
1046
- gap: 1px;
1047
- padding-top: 0.5rem;
1048
- }
1049
-
1050
- .ck-rubric-row__fields {
1051
- display: grid;
1052
- gap: 0.6rem;
1053
- }
1054
-
1055
- .ck-star {
1056
- stroke-width: 1.75;
1140
+ justify-content: space-between;
1141
+ gap: 0.75rem;
1142
+ cursor: pointer;
1143
+ user-select: none;
1057
1144
  }
1058
1145
 
1059
- .ck-star--filled {
1060
- fill: var(--ck-accent);
1061
- stroke: var(--ck-accent);
1146
+ .ck-model-list__summary-label {
1147
+ flex: 1;
1148
+ font-family: var(--ck-mono);
1149
+ font-size: 0.78rem;
1150
+ font-weight: 500;
1151
+ letter-spacing: 0.04em;
1152
+ color: var(--ck-text);
1062
1153
  }
1063
1154
 
1064
- .ck-star--empty {
1065
- fill: none;
1066
- stroke: var(--ck-dim);
1155
+ .ck-model-list__summary-count {
1156
+ display: inline-block;
1157
+ margin-left: 0.35rem;
1158
+ padding: 0.05rem 0.4rem;
1159
+ border-radius: 999px;
1160
+ background: var(--ck-surface-soft);
1161
+ border: 1px solid var(--ck-line);
1162
+ font-size: 0.7rem;
1163
+ color: var(--ck-muted);
1164
+ font-weight: 500;
1067
1165
  }
1068
1166
 
1069
- .ck-step-row {
1070
- display: flex;
1071
- gap: 0.5rem;
1167
+ .ck-model-list__summary-meta {
1168
+ display: inline-flex;
1072
1169
  align-items: center;
1073
- margin-bottom: 0.4rem;
1170
+ gap: 0.6rem;
1074
1171
  }
1075
1172
 
1076
- .ck-step-row .ck-input {
1077
- flex: 1;
1173
+ .ck-model-list__summary-stamp {
1174
+ font-family: var(--ck-mono);
1175
+ font-size: 0.7rem;
1176
+ color: var(--ck-dim);
1177
+ letter-spacing: 0.04em;
1078
1178
  }
1079
1179
 
1080
- .ck-icon-btn {
1081
- background: none;
1082
- border: 1px solid transparent;
1083
- border-radius: var(--ck-radius);
1084
- padding: 0.375rem;
1085
- cursor: pointer;
1086
- display: flex;
1087
- align-items: center;
1088
- justify-content: center;
1089
- color: var(--ck-dim);
1090
- transition: all 0.15s;
1180
+ .ck-model-list__refresh {
1181
+ width: 1.6rem;
1182
+ height: 1.6rem;
1183
+ padding: 0;
1091
1184
  }
1092
1185
 
1093
- .ck-icon-btn svg {
1094
- width: 16px;
1095
- height: 16px;
1186
+ .ck-button--warning {
1187
+ background: transparent;
1188
+ border-color: rgba(245, 158, 11, 0.4);
1189
+ color: var(--ck-warning);
1096
1190
  }
1097
1191
 
1098
- .ck-select-with-action {
1099
- display: flex;
1100
- gap: 0.5rem;
1101
- align-items: center;
1192
+ .ck-button--warning:hover {
1193
+ background: var(--ck-warning-soft);
1194
+ border-color: var(--ck-warning);
1102
1195
  }
1103
1196
 
1104
- .ck-select-with-action .ck-input {
1105
- flex: 1;
1197
+ .ck-button--info {
1198
+ background: transparent;
1199
+ border-color: rgba(59, 130, 246, 0.4);
1200
+ color: var(--ck-info);
1106
1201
  }
1107
1202
 
1108
- .ck-icon-btn:hover {
1109
- background: rgba(255, 255, 255, 0.05);
1110
- border-color: var(--ck-line-strong);
1111
- color: var(--ck-danger);
1203
+ .ck-button--info:hover {
1204
+ background: var(--ck-info-soft);
1205
+ border-color: var(--ck-info);
1112
1206
  }
1113
1207
 
1114
- .ck-icon-btn--spinning svg {
1115
- animation: ck-spin 0.8s linear infinite;
1208
+ .ck-code,
1209
+ .ck-note-box {
1210
+ margin-top: 0.5rem;
1211
+ border-radius: var(--ck-radius);
1212
+ padding: 0.85rem;
1213
+ font-size: 0.82rem;
1214
+ line-height: 1.65;
1116
1215
  }
1117
1216
 
1118
- .ck-icon-btn--spinning {
1119
- pointer-events: none;
1120
- color: var(--ck-accent);
1217
+ .ck-code {
1218
+ font-family: var(--ck-mono);
1219
+ background: var(--ck-bg);
1220
+ border: 1px solid var(--ck-line);
1221
+ color: var(--ck-text);
1222
+ font-size: 0.9rem;
1121
1223
  }
1122
1224
 
1123
- @keyframes ck-spin {
1124
- to { transform: rotate(360deg); }
1225
+ .ck-code--dark {
1226
+ background: #020409;
1227
+ border-color: var(--ck-line);
1228
+ color: var(--ck-accent);
1125
1229
  }
1126
1230
 
1127
- .ck-add-btn {
1128
- display: inline-flex;
1129
- align-items: center;
1130
- gap: 0.4rem;
1231
+ .ck-note-box {
1232
+ background: var(--ck-surface-soft);
1233
+ border: 1px solid var(--ck-line);
1131
1234
  color: var(--ck-muted);
1132
- font-size: 0.85rem;
1133
- cursor: pointer;
1134
- padding: 0.25rem 0;
1135
- margin-top: 0.25rem;
1136
- background: none;
1137
- border: none;
1138
- transition: color 0.15s;
1235
+ font-family: var(--ck-sans);
1139
1236
  }
1140
1237
 
1141
- .ck-add-btn:hover {
1142
- color: var(--ck-text);
1238
+ .ck-note-box--strong {
1239
+ background: var(--ck-warning-soft);
1240
+ border-color: rgba(245, 158, 11, 0.25);
1241
+ color: var(--ck-warning);
1143
1242
  }
1144
1243
 
1145
- .ck-step-list {
1146
- padding-left: 1.5rem;
1244
+
1245
+ .ck-form-card {
1147
1246
  display: grid;
1148
- gap: 0.4rem;
1247
+ gap: 1rem;
1248
+ max-width: 36rem;
1149
1249
  }
1150
1250
 
1151
- .ck-step-list li {
1152
- color: var(--ck-text);
1153
- line-height: 1.5;
1251
+ .ck-field-hint {
1252
+ font-family: var(--ck-sans);
1253
+ font-size: 0.8rem;
1254
+ line-height: 1.4;
1255
+ min-height: 1.12rem;
1256
+ margin: 0;
1257
+ color: var(--ck-muted);
1154
1258
  }
1155
1259
 
1156
- .ck-filter-grid {
1157
- display: grid;
1158
- gap: 0.75rem;
1260
+ .ck-field--info #refresh-status,
1261
+ .ck-field--warn #refresh-status,
1262
+ .ck-field--error #refresh-status {
1263
+ color: var(--ck-muted);
1159
1264
  }
1160
1265
 
1161
- .ck-item {
1162
- display: flex;
1163
- flex-wrap: wrap;
1164
- align-items: center;
1165
- justify-content: space-between;
1166
- gap: 0.75rem;
1167
- padding: 0.75rem 0.85rem;
1168
- border: 1px solid var(--ck-line);
1169
- border-radius: var(--ck-radius);
1170
- background: var(--ck-surface-soft);
1171
- transition: border-color 0.15s;
1172
- }
1173
-
1174
- .ck-item:hover {
1175
- border-color: var(--ck-line-strong);
1266
+ .ck-field--info .ck-input {
1267
+ border-color: var(--ck-accent);
1176
1268
  }
1177
1269
 
1178
- .ck-stat-list {
1179
- display: grid;
1180
- gap: 0.5rem;
1181
- margin: 0.75rem 0 0;
1270
+ .ck-field--info .ck-field-hint {
1271
+ color: var(--ck-accent);
1182
1272
  }
1183
1273
 
1184
- .ck-stat-row {
1185
- display: flex;
1186
- align-items: center;
1187
- justify-content: space-between;
1188
- gap: 1rem;
1189
- padding-bottom: 0.5rem;
1190
- border-bottom: 1px solid var(--ck-line);
1191
- font-family: var(--ck-mono);
1192
- font-size: 0.9rem;
1193
- color: var(--ck-muted);
1274
+ .ck-field--warn .ck-input {
1275
+ border-color: var(--ck-warning);
1194
1276
  }
1195
1277
 
1196
- .ck-stat-row:last-child {
1197
- padding-bottom: 0;
1198
- border-bottom: 0;
1278
+ .ck-field--warn .ck-field-hint {
1279
+ color: var(--ck-warning);
1199
1280
  }
1200
1281
 
1201
- .ck-stat-row dd {
1202
- margin: 0;
1203
- font-weight: 700;
1204
- color: var(--ck-text);
1282
+ .ck-field--error .ck-input {
1283
+ border-color: var(--ck-danger);
1205
1284
  }
1206
1285
 
1207
- .ck-flash {
1208
- margin-bottom: 1rem;
1209
- padding: 0.75rem 1rem;
1210
- border-radius: var(--ck-radius);
1211
- border: 1px solid transparent;
1212
- font-family: var(--ck-sans);
1213
- font-size: 0.95rem;
1286
+ .ck-field--error .ck-field-hint {
1287
+ color: var(--ck-danger);
1214
1288
  }
1215
1289
 
1216
- .ck-flash--notice {
1217
- border-color: rgba(34, 197, 94, 0.3);
1218
- background: var(--ck-success-soft);
1219
- color: var(--ck-success);
1290
+ .ck-prompt-summary {
1291
+ margin-top: 0.5rem;
1292
+ display: grid;
1293
+ gap: 0.4rem;
1220
1294
  }
1221
1295
 
1222
- .ck-flash--alert {
1223
- border-color: rgba(239, 68, 68, 0.3);
1224
- background: var(--ck-danger-soft);
1225
- color: var(--ck-danger);
1296
+ .ck-prompt-summary__description {
1297
+ margin: 0;
1298
+ font-family: var(--ck-sans);
1299
+ font-size: 0.82rem;
1300
+ color: var(--ck-muted);
1226
1301
  }
1227
1302
 
1228
- .ck-flash__title {
1303
+ .ck-prompt-summary__template {
1229
1304
  margin: 0;
1230
- font-weight: 700;
1305
+ padding: 0.5rem 0.65rem;
1306
+ font-family: var(--ck-mono);
1307
+ font-size: 0.78rem;
1308
+ line-height: 1.45;
1309
+ color: var(--ck-muted);
1310
+ background: var(--ck-bg);
1311
+ border-left: 2px solid var(--ck-line);
1312
+ white-space: pre-wrap;
1313
+ word-break: break-word;
1231
1314
  }
1232
1315
 
1233
- .ck-error-list {
1234
- margin: 0.5rem 0 0;
1235
- padding-left: 1.25rem;
1316
+ .ck-run-config {
1317
+ display: grid;
1318
+ gap: 0;
1319
+ max-width: 32rem;
1320
+ margin-bottom: 1.5rem;
1321
+ border: 1px solid var(--ck-line);
1322
+ border-radius: var(--ck-radius-lg);
1323
+ background: var(--ck-surface);
1324
+ overflow: hidden;
1236
1325
  }
1237
1326
 
1238
- select.ck-input {
1239
- appearance: none;
1240
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1241
- background-repeat: no-repeat;
1242
- background-position: right 0.75rem center;
1243
- padding-right: 2rem;
1327
+ .ck-run-config + .ck-prompt-preview {
1328
+ margin-top: 0.5rem;
1244
1329
  }
1245
1330
 
1246
- .ck-results-table {
1247
- width: 100%;
1248
- border-collapse: separate;
1249
- border-spacing: 0;
1250
- border: 1px solid var(--ck-line);
1251
- border-radius: var(--ck-radius-lg);
1252
- overflow: hidden;
1253
- font-size: 0.95rem;
1331
+ .ck-run-config__row {
1332
+ display: flex;
1333
+ align-items: center;
1334
+ gap: 0.75rem;
1335
+ padding: 0.65rem 1rem;
1336
+ min-height: 2.75rem;
1337
+ font-family: var(--ck-sans);
1338
+ font-size: 0.88rem;
1254
1339
  }
1255
1340
 
1256
- .ck-results-table th,
1257
- .ck-results-table td {
1258
- padding: 0.75rem 1rem;
1259
- text-align: left;
1341
+ .ck-run-config__row + .ck-run-config__row {
1342
+ border-top: 1px solid var(--ck-line);
1260
1343
  }
1261
1344
 
1262
- .ck-results-table thead th {
1263
- background: var(--ck-surface-soft);
1264
- border-bottom: 1px solid var(--ck-line);
1345
+ .ck-run-config__key {
1346
+ flex-shrink: 0;
1347
+ width: 5rem;
1265
1348
  font-family: var(--ck-mono);
1266
- font-size: 0.8rem;
1349
+ font-size: 0.72rem;
1267
1350
  font-weight: 500;
1268
- letter-spacing: 0.08em;
1351
+ letter-spacing: 0.06em;
1269
1352
  text-transform: uppercase;
1270
1353
  color: var(--ck-dim);
1271
1354
  }
1272
1355
 
1273
- .ck-results-table tbody tr {
1274
- border-bottom: 1px solid var(--ck-line);
1275
- background: var(--ck-surface);
1276
- transition: background 0.15s;
1356
+ .ck-run-config__none {
1357
+ color: var(--ck-dim);
1277
1358
  }
1278
1359
 
1279
- .ck-results-table tbody tr:last-child {
1280
- border-bottom: none;
1360
+ .ck-run-config__warn {
1361
+ color: var(--ck-warning);
1362
+ font-size: 0.82rem;
1281
1363
  }
1282
1364
 
1283
- .ck-results-table tbody tr:hover {
1284
- background: var(--ck-surface-hover);
1365
+ .ck-run-config__note {
1366
+ border-top: 1px solid var(--ck-line);
1367
+ padding: 0.55rem 1rem;
1368
+ min-height: 2.75rem;
1369
+ display: flex;
1370
+ align-items: center;
1371
+ font-family: var(--ck-sans);
1372
+ font-size: 0.82rem;
1373
+ color: var(--ck-accent);
1374
+ background: var(--ck-accent-soft);
1285
1375
  }
1286
1376
 
1287
- .ck-results-table td {
1288
- color: var(--ck-muted);
1377
+ .ck-status-indicator {
1378
+ display: flex;
1379
+ align-items: center;
1380
+ gap: 0.75rem;
1381
+ margin-bottom: 1.25rem;
1289
1382
  }
1290
1383
 
1291
- .ck-results-table td strong {
1292
- color: var(--ck-text);
1293
- font-family: var(--ck-mono);
1294
- font-weight: 600;
1384
+ .ck-field {
1385
+ display: grid;
1386
+ gap: 0.4rem;
1295
1387
  }
1296
1388
 
1297
- .ck-results-table__arrow {
1298
- text-align: right;
1299
- color: var(--ck-dim);
1300
- font-size: 1.1rem;
1389
+ .ck-field--spacious {
1390
+ margin-top: 0.3rem;
1301
1391
  }
1302
1392
 
1303
- .ck-details {
1304
- margin-top: 1.5rem;
1305
- border: 1px solid var(--ck-line);
1306
- border-radius: var(--ck-radius-lg);
1307
- background: var(--ck-surface);
1308
- overflow: hidden;
1393
+ .ck-field--tight {
1394
+ gap: 0.3rem;
1309
1395
  }
1310
1396
 
1311
- .ck-details__summary {
1312
- display: flex;
1313
- align-items: center;
1314
- min-height: 3.25rem;
1315
- padding: 0.85rem 1.15rem;
1316
- font-family: var(--ck-mono);
1317
- font-size: 0.85rem;
1318
- font-weight: 500;
1319
- letter-spacing: 0.04em;
1320
- text-transform: uppercase;
1321
- color: var(--ck-muted);
1322
- cursor: pointer;
1323
- transition: color 0.15s;
1324
- list-style: none;
1397
+ .ck-input {
1398
+ width: 100%;
1399
+ padding: 0.65rem 0.85rem;
1400
+ border: 1px solid var(--ck-line-strong);
1401
+ border-radius: var(--ck-radius);
1402
+ background: var(--ck-bg);
1403
+ color: var(--ck-text);
1404
+ font-family: var(--ck-sans);
1405
+ font-size: 0.95rem;
1406
+ transition: border-color 0.15s, box-shadow 0.15s;
1325
1407
  }
1326
1408
 
1327
- .ck-details__summary::-webkit-details-marker {
1328
- display: none;
1409
+ .ck-input:focus {
1410
+ outline: none;
1411
+ border-color: var(--ck-accent);
1412
+ box-shadow: 0 0 0 3px var(--ck-accent-soft);
1329
1413
  }
1330
1414
 
1331
- .ck-details__summary::before {
1332
- content: '+ ';
1415
+ .ck-input::placeholder {
1333
1416
  color: var(--ck-dim);
1334
1417
  }
1335
1418
 
1336
- .ck-details[open] > .ck-details__summary::before {
1337
- content: '- ';
1419
+ .ck-input--area {
1420
+ min-height: 10rem;
1421
+ resize: vertical;
1338
1422
  }
1339
1423
 
1340
- .ck-details__summary:hover {
1341
- color: var(--ck-accent);
1424
+ .ck-input--code {
1425
+ font-family: var(--ck-mono);
1426
+ font-size: 0.9rem;
1342
1427
  }
1343
1428
 
1344
- .ck-details .ck-code {
1345
- margin: 0;
1346
- border-radius: 0;
1347
- border: none;
1348
- border-top: 1px solid var(--ck-line);
1429
+ .ck-checkbox {
1430
+ width: 1rem;
1431
+ height: 1rem;
1432
+ accent-color: var(--ck-accent);
1349
1433
  }
1350
1434
 
1435
+ .ck-section-title {
1436
+ font-size: 1.05rem;
1437
+ font-weight: 600;
1438
+ color: var(--ck-text);
1439
+ }
1351
1440
 
1352
- .ck-response-list {
1441
+ .ck-rubric-builder,
1442
+ .ck-rubric-display {
1353
1443
  display: grid;
1354
- gap: 0.75rem;
1355
- margin-top: 1.5rem;
1444
+ gap: 0.5rem;
1445
+ margin-top: 0.75rem;
1356
1446
  }
1357
1447
 
1358
- .ck-response-card {
1448
+ .ck-rubric-row {
1449
+ display: grid;
1450
+ grid-template-columns: 5.5rem minmax(0, 1fr);
1451
+ gap: 0.85rem;
1452
+ align-items: flex-start;
1453
+ padding: 0.85rem;
1359
1454
  border: 1px solid var(--ck-line);
1360
- border-radius: var(--ck-radius-lg);
1361
- background: var(--ck-surface);
1362
- padding: 1.5rem;
1363
- transition: border-color 0.15s;
1455
+ border-radius: var(--ck-radius);
1456
+ background: var(--ck-surface-soft);
1364
1457
  }
1365
1458
 
1366
- .ck-response-card:hover {
1367
- border-color: var(--ck-line-strong);
1459
+ .ck-rubric-row--display {
1460
+ background: var(--ck-bg-strong);
1368
1461
  }
1369
1462
 
1370
- .ck-response-card--low {
1371
- border-color: rgba(239, 68, 68, 0.25);
1463
+ .ck-rubric-row__stars {
1464
+ display: flex;
1465
+ align-items: center;
1466
+ gap: 1px;
1467
+ padding-top: 0.5rem;
1372
1468
  }
1373
1469
 
1374
- .ck-response-card--low:hover {
1375
- border-color: rgba(239, 68, 68, 0.4);
1470
+ .ck-rubric-row__fields {
1471
+ display: grid;
1472
+ gap: 0.6rem;
1376
1473
  }
1377
1474
 
1378
- .ck-response-card__header {
1379
- display: flex;
1380
- align-items: center;
1381
- justify-content: space-between;
1382
- margin-bottom: 1rem;
1475
+ .ck-star {
1476
+ stroke-width: 1.75;
1383
1477
  }
1384
1478
 
1385
- .ck-response-card__body {
1386
- display: grid;
1387
- gap: 1rem;
1479
+ .ck-star--filled {
1480
+ fill: var(--ck-warning);
1481
+ stroke: var(--ck-warning);
1388
1482
  }
1389
1483
 
1390
- .ck-metric-bar {
1484
+ .ck-star--empty {
1485
+ fill: none;
1486
+ stroke: var(--ck-dim);
1487
+ }
1488
+
1489
+ .ck-step-row {
1391
1490
  display: flex;
1392
- flex-wrap: wrap;
1393
1491
  gap: 0.5rem;
1394
- margin-top: 1rem;
1395
- padding-top: 1rem;
1396
- border-top: 1px solid var(--ck-line);
1492
+ align-items: center;
1493
+ margin-bottom: 0.4rem;
1397
1494
  }
1398
1495
 
1399
- .ck-metric-pip {
1400
- display: inline-flex;
1401
- align-items: center;
1402
- gap: 0.35rem;
1403
- padding: 0.2rem 0.5rem;
1404
- border-radius: 4px;
1405
- font-family: var(--ck-mono);
1406
- font-size: 0.75rem;
1407
- letter-spacing: 0.03em;
1496
+ .ck-step-row .ck-input {
1497
+ flex: 1;
1408
1498
  }
1409
1499
 
1410
- .ck-metric-pip--high {
1411
- background: var(--ck-success-soft);
1412
- color: var(--ck-success);
1500
+ .ck-icon-btn {
1501
+ background: none;
1502
+ border: 1px solid transparent;
1503
+ border-radius: var(--ck-radius);
1504
+ padding: 0.375rem;
1505
+ cursor: pointer;
1506
+ display: flex;
1507
+ align-items: center;
1508
+ justify-content: center;
1509
+ color: var(--ck-dim);
1510
+ transition: all 0.15s;
1413
1511
  }
1414
1512
 
1415
- .ck-metric-pip--medium {
1416
- background: var(--ck-warning-soft);
1417
- color: var(--ck-warning);
1513
+ .ck-icon-btn svg {
1514
+ width: 16px;
1515
+ height: 16px;
1418
1516
  }
1419
1517
 
1420
- .ck-metric-pip--low {
1421
- background: var(--ck-danger-soft);
1422
- color: var(--ck-danger);
1518
+ .ck-select-with-action {
1519
+ display: flex;
1520
+ gap: 0.5rem;
1521
+ align-items: center;
1423
1522
  }
1424
1523
 
1425
- .ck-metric-pip--pending {
1426
- background: var(--ck-surface-soft);
1427
- color: var(--ck-dim);
1524
+ .ck-select-with-action .ck-input {
1525
+ flex: 1;
1428
1526
  }
1429
1527
 
1430
- .ck-metric-pip__bar {
1431
- display: inline-block;
1432
- width: 4px;
1433
- height: 12px;
1434
- border-radius: 2px;
1435
- background: currentColor;
1436
- opacity: 0.6;
1528
+ .ck-icon-btn:hover {
1529
+ background: rgba(255, 255, 255, 0.05);
1530
+ border-color: var(--ck-line-strong);
1531
+ color: var(--ck-danger);
1437
1532
  }
1438
1533
 
1439
- .ck-metric-pip__label {
1440
- white-space: nowrap;
1534
+ .ck-icon-btn--spinning svg {
1535
+ animation: ck-spin 0.8s linear infinite;
1441
1536
  }
1442
1537
 
1443
- .ck-dot {
1444
- display: inline-block;
1445
- width: 8px;
1446
- height: 8px;
1447
- border-radius: 50%;
1448
- flex-shrink: 0;
1449
- vertical-align: text-top;
1450
- margin-top: 0.3em;
1538
+ .ck-icon-btn--spinning {
1539
+ pointer-events: none;
1540
+ color: var(--ck-accent);
1451
1541
  }
1452
1542
 
1453
- .ck-dot--pending {
1454
- background: var(--ck-accent);
1543
+ @keyframes ck-spin {
1544
+ to { transform: rotate(360deg); }
1455
1545
  }
1456
1546
 
1457
- .ck-dot--running {
1458
- background: var(--ck-accent);
1459
- animation: ck-pulse 1.5s ease-in-out infinite;
1547
+ .ck-add-btn {
1548
+ display: inline-flex;
1549
+ align-items: center;
1550
+ gap: 0.4rem;
1551
+ color: var(--ck-muted);
1552
+ font-size: 0.85rem;
1553
+ cursor: pointer;
1554
+ padding: 0.25rem 0;
1555
+ margin-top: 0.25rem;
1556
+ background: none;
1557
+ border: none;
1558
+ transition: color 0.15s;
1460
1559
  }
1461
1560
 
1462
- .ck-dot--completed {
1463
- background: var(--ck-success);
1561
+ .ck-add-btn:hover {
1562
+ color: var(--ck-text);
1464
1563
  }
1465
1564
 
1466
- .ck-dot--high {
1467
- background: var(--ck-success);
1565
+ .ck-step-list {
1566
+ padding-left: 1.5rem;
1567
+ display: grid;
1568
+ gap: 0.4rem;
1468
1569
  }
1469
1570
 
1470
- .ck-dot--medium {
1471
- background: var(--ck-warning);
1571
+ .ck-step-list li {
1572
+ color: var(--ck-text);
1573
+ line-height: 1.5;
1472
1574
  }
1473
1575
 
1474
- .ck-dot--low {
1475
- background: var(--ck-danger);
1576
+ .ck-filter-grid {
1577
+ display: grid;
1578
+ gap: 0.75rem;
1476
1579
  }
1477
1580
 
1478
- .ck-dot--failed {
1479
- background: var(--ck-danger);
1581
+ .ck-item {
1582
+ display: flex;
1583
+ flex-wrap: wrap;
1584
+ align-items: center;
1585
+ justify-content: space-between;
1586
+ gap: 0.75rem;
1587
+ padding: 0.75rem 0.85rem;
1588
+ border: 1px solid var(--ck-line);
1589
+ border-radius: var(--ck-radius);
1590
+ background: var(--ck-surface-soft);
1591
+ transition: border-color 0.15s;
1480
1592
  }
1481
1593
 
1482
- @keyframes ck-pulse {
1483
- 0%, 100% { opacity: 1; }
1484
- 50% { opacity: 0.3; }
1594
+ .ck-item:hover {
1595
+ border-color: var(--ck-line-strong);
1485
1596
  }
1486
1597
 
1487
- .ck-run-name {
1488
- display: inline-flex;
1489
- align-items: center;
1598
+ .ck-stat-list {
1599
+ display: grid;
1490
1600
  gap: 0.5rem;
1601
+ margin: 0.75rem 0 0;
1491
1602
  }
1492
1603
 
1493
- .ck-title .ck-run-name {
1604
+ .ck-stat-row {
1605
+ display: flex;
1606
+ align-items: center;
1607
+ justify-content: space-between;
1494
1608
  gap: 1rem;
1609
+ padding-bottom: 0.5rem;
1610
+ border-bottom: 1px solid var(--ck-line);
1611
+ font-family: var(--ck-mono);
1612
+ font-size: 0.9rem;
1613
+ color: var(--ck-muted);
1495
1614
  }
1496
1615
 
1497
- .ck-title .ck-dot {
1498
- width: 16px;
1499
- height: 16px;
1616
+ .ck-stat-row:last-child {
1617
+ padding-bottom: 0;
1618
+ border-bottom: 0;
1500
1619
  }
1501
1620
 
1502
- .ck-metric-pip__label strong {
1621
+ .ck-stat-row dd {
1622
+ margin: 0;
1503
1623
  font-weight: 700;
1624
+ color: var(--ck-text);
1504
1625
  }
1505
1626
 
1506
- .ck-metric-bar--compact {
1507
- margin-top: 0;
1508
- padding-top: 0;
1509
- border-top: none;
1510
- gap: 3px;
1511
- flex-wrap: nowrap;
1512
- }
1513
-
1514
- .ck-metric-bar--compact .ck-metric-pip {
1515
- padding: 0;
1516
- gap: 0;
1517
- position: relative;
1627
+ .ck-flash {
1628
+ margin-bottom: 1rem;
1629
+ padding: 0.75rem 1rem;
1630
+ border-radius: var(--ck-radius);
1631
+ border: 1px solid transparent;
1632
+ font-family: var(--ck-sans);
1633
+ font-size: 0.95rem;
1518
1634
  }
1519
1635
 
1520
- .ck-metric-bar--compact .ck-metric-pip__bar {
1521
- width: 6px;
1522
- height: 14px;
1523
- border-radius: 2px;
1636
+ .ck-flash--notice {
1637
+ border-color: rgba(34, 197, 94, 0.3);
1638
+ background: var(--ck-success-soft);
1639
+ color: var(--ck-success);
1524
1640
  }
1525
1641
 
1526
- .ck-metric-bar--compact .ck-metric-pip__label {
1527
- display: none;
1528
- position: absolute;
1529
- left: 50%;
1530
- bottom: calc(100% + 4px);
1531
- transform: translateX(-50%);
1532
- background: var(--ck-surface);
1533
- border: 1px solid var(--ck-line);
1534
- border-radius: 4px;
1535
- padding: 0.15rem 0.4rem;
1536
- font-size: 0.875rem;
1537
- z-index: 10;
1538
- pointer-events: none;
1642
+ .ck-flash--alert {
1643
+ border-color: rgba(239, 68, 68, 0.3);
1644
+ background: var(--ck-danger-soft);
1645
+ color: var(--ck-danger);
1539
1646
  }
1540
1647
 
1541
- .ck-metric-bar--compact .ck-metric-pip:hover .ck-metric-pip__label {
1542
- display: block;
1648
+ .ck-flash__title {
1649
+ margin: 0;
1650
+ font-weight: 700;
1543
1651
  }
1544
1652
 
1545
- .ck-review-list {
1653
+ .ck-banner {
1546
1654
  display: grid;
1547
- gap: 0.75rem;
1548
- margin-top: 0.5rem;
1655
+ gap: 0.25rem;
1656
+ margin-bottom: 1rem;
1657
+ padding: 0.85rem 1rem;
1658
+ border-radius: var(--ck-radius);
1659
+ border: 1px solid transparent;
1660
+ font-family: var(--ck-sans);
1549
1661
  }
1550
1662
 
1551
- .ck-review-card {
1552
- border: 1px solid var(--ck-line);
1553
- border-radius: var(--ck-radius-lg);
1554
- background: var(--ck-surface);
1555
- padding: 1.5rem;
1663
+ .ck-banner--warn {
1664
+ border-color: rgba(224, 164, 88, 0.3);
1665
+ background: rgba(224, 164, 88, 0.08);
1666
+ color: var(--ck-text);
1556
1667
  }
1557
1668
 
1558
- .ck-review-card__header {
1559
- display: flex;
1669
+ .ck-banner__title {
1670
+ font-family: var(--ck-mono);
1671
+ font-size: 0.78rem;
1672
+ font-weight: 600;
1673
+ letter-spacing: 0.06em;
1674
+ text-transform: uppercase;
1675
+ color: var(--ck-warning);
1676
+ }
1677
+
1678
+ .ck-banner__body {
1679
+ margin: 0;
1680
+ font-size: 0.88rem;
1681
+ line-height: 1.5;
1682
+ color: var(--ck-muted);
1683
+ }
1684
+
1685
+ .ck-csv-table-wrap {
1686
+ margin-top: 0.5rem;
1687
+ border: 1px solid var(--ck-line);
1688
+ border-radius: var(--ck-radius);
1689
+ background: var(--ck-bg-strong);
1690
+ overflow: auto;
1691
+ max-height: 60vh;
1692
+ }
1693
+
1694
+ .ck-modal__body .ck-csv-table-wrap {
1695
+ margin-top: 0;
1696
+ border: none;
1697
+ border-radius: 0;
1698
+ background: transparent;
1699
+ max-height: none;
1700
+ overflow: visible;
1701
+ }
1702
+
1703
+ .ck-csv-table {
1704
+ width: 100%;
1705
+ border-collapse: collapse;
1706
+ font-family: var(--ck-mono);
1707
+ font-size: 0.82rem;
1708
+ }
1709
+
1710
+ .ck-csv-table thead th {
1711
+ position: sticky;
1712
+ top: 0;
1713
+ background: var(--ck-surface);
1714
+ border-bottom: 1px solid var(--ck-line);
1715
+ text-align: left;
1716
+ padding: 0.55rem 0.75rem;
1717
+ font-family: var(--ck-mono);
1718
+ font-size: 0.78rem;
1719
+ font-weight: 600;
1720
+ letter-spacing: 0;
1721
+ text-transform: none;
1722
+ color: var(--ck-muted);
1723
+ white-space: nowrap;
1724
+ z-index: 1;
1725
+ }
1726
+
1727
+ .ck-csv-table tbody td {
1728
+ padding: 0.55rem 0.75rem;
1729
+ border-bottom: 1px solid var(--ck-line);
1730
+ color: var(--ck-text);
1731
+ vertical-align: top;
1732
+ max-width: 32rem;
1733
+ transition: background 0.15s;
1734
+ }
1735
+
1736
+ .ck-csv-table tbody tr:hover td {
1737
+ background: var(--ck-surface-soft);
1738
+ }
1739
+
1740
+ .ck-csv-cell {
1741
+ display: -webkit-box;
1742
+ -webkit-box-orient: vertical;
1743
+ -webkit-line-clamp: 1;
1744
+ line-clamp: 1;
1745
+ overflow: hidden;
1746
+ max-height: 1.55em;
1747
+ transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1748
+ }
1749
+
1750
+ .ck-csv-row--expanded .ck-csv-cell {
1751
+ -webkit-line-clamp: 99;
1752
+ line-clamp: 99;
1753
+ max-height: 30em;
1754
+ }
1755
+
1756
+ .ck-csv-table tbody tr:last-child td {
1757
+ border-bottom: none;
1758
+ }
1759
+
1760
+ .ck-csv-table thead th.ck-csv-table__rownum,
1761
+ .ck-csv-table tbody td.ck-csv-table__rownum {
1762
+ font-family: var(--ck-mono);
1763
+ font-size: 0.72rem;
1764
+ color: var(--ck-dim);
1765
+ white-space: nowrap;
1766
+ text-align: right;
1767
+ padding-right: 0.85rem;
1768
+ user-select: none;
1769
+ width: 1%;
1770
+ }
1771
+
1772
+ .ck-banner__code {
1773
+ display: inline-block;
1774
+ font-family: var(--ck-mono);
1775
+ font-size: 0.82rem;
1776
+ padding: 0.05rem 0.35rem;
1777
+ border-radius: 3px;
1778
+ background: rgba(0, 0, 0, 0.25);
1779
+ border: 1px solid var(--ck-line);
1780
+ color: var(--ck-text);
1781
+ }
1782
+
1783
+ .ck-error-list {
1784
+ margin: 0.5rem 0 0;
1785
+ padding-left: 1.25rem;
1786
+ }
1787
+
1788
+ select.ck-input {
1789
+ appearance: none;
1790
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1791
+ background-repeat: no-repeat;
1792
+ background-position: right 0.75rem center;
1793
+ padding-right: 2rem;
1794
+ }
1795
+
1796
+ .ck-results-table {
1797
+ width: 100%;
1798
+ border-collapse: separate;
1799
+ border-spacing: 0;
1800
+ border: 1px solid var(--ck-line);
1801
+ border-radius: var(--ck-radius-lg);
1802
+ overflow: hidden;
1803
+ font-size: 0.95rem;
1804
+ }
1805
+
1806
+ .ck-results-table th,
1807
+ .ck-results-table td {
1808
+ padding: 0.75rem 1rem;
1809
+ text-align: left;
1810
+ }
1811
+
1812
+ .ck-results-table thead th {
1813
+ background: var(--ck-surface-soft);
1814
+ border-bottom: 1px solid var(--ck-line);
1815
+ font-family: var(--ck-mono);
1816
+ font-size: 0.8rem;
1817
+ font-weight: 500;
1818
+ letter-spacing: 0.08em;
1819
+ text-transform: uppercase;
1820
+ color: var(--ck-dim);
1821
+ }
1822
+
1823
+ .ck-results-table tbody tr {
1824
+ border-bottom: 1px solid var(--ck-line);
1825
+ background: var(--ck-surface);
1826
+ transition: background 0.15s;
1827
+ }
1828
+
1829
+ .ck-results-table tbody tr:last-child {
1830
+ border-bottom: none;
1831
+ }
1832
+
1833
+ .ck-results-table tbody tr:hover {
1834
+ background: var(--ck-surface-hover);
1835
+ }
1836
+
1837
+ .ck-results-table td {
1838
+ color: var(--ck-muted);
1839
+ }
1840
+
1841
+ .ck-results-table td strong {
1842
+ color: var(--ck-text);
1843
+ font-family: var(--ck-mono);
1844
+ font-weight: 600;
1845
+ }
1846
+
1847
+ .ck-results-table__arrow {
1848
+ text-align: right;
1849
+ color: var(--ck-dim);
1850
+ font-size: 1.1rem;
1851
+ white-space: nowrap;
1852
+ width: 1%;
1853
+ }
1854
+
1855
+ .ck-results-table td:first-child,
1856
+ .ck-results-table td:has(time[data-relative-time]) {
1857
+ white-space: nowrap;
1858
+ }
1859
+
1860
+ .ck-results-table td:has(time[data-relative-time]) {
1861
+ width: 1%;
1862
+ }
1863
+
1864
+ .ck-details {
1865
+ margin-top: 1.5rem;
1866
+ border: 1px solid var(--ck-line);
1867
+ border-radius: var(--ck-radius-lg);
1868
+ background: var(--ck-surface);
1869
+ overflow: hidden;
1870
+ }
1871
+
1872
+ .ck-details__summary {
1873
+ display: flex;
1874
+ align-items: center;
1875
+ min-height: 3.25rem;
1876
+ padding: 0.85rem 1.15rem;
1877
+ font-family: var(--ck-mono);
1878
+ font-size: 0.85rem;
1879
+ font-weight: 500;
1880
+ letter-spacing: 0.04em;
1881
+ text-transform: uppercase;
1882
+ color: var(--ck-muted);
1883
+ cursor: pointer;
1884
+ transition: color 0.15s;
1885
+ list-style: none;
1886
+ }
1887
+
1888
+ .ck-details__summary::-webkit-details-marker {
1889
+ display: none;
1890
+ }
1891
+
1892
+ .ck-details__summary::before {
1893
+ content: '+ ';
1894
+ color: var(--ck-dim);
1895
+ }
1896
+
1897
+ .ck-details[open] > .ck-details__summary::before {
1898
+ content: '- ';
1899
+ }
1900
+
1901
+ .ck-details__summary:hover {
1902
+ color: var(--ck-accent);
1903
+ }
1904
+
1905
+ .ck-details .ck-code {
1906
+ margin: 0;
1907
+ border-radius: 0;
1908
+ border: none;
1909
+ border-top: 1px solid var(--ck-line);
1910
+ }
1911
+
1912
+ .ck-run-config__dataset {
1913
+ display: inline-flex;
1914
+ align-items: center;
1915
+ gap: 0.65rem;
1916
+ flex-wrap: wrap;
1917
+ }
1918
+
1919
+ .ck-run-config__dataset-meta {
1920
+ font-family: var(--ck-mono);
1921
+ font-size: 0.72rem;
1922
+ letter-spacing: 0.04em;
1923
+ color: var(--ck-muted);
1924
+ }
1925
+
1926
+ .ck-run-config__dataset-preview {
1927
+ appearance: none;
1928
+ background: transparent;
1929
+ border: 1px solid rgba(6, 182, 212, 0.4);
1930
+ border-radius: 999px;
1931
+ color: var(--ck-accent);
1932
+ cursor: pointer;
1933
+ font-family: var(--ck-mono);
1934
+ font-size: 0.66rem;
1935
+ font-weight: 600;
1936
+ letter-spacing: 0.14em;
1937
+ text-transform: uppercase;
1938
+ padding: 0.2rem 0.6rem;
1939
+ transition: background 0.15s;
1940
+ }
1941
+
1942
+ .ck-run-config__dataset-preview:hover {
1943
+ background: rgba(6, 182, 212, 0.12);
1944
+ }
1945
+
1946
+ .ck-modal {
1947
+ padding: 0;
1948
+ margin: auto;
1949
+ border: none;
1950
+ background: transparent;
1951
+ max-width: min(92vw, 880px);
1952
+ width: 100%;
1953
+ color: var(--ck-text);
1954
+ }
1955
+
1956
+ .ck-modal::backdrop {
1957
+ background: rgba(8, 11, 20, 0.72);
1958
+ backdrop-filter: blur(4px);
1959
+ }
1960
+
1961
+ .ck-modal[open] {
1962
+ animation: ck-modal-in 0.18s ease-out;
1963
+ }
1964
+
1965
+ @keyframes ck-modal-in {
1966
+ from { opacity: 0; transform: translateY(8px) scale(0.985); }
1967
+ to { opacity: 1; transform: none; }
1968
+ }
1969
+
1970
+ .ck-modal__panel {
1971
+ display: flex;
1972
+ flex-direction: column;
1973
+ max-height: 82vh;
1974
+ background: var(--ck-surface);
1975
+ border: 1px solid var(--ck-line-strong);
1976
+ border-radius: var(--ck-radius-lg);
1977
+ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
1978
+ overflow: hidden;
1979
+ }
1980
+
1981
+ .ck-modal__header {
1982
+ display: flex;
1983
+ align-items: center;
1984
+ justify-content: space-between;
1985
+ gap: 1rem;
1986
+ padding: 1.1rem 1.5rem 0.85rem;
1987
+ }
1988
+
1989
+ .ck-modal__heading {
1990
+ display: inline-flex;
1991
+ align-items: baseline;
1992
+ gap: 0.85rem;
1993
+ min-width: 0;
1994
+ }
1995
+
1996
+ .ck-modal__title {
1997
+ margin: 0;
1998
+ font-family: var(--ck-mono);
1999
+ font-size: 1.05rem;
2000
+ font-weight: 600;
2001
+ letter-spacing: -0.01em;
2002
+ color: var(--ck-text);
2003
+ }
2004
+
2005
+ .ck-modal__meta {
2006
+ margin: 0;
2007
+ font-family: var(--ck-mono);
2008
+ font-size: 0.72rem;
2009
+ letter-spacing: 0.06em;
2010
+ color: var(--ck-dim);
2011
+ text-transform: uppercase;
2012
+ }
2013
+
2014
+ .ck-modal__close {
2015
+ appearance: none;
2016
+ display: inline-flex;
2017
+ align-items: center;
2018
+ justify-content: center;
2019
+ width: 28px;
2020
+ height: 28px;
2021
+ padding: 0;
2022
+ border-radius: 50%;
2023
+ border: none;
2024
+ outline: none;
2025
+ background: transparent;
2026
+ color: var(--ck-dim);
2027
+ font-family: var(--ck-sans);
2028
+ font-size: 1.5rem;
2029
+ line-height: 1;
2030
+ cursor: pointer;
2031
+ transition: color 0.15s, background 0.15s;
2032
+ }
2033
+
2034
+ .ck-modal__close:hover {
2035
+ color: var(--ck-text);
2036
+ background: var(--ck-surface-hover);
2037
+ }
2038
+
2039
+ .ck-modal__close:focus-visible {
2040
+ outline: 2px solid var(--ck-accent);
2041
+ outline-offset: 2px;
2042
+ }
2043
+
2044
+ .ck-modal__body {
2045
+ flex: 1;
2046
+ margin: 0;
2047
+ background: transparent;
2048
+ overflow: auto;
2049
+ padding: 0 1.5rem;
2050
+ }
2051
+
2052
+ .ck-modal__footer {
2053
+ display: flex;
2054
+ justify-content: flex-end;
2055
+ gap: 0.6rem;
2056
+ padding: 0.95rem 1.5rem 1.1rem;
2057
+ }
2058
+
2059
+ .ck-modal__close-btn {
2060
+ appearance: none;
2061
+ font-family: var(--ck-mono);
2062
+ font-size: 0.74rem;
2063
+ font-weight: 600;
2064
+ letter-spacing: 0.12em;
2065
+ text-transform: uppercase;
2066
+ padding: 0.55rem 0.95rem;
2067
+ border: 1px solid var(--ck-line-strong);
2068
+ background: transparent;
2069
+ color: var(--ck-text);
2070
+ border-radius: var(--ck-radius);
2071
+ cursor: pointer;
2072
+ transition: background 0.15s;
2073
+ }
2074
+
2075
+ .ck-modal__close-btn:hover {
2076
+ background: var(--ck-surface-hover);
2077
+ }
2078
+
2079
+
2080
+ .ck-response-list {
2081
+ display: grid;
2082
+ gap: 0.75rem;
2083
+ margin-top: 1.5rem;
2084
+ }
2085
+
2086
+ .ck-response-card {
2087
+ border: 1px solid var(--ck-line);
2088
+ border-radius: var(--ck-radius-lg);
2089
+ background: var(--ck-surface);
2090
+ padding: 1.5rem;
2091
+ transition: border-color 0.15s;
2092
+ }
2093
+
2094
+ .ck-response-card:hover {
2095
+ border-color: var(--ck-line-strong);
2096
+ }
2097
+
2098
+ .ck-response-card--low {
2099
+ border-color: rgba(239, 68, 68, 0.25);
2100
+ }
2101
+
2102
+ .ck-response-card--low:hover {
2103
+ border-color: rgba(239, 68, 68, 0.4);
2104
+ }
2105
+
2106
+ .ck-response-card__header {
2107
+ display: flex;
2108
+ align-items: center;
2109
+ justify-content: space-between;
2110
+ margin-bottom: 1rem;
2111
+ }
2112
+
2113
+ .ck-response-card__body {
2114
+ display: grid;
2115
+ gap: 1rem;
2116
+ }
2117
+
2118
+ .ck-metric-bar {
2119
+ display: flex;
2120
+ flex-wrap: wrap;
2121
+ gap: 0.5rem;
2122
+ margin-top: 1rem;
2123
+ padding-top: 1rem;
2124
+ border-top: 1px solid var(--ck-line);
2125
+ }
2126
+
2127
+ .ck-metric-pip {
2128
+ display: inline-flex;
2129
+ align-items: center;
2130
+ gap: 0.35rem;
2131
+ padding: 0.2rem 0.5rem;
2132
+ border-radius: 4px;
2133
+ font-family: var(--ck-mono);
2134
+ font-size: 0.75rem;
2135
+ letter-spacing: 0.03em;
2136
+ }
2137
+
2138
+ .ck-metric-pip--high {
2139
+ background: var(--ck-success-soft);
2140
+ color: var(--ck-success);
2141
+ }
2142
+
2143
+ .ck-metric-pip--medium {
2144
+ background: var(--ck-warning-soft);
2145
+ color: var(--ck-warning);
2146
+ }
2147
+
2148
+ .ck-metric-pip--low {
2149
+ background: var(--ck-danger-soft);
2150
+ color: var(--ck-danger);
2151
+ }
2152
+
2153
+ .ck-metric-pip--pending {
2154
+ background: var(--ck-surface-soft);
2155
+ color: var(--ck-dim);
2156
+ }
2157
+
2158
+ .ck-metric-pip__bar {
2159
+ display: inline-block;
2160
+ width: 4px;
2161
+ height: 12px;
2162
+ border-radius: 2px;
2163
+ background: currentColor;
2164
+ opacity: 0.6;
2165
+ }
2166
+
2167
+ .ck-metric-pip__label {
2168
+ white-space: nowrap;
2169
+ }
2170
+
2171
+ .ck-dot {
2172
+ display: inline-block;
2173
+ width: 10px;
2174
+ height: 10px;
2175
+ border-radius: 50%;
2176
+ flex-shrink: 0;
2177
+ vertical-align: text-top;
2178
+ margin-top: 0.3em;
2179
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
2180
+ }
2181
+
2182
+ .ck-dot--pending {
2183
+ background: var(--ck-accent);
2184
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(6, 182, 212, 0.45);
2185
+ }
2186
+
2187
+ .ck-dot--running {
2188
+ background: var(--ck-accent);
2189
+ animation: ck-pulse 1.5s ease-in-out infinite;
2190
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px rgba(6, 182, 212, 0.6);
2191
+ }
2192
+
2193
+ .ck-dot--completed {
2194
+ background: var(--ck-success);
2195
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(45, 212, 168, 0.5);
2196
+ }
2197
+
2198
+ .ck-dot--high {
2199
+ background: var(--ck-success);
2200
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(45, 212, 168, 0.5);
2201
+ }
2202
+
2203
+ .ck-dot--medium {
2204
+ background: var(--ck-warning);
2205
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(224, 164, 88, 0.5);
2206
+ }
2207
+
2208
+ .ck-dot--low {
2209
+ background: var(--ck-danger);
2210
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(248, 113, 113, 0.5);
2211
+ }
2212
+
2213
+ .ck-dot--failed {
2214
+ background: var(--ck-danger);
2215
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(248, 113, 113, 0.5);
2216
+ }
2217
+
2218
+ @keyframes ck-pulse {
2219
+ 0%, 100% { opacity: 1; }
2220
+ 50% { opacity: 0.3; }
2221
+ }
2222
+
2223
+ .ck-run-name {
2224
+ display: inline-flex;
2225
+ align-items: center;
2226
+ gap: 0.6rem;
2227
+ }
2228
+
2229
+ .ck-run-name .ck-dot {
2230
+ margin: 0;
2231
+ vertical-align: baseline;
2232
+ }
2233
+
2234
+ .ck-title .ck-run-name {
2235
+ gap: 1rem;
2236
+ }
2237
+
2238
+ .ck-title .ck-dot {
2239
+ width: 16px;
2240
+ height: 16px;
2241
+ }
2242
+
2243
+ .ck-metric-pip__label strong {
2244
+ font-weight: 700;
2245
+ }
2246
+
2247
+ .ck-metric-bar--compact {
2248
+ margin-top: 0;
2249
+ padding-top: 0;
2250
+ border-top: none;
2251
+ gap: 3px;
2252
+ flex-wrap: nowrap;
2253
+ }
2254
+
2255
+ .ck-metric-bar--compact .ck-metric-pip {
2256
+ padding: 0;
2257
+ gap: 0;
2258
+ position: relative;
2259
+ }
2260
+
2261
+ .ck-metric-bar--compact .ck-metric-pip__bar {
2262
+ width: 6px;
2263
+ height: 14px;
2264
+ border-radius: 2px;
2265
+ }
2266
+
2267
+ .ck-metric-bar--compact .ck-metric-pip__label {
2268
+ display: none;
2269
+ position: absolute;
2270
+ left: 50%;
2271
+ bottom: calc(100% + 4px);
2272
+ transform: translateX(-50%);
2273
+ background: var(--ck-surface);
2274
+ border: 1px solid var(--ck-line);
2275
+ border-radius: 4px;
2276
+ padding: 0.15rem 0.4rem;
2277
+ font-size: 0.875rem;
2278
+ z-index: 10;
2279
+ pointer-events: none;
2280
+ }
2281
+
2282
+ .ck-metric-bar--compact .ck-metric-pip:hover .ck-metric-pip__label {
2283
+ display: block;
2284
+ }
2285
+
2286
+ .ck-review-list {
2287
+ display: grid;
2288
+ gap: 0.75rem;
2289
+ margin-top: 0.5rem;
2290
+ }
2291
+
2292
+ .ck-review-card {
2293
+ border: 1px solid var(--ck-line);
2294
+ border-radius: var(--ck-radius-lg);
2295
+ background: var(--ck-surface);
2296
+ padding: 1.5rem;
2297
+ }
2298
+
2299
+ .ck-review-card__header {
2300
+ display: flex;
1560
2301
  align-items: center;
1561
2302
  justify-content: space-between;
1562
2303
  gap: 1rem;
1563
2304
  }
1564
2305
 
1565
- .ck-review-card__metric {
1566
- font-family: var(--ck-mono);
1567
- font-size: 0.95rem;
1568
- font-weight: 600;
2306
+ .ck-review-card__metric {
2307
+ font-family: var(--ck-mono);
2308
+ font-size: 0.95rem;
2309
+ font-weight: 600;
2310
+ color: var(--ck-text);
2311
+ }
2312
+
2313
+ .ck-review-card__feedback {
2314
+ margin-top: 0.75rem;
2315
+ }
2316
+
2317
+ .ck-review-card__feedback .ck-note-box {
2318
+ margin-top: 0;
2319
+ }
2320
+
2321
+ @media (max-width: 900px) {
2322
+ .ck-grid--sidebar,
2323
+ .ck-grid--cards,
2324
+ .ck-grid--two {
2325
+ grid-template-columns: 1fr;
2326
+ }
2327
+ }
2328
+
2329
+ @media (max-width: 44rem) {
2330
+ .ck-rubric-row {
2331
+ grid-template-columns: 1fr;
2332
+ }
2333
+ }
2334
+
2335
+ @media (max-width: 640px) {
2336
+ .ck-main {
2337
+ padding-top: 1rem;
2338
+ }
2339
+
2340
+ .ck-card,
2341
+ .ck-result-card,
2342
+ .ck-empty {
2343
+ padding: 0.85rem;
2344
+ }
2345
+
2346
+ .ck-button {
2347
+ width: 100%;
2348
+ }
2349
+
2350
+ .ck-actions,
2351
+ .ck-toolbar,
2352
+ .ck-nav {
2353
+ width: 100%;
2354
+ }
2355
+
2356
+ .ck-results-table {
2357
+ font-size: 0.85rem;
2358
+ }
2359
+
2360
+ .ck-results-table th,
2361
+ .ck-results-table td {
2362
+ padding: 0.5rem 0.65rem;
2363
+ }
2364
+
2365
+ .ck-response-card {
2366
+ padding: 1rem;
2367
+ }
2368
+
2369
+ .ck-review-card {
2370
+ padding: 1rem;
2371
+ }
2372
+ }
2373
+
2374
+ .ck-api-endpoint {
2375
+ padding: 1rem 0;
2376
+ border-bottom: 1px solid var(--ck-line);
2377
+ }
2378
+
2379
+ .ck-api-endpoint:last-child {
2380
+ border-bottom: none;
2381
+ padding-bottom: 0;
2382
+ }
2383
+
2384
+ .ck-api-endpoint:first-of-type {
2385
+ padding-top: 1rem;
2386
+ }
2387
+
2388
+ .ck-api-method {
2389
+ margin: 0;
2390
+ font-family: var(--ck-mono);
2391
+ font-size: 0.85rem;
2392
+ font-weight: 500;
2393
+ color: var(--ck-text);
2394
+ }
2395
+
2396
+ .ck-api-params {
2397
+ margin: 0.35rem 0 0;
2398
+ font-family: var(--ck-sans);
2399
+ font-size: 0.85rem;
2400
+ color: var(--ck-muted);
2401
+ }
2402
+
2403
+ .ck-api-example {
2404
+ position: relative;
2405
+ margin-top: 0.5rem;
2406
+ }
2407
+
2408
+ .ck-api-copy {
2409
+ position: absolute;
2410
+ top: 0.5rem;
2411
+ right: 0.5rem;
2412
+ display: flex;
2413
+ align-items: center;
2414
+ justify-content: center;
2415
+ width: 28px;
2416
+ height: 28px;
2417
+ padding: 0;
2418
+ border: 1px solid var(--ck-line);
2419
+ border-radius: 4px;
2420
+ background: var(--ck-surface);
2421
+ color: var(--ck-dim);
2422
+ cursor: pointer;
2423
+ opacity: 1;
2424
+ transition: color 0.15s, border-color 0.15s, background 0.15s;
2425
+ }
2426
+
2427
+ .ck-api-copy:hover {
2428
+ color: var(--ck-accent);
2429
+ border-color: var(--ck-accent);
2430
+ }
2431
+
2432
+ .ck-api-copy--done {
2433
+ opacity: 1 !important;
2434
+ color: var(--ck-success) !important;
2435
+ border-color: var(--ck-success) !important;
2436
+ }
2437
+
2438
+ .ck-token-toggle {
2439
+ transition: border-color 0.15s, color 0.15s;
2440
+ }
2441
+
2442
+ .ck-token-toggle:hover {
2443
+ border-color: var(--ck-accent);
2444
+ color: var(--ck-accent);
2445
+ }
2446
+
2447
+ .ck-token-toggle.ck-api-copy--done {
2448
+ border-color: var(--ck-success) !important;
2449
+ color: var(--ck-success) !important;
2450
+ }
2451
+
2452
+ .ck-api-tabs {
2453
+ display: grid;
2454
+ grid-template-columns: 180px 1fr;
2455
+ gap: 0;
2456
+ margin-top: 1rem;
2457
+ border: 1px solid var(--ck-line);
2458
+ border-radius: var(--ck-radius-lg);
2459
+ background: var(--ck-surface);
2460
+ overflow: hidden;
2461
+ }
2462
+
2463
+ .ck-api-tabs__radio {
2464
+ display: none;
2465
+ }
2466
+
2467
+ .ck-api-tabs__nav {
2468
+ display: flex;
2469
+ flex-direction: column;
2470
+ border-right: 1px solid var(--ck-line);
2471
+ background: var(--ck-bg-strong);
2472
+ padding: 0.5rem 0;
2473
+ }
2474
+
2475
+ .ck-api-tabs__label {
2476
+ display: flex;
2477
+ align-items: center;
2478
+ justify-content: space-between;
2479
+ padding: 0.6rem 1.25rem;
2480
+ font-family: var(--ck-mono);
2481
+ font-size: 0.8rem;
2482
+ font-weight: 500;
2483
+ color: var(--ck-muted);
2484
+ cursor: pointer;
2485
+ transition: color 0.15s, background 0.15s;
2486
+ border-left: 2px solid transparent;
2487
+ }
2488
+
2489
+ .ck-api-tabs__label:hover {
1569
2490
  color: var(--ck-text);
2491
+ background: var(--ck-surface-soft);
1570
2492
  }
1571
2493
 
1572
- .ck-review-card__feedback {
1573
- margin-top: 0.75rem;
2494
+ .ck-api-tabs__count {
2495
+ font-size: 0.7rem;
2496
+ color: var(--ck-dim);
1574
2497
  }
1575
2498
 
1576
- .ck-review-card__feedback .ck-note-box {
1577
- margin-top: 0;
2499
+ .ck-api-tabs__panels {
2500
+ padding: 1.5rem;
2501
+ min-height: 300px;
1578
2502
  }
1579
2503
 
1580
- @media (max-width: 900px) {
1581
- .ck-grid--sidebar,
1582
- .ck-grid--cards,
1583
- .ck-grid--two {
1584
- grid-template-columns: 1fr;
1585
- }
2504
+ .ck-api-tabs__panel {
2505
+ display: none;
1586
2506
  }
1587
2507
 
1588
- @media (max-width: 44rem) {
1589
- .ck-rubric-row {
1590
- grid-template-columns: 1fr;
1591
- }
2508
+ #ck-tab-mcp:checked ~ .ck-api-tabs__nav label[for="ck-tab-mcp"],
2509
+ #ck-tab-prompts:checked ~ .ck-api-tabs__nav label[for="ck-tab-prompts"],
2510
+ #ck-tab-runs:checked ~ .ck-api-tabs__nav label[for="ck-tab-runs"],
2511
+ #ck-tab-responses:checked ~ .ck-api-tabs__nav label[for="ck-tab-responses"],
2512
+ #ck-tab-datasets:checked ~ .ck-api-tabs__nav label[for="ck-tab-datasets"],
2513
+ #ck-tab-metrics:checked ~ .ck-api-tabs__nav label[for="ck-tab-metrics"],
2514
+ #ck-tab-criteria:checked ~ .ck-api-tabs__nav label[for="ck-tab-criteria"],
2515
+ #ck-tab-providers:checked ~ .ck-api-tabs__nav label[for="ck-tab-providers"] {
2516
+ color: var(--ck-accent);
2517
+ background: var(--ck-surface-soft);
2518
+ border-left-color: var(--ck-accent);
1592
2519
  }
1593
2520
 
1594
- @media (max-width: 640px) {
1595
- .ck-main {
1596
- padding-top: 1rem;
1597
- }
2521
+ #ck-tab-mcp:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(1),
2522
+ #ck-tab-prompts:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(2),
2523
+ #ck-tab-runs:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(3),
2524
+ #ck-tab-responses:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(4),
2525
+ #ck-tab-datasets:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(5),
2526
+ #ck-tab-metrics:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(6),
2527
+ #ck-tab-criteria:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(7),
2528
+ #ck-tab-providers:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(8) {
2529
+ display: block;
2530
+ }
1598
2531
 
1599
- .ck-card,
1600
- .ck-result-card,
1601
- .ck-empty {
1602
- padding: 0.85rem;
2532
+ @media (max-width: 700px) {
2533
+ .ck-api-tabs {
2534
+ grid-template-columns: 1fr;
1603
2535
  }
1604
2536
 
1605
- .ck-button {
1606
- width: 100%;
2537
+ .ck-api-tabs__nav {
2538
+ flex-direction: row;
2539
+ flex-wrap: wrap;
2540
+ border-right: none;
2541
+ border-bottom: 1px solid var(--ck-line);
2542
+ padding: 0.5rem;
2543
+ gap: 0.25rem;
1607
2544
  }
1608
2545
 
1609
- .ck-actions,
1610
- .ck-toolbar,
1611
- .ck-nav {
1612
- width: 100%;
2546
+ .ck-api-tabs__label {
2547
+ padding: 0.4rem 0.75rem;
2548
+ border-left: none;
2549
+ border-bottom: 2px solid transparent;
2550
+ border-radius: 4px;
2551
+ font-size: 0.75rem;
1613
2552
  }
1614
2553
 
1615
- .ck-results-table {
1616
- font-size: 0.85rem;
2554
+ #ck-tab-mcp:checked ~ .ck-api-tabs__nav label[for="ck-tab-mcp"],
2555
+ #ck-tab-prompts:checked ~ .ck-api-tabs__nav label[for="ck-tab-prompts"],
2556
+ #ck-tab-runs:checked ~ .ck-api-tabs__nav label[for="ck-tab-runs"],
2557
+ #ck-tab-responses:checked ~ .ck-api-tabs__nav label[for="ck-tab-responses"],
2558
+ #ck-tab-datasets:checked ~ .ck-api-tabs__nav label[for="ck-tab-datasets"],
2559
+ #ck-tab-metrics:checked ~ .ck-api-tabs__nav label[for="ck-tab-metrics"],
2560
+ #ck-tab-criteria:checked ~ .ck-api-tabs__nav label[for="ck-tab-criteria"],
2561
+ #ck-tab-providers:checked ~ .ck-api-tabs__nav label[for="ck-tab-providers"] {
2562
+ border-left-color: transparent;
2563
+ border-bottom-color: var(--ck-accent);
1617
2564
  }
1618
2565
 
1619
- .ck-results-table th,
1620
- .ck-results-table td {
1621
- padding: 0.5rem 0.65rem;
2566
+ .ck-api-tabs__count {
2567
+ display: none;
1622
2568
  }
2569
+ }
1623
2570
 
1624
- .ck-response-card {
1625
- padding: 1rem;
1626
- }
2571
+ .ck-metric-groups {
2572
+ display: grid;
2573
+ gap: 0.4rem;
2574
+ margin-bottom: 0.5rem;
2575
+ }
1627
2576
 
1628
- .ck-review-card {
1629
- padding: 1rem;
1630
- }
2577
+ .ck-metric-groups__label {
2578
+ font-family: var(--ck-mono);
2579
+ font-size: 0.66rem;
2580
+ font-weight: 500;
2581
+ letter-spacing: 0.14em;
2582
+ text-transform: uppercase;
2583
+ color: var(--ck-dim);
1631
2584
  }
1632
2585
 
1633
- .ck-api-endpoint {
1634
- padding: 1rem 0;
1635
- border-bottom: 1px solid var(--ck-line);
2586
+ .ck-metric-groups__row {
2587
+ display: flex;
2588
+ flex-wrap: wrap;
2589
+ gap: 0.4rem;
1636
2590
  }
1637
2591
 
1638
- .ck-api-endpoint:last-child {
1639
- border-bottom: none;
1640
- padding-bottom: 0;
2592
+ .ck-metric-group-pill {
2593
+ display: inline-flex;
2594
+ align-items: center;
2595
+ gap: 0.4rem;
2596
+ padding: 0.32rem 0.7rem;
2597
+ background: transparent;
2598
+ border: 1px solid var(--ck-line);
2599
+ border-radius: 999px;
2600
+ color: var(--ck-muted);
2601
+ font-family: var(--ck-mono);
2602
+ font-size: 0.78rem;
2603
+ letter-spacing: -0.01em;
2604
+ cursor: pointer;
2605
+ transition: border-color 0.15s, color 0.15s, background 0.15s;
1641
2606
  }
1642
2607
 
1643
- .ck-api-endpoint:first-of-type {
1644
- padding-top: 1rem;
2608
+ .ck-metric-group-pill:hover {
2609
+ border-color: rgba(6, 182, 212, 0.5);
2610
+ color: var(--ck-text);
1645
2611
  }
1646
2612
 
1647
- .ck-api-method {
1648
- margin: 0;
2613
+ .ck-metric-group-pill__check {
2614
+ display: inline-flex;
2615
+ align-items: center;
2616
+ justify-content: center;
2617
+ width: 13px;
2618
+ height: 13px;
2619
+ border: 1px solid var(--ck-line-strong);
2620
+ border-radius: 3px;
2621
+ font-size: 0.62rem;
2622
+ color: transparent;
2623
+ transition: background 0.15s, border-color 0.15s, color 0.15s;
2624
+ }
2625
+
2626
+ .ck-metric-group-pill__count {
1649
2627
  font-family: var(--ck-mono);
1650
- font-size: 0.85rem;
1651
- font-weight: 500;
2628
+ font-size: 0.68rem;
2629
+ letter-spacing: 0.04em;
2630
+ color: var(--ck-dim);
2631
+ padding: 0 0.35rem;
2632
+ border-left: 1px solid var(--ck-line);
2633
+ margin-left: 0.1rem;
2634
+ }
2635
+
2636
+ .ck-metric-group-pill--active {
2637
+ border-color: var(--ck-accent);
1652
2638
  color: var(--ck-text);
2639
+ background: rgba(6, 182, 212, 0.08);
1653
2640
  }
1654
2641
 
1655
- .ck-api-params {
1656
- margin: 0.35rem 0 0;
2642
+ .ck-metric-group-pill--active .ck-metric-group-pill__check {
2643
+ background: var(--ck-accent);
2644
+ border-color: var(--ck-accent);
2645
+ color: var(--ck-bg);
2646
+ }
2647
+
2648
+ .ck-metric-group-pill--active .ck-metric-group-pill__count {
2649
+ color: var(--ck-accent);
2650
+ border-left-color: rgba(6, 182, 212, 0.4);
2651
+ }
2652
+
2653
+ .ck-metric-divider {
2654
+ display: flex;
2655
+ align-items: center;
2656
+ gap: 0.6rem;
2657
+ margin: 0.15rem 0 0.35rem;
2658
+ color: var(--ck-dim);
2659
+ font-family: var(--ck-mono);
2660
+ font-size: 0.66rem;
2661
+ letter-spacing: 0.12em;
2662
+ text-transform: uppercase;
2663
+ }
2664
+
2665
+ .ck-metric-divider::before,
2666
+ .ck-metric-divider::after {
2667
+ content: "";
2668
+ flex: 1;
2669
+ border-top: 1px dashed var(--ck-line);
2670
+ }
2671
+
2672
+ .ck-metric-checkboxes {
2673
+ display: grid;
2674
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
2675
+ gap: 0.5rem 0.85rem;
2676
+ }
2677
+
2678
+ .ck-checkbox-label {
2679
+ display: flex;
2680
+ align-items: flex-start;
2681
+ gap: 0.6rem;
1657
2682
  font-family: var(--ck-sans);
1658
- font-size: 0.85rem;
2683
+ font-size: 0.88rem;
1659
2684
  color: var(--ck-muted);
2685
+ cursor: pointer;
2686
+ padding: 0.35rem 0;
1660
2687
  }
1661
2688
 
1662
- .ck-api-example {
1663
- position: relative;
1664
- margin-top: 0.5rem;
2689
+ .ck-checkbox-label__body {
2690
+ display: flex;
2691
+ flex-direction: column;
2692
+ gap: 0.15rem;
2693
+ min-width: 0;
1665
2694
  }
1666
2695
 
1667
- .ck-api-copy {
2696
+ .ck-checkbox-label__text {
2697
+ font-family: var(--ck-mono);
2698
+ font-size: 0.85rem;
2699
+ letter-spacing: -0.01em;
2700
+ }
2701
+
2702
+ .ck-checkbox-label__hint {
2703
+ font-family: var(--ck-sans);
2704
+ font-size: 0.78rem;
2705
+ line-height: 1.4;
2706
+ color: var(--ck-dim);
2707
+ }
2708
+
2709
+ .ck-checkbox-label__box {
2710
+ margin-top: 1px;
2711
+ }
2712
+
2713
+ .ck-checkbox-label input.ck-checkbox {
1668
2714
  position: absolute;
1669
- top: 0.5rem;
1670
- right: 0.5rem;
1671
- display: flex;
2715
+ opacity: 0;
2716
+ pointer-events: none;
2717
+ width: 0;
2718
+ height: 0;
2719
+ }
2720
+
2721
+ .ck-checkbox-label__box {
2722
+ display: inline-flex;
1672
2723
  align-items: center;
1673
2724
  justify-content: center;
1674
- width: 28px;
1675
- height: 28px;
1676
- padding: 0;
1677
- border: 1px solid var(--ck-line);
2725
+ width: 16px;
2726
+ height: 16px;
2727
+ border: 1px solid var(--ck-line-strong);
1678
2728
  border-radius: 4px;
1679
2729
  background: var(--ck-surface);
1680
- color: var(--ck-dim);
1681
- cursor: pointer;
1682
- opacity: 1;
1683
- transition: color 0.15s, border-color 0.15s, background 0.15s;
2730
+ flex-shrink: 0;
2731
+ transition: border-color 0.15s, background 0.15s;
2732
+ }
2733
+
2734
+ .ck-checkbox-label__box::after {
2735
+ content: "";
2736
+ width: 8px;
2737
+ height: 4px;
2738
+ border-left: 1.5px solid var(--ck-bg);
2739
+ border-bottom: 1.5px solid var(--ck-bg);
2740
+ transform: rotate(-45deg) translate(1px, -1px) scale(0);
2741
+ transition: transform 0.12s ease-out;
2742
+ }
2743
+
2744
+ .ck-checkbox-label input.ck-checkbox:checked + .ck-checkbox-label__box {
2745
+ background: var(--ck-accent);
2746
+ border-color: var(--ck-accent);
2747
+ }
2748
+
2749
+ .ck-checkbox-label input.ck-checkbox:checked + .ck-checkbox-label__box::after {
2750
+ transform: rotate(-45deg) translate(1px, -1px) scale(1);
2751
+ }
2752
+
2753
+ .ck-checkbox-label input.ck-checkbox:focus-visible + .ck-checkbox-label__box {
2754
+ outline: 2px solid var(--ck-accent);
2755
+ outline-offset: 2px;
2756
+ }
2757
+
2758
+ .ck-checkbox-label:hover .ck-checkbox-label__box {
2759
+ border-color: var(--ck-accent);
2760
+ }
2761
+
2762
+ .ck-checkbox-label:hover .ck-checkbox-label__text,
2763
+ .ck-checkbox-label input.ck-checkbox:checked ~ .ck-checkbox-label__text {
2764
+ color: var(--ck-text);
2765
+ }
2766
+
2767
+ .ck-response-row {
2768
+ display: flex;
2769
+ align-items: center;
2770
+ gap: 0.75rem;
2771
+ padding: 0.65rem 0.75rem;
2772
+ border-bottom: 1px solid var(--ck-line);
2773
+ text-decoration: none;
2774
+ color: inherit;
2775
+ transition: background 0.15s;
2776
+ }
2777
+
2778
+ .ck-response-row:first-child {
2779
+ border-top: 1px solid var(--ck-line);
1684
2780
  }
1685
2781
 
1686
- .ck-api-copy:hover {
1687
- color: var(--ck-accent);
1688
- border-color: var(--ck-accent);
2782
+ .ck-response-row:hover {
2783
+ background: var(--ck-surface-soft);
1689
2784
  }
1690
2785
 
1691
- .ck-api-copy--done {
1692
- opacity: 1 !important;
1693
- color: var(--ck-success) !important;
1694
- border-color: var(--ck-success) !important;
2786
+ .ck-response-row__index {
2787
+ font-family: var(--ck-mono);
2788
+ font-size: 0.8rem;
2789
+ color: var(--ck-dim);
2790
+ min-width: 2rem;
2791
+ flex-shrink: 0;
1695
2792
  }
1696
2793
 
1697
- .ck-token-toggle {
1698
- transition: border-color 0.15s, color 0.15s;
2794
+ .ck-response-row__text {
2795
+ flex: 1;
2796
+ font-size: 0.9rem;
2797
+ color: var(--ck-muted);
2798
+ overflow: hidden;
2799
+ text-overflow: ellipsis;
2800
+ white-space: nowrap;
1699
2801
  }
1700
2802
 
1701
- .ck-token-toggle:hover {
1702
- border-color: var(--ck-accent);
1703
- color: var(--ck-accent);
2803
+ .ck-response-row__metrics {
2804
+ flex-shrink: 0;
2805
+ display: inline-flex;
2806
+ align-items: center;
1704
2807
  }
1705
2808
 
1706
- .ck-token-toggle.ck-api-copy--done {
1707
- border-color: var(--ck-success) !important;
1708
- color: var(--ck-success) !important;
2809
+ .ck-response-row__score {
2810
+ flex-shrink: 0;
1709
2811
  }
1710
2812
 
1711
- .ck-api-tabs {
1712
- display: grid;
1713
- grid-template-columns: 180px 1fr;
1714
- gap: 0;
1715
- margin-top: 1rem;
1716
- border: 1px solid var(--ck-line);
1717
- border-radius: var(--ck-radius-lg);
1718
- background: var(--ck-surface);
1719
- overflow: hidden;
2813
+ .ck-prompts-table th {
2814
+ white-space: nowrap;
1720
2815
  }
1721
2816
 
1722
- .ck-api-tabs__radio {
1723
- display: none;
2817
+ .ck-prompts-table th:nth-child(n+2),
2818
+ .ck-prompts-table td:nth-child(n+2) {
2819
+ width: 1%;
2820
+ white-space: nowrap;
1724
2821
  }
1725
2822
 
1726
- .ck-api-tabs__nav {
2823
+ .ck-prompts-table__runs {
1727
2824
  display: flex;
1728
2825
  flex-direction: column;
1729
- border-right: 1px solid var(--ck-line);
1730
- background: var(--ck-bg-strong);
1731
- padding: 0.5rem 0;
2826
+ gap: 0.15rem;
2827
+ line-height: 1.2;
1732
2828
  }
1733
2829
 
1734
- .ck-api-tabs__label {
1735
- display: flex;
1736
- align-items: center;
1737
- justify-content: space-between;
1738
- padding: 0.6rem 1.25rem;
2830
+ .ck-prompts-table__runs-count {
1739
2831
  font-family: var(--ck-mono);
1740
- font-size: 0.8rem;
1741
- font-weight: 500;
1742
- color: var(--ck-muted);
1743
- cursor: pointer;
1744
- transition: color 0.15s, background 0.15s;
1745
- border-left: 2px solid transparent;
2832
+ color: var(--ck-text);
1746
2833
  }
1747
2834
 
1748
- .ck-api-tabs__label:hover {
1749
- color: var(--ck-text);
1750
- background: var(--ck-surface-soft);
2835
+ .ck-prompts-table__runs-when {
2836
+ font-family: var(--ck-sans);
2837
+ font-size: 0.78rem;
2838
+ color: var(--ck-dim);
1751
2839
  }
1752
2840
 
1753
- .ck-api-tabs__count {
1754
- font-size: 0.7rem;
2841
+ .ck-prompts-table__dim {
1755
2842
  color: var(--ck-dim);
1756
2843
  }
1757
2844
 
1758
- .ck-api-tabs__panels {
1759
- padding: 1.5rem;
1760
- min-height: 300px;
2845
+ .ck-metrics-table__groups {
2846
+ display: flex;
2847
+ flex-wrap: wrap;
2848
+ gap: 0.35rem;
1761
2849
  }
1762
2850
 
1763
- .ck-api-tabs__panel {
1764
- display: none;
2851
+ a.ck-metric-group-pill {
2852
+ text-decoration: none;
1765
2853
  }
1766
2854
 
1767
- #ck-tab-mcp:checked ~ .ck-api-tabs__nav label[for="ck-tab-mcp"],
1768
- #ck-tab-prompts:checked ~ .ck-api-tabs__nav label[for="ck-tab-prompts"],
1769
- #ck-tab-runs:checked ~ .ck-api-tabs__nav label[for="ck-tab-runs"],
1770
- #ck-tab-responses:checked ~ .ck-api-tabs__nav label[for="ck-tab-responses"],
1771
- #ck-tab-datasets:checked ~ .ck-api-tabs__nav label[for="ck-tab-datasets"],
1772
- #ck-tab-metrics:checked ~ .ck-api-tabs__nav label[for="ck-tab-metrics"],
1773
- #ck-tab-criteria:checked ~ .ck-api-tabs__nav label[for="ck-tab-criteria"],
1774
- #ck-tab-providers:checked ~ .ck-api-tabs__nav label[for="ck-tab-providers"] {
1775
- color: var(--ck-accent);
1776
- background: var(--ck-surface-soft);
1777
- border-left-color: var(--ck-accent);
2855
+ .ck-metrics-table__dim {
2856
+ color: var(--ck-dim);
1778
2857
  }
1779
2858
 
1780
- #ck-tab-mcp:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(1),
1781
- #ck-tab-prompts:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(2),
1782
- #ck-tab-runs:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(3),
1783
- #ck-tab-responses:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(4),
1784
- #ck-tab-datasets:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(5),
1785
- #ck-tab-metrics:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(6),
1786
- #ck-tab-criteria:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(7),
1787
- #ck-tab-providers:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(8) {
1788
- display: block;
2859
+ .ck-responses-table th {
2860
+ white-space: nowrap;
1789
2861
  }
1790
2862
 
1791
- @media (max-width: 700px) {
1792
- .ck-api-tabs {
1793
- grid-template-columns: 1fr;
1794
- }
2863
+ .ck-responses-table th:first-child {
2864
+ text-align: right;
2865
+ padding-right: 0.85rem;
2866
+ }
1795
2867
 
1796
- .ck-api-tabs__nav {
1797
- flex-direction: row;
1798
- flex-wrap: wrap;
1799
- border-right: none;
1800
- border-bottom: 1px solid var(--ck-line);
1801
- padding: 0.5rem;
1802
- gap: 0.25rem;
1803
- }
2868
+ .ck-responses-table th:not(:nth-child(2)),
2869
+ .ck-responses-table td:not(:nth-child(2)) {
2870
+ width: 1%;
2871
+ white-space: nowrap;
2872
+ }
1804
2873
 
1805
- .ck-api-tabs__label {
1806
- padding: 0.4rem 0.75rem;
1807
- border-left: none;
1808
- border-bottom: 2px solid transparent;
1809
- border-radius: 4px;
1810
- font-size: 0.75rem;
1811
- }
2874
+ .ck-runs-table th {
2875
+ vertical-align: middle;
2876
+ white-space: nowrap;
2877
+ }
1812
2878
 
1813
- #ck-tab-mcp:checked ~ .ck-api-tabs__nav label[for="ck-tab-mcp"],
1814
- #ck-tab-prompts:checked ~ .ck-api-tabs__nav label[for="ck-tab-prompts"],
1815
- #ck-tab-runs:checked ~ .ck-api-tabs__nav label[for="ck-tab-runs"],
1816
- #ck-tab-responses:checked ~ .ck-api-tabs__nav label[for="ck-tab-responses"],
1817
- #ck-tab-datasets:checked ~ .ck-api-tabs__nav label[for="ck-tab-datasets"],
1818
- #ck-tab-metrics:checked ~ .ck-api-tabs__nav label[for="ck-tab-metrics"],
1819
- #ck-tab-criteria:checked ~ .ck-api-tabs__nav label[for="ck-tab-criteria"],
1820
- #ck-tab-providers:checked ~ .ck-api-tabs__nav label[for="ck-tab-providers"] {
1821
- border-left-color: transparent;
1822
- border-bottom-color: var(--ck-accent);
1823
- }
2879
+ .ck-runs-table td {
2880
+ vertical-align: middle;
2881
+ padding-top: 0.7rem;
2882
+ padding-bottom: 0.7rem;
2883
+ }
1824
2884
 
1825
- .ck-api-tabs__count {
1826
- display: none;
1827
- }
2885
+ .ck-runs-table th:nth-child(n+2),
2886
+ .ck-runs-table td:nth-child(n+2) {
2887
+ width: 1%;
2888
+ white-space: nowrap;
1828
2889
  }
1829
2890
 
1830
- .ck-metric-checkboxes {
1831
- display: grid;
2891
+ .ck-runs-table__identity {
2892
+ display: flex;
2893
+ flex-direction: column;
1832
2894
  gap: 0.25rem;
2895
+ min-width: 0;
1833
2896
  }
1834
2897
 
1835
- .ck-checkbox-label {
1836
- display: flex;
1837
- align-items: center;
1838
- gap: 0.5rem;
1839
- font-family: var(--ck-sans);
1840
- font-size: 0.9rem;
1841
- color: var(--ck-text);
1842
- cursor: pointer;
1843
- padding: 0.35rem 0;
2898
+ .ck-runs-table .ck-run-name {
2899
+ line-height: 1.2;
1844
2900
  }
1845
2901
 
1846
- .ck-checkbox-label:hover {
1847
- color: var(--ck-accent);
2902
+ .ck-runs-table__config {
2903
+ display: inline-flex;
2904
+ align-items: baseline;
2905
+ gap: 0.35rem;
2906
+ font-size: 0.78rem;
2907
+ color: var(--ck-muted);
2908
+ padding-left: 1.2rem;
2909
+ white-space: nowrap;
1848
2910
  }
1849
2911
 
1850
- .ck-response-row {
1851
- display: flex;
1852
- align-items: center;
1853
- gap: 0.75rem;
1854
- padding: 0.65rem 0.75rem;
1855
- border-bottom: 1px solid var(--ck-line);
2912
+ .ck-runs-table__config-link {
2913
+ color: var(--ck-muted);
1856
2914
  text-decoration: none;
1857
- color: inherit;
1858
- transition: background 0.15s;
2915
+ transition: color 0.15s;
1859
2916
  }
1860
2917
 
1861
- .ck-response-row:first-child {
1862
- border-top: 1px solid var(--ck-line);
2918
+ .ck-runs-table__config-link:hover {
2919
+ color: var(--ck-accent);
1863
2920
  }
1864
2921
 
1865
- .ck-response-row:hover {
1866
- background: var(--ck-surface-soft);
2922
+ .ck-runs-table__version {
2923
+ font-family: var(--ck-mono);
2924
+ font-size: 0.7rem;
2925
+ letter-spacing: 0.04em;
2926
+ color: var(--ck-dim);
1867
2927
  }
1868
2928
 
1869
- .ck-response-row__index {
2929
+ .ck-runs-table__sep {
2930
+ color: var(--ck-line-strong);
2931
+ }
2932
+
2933
+ .ck-runs-table__dim {
2934
+ color: var(--ck-dim);
2935
+ }
2936
+
2937
+ .ck-runs-table__count {
1870
2938
  font-family: var(--ck-mono);
1871
- font-size: 0.8rem;
2939
+ white-space: nowrap;
2940
+ }
2941
+
2942
+ .ck-runs-table__count-of {
1872
2943
  color: var(--ck-dim);
1873
- min-width: 2rem;
1874
- flex-shrink: 0;
2944
+ margin-left: 0.15rem;
1875
2945
  }
1876
2946
 
1877
- .ck-response-row__text {
1878
- flex: 1;
1879
- font-size: 0.9rem;
2947
+ .ck-runs-table__when {
2948
+ font-family: var(--ck-sans);
2949
+ font-size: 0.95rem;
2950
+ line-height: 1.6;
1880
2951
  color: var(--ck-muted);
2952
+ white-space: nowrap;
2953
+ }
2954
+
2955
+ .ck-response-cell__index {
2956
+ font-family: var(--ck-mono);
2957
+ font-size: 0.78rem;
2958
+ color: var(--ck-dim);
2959
+ text-align: right;
2960
+ width: 1%;
2961
+ padding-right: 0.85rem !important;
2962
+ }
2963
+
2964
+ .ck-response-cell__text {
2965
+ width: 100%;
2966
+ max-width: 0;
1881
2967
  overflow: hidden;
1882
2968
  text-overflow: ellipsis;
1883
2969
  white-space: nowrap;
2970
+ color: var(--ck-muted);
1884
2971
  }
1885
2972
 
1886
- .ck-response-row__score {
1887
- flex-shrink: 0;
2973
+ .ck-response-cell__error {
2974
+ color: var(--ck-danger);
2975
+ }
2976
+
2977
+ .ck-response-cell__dim {
2978
+ color: var(--ck-dim);
1888
2979
  }
1889
2980
 
1890
2981
  .ck-response-row--pending .ck-response-row__text,
@@ -1902,17 +2993,6 @@ select.ck-input {
1902
2993
  font-size: 0.82rem;
1903
2994
  }
1904
2995
 
1905
- .ck-score {
1906
- font-size: 0.85rem;
1907
- color: var(--ck-muted);
1908
- white-space: nowrap;
1909
- }
1910
-
1911
- .ck-score__star {
1912
- font-size: 1rem;
1913
- color: #f59e0b;
1914
- }
1915
-
1916
2996
  .ck-prompt-preview {
1917
2997
  margin-top: 1rem;
1918
2998
  }
@@ -2014,16 +3094,21 @@ select.ck-input {
2014
3094
  display: inline-flex;
2015
3095
  align-items: center;
2016
3096
  justify-content: center;
2017
- width: 18px;
2018
- height: 18px;
3097
+ width: 16px;
3098
+ height: 16px;
2019
3099
  border-radius: 50%;
2020
3100
  border: 1px solid var(--ck-line-strong);
2021
3101
  color: var(--ck-muted);
2022
- font-size: 0.65rem;
2023
- font-weight: 700;
3102
+ font-family: var(--ck-sans);
3103
+ font-size: 0.7rem;
3104
+ font-weight: 600;
3105
+ line-height: 1;
3106
+ letter-spacing: 0;
3107
+ text-indent: 0;
3108
+ text-transform: none;
2024
3109
  cursor: help;
2025
3110
  vertical-align: middle;
2026
- margin-left: 0.35rem;
3111
+ margin-left: 0.4rem;
2027
3112
  position: relative;
2028
3113
  }
2029
3114
 
@@ -2035,20 +3120,32 @@ select.ck-input {
2035
3120
  .ck-info-popup {
2036
3121
  display: none;
2037
3122
  position: absolute;
2038
- top: 100%;
2039
- left: 0;
2040
- margin-top: 0.5rem;
2041
- padding: 0.75rem 1rem;
3123
+ top: calc(100% + 8px);
3124
+ left: 50%;
3125
+ transform: translateX(-50%);
3126
+ padding: 0.65rem 0.85rem;
2042
3127
  background: var(--ck-surface);
2043
3128
  border: 1px solid var(--ck-line-strong);
2044
3129
  border-radius: var(--ck-radius);
2045
- font-size: 0.78rem;
2046
- line-height: 1.5;
2047
- color: var(--ck-text);
2048
- width: 320px;
2049
- z-index: 10;
3130
+ font-family: var(--ck-sans);
3131
+ font-size: 0.75rem;
2050
3132
  font-weight: 400;
2051
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
3133
+ line-height: 1.45;
3134
+ letter-spacing: normal;
3135
+ text-transform: none;
3136
+ text-align: left;
3137
+ color: var(--ck-text);
3138
+ width: max-content;
3139
+ max-width: 240px;
3140
+ z-index: 50;
3141
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
3142
+ pointer-events: auto;
3143
+ }
3144
+
3145
+ .ck-info-popup--right {
3146
+ left: auto;
3147
+ right: 0;
3148
+ transform: none;
2052
3149
  }
2053
3150
 
2054
3151
  .ck-suggest-reasoning {