diff --git a/docs/swarm/ui.md b/docs/swarm/ui.md index 49a8f2d3..990bd90b 100644 --- a/docs/swarm/ui.md +++ b/docs/swarm/ui.md @@ -296,7 +296,9 @@ API key runtime the model is free text, one word as claude's `--model` takes it, such as `haiku` or `sonnet`. Choosing ACP shows the provider's fields in place of the model: its `https://` URL, its model name, and what it charges in USD per million tokens for input and output, with optional cache read and -cache write prices. The effort is one of low, medium, high, xhigh and max, or +cache write prices. The provider's fields sit under their own **provider** +heading, the URL and the model each on a row of their own and the prices in a +grid on the same columns as the fields above. The effort is one of low, medium, high, xhigh and max, or the runtime's own default. Concurrent reviews is a whole number from 1 to 8; try-outs don't count toward it. diff --git a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css index 570ad988..3cc271c4 100644 --- a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css +++ b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css @@ -6,13 +6,31 @@ gap: 1em; margin-top: 1em; } +/* One grid for every group of fields: each field has the same width and the + same edges at any width, and a label that wraps cannot push one input lower + than its neighbour's. */ .ui-classifier-settings-fields { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 0.75em; } -.ui-classifier-settings-fields > * { - flex: 1 1 14em; +/* A field that needs the whole row (a URL, a model name). */ +.ui-classifier-settings-wide { + grid-column: 1 / -1; +} +/* The provider fields, under their own heading. */ +.ui-classifier-settings-group { + display: flex; + flex-direction: column; + gap: 0.75em; + margin: 0; + padding: 0; + border: 0; +} +.ui-classifier-settings-group > legend { + padding: 0; + margin-bottom: 0.5em; + font-weight: 600; } .ui-classifier-settings-actions { display: flex; diff --git a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx index e339e145..beb99502 100644 --- a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx +++ b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx @@ -176,48 +176,60 @@ export function ClassifierSettings() { /> {draft.runtime === "acp" ? ( -