Effort as the model offers it, and the team's size beside it

/api/v2/models now says each model's levels, start level and control. A model
with one level shows no effort control; off and one effort is a Thinking
switch (a checkbox with the switch role); more keep the selector. In the
chat's header the switch and selector save at once; in the new-chat form they
start at the model's start level and redraw when the model changes.

Where a team is offered -- an open chat asks GET /chats/{chat}/team; a new
chat on the server needs a model that calls tools and serves two requests at
once -- the Agents fewest/most fields sit beside it. The header saves the pair
on change (the server refuses a pair outside its bounds and says them; the
fields go back); a new chat sends them only when set, else the person's
default stands.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui/app.css

@@ -67,7 +67,7 @@ bdi { unicode-bidi: isolate; }
 .btn--danger { color: var(--ink-inverse); background: var(--danger); border-color: var(--danger); }
 .btn--danger:hover { background: var(--danger-hover); }
 
-input[type="text"], select, textarea {
+input[type="text"], input[type="number"], select, textarea {
   min-width: 0;
   font: var(--text-sm) var(--font-ui);
   color: var(--ink);
@@ -75,7 +75,7 @@ input[type="text"], select, textarea {
   border: var(--border-w) solid var(--border-strong);
   border-radius: var(--radius);
 }
-input[type="text"], select { height: var(--control-h); padding: 0 var(--control-px-sm); }
+input[type="text"], input[type="number"], select { height: var(--control-h); padding: 0 var(--control-px-sm); }
 textarea { padding: var(--sp-2) var(--control-px-sm); resize: none; line-height: var(--leading-normal); }
 :focus-visible { outline: var(--outline-w) solid var(--accent); outline-offset: var(--outline-offset); }
 
@@ -452,6 +452,68 @@ label, .label { font: var(--text-sm) / var(--leading-tight) var(--font-ui); colo
 /* A model's own picture fills the same square, cut to it: the avatar's size does not depend on it. */
 .avatar--image { overflow: hidden; background: var(--surface); }
 .avatar--image img { display: block; width: 100%; height: 100%; object-fit: cover; }
+/* The Thinking switch: a checkbox drawn as a switch, then its words, on two known tracks. The
+   label is the tap target; the whole of it is a control's height. */
+.toggle {
+  display: inline-grid;
+  grid-template-columns: calc(2 * var(--check-size)) auto;
+  gap: var(--sp-2);
+  align-items: center;
+  height: var(--control-h);
+  color: var(--ink);
+  font: var(--text-sm) var(--font-ui);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.toggle--compact { height: var(--control-h-sm); }
+.toggle input {
+  appearance: none;
+  position: relative;
+  width: calc(2 * var(--check-size));
+  height: var(--check-size);
+  margin: 0;
+  background: var(--surface-active);
+  border: var(--border-w) solid var(--border-strong);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: background var(--dur-1) var(--ease-out);
+}
+.toggle input::after {
+  content: "";
+  position: absolute;
+  top: var(--border-w);
+  left: var(--border-w);
+  width: calc(var(--check-size) - 4 * var(--border-w));
+  height: calc(var(--check-size) - 4 * var(--border-w));
+  background: var(--ink-muted);
+  border-radius: var(--radius-full);
+  transition: transform var(--dur-1) var(--ease-out);
+}
+.toggle input:checked { background: var(--accent); border-color: var(--accent); }
+.toggle input:checked::after { background: var(--accent-ink); transform: translateX(var(--check-size)); }
+/* The team's size: two number fields of one width with a dash between them, and in the header
+   its word before them -- fixed tracks, so nothing moves when a number grows a digit. */
+.agents {
+  display: inline-grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-areas: "min max";
+  gap: var(--sp-2);
+  align-items: center;
+  width: 100%;
+  height: var(--control-h);
+}
+.agents__dash { display: none; }
+.agents__input { width: 100%; min-width: 0; height: var(--control-h); padding: 0 var(--control-px-sm); }
+.agents--compact {
+  grid-template-columns: auto calc(var(--w-field-xs) / 2) auto calc(var(--w-field-xs) / 2);
+  grid-template-areas: none;
+  width: auto;
+  height: var(--control-h-sm);
+  font: var(--text-sm) var(--font-ui);
+}
+.agents--compact .agents__dash { display: inline; color: var(--ink-muted); }
+.agents--compact .agents__input { height: var(--control-h-sm); }
+.agents__label { color: var(--ink-muted); white-space: nowrap; }
 /* The model picker: a button the height of a control, avatar · name · chevron. */
 .picker {
   display: inline-grid;