@oxy.so/bloom 3.2.1 → 3.3.0

package/src/ai-chat/context.ts

@@ -35,7 +35,11 @@ export function useAiChatPlatform(): AiChatPlatform {
   return platform;
 }
 
-/** What `AiChatShell` hands the chat container's mobile header. */
+/**
+ * What `AiChatShell` publishes: read it with `useAiChatShell()`. The chat
+ * container's mobile header runs on it, and so does anything a host needs to
+ * know about the frame around its own nav.
+ */
 export interface AiChatShellState {
   /** Below `xl`: the panel is a drawer and the mobile header shows. */
   compact: boolean;
@@ -43,7 +47,21 @@ export interface AiChatShellState {
   navCollapsed: boolean;
   hasNav: boolean;
   hasPanel: boolean;
+  /**
+   * Whether the nav is on screen at all: `true` from `lg` up (in flow) and,
+   * below it, only while the drawer is open.
+   *
+   * A closed drawer stays MOUNTED — it is translated offscreen, not removed —
+   * so a nav rendered into `mobileSidebar` is still focusable and still read by
+   * a screen reader unless its own tree says otherwise. This is the signal to
+   * hide it by: skip the tab order and mark the subtree hidden while it is
+   * `false`.
+   */
+  navPresented: boolean;
+  /** The in-flow sidebar is narrowed to its rail width (`sidebarCollapsed`). */
+  sidebarCollapsed: boolean;
   openNav: () => void;
+  closeNav: () => void;
   openPanel: () => void;
   panelLabel: string;
   panelIcon: AiChatShellIcon;

package/src/ai-chat/index.ts

@@ -15,6 +15,8 @@ export {
   AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { useAiChatShell } from './context';
+export type { AiChatShellState } from './context';
 export type {
   AiChatAssistantMessageProps,
   AiChatBulletListProps,
@@ -41,6 +43,7 @@ export type {
   AiChatShellLabels,
   AiChatShellProps,
   AiChatStrongProps,
+  AiChatThreadHandle,
   AiChatThreadProps,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/index.web.ts

@@ -17,6 +17,8 @@ export {
   AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { useAiChatShell } from './context';
+export type { AiChatShellState } from './context';
 export type {
   AiChatAssistantMessageProps,
   AiChatBulletListProps,
@@ -43,6 +45,7 @@ export type {
   AiChatShellLabels,
   AiChatShellProps,
   AiChatStrongProps,
+  AiChatThreadHandle,
   AiChatThreadProps,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/types.ts

@@ -1,5 +1,12 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type {
+  ImageSourcePropType,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import type { CodeLanguage } from '../code';
 import type { BloomIconComponent } from '../icons/icon-component';
@@ -270,8 +277,12 @@ export interface AiChatContainerLabels {
 }
 
 export interface AiChatContainerProps {
-  /** The project crumb, after its folder glyph. */
-  project: string;
+  /**
+   * The project crumb, after its folder glyph. Omit it for a chat that belongs
+   * to no project: the breadcrumb is then the title alone, with no empty crumb
+   * and no folder glyph.
+   */
+  project?: string;
   /** The current chat crumb. */
   title: string;
   /** The project crumb's glyph. Default `RiFolderLine`. */
@@ -289,14 +300,78 @@ export interface AiChatContainerProps {
   working?: boolean;
   /** `AgentThinking`'s label. Default `'Thinking'`. */
   workingLabel?: string;
+  /**
+   * A layer filling the container, drawn ABOVE its own surface and BELOW every
+   * turn, header and composer — a host's wallpaper, gradient or animated field.
+   * It is clipped to the container's radius and never interactive
+   * (`pointerEvents: 'none'`), so an opaque node needs nothing else.
+   *
+   * Set `surface={false}` beside it when the node is translucent and should
+   * show what the container is sitting on rather than background-secondary.
+   */
+  background?: ReactNode;
+  /**
+   * Paint the container's own background-secondary surface. Default `true`;
+   * `false` leaves the root transparent.
+   */
+  surface?: boolean;
   labels?: AiChatContainerLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
+/**
+ * What a `ref` on `AiChatThread` hands back: enough to drive the scroll a host
+ * cannot drive from props — a cursor jump, a restore, a follow of its own.
+ */
+export interface AiChatThreadHandle {
+  /** Jump to the newest turn. `animated` defaults to `true`. */
+  scrollToEnd: (options?: { animated?: boolean }) => void;
+  /** Scroll to an absolute offset, px from the top. `animated` defaults to `false`. */
+  scrollToOffset: (options: { offset: number; animated?: boolean }) => void;
+  /** The `ScrollView` itself, for anything this handle does not cover. */
+  getScrollView: () => ScrollView | null;
+}
+
 export interface AiChatThreadProps {
   /** The turns. The thread follows the newest one with a smooth scroll as it grows. */
   children: ReactNode;
+  /**
+   * Follow the newest turn as the content grows. Default `true` — the thread's
+   * behaviour since it shipped. `false` leaves every scroll to the host (and to
+   * the `ref`).
+   */
+  autoFollow?: boolean;
+  /** Animate the follow. Default `true`; `false` for a restore that must not be seen travelling. */
+  followAnimated?: boolean;
+  /**
+   * Follow only while the reader is within this many px of the bottom, measured
+   * before the growth. Omit to follow every growth (the default), which is what
+   * the thread has always done.
+   */
+  followThreshold?: number;
+  /**
+   * The reader came within `onStartReachedThreshold` of the top — a chat pages
+   * UPWARD, so this is its pagination signal, not `onEndReached`. It fires once
+   * per approach and re-arms when the reader leaves the zone.
+   */
+  onStartReached?: () => void;
+  /** Distance from the top that fires `onStartReached`, px. Default `300`. */
+  onStartReachedThreshold?: number;
+  /**
+   * Keep the reader on the same turn while a page lands ABOVE them: the growth
+   * that follows an `onStartReached` is added to the offset instead of moving
+   * the content under the reader. Default `false`, and inert without
+   * `onStartReached` — the thread only anchors growth it asked for.
+   *
+   * This is the web-safe half of `maintainVisibleContentPosition`, which
+   * react-native-web ignores.
+   */
+  maintainStartPosition?: boolean;
+  /** The raw scroll event, for a host tracking its own position. */
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /** Default `16`. Only applied when something is listening to the scroll. */
+  scrollEventThrottle?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -317,6 +392,15 @@ export interface AiChatShellLabels {
 export interface AiChatShellProps {
   /** The floating sidebar shown from `lg` (1024). */
   sidebar: ReactNode;
+  /**
+   * The in-flow sidebar's column width from `lg` up. Omit and the sidebar sizes
+   * itself, as it always has.
+   */
+  sidebarWidth?: number;
+  /** Narrow the in-flow sidebar to `collapsedSidebarWidth` — a host's icon rail. Default `false`. */
+  sidebarCollapsed?: boolean;
+  /** The collapsed column's width. Default `56`. */
+  collapsedSidebarWidth?: number;
   /** The flat sidebar revealed under the workspace below `lg`. Default: none (no nav drawer). */
   mobileSidebar?: ReactNode;
   /** The chat container. */
@@ -337,6 +421,23 @@ export interface AiChatShellProps {
   /** Controlled panel drawer (below `xl`). */
   panelOpen?: boolean;
   onPanelOpenChange?: (open: boolean) => void;
+  /**
+   * A layer filling the shell, drawn ABOVE its own background-full and BELOW
+   * the sidebar, workspace and drawers. Not interactive
+   * (`pointerEvents: 'none'`).
+   *
+   * The workspace paints background-full of its own, so a shell background is
+   * covered wherever the chat sits: pass `surface={false}` with it, which drops
+   * the paint on both, and let the chat's own `AiChatContainer` decide what it
+   * paints. A `background` on the container is the closer slot when the layer
+   * belongs to the chat rather than to the page.
+   */
+  background?: ReactNode;
+  /**
+   * Paint the shell's own background-full, on its root and on the workspace.
+   * Default `true`; `false` leaves both transparent.
+   */
+  surface?: boolean;
   labels?: AiChatShellLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/composer-panel/ComposerControls.tsx

@@ -16,6 +16,7 @@ import { paintToCssImage, type ButtonStatePaint } from '../button/shared';
 import { DISABLED_OPACITY } from '../styles/tokens';
 import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
 import { RiMic2Line } from '../icons/remix/RiMic2Line';
+import { RiStopFill } from '../icons/remix/RiStopFill';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { CONTROL_SIZE, TRANSITION_MS, type ComposerPalette } from './shared';
 import { dataHook, IS_WEB } from './web-hooks';
@@ -239,3 +240,56 @@ export function SendButton({
     </Pressable>
   );
 }
+
+/**
+ * Stop — send's other state, drawn on the same disc so the action sits where the
+ * reader last pressed: the accent gradient (hover and active crossfading like
+ * send's) with a white 20px stop mark.
+ *
+ * It takes no `disabled`. The composer's `disabled` locks the draft for the
+ * whole turn, and the one thing that must stay possible for that whole turn is
+ * cancelling it.
+ */
+export function StopButton({
+  onPress,
+  label,
+  palette,
+}: {
+  onPress?: () => void;
+  label: string;
+  palette: ComposerPalette;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const paint = palette.send;
+  const base = pressed ? paint.active : paint.rest;
+  const style: WebCssStyle = {
+    position: 'relative',
+    width: CONTROL_SIZE,
+    height: CONTROL_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+    cursor: 'pointer',
+    '--bloom-composer-ring': palette.focusRing,
+  };
+  return (
+    <Pressable
+      {...dataHook('bloomComposerControl', 'stop')}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={style}>
+      <GradientFill paint={base} />
+      <GradientFill paint={paint.hover} opacity={hovered && !pressed ? 1 : 0} />
+      {/* Its own positioned box, so it paints above the absolutely placed fills. */}
+      <View pointerEvents="none" style={{ position: 'relative', width: 20, height: 20 }}>
+        <RiStopFill width={20} height={20} fill="#ffffff" />
+      </View>
+    </Pressable>
+  );
+}

package/src/composer-panel/ComposerPanelBase.tsx

@@ -22,7 +22,7 @@ import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography';
 import { AddMenu } from './AddMenu';
 import { AttachmentStrip } from './AttachmentStrip';
-import { MicButton, SendButton } from './ComposerControls';
+import { MicButton, SendButton, StopButton } from './ComposerControls';
 import { ModelPickerBase } from './ModelPickerBase';
 import { PermissionMenu } from './PermissionMenu';
 import {
@@ -48,6 +48,7 @@ const DEFAULT_LABELS: Required<ComposerPanelLabels> = {
   learnMore: 'Learn more',
   voice: 'Voice input',
   send: 'Send message',
+  stop: 'Stop generating',
   remove: 'Remove',
 };
 
@@ -107,7 +108,8 @@ function Collapse({ open, children }: { open: boolean; children: React.ReactNode
  *   body          pt 6, prompt → controls 20
  *   prompt        px 6, body-regular, grows 20px a line up to 200 then scrolls
  *   controls      left: add + permission (8 apart); right: model picker, 16,
- *                 then mic + send (8 apart)
+ *                 then mic + send (8 apart); `busy` + `onStop` puts the stop
+ *                 control where send was, outside `disabled`'s reach
  *
  * Takes its panel implementation from the family's platform binding.
  */
@@ -116,6 +118,8 @@ export function ComposerPanelBase({
   defaultValue = '',
   onValueChange,
   onSubmit,
+  onStop,
+  busy = false,
   disabled = false,
   placeholder = 'Hi, what do you need today?',
   permissions = COMPOSER_PANEL_PERMISSIONS,
@@ -188,10 +192,10 @@ export function ComposerPanelBase({
   );
 
   const submit = useCallback(() => {
-    if (disabled) return;
+    if (disabled || busy) return;
     onSubmit?.(text);
     if (value === undefined) setText('');
-  }, [disabled, onSubmit, text, value, setText]);
+  }, [disabled, busy, onSubmit, text, value, setText]);
 
   const onKeyPress = useCallback(
     (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
@@ -310,7 +314,11 @@ export function ComposerPanelBase({
                   label={labels.voice}
                   palette={palette}
                 />
-                <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>
           </View>

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));
+}