@wendellresearch-ai/benchwarmers 0.4.0 → 0.5.0

package/ui/bench.css

@@ -283,9 +283,21 @@ dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
 :is(dialog, .form-panel) .rules { font-size: .875rem; color: var(--muted); margin: .35rem 0 0; }
 :is(dialog, .form-panel) label.check { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; cursor: pointer; }
 :is(dialog, .form-panel) fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
-:is(dialog, .form-panel) .members { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem;
-                  max-height: 14rem; overflow: auto; }
-:is(dialog, .form-panel) .members label.check { margin-top: .35rem; font-size: .875rem; }
+:is(dialog, .form-panel) .members { max-height: 18rem; overflow: auto; border-top: 1px solid var(--line); }
+/* One row per model: its name and what it holds, then a chip per provider it
+   is on, each ticking that alias (bench.js fillForm). */
+:is(dialog, .form-panel) .members .m-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem;
+                  align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
+:is(dialog, .form-panel) .members .m-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem;
+                  font-size: .875rem; overflow-wrap: anywhere; }
+:is(dialog, .form-panel) .members .m-facts { color: var(--muted); font-size: .8125rem; }
+:is(dialog, .form-panel) .members .m-routes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
+:is(dialog, .form-panel) .members label.check { margin-top: 0; font-size: .8125rem; gap: .3rem; padding: .15rem .5rem;
+                  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
+:is(dialog, .form-panel) .members label.check:has(input:checked) { border-color: var(--bench-seat, var(--brand));
+                  background: var(--band); }
+#c-form .seats { min-height: 2rem; }
+#c-form .seat .k.after { margin: 0 0 0 .4rem; }
 :is(dialog, .form-panel) input.member-filter { font-size: .9375rem; padding: .4rem .6rem; margin-bottom: .2rem; }
 :is(dialog, .form-panel) .members input:disabled + span { color: var(--muted); }
 /* Ruled out by the collection's tags (bench.js applyTags): greyed; a ticked
@@ -300,7 +312,8 @@ dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
 :is(dialog, .form-panel) .profile .chip { margin-right: .25rem; }
 :is(dialog, .form-panel) .profile .src { font-size: .75rem; color: var(--muted); }
 :is(dialog, .form-panel) .settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
-@media (max-width: 40rem) { :is(dialog, .form-panel) .settings { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 40rem) { :is(dialog, .form-panel) :is(.settings, .members .m-row) { grid-template-columns: minmax(0, 1fr); }
+                            :is(dialog, .form-panel) .members .m-routes { justify-content: flex-start; } }
 :is(dialog, .form-panel) fieldset label.check { margin-top: .4rem; flex-wrap: wrap; }
 :is(dialog, .form-panel) fieldset label.check .muted { font-size: .875rem; }
 :is(dialog, .form-panel) .errors { color: var(--err); font-size: .9375rem; margin: .8rem 0 0; }
@@ -384,6 +397,40 @@ pre.log { background: var(--log-ground, var(--ink-deep)); color: var(--log-ink,
           white-space: pre-wrap; margin: .5rem 0 0; }
 pre.log.answer { max-height: 40vh; }
 
+/* Quota: a tile per provider, as many columns as fit; a group of windows (a
+   5-hour and a weekly limit of one model group) boxed together; a meter of
+   ten segments filled like a bar. */
+.q-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; align-items: start; margin-top: .75rem; }
+.q-tile { display: flex; flex-direction: column; gap: .45rem; padding: .75rem .85rem; background: var(--panel);
+          border: 1px solid var(--line); border-radius: var(--radius); cursor: grab; }
+.q-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.q-tile.out { border-color: var(--err); }
+.q-tile.dragging { opacity: .45; }
+.q-tile .q-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
+.q-tile .nm { font-size: 1.0625rem; }
+.q-tag, .q-small { font-size: .8125rem; color: var(--muted); }
+.q-group { border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .55rem .55rem; display: flex; flex-direction: column; gap: .3rem; }
+.q-group.bare { border: 0; padding: 0; }
+.q-group h4 { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--muted); }
+.q-line { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; }
+.q-line b { font-weight: 600; }
+.q-line .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.segs { display: flex; gap: 2px; }
+.segs span { flex: 1; height: .5rem; border-radius: 2px; background: var(--step-1); overflow: hidden; }
+.segs i { display: block; height: 100%; background: var(--ok); }
+.segs.warn i { background: var(--warn); }
+.segs.err i { background: var(--err); }
+.q-rest { font-size: .8125rem; background: var(--warn-ground); border-radius: var(--radius); padding: .2rem .45rem; }
+.warn-t { color: var(--warn); }
+.q-msg { font-size: .8125rem; }
+.q-msg:empty { display: none; }
+.q-tile .q-foot { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; margin-top: auto;
+                 padding-top: .5rem; border-top: 1px solid var(--line); }
+.q-tile .q-foot .chip { margin-left: .2rem; font-size: .75rem; }
+.q-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; margin: 0 0 .4rem; }
+.q-legend i { display: inline-block; width: .8rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
+#q-models { max-width: min(48rem, 94vw); }
+
 /* Benchmarks charts (Observable Plot) */
 .chart { margin: .5rem 0 .75rem; overflow-x: auto; }
 .chart.muted { font-size: .875rem; }
@@ -394,10 +441,26 @@ h3.chart-head { font-size: 1rem; margin: 1rem 0 .2rem; }
 .list-actions { display: flex; align-items: center; gap: 1rem; margin: .75rem 0; flex-wrap: wrap; }
 .list-actions .done { margin: 0; color: var(--ok); font-size: .9375rem; }
 .list-actions .errors { color: var(--err); font-size: .9375rem; }
-button.c-row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
-               border-radius: var(--radius); cursor: pointer; }
+button.c-row { width: calc(100% + 1.5rem); padding: .9rem .75rem; text-align: left; font: inherit; color: inherit;
+               background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; cursor: pointer; }
+button.c-row:first-child { border-top: 0; }
 button.c-row:hover, button.c-row:focus-visible { background: var(--step-1); }
 .c-row .open-hint { color: var(--muted); font-size: .875rem; white-space: nowrap; }
+.c-row .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
+.c-row .top .alias { font-size: 1.125rem; font-weight: 500; margin-right: .5rem; }
+.c-row .desc { margin: .1rem 0 0; max-width: 75ch; }
+.c-row .together { margin: 0; font-size: .9375rem; max-width: 80ch; }
+/* The panel as it sits: each member a seat topped in the bench's colour, as
+   the header's bench is; an explorer seat empty and dashed; the merger outlined
+   after an arrow. The bordered seats trade padding for border, so all are one size. */
+:is(.c-row, #c-form) .seats { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0 .5rem; }
+:is(.c-row, #c-form) .seat { font-family: var(--font-mono); font-size: .8125rem; padding: .3rem .6rem; background: var(--band);
+               border-top: 3px solid var(--bench-seat, var(--brand)); border-radius: var(--radius); }
+:is(.c-row, #c-form) .seat:is(.explorer, .merger) { background: transparent; border: 1px dashed var(--muted); color: var(--muted);
+                                      padding: calc(.3rem + 2px) calc(.6rem - 1px) calc(.3rem - 1px); }
+.c-row .seat.merger { border-style: solid; border-color: var(--ink); color: var(--ink); }
+:is(.c-row, #c-form) .seat .k { font-family: var(--font-display); color: var(--muted); margin-right: .35rem; }
+.c-row .merge { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
 /* suggested collection tags under the field */
 .tag-picks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
 .tag-picks .chip { cursor: pointer; border: 0; font-family: inherit; }
@@ -424,6 +487,8 @@ dialog .pick { display: flex; gap: 1.5rem; }
   .ep .acts { justify-content: flex-start; }
   details.key dl { grid-template-columns: minmax(0, 1fr); }
   .toolbar input[type=search] { min-width: 0; width: 100%; }
+  button.c-row { grid-template-columns: minmax(0, 1fr); }     /* the seats get the width; the whole row opens */
+  .c-row .open-hint { display: none; }
 }
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; }