@oxy.so/bloom 3.2.1 → 3.4.0

package/src/composer-panel/ComposerPillBase.tsx

@@ -23,7 +23,7 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text, TYPE_SCALE } from '../typography';
 import { AddMenu } from './AddMenu';
-import { MicButton, SendButton } from './ComposerControls';
+import { MicButton, SendButton, StopButton } from './ComposerControls';
 import { useComposerPopover } from './context';
 import { EffortSlider } from './EffortSlider';
 import {
@@ -35,7 +35,7 @@ import {
   resolveComposerPalette,
   type ComposerPalette,
 } from './shared';
-import type { ComposerPillLabels, ComposerPillProps } from './types';
+import type { ComposerPillLabels, ComposerPillProps, ModelPickerModel } from './types';
 import { dataHook, IS_WEB, useComposerWebCss } from './web-hooks';
 
 const EASE = Easing.bezier(0.25, 0.1, 0.25, 1);
@@ -43,7 +43,10 @@ const EASE_OUT = Easing.bezier(0, 0, 0.58, 1);
 const GLASS_MS = 480;
 /** `max-width: 639px`. */
 const COMPACT_WIDTH = 640;
+/** The pill at one line: the field's 20px line box plus 8px padding either side, in a 52 box. */
 const PILL_HEIGHT = 52;
+/** One line of `body-regular`, which is what the field was fixed at. */
+const LINE_HEIGHT = 20;
 
 const DEFAULT_LABELS: Required<ComposerPillLabels> = {
   message: 'Message',
@@ -53,10 +56,12 @@ const DEFAULT_LABELS: Required<ComposerPillLabels> = {
   models: 'Models',
   modelGroup: 'Model',
   effort: 'Effort',
+  effortAuto: 'Auto',
   faster: 'Faster',
   smarter: 'Smarter',
   voice: 'Voice input',
   send: 'Send message',
+  stop: 'Stop generating',
 };
 
 /**
@@ -153,6 +158,13 @@ function ModelRow({
 }) {
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
+  /**
+   * The field's measured content height, from `onContentSizeChange`.
+   *
+   * Measured rather than counted: a draft wraps, so the number of LINES is not
+   * the number of newlines, and only the field knows how its own text laid out.
+   */
+  const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
   return (
     <Pressable
       {...dataHook('bloomComposerRow')}
@@ -194,7 +206,10 @@ function ModelRow({
  *
  *   models   pt 4, label → rows 6: "Models" (pl 8, body-medium secondary), then a
  *            radio row per model — p 8, radius 10, body-medium primary + 14px
- *            radio, primary-hover while selected or hovered, 4 apart
+ *            radio, primary-hover while selected or hovered, 4 apart. Rows key,
+ *            match and report by id; a string entry is its own id
+ *   effort   only with stops to choose from — no `effortLevels`, no divider and
+ *            no slider, rather than a slider that cannot commit
  *   divider  full bleed (−10 each side), 7 above, 12 below
  *   effort   "Effort <value>" (the value text-primary, blurring in on change),
  *            Faster / Smarter (body-2-medium secondary, px 8 / pt 8 / pb 3) and
@@ -204,7 +219,7 @@ function ModelRow({
  */
 function ModelMenu({
   models,
-  model,
+  modelId,
   onModelChange,
   effort,
   onEffortChange,
@@ -215,10 +230,10 @@ function ModelMenu({
   onTriggerLayout,
   testID,
 }: {
-  models: ReadonlyArray<string>;
-  model: string;
-  onModelChange: (model: string) => void;
-  effort: number;
+  models: ReadonlyArray<ModelPickerModel>;
+  modelId: string;
+  onModelChange: (modelId: string) => void;
+  effort: number | null;
   onEffortChange: (effort: number) => void;
   levels: ReadonlyArray<string>;
   labels: Required<ComposerPillLabels>;
@@ -231,6 +246,10 @@ function ModelMenu({
   const triggerRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
+  // An id with no entry (a model the lineup no longer carries) shows as itself
+  // rather than as an empty trigger.
+  const modelName = models.find((entry) => entry.id === modelId)?.name ?? modelId;
+  const hasEffort = levels.length > 0;
   const triggerStyle: WebCssStyle = {
     height: 32,
     flexShrink: 0,
@@ -254,7 +273,7 @@ function ModelMenu({
         testID={testID}
         {...dataHook('bloomComposerControl')}
         accessibilityRole="button"
-        accessibilityLabel={model}
+        accessibilityLabel={modelName}
         aria-expanded={open}
         aria-haspopup="dialog"
         accessibilityState={{ expanded: open }}
@@ -264,7 +283,7 @@ function ModelMenu({
         onLayout={(event) => onTriggerLayout?.(event.nativeEvent.layout.width)}
         style={triggerStyle}>
         <Text variant="body-medium" numberOfLines={1} style={{ paddingLeft: 2, paddingRight: 2, color: palette.textSecondary }}>
-          {model}
+          {modelName}
         </Text>
         <TurningChevron degrees={open ? 180 : 0} color={palette.iconSecondary} />
       </Pressable>
@@ -292,52 +311,63 @@ function ModelMenu({
             {labels.models}
           </Text>
           <View role="radiogroup" accessibilityLabel={labels.modelGroup} style={{ width: '100%', flexDirection: 'column', gap: 4 }}>
-            {models.map((name) => (
+            {models.map((entry) => (
               <ModelRow
-                key={name}
-                name={name}
-                selected={name === model}
+                key={entry.id}
+                name={entry.name}
+                selected={entry.id === modelId}
                 palette={palette}
                 onPress={() => {
-                  onModelChange(name);
+                  onModelChange(entry.id);
                   setOpen(false);
                 }}
               />
             ))}
           </View>
         </View>
-        <View style={{ height: 1, marginLeft: -10, marginRight: -10, marginTop: 7, marginBottom: 12, backgroundColor: palette.border }} />
-        <View style={{ width: '100%', flexDirection: 'column' }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 8 }}>
-            <Text variant="body-medium" style={{ color: palette.textSecondary }}>
-              {`${labels.effort} `}
-            </Text>
-            <EffortValue value={levels[effort] ?? ''} color={palette.text} />
-          </View>
-          <View style={{ width: '100%', flexDirection: 'column', gap: 4 }}>
-            <View
-              style={{
-                width: '100%',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingLeft: 8,
-                paddingRight: 8,
-                paddingTop: 8,
-                paddingBottom: 3,
-              }}>
-              <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
-                {labels.faster}
-              </Text>
-              <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
-                {labels.smarter}
-              </Text>
-            </View>
-            <View style={{ width: '100%', paddingLeft: 8, paddingRight: 8, paddingBottom: 8 }}>
-              <EffortSlider value={effort} onChange={onEffortChange} levels={levels} label={labels.effort} palette={palette} />
+        {hasEffort ? (
+          <>
+            <View style={{ height: 1, marginLeft: -10, marginRight: -10, marginTop: 7, marginBottom: 12, backgroundColor: palette.border }} />
+            <View style={{ width: '100%', flexDirection: 'column' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 8 }}>
+                <Text variant="body-medium" style={{ color: palette.textSecondary }}>
+                  {`${labels.effort} `}
+                </Text>
+                <EffortValue value={effort === null ? labels.effortAuto : (levels[effort] ?? labels.effortAuto)} color={palette.text} />
+              </View>
+              <View style={{ width: '100%', flexDirection: 'column', gap: 4 }}>
+                <View
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    paddingTop: 8,
+                    paddingBottom: 3,
+                  }}>
+                  <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
+                    {labels.faster}
+                  </Text>
+                  <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
+                    {labels.smarter}
+                  </Text>
+                </View>
+                <View style={{ width: '100%', paddingLeft: 8, paddingRight: 8, paddingBottom: 8 }}>
+                  <EffortSlider
+                    value={effort}
+                    onChange={onEffortChange}
+                    levels={levels}
+                    label={labels.effort}
+                    unsetLabel={labels.effortAuto}
+                    palette={palette}
+                  />
+                </View>
+              </View>
             </View>
-          </View>
-        </View>
+          </>
+        ) : null}
       </Popover>
     </>
   );
@@ -355,7 +385,8 @@ function ModelMenu({
  *             unfocused on web, its last 32px fade into the pill
  *   model     the model menu trigger (see `ModelMenu`)
  *   controls  pl 6, gap 8: the bordered mic (dancing accent bars while
- *             listening) and the `bg-button-primary` send disc
+ *             listening) and the `bg-button-primary` send disc — which becomes
+ *             the stop disc while `busy`, outside `disabled`'s reach
  *
  * `glass` drops the add, model and mic paint (480ms) onto frosted chips, so an
  * active `ComposerLoader` behind the pill shows through them.
@@ -365,6 +396,8 @@ export function ComposerPillBase({
   defaultValue = '',
   onValueChange,
   onSubmit,
+  onStop,
+  busy = false,
   disabled = false,
   placeholder = 'Ask me anything',
   compactPlaceholder = 'Ask me',
@@ -386,6 +419,7 @@ export function ComposerPillBase({
   inputRef,
   labels: labelOverrides,
   style,
+  maxLines = 8,
   testID,
 }: ComposerPillProps) {
   useComposerWebCss();
@@ -400,17 +434,28 @@ export function ComposerPillBase({
     defaultValue: defaultListening,
     onChange: onListeningChange,
   });
-  const [modelName, setModel] = useControllableState<string>({
+  const lineup = useMemo(() => normalizeModels(models ?? []), [models]);
+  const [modelId, setModel] = useControllableState<string>({
     value: model,
-    defaultValue: defaultModel ?? models?.[0] ?? '',
+    defaultValue: defaultModel ?? lineup[0]?.id ?? '',
     onChange: onModelChange,
   });
-  const [effortValue, setEffort] = useControllableState<number>({
+  const [effortValue, setEffort] = useControllableState<number | null>({
     value: effort,
     defaultValue: defaultEffort,
-    onChange: onEffortChange,
+    // The menu can only ever land on a stop; `null` is the caller's to hold.
+    onChange: (next) => {
+      if (next !== null) onEffortChange?.(next);
+    },
   });
   const [focused, setFocused] = useState(false);
+  /**
+   * The field's measured content height, from `onContentSizeChange`.
+   *
+   * Measured rather than counted: a draft wraps, so the number of LINES is not
+   * the number of newlines, and only the field knows how its own text laid out.
+   */
+  const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
   const [modelWidth, setModelWidth] = useState(0);
 
   // The chat's add surface is a step lighter than the Composer Panel's:
@@ -433,27 +478,72 @@ export function ComposerPillBase({
   );
 
   const submit = useCallback(() => {
-    if (disabled) return;
+    if (disabled || busy) return;
     onSubmit?.(text);
-  }, [disabled, onSubmit, text]);
+  }, [disabled, busy, onSubmit, text]);
 
   const onKeyPress = useCallback(
     (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      const native: TextInputKeyPressEventData & { isComposing?: boolean } = event.nativeEvent;
-      if (!IS_WEB || native.key !== 'Enter' || native.isComposing || disabled) return;
+      const native: TextInputKeyPressEventData & { shiftKey?: boolean; isComposing?: boolean } = event.nativeEvent;
+      /*
+       * Shift+Enter is a NEWLINE, not a send.
+       *
+       * This handler used to read only the key, so a person holding shift to
+       * break a line sent the half-written message instead — on a field that
+       * could not have held the line anyway. `ComposerPanelBase` has always
+       * had the clause (`… || native.shiftKey || …`); the pill did not, and
+       * the two composers disagreeing about the most-used key in a composer
+       * was a difference nobody chose.
+       */
+      if (
+        !IS_WEB
+        || native.key !== 'Enter'
+        || native.shiftKey
+        || native.isComposing
+        || disabled
+        || busy
+      ) {
+        return;
+      }
       event.preventDefault();
       submit();
     },
-    [submit, disabled],
+    [submit, disabled, busy],
   );
 
+  /*
+   * How tall the pill is: one line, or as many as the draft needs up to
+   * `maxLines`.
+   *
+   * It was `height: PILL_HEIGHT` with a `height: 20` field and no `multiline`
+   * — under react-native-web that is an `<input>`, which cannot hold a newline
+   * and cannot grow. A composer for an assistant has to hold a paragraph, so
+   * the field is multiline and the pill measures it.
+   *
+   * The radius stays at 9999 while it is one line and squares off to 26 beyond
+   * that: a fully-round multi-line box puts the first and last lines inside
+   * the curve, where the text meets the edge.
+   */
+  const lines = Math.min(maxLines, Math.max(1, Math.ceil(contentHeight / LINE_HEIGHT) || 1));
+  const fieldHeight = lines * LINE_HEIGHT;
+  /*
+   * At one line the pill is exactly what it always was. Its 52 comes from the
+   * CONTROLS — a 36px disc inside 8px padding — not from the 20px field, so
+   * growing from the field's height would have SHRUNK the resting pill to 36.
+   * Each line after the first adds its own height and nothing else moves.
+   */
+  const pillHeight = PILL_HEIGHT + (lines - 1) * LINE_HEIGHT;
+  const multiLine = lines > 1;
+
   const pillStyle: WebCssStyle = {
     width: '100%',
-    height: PILL_HEIGHT,
+    height: pillHeight,
     flexDirection: 'row',
-    alignItems: 'center',
+    // The controls sit with the LAST line once the field has grown, which is
+    // where the caret is; centred, they would drift to the middle of the draft.
+    alignItems: multiLine ? 'flex-end' : 'center',
     gap: 10,
-    borderRadius: 9999,
+    borderRadius: multiLine ? 26 : 9999,
     padding: 8,
     backgroundColor: surface ? palette.surface : 'transparent',
     boxShadow: surface ? palette.shadowXs : undefined,
@@ -461,10 +551,12 @@ export function ComposerPillBase({
   };
 
   const fieldStyle: WebCssStyle = {
-    height: 20,
+    height: fieldHeight,
     minWidth: 0,
     flex: 1,
-    ...(IS_WEB && !focused
+    // The fade that hints at overflowing text is a ONE-LINE affordance: on a
+    // grown field it would dim the end of every line.
+    ...(IS_WEB && !focused && !multiLine
       ? {
           maskImage: 'linear-gradient(to right, #000 calc(100% - 32px), transparent 100%)',
           WebkitMaskImage: 'linear-gradient(to right, #000 calc(100% - 32px), transparent 100%)',
@@ -504,9 +596,14 @@ export function ComposerPillBase({
           selectionColor={palette.accent500}
           cursorColor={palette.accent500}
           returnKeyType="send"
+          multiline
+          onContentSizeChange={(event) => setContentHeight(event.nativeEvent.contentSize.height)}
           style={{
             width: '100%',
-            height: 20,
+            height: fieldHeight,
+            // react-native-web gives a multiline field a resize grip and a
+            // scrollbar it does not need: the pill owns the height.
+            ...(IS_WEB ? { resize: 'none', overflowY: lines >= maxLines ? 'auto' : 'hidden' } : null),
             padding: 0,
             margin: 0,
             ...TYPE_SCALE['body-regular'],
@@ -518,12 +615,12 @@ export function ComposerPillBase({
         />
       </View>
 
-      {models && models.length > 0 ? (
+      {lineup.length > 0 ? (
         <View style={{ position: 'relative', flexShrink: 0 }}>
           <GlassChip shown={glass && modelWidth > 0} radius={12} dark={theme.isDark} />
           <ModelMenu
-            models={models}
-            model={modelName}
+            models={lineup}
+            modelId={modelId}
             onModelChange={setModel}
             effort={effortValue}
             onEffortChange={setEffort}
@@ -547,7 +644,11 @@ export function ComposerPillBase({
             palette={controlPalette}
           />
         </View>
-        <SendButton disabled={disabled} onPress={submit} label={labels.send} palette={palette} />
+        {busy && onStop ? (
+          <StopButton onPress={onStop} label={labels.stop} palette={palette} />
+        ) : (
+          <SendButton disabled={disabled} onPress={submit} label={labels.send} palette={palette} />
+        )}
       </View>
     </View>
   );
@@ -562,5 +663,16 @@ const DEFAULT_PANEL_LABELS = {
   learnMore: 'Learn more',
   voice: 'Voice input',
   send: 'Send message',
+  stop: 'Stop generating',
   remove: 'Remove',
 };
+
+/**
+ * A bare string entry is its own id: the shorthand stays exact, and an `{ id,
+ * name }` entry keys, matches and reports by id like `ModelPicker` does.
+ */
+function normalizeModels(
+  models: ReadonlyArray<string | ModelPickerModel>,
+): ReadonlyArray<ModelPickerModel> {
+  return models.map((entry) => (typeof entry === 'string' ? { id: entry, name: entry } : entry));
+}

package/src/composer-panel/EffortSlider.tsx

@@ -9,10 +9,13 @@ const TRACK_HEIGHT = 27;
 const THUMB_WIDTH = 21;
 
 interface EffortSliderProps {
-  value: number;
+  /** The chosen stop, or `null` for no choice yet. */
+  value: number | null;
   onChange: (value: number) => void;
   levels: ReadonlyArray<string>;
   label: string;
+  /** What `aria-valuetext` reads with no stop chosen (the "Auto" label). */
+  unsetLabel: string;
   palette: ComposerPalette;
   testID?: string;
 }
@@ -25,6 +28,11 @@ interface EffortSliderProps {
  * past the value fade their tick to 30% over 300ms; the fill follows the thumb
  * over 150ms.
  *
+ * With `value` `null` nothing is committed: the fill is empty, every tick is
+ * faded and the thumb is hollow and dashed, so "no stop chosen" cannot be read
+ * as "the first stop". The first press or key commits a stop, and there is no
+ * way back — the caller owns the `null`.
+ *
  * Drag or press anywhere on the track (PanResponder on both platforms); on web
  * the thumb is focusable and answers the arrow keys, Home and End.
  *
@@ -32,20 +40,25 @@ interface EffortSliderProps {
  * starfield, with the ticks blown off the track) has no native counterpart,
  * so at Max the slider simply rests at its last stop.
  */
-export function EffortSlider({ value, onChange, levels, label, palette, testID }: EffortSliderProps) {
+export function EffortSlider({ value, onChange, levels, label, unsetLabel, palette, testID }: EffortSliderProps) {
   const [width, setWidth] = useState(0);
   const max = Math.max(0, levels.length - 1);
-  const clamped = Math.min(Math.max(value, 0), max);
-  const fraction = max > 0 ? clamped / max : 0;
+  const chosen = value === null ? null : Math.min(Math.max(value, 0), max);
+  const fraction = chosen !== null && max > 0 ? chosen / max : 0;
   const rail = Math.max(0, width - THUMB_WIDTH);
 
-  const stateRef = useRef({ value: clamped, rail, max, onChange });
-  stateRef.current = { value: clamped, rail, max, onChange };
-  const startRef = useRef(clamped);
+  const stateRef = useRef<{ value: number | null; rail: number; max: number; onChange: (next: number) => void }>({
+    value: chosen,
+    rail,
+    max,
+    onChange,
+  });
+  stateRef.current = { value: chosen, rail, max, onChange };
+  const startRef = useRef(chosen ?? 0);
 
   const valueAt = useCallback((x: number) => {
     const s = stateRef.current;
-    if (s.rail <= 0 || s.max <= 0) return s.value;
+    if (s.rail <= 0 || s.max <= 0) return s.value ?? 0;
     const f = Math.min(Math.max((x - THUMB_WIDTH / 2) / s.rail, 0), 1);
     return Math.round(f * s.max);
   }, []);
@@ -83,11 +96,17 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
         tabIndex: 0,
         onKeyDown: (event: { key: string; preventDefault: () => void }) => {
           const s = stateRef.current;
+          // With nothing chosen, either arrow commits the first stop.
+          const current = s.value;
           const next =
             event.key === 'ArrowRight' || event.key === 'ArrowUp'
-              ? Math.min(s.max, s.value + 1)
+              ? current === null
+                ? 0
+                : Math.min(s.max, current + 1)
               : event.key === 'ArrowLeft' || event.key === 'ArrowDown'
-                ? Math.max(0, s.value - 1)
+                ? current === null
+                  ? 0
+                  : Math.max(0, current - 1)
                 : event.key === 'Home'
                   ? 0
                   : event.key === 'End'
@@ -108,9 +127,10 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
     height: TRACK_HEIGHT,
     borderRadius: 7,
     borderWidth: 1,
+    borderStyle: chosen === null ? 'dashed' : 'solid',
     borderColor: palette.thumbBorder,
-    backgroundColor: palette.surface,
-    boxShadow: palette.shadowXs,
+    backgroundColor: chosen === null ? 'transparent' : palette.surface,
+    boxShadow: chosen === null ? undefined : palette.shadowXs,
     '--bloom-composer-ring': palette.focusRing,
   };
 
@@ -121,12 +141,12 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
       accessibilityLabel={label}
       aria-valuemin={0}
       aria-valuemax={max}
-      aria-valuenow={clamped}
-      aria-valuetext={levels[clamped]}
+      aria-valuenow={chosen ?? undefined}
+      aria-valuetext={chosen === null ? unsetLabel : levels[chosen]}
       accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
       onAccessibilityAction={(event) => {
-        if (event.nativeEvent.actionName === 'increment') commit(Math.min(max, clamped + 1));
-        if (event.nativeEvent.actionName === 'decrement') commit(Math.max(0, clamped - 1));
+        if (event.nativeEvent.actionName === 'increment') commit(chosen === null ? 0 : Math.min(max, chosen + 1));
+        if (event.nativeEvent.actionName === 'decrement') commit(chosen === null ? 0 : Math.max(0, chosen - 1));
       }}
       style={{ width: '100%' }}>
       <View
@@ -149,7 +169,7 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
             top: 0,
             bottom: 0,
             left: 0,
-            width: fraction * rail + THUMB_WIDTH,
+            width: chosen === null ? 0 : fraction * rail + THUMB_WIDTH,
             borderRadius: 8,
             backgroundColor: palette.tertiaryHover,
           }}
@@ -175,7 +195,7 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
                 height: 13,
                 borderRadius: 2,
                 backgroundColor: palette.iconTertiary,
-                opacity: index > clamped ? 0.3 : 1,
+                opacity: chosen === null || index > chosen ? 0.3 : 1,
               }}
             />
           ))}

package/src/composer-panel/ModelPickerBase.tsx

@@ -57,6 +57,7 @@ const DEFAULT_LABELS: Required<ModelPickerLabels> = {
   noMatches: 'No models match',
   providers: 'Providers',
   effort: 'Effort',
+  effortAuto: 'Auto',
   faster: 'Faster',
   smarter: 'Smarter',
 };
@@ -218,6 +219,11 @@ function BlurInLevel({ level, palette }: { level: string; palette: ComposerPalet
   );
 }
 
+/**
+ * The effort chip on the checked row. Drawn only where there are stops to
+ * choose from — a model with no effort axis gets no chip, rather than an empty
+ * one over a slider that cannot commit.
+ */
 function EffortMenu({
   value,
   onChange,
@@ -225,7 +231,7 @@ function EffortMenu({
   labels,
   palette,
 }: {
-  value: number;
+  value: number | null;
   onChange: (next: number) => void;
   levels: ReadonlyArray<string>;
   labels: Required<ModelPickerLabels>;
@@ -235,7 +241,7 @@ function EffortMenu({
   const triggerRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
-  const level = levels[value] ?? levels[DEFAULT_EFFORT] ?? '';
+  const level = value === null ? labels.effortAuto : (levels[value] ?? labels.effortAuto);
 
   const chipStyle: WebCssStyle = {
     flexShrink: 0,
@@ -314,7 +320,14 @@ function EffortMenu({
               </Text>
             </View>
             <View style={{ paddingLeft: 8, paddingRight: 8, paddingBottom: 8 }}>
-              <EffortSlider value={value} onChange={onChange} levels={levels} label={labels.effort} palette={palette} />
+              <EffortSlider
+                value={value}
+                onChange={onChange}
+                levels={levels}
+                label={labels.effort}
+                unsetLabel={labels.effortAuto}
+                palette={palette}
+              />
             </View>
           </View>
         </View>
@@ -388,7 +401,7 @@ function ModelRow({
               {searching ? <InlineAside color={palette.textTertiary}>{provider.name}</InlineAside> : null}
             </Text>
           </View>
-          {checked ? <View style={{ flexShrink: 0, flexDirection: 'row' }}>{effort}</View> : null}
+          {effort ? <View style={{ flexShrink: 0, flexDirection: 'row' }}>{effort}</View> : null}
         </View>
         <View pointerEvents="none">
           <RadioIndicator selected={checked} size={14} />
@@ -447,10 +460,13 @@ export function ModelPickerBase({
     defaultValue: defaultValue ?? providers[0]?.models[0]?.id ?? '',
     onChange: onValueChange,
   });
-  const [effortValue, setEffort] = useControllableState<number>({
+  const [effortValue, setEffort] = useControllableState<number | null>({
     value: effort,
     defaultValue: defaultEffort,
-    onChange: onEffortChange,
+    // The picker can only ever land on a stop; `null` is the caller's to hold.
+    onChange: (next) => {
+      if (next !== null) onEffortChange?.(next);
+    },
   });
 
   const selected: Match | null =
@@ -724,7 +740,7 @@ export function ModelPickerBase({
                       }
                     }}
                     effort={
-                      checked ? (
+                      checked && effortLevels.length > 0 ? (
                         <EffortMenu
                           value={effortValue}
                           onChange={setEffort}