@oxy.so/bloom 3.2.0 → 3.3.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);
@@ -53,10 +53,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',
 };
 
 /**
@@ -194,7 +196,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 +209,7 @@ function ModelRow({
  */
 function ModelMenu({
   models,
-  model,
+  modelId,
   onModelChange,
   effort,
   onEffortChange,
@@ -215,10 +220,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 +236,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 +263,7 @@ function ModelMenu({
         testID={testID}
         {...dataHook('bloomComposerControl')}
         accessibilityRole="button"
-        accessibilityLabel={model}
+        accessibilityLabel={modelName}
         aria-expanded={open}
         aria-haspopup="dialog"
         accessibilityState={{ expanded: open }}
@@ -264,7 +273,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 +301,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 +375,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 +386,8 @@ export function ComposerPillBase({
   defaultValue = '',
   onValueChange,
   onSubmit,
+  onStop,
+  busy = false,
   disabled = false,
   placeholder = 'Ask me anything',
   compactPlaceholder = 'Ask me',
@@ -400,15 +423,19 @@ 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);
   const [modelWidth, setModelWidth] = useState(0);
@@ -433,18 +460,18 @@ 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;
+      if (!IS_WEB || native.key !== 'Enter' || native.isComposing || disabled || busy) return;
       event.preventDefault();
       submit();
     },
-    [submit, disabled],
+    [submit, disabled, busy],
   );
 
   const pillStyle: WebCssStyle = {
@@ -518,12 +545,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 +574,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 +593,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}

package/src/composer-panel/types.ts

@@ -121,6 +121,8 @@ export interface ModelPickerLabels {
   providers?: string;
   /** Default `'Effort'`. */
   effort?: string;
+  /** Default `'Auto'` — the effort chip with no stop chosen. */
+  effortAuto?: string;
   /** Default `'Faster'`. */
   faster?: string;
   /** Default `'Smarter'`. */
@@ -135,12 +137,17 @@ export interface ModelPickerProps {
   /** Initial model id when uncontrolled. Defaults to the first provider's first model. */
   defaultValue?: string;
   onValueChange?: (modelId: string) => void;
-  /** Controlled effort stop, an index into `effortLevels`. */
-  effort?: number;
-  /** Initial stop when uncontrolled. Default `1` ("Medium"). */
-  defaultEffort?: number;
+  /**
+   * Controlled effort stop, an index into `effortLevels`. `null` is "no stop
+   * chosen" — the chip reads `labels.effortAuto`, the slider commits nothing and
+   * the thumb is drawn hollow, so the absence of a choice never looks like one.
+   */
+  effort?: number | null;
+  /** Initial stop when uncontrolled. Default `1` ("Medium"); `null` for no choice. */
+  defaultEffort?: number | null;
+  /** A stop the reader chose. The picker has no way back to `null`, so it never reports one. */
   onEffortChange?: (effort: number) => void;
-  /** The effort stops, "Faster" → "Smarter". Defaults to six stops. */
+  /** The effort stops, "Faster" → "Smarter". Defaults to six stops; `[]` drops the effort axis entirely. */
   effortLevels?: ReadonlyArray<string>;
   labels?: ModelPickerLabels;
   style?: StyleProp<ViewStyle>;
@@ -169,6 +176,8 @@ export interface ComposerPanelLabels {
   voice?: string;
   /** Default `'Send message'`. */
   send?: string;
+  /** Default `'Stop generating'` — send's stop state while `busy`. */
+  stop?: string;
   /** Default `'Remove'` — prefixed to the file name on a tile's dismiss. */
   remove?: string;
 }
@@ -181,7 +190,15 @@ export interface ComposerPanelProps {
   onValueChange?: (value: string) => void;
   /** Fires on the send button and on Enter (web; Shift+Enter breaks the line). */
   onSubmit?: (value: string) => void;
-  /** Greys out send while a turn is in flight. */
+  /**
+   * Stop the turn in flight. With `busy`, send becomes a stop control that
+   * ignores `disabled` — cancelling has to stay possible while typing is not.
+   * Without a handler `busy` draws no stop, so the control is never inert.
+   */
+  onStop?: () => void;
+  /** A turn is running: send becomes stop (given `onStop`) and Enter no longer submits. */
+  busy?: boolean;
+  /** Greys out send while a turn is in flight. Never reaches the stop control. */
   disabled?: boolean;
   /** Default `'Hi, what do you need today?'`. */
   placeholder?: string;
@@ -207,10 +224,11 @@ export interface ComposerPanelProps {
   model?: string;
   defaultModel?: string;
   onModelChange?: (modelId: string) => void;
-  /** Controlled effort stop. */
-  effort?: number;
-  defaultEffort?: number;
+  /** Controlled effort stop; `null` is "no stop chosen". See `ModelPicker`. */
+  effort?: number | null;
+  defaultEffort?: number | null;
   onEffortChange?: (effort: number) => void;
+  /** `[]` drops the effort axis from the picker. */
   effortLevels?: ReadonlyArray<string>;
   modelPickerLabels?: ModelPickerLabels;
 
@@ -293,6 +311,8 @@ export interface ComposerPillLabels {
   modelGroup?: string;
   /** Default `'Effort'`. */
   effort?: string;
+  /** Default `'Auto'` — the effort value with no stop chosen. */
+  effortAuto?: string;
   /** Default `'Faster'`. */
   faster?: string;
   /** Default `'Smarter'`. */
@@ -301,6 +321,8 @@ export interface ComposerPillLabels {
   voice?: string;
   /** Default `'Send message'`. */
   send?: string;
+  /** Default `'Stop generating'` — send's stop state while `busy`. */
+  stop?: string;
 }
 
 export interface ComposerPillProps {
@@ -311,7 +333,15 @@ export interface ComposerPillProps {
   onValueChange?: (value: string) => void;
   /** Fires on the send button and on Enter. */
   onSubmit?: (value: string) => void;
-  /** Greys out send (40%) while a turn is in flight. */
+  /**
+   * Stop the turn in flight. With `busy`, send becomes a stop control that
+   * ignores `disabled` — cancelling has to stay possible while typing is not.
+   * Without a handler `busy` draws no stop, so the control is never inert.
+   */
+  onStop?: () => void;
+  /** A turn is running: send becomes stop (given `onStop`) and Enter no longer submits. */
+  busy?: boolean;
+  /** Greys out send (40%) while a turn is in flight. Never reaches the stop control. */
   disabled?: boolean;
   /** Default `'Ask me anything'`. */
   placeholder?: string;
@@ -322,19 +352,30 @@ export interface ComposerPillProps {
   addMenu?: ReadonlyArray<ComposerPanelAddMenuGroup>;
   onAddMenuSelect?: (rowId: string) => void;
 
-  /** Model names for the model menu. Omit to hide the model button. */
-  models?: ReadonlyArray<string>;
-  /** Controlled model name. */
+  /**
+   * The model menu's lineup. Omit to hide the model button.
+   *
+   * `{ id, name }` entries are the identity contract `ModelPicker` uses: the
+   * menu keys, matches and reports the **id**, and draws the `name`. A bare
+   * string is shorthand for `{ id: name, name }` — kept so the display-name form
+   * still works, and the only form in which a routing id is a display string.
+   */
+  models?: ReadonlyArray<string | ModelPickerModel>;
+  /** Controlled model **id** (a string entry's id is its name). */
   model?: string;
-  /** Initial model when uncontrolled. Default the first. */
+  /** Initial model id when uncontrolled. Default the first entry's. */
   defaultModel?: string;
-  onModelChange?: (model: string) => void;
-  /** Controlled effort stop, an index into `effortLevels`. */
-  effort?: number;
-  /** Default `1` ("Medium"). */
-  defaultEffort?: number;
+  onModelChange?: (modelId: string) => void;
+  /**
+   * Controlled effort stop, an index into `effortLevels`. `null` is "no stop
+   * chosen" — the value reads `labels.effortAuto` and the thumb is drawn hollow.
+   */
+  effort?: number | null;
+  /** Default `1` ("Medium"); `null` for no choice. */
+  defaultEffort?: number | null;
+  /** A stop the reader chose. The menu has no way back to `null`, so it never reports one. */
   onEffortChange?: (effort: number) => void;
-  /** Default `MODEL_PICKER_EFFORT_LEVELS`. */
+  /** Default `MODEL_PICKER_EFFORT_LEVELS`; `[]` drops the effort half of the menu. */
   effortLevels?: ReadonlyArray<string>;
 
   /** Controlled voice-input state (the mic swaps to equalizer bars). */