@wendellresearch-ai/benchwarmers 0.6.2 → 0.6.4

package/ui/bench.css

@@ -117,8 +117,6 @@ main { max-width: var(--page, 104rem); margin: 0 auto; padding: 0 var(--gutter)
 
 /* Action needed: its own page, a panel per connection as on Models, each a
    table (name, state, the provider's words, actions). */
-.a-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 1.4rem 1.6rem 0;
-          padding: .45rem .75rem; background: var(--err-ground); border-radius: var(--radius); }
 .a-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
 .a-head .why { font-size: .875rem; }
 .a-head .why:empty { display: none; }
@@ -293,10 +291,11 @@ td.num, th.num { text-align: right; }
 table.model-cards { table-layout: fixed; min-width: 52rem; }
 .panel:has(> table.model-cards) { overflow-x: auto; }        /* scrolls on a narrow window instead of wrapping numbers */
 table.model-cards td.num { white-space: nowrap; }
-table.model-cards col.c-model { width: 24%; }
-table.model-cards col.c-via { width: 13%; }
+table.model-cards col.c-model { width: 23%; }
+table.model-cards col.c-via { width: 11%; }
 table.model-cards col.c-n { width: 10%; }
-table.model-cards col.c-input { width: 19%; }
+table.model-cards col.c-input { width: 15%; }
+table.model-cards col.c-reply { width: 7%; }
 table.model-cards col.c-lim { width: 6%; }
 table.model-cards td { overflow-wrap: anywhere; }
 tbody tr:hover > td { background: var(--step-1); }
@@ -319,6 +318,7 @@ a.model:hover .alias { box-shadow: inset 0 -.3em 0 var(--signal); }
 .chip.err { background: var(--err-ground); color: var(--err); }
 .chip.new { background: var(--sky); color: var(--ink-deep); }
 /* an endpoint a model is reached through: outlined, so it reads as a place, not a state */
+.chip.adhoc { background: color-mix(in oklab, var(--sky) 55%, var(--paper-2)); color: var(--ink-deep); }
 .chip.via { background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); }
 button.chip { font-family: inherit; border: 0; cursor: pointer; }
 button.chip:hover { outline: 1px solid currentColor; }
@@ -334,6 +334,8 @@ td.why { white-space: nowrap; }                     /* Uptime's down / left out,
 dialog { border: 1px solid var(--ink); border-radius: var(--radius); padding: 1.25rem 1.4rem;
          width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
          background: var(--paper-2); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
+/* The collection popup holds the member table: wider, so names and chips sit on one line. */
+dialog#c-form { width: min(54rem, calc(100vw - 2rem)); }
 dialog::backdrop { background: color-mix(in oklab, var(--ink-deep) 45%, transparent); }
 dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
 :is(dialog, .form-panel) .served { color: var(--muted); font-size: .9375rem; margin: 0 0 .9rem; overflow-wrap: anywhere; }
@@ -344,11 +346,23 @@ 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 { 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 { max-height: min(30rem, 55vh); overflow: auto; border: 1px solid var(--line);
+                  border-radius: var(--radius); }
+/* A table to scan: the model (its name opens it), context, what it can do, then a
+   chip per provider it is on, each ticking that alias (bench.js drawMembers). */
+:is(dialog, .form-panel) .members :is(.m-row, .m-head) { display: grid; gap: .2rem .8rem; align-items: center;
+                  grid-template-columns: minmax(9rem, 1.4fr) 3.6rem minmax(0, 1fr) minmax(0, 1.3fr); padding: .4rem .6rem; }
+:is(dialog, .form-panel) .members .m-head { position: sticky; top: 0; z-index: 1; background: var(--paper-2);
+                  border-bottom: 1px solid var(--ink); font-size: .75rem; font-weight: 600; color: var(--muted); }
+:is(dialog, .form-panel) .members .m-row { border-bottom: 1px solid var(--line); }
+:is(dialog, .form-panel) .members .m-row:nth-child(odd) { background: color-mix(in oklab, var(--band) 45%, transparent); }
+:is(dialog, .form-panel) .members .m-row:has(input:checked) { box-shadow: inset 3px 0 0 var(--bench-seat, var(--brand)); }
+:is(dialog, .form-panel) .members .m-name a.model { font-size: .875rem; }
+:is(dialog, .form-panel) .members .m-ctx { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); text-align: right; }
+:is(dialog, .form-panel) .members .m-can { display: flex; flex-wrap: wrap; gap: .2rem; }
+:is(dialog, .form-panel) .members .m-can .chip { font-size: .6875rem; padding: 0 .4rem; }
+#c-form .members-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
+#c-form .members-head .field { margin-right: auto; }
 :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; }
@@ -380,6 +394,8 @@ dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
 :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) :is(.settings, .members .m-row) { grid-template-columns: minmax(0, 1fr); }
+                            :is(dialog, .form-panel) .members .m-head { display: none; }
+                            :is(dialog, .form-panel) .members .m-ctx { text-align: left; }
                             :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; }
@@ -519,6 +535,17 @@ pre.log.answer { max-height: 40vh; }
 .chart { margin: .5rem 0 .75rem; overflow-x: auto; }
 .chart.muted { font-size: .875rem; }
 h3.chart-head { font-size: 1rem; margin: 1rem 0 .2rem; }
+.chart-label { font-size: .875rem; font-weight: 600; margin: .9rem 0 .1rem; }
+/* Models: each connection a fold, its heading the summary */
+.model-card > summary h3.chart-head { display: inline; margin: 0; }
+/* Expand all / Collapse all: a text toggle with a chevron that turns, like a fold's own marker */
+button.fold-all { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; border: 0; padding: .2rem 0;
+                  background: none; color: var(--link); font: inherit; font-size: .9375rem; cursor: pointer; }
+button.fold-all:hover, button.fold-all:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
+.fold-chev { width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0;
+             transform: rotate(-45deg); transition: transform .15s; }
+button.fold-all[aria-expanded="true"] .fold-chev { transform: rotate(45deg); margin-top: -.3rem; }
+@media (prefers-reduced-motion: reduce) { .fold-chev { transition: none; } }
 /* the Collections tab: the dialog's form, kept to a readable width */
 .panel.form-panel > :not(#c-list, table) { max-width: 46rem; }
 /* a list of things you open (collections), with its New button above */
@@ -573,7 +600,6 @@ dialog .pick { display: flex; gap: 1.5rem; }
   .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; }
-  .a-line { margin: 1rem 1rem 0; }
 }
 /* A narrow page (a phone, or a window with the sidebar beside it): name and
    state on one line, the words and actions under them. No gap between name