diff --git a/.gitignore b/.gitignore
index 178fe850797..ac8c322e491 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ starters/docs/registry
 starters/tailwind/registry
 starters/docs/yarn.lock
 starters/tailwind/yarn.lock
+.scout/
diff --git a/packages/@react-spectrum/ai/src/AttachmentList.tsx b/packages/@react-spectrum/ai/src/AttachmentList.tsx
index c67d6c9945e..da3e9cb4f49 100644
--- a/packages/@react-spectrum/ai/src/AttachmentList.tsx
+++ b/packages/@react-spectrum/ai/src/AttachmentList.tsx
@@ -28,13 +28,15 @@ import {BasicHorizontalCard} from './HorizontalCard';
 import {Button} from 'react-aria-components/Button';
 import {CardProps} from '@react-spectrum/s2/Card';
 import Cross from '../ui-icons/Cross';
-import {forwardRef, ReactNode, useRef} from 'react';
+import {forwardRef, ReactNode, useContext, useRef} from 'react';
+import {IconContext} from '@react-spectrum/s2/Icon';
 import {ImageContext} from '@react-spectrum/s2/Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2/pressScale';
 import {ProgressCircle} from '@react-spectrum/s2/ProgressCircle';
+import {Provider} from 'react-aria-components/slots';
 import {StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {
   Tag,
@@ -217,6 +219,56 @@ const attachmentErrorStyles = style({
   }
 });
 
+function AttachmentContextProvider({
+  children,
+  isUploading
+}: {
+  children: ReactNode;
+  isUploading: boolean;
+}) {
+  let imageCtx = useContext(ImageContext);
+  let iconCtx = useContext(IconContext);
+  const opacityStyles = style({
+    opacity: {default: 1, isUploading: 0.15},
+    transition: 'default'
+  })({isUploading});
+  const imageSlots = imageCtx && 'slots' in imageCtx ? imageCtx.slots : undefined;
+  const iconSlots = iconCtx && 'slots' in iconCtx ? iconCtx.slots : undefined;
+
+  return (
+    <Provider
+      values={[
+        [
+          ImageContext,
+          {
+            ...imageCtx,
+            slots: {
+              ...imageSlots,
+              thumbnail: {
+                ...imageSlots?.thumbnail,
+                styles: mergeStyles(imageSlots?.thumbnail?.styles, opacityStyles)
+              }
+            }
+          }
+        ],
+        [
+          IconContext,
+          {
+            slots: {
+              ...iconSlots,
+              thumbnail: {
+                ...iconSlots?.thumbnail,
+                styles: mergeStyles(iconSlots?.thumbnail?.styles, opacityStyles)
+              }
+            }
+          }
+        ]
+      ]}>
+      {children}
+    </Provider>
+  );
+}
+
 export const Attachment = forwardRef(function Attachment(
   props: AttachmentProps,
   ref: DOMRef<HTMLDivElement>
@@ -266,29 +318,10 @@ export const Attachment = forwardRef(function Attachment(
             />
           </div>
         )}
-        {/* Reduce opacity of the thumbnail if upload is in progress */}
-        <ImageContext.Consumer>
-          {ctx => (
-            <ImageContext.Provider
-              value={{
-                ...ctx,
-                slots: {
-                  thumbnail: {
-                    ...(ctx && 'slots' in ctx ? ctx.slots?.thumbnail : {}),
-                    styles: mergeStyles(
-                      ctx && 'slots' in ctx ? ctx.slots?.thumbnail?.styles : undefined,
-                      style({
-                        opacity: {default: 1, isUploading: 0.15},
-                        transition: 'default'
-                      })({isUploading: props.uploadProgress != null && props.uploadProgress < 100})
-                    )
-                  }
-                }
-              }}>
-              {typeof children === 'function' ? children({size}) : children}
-            </ImageContext.Provider>
-          )}
-        </ImageContext.Consumer>
+        <AttachmentContextProvider
+          isUploading={props.uploadProgress != null && props.uploadProgress < 100}>
+          {typeof children === 'function' ? children({size}) : children}
+        </AttachmentContextProvider>
         {isInvalid && (
           <div aria-hidden="true" className={attachmentErrorStyles}>
             <AlertTriangleIcon size={size} />
diff --git a/packages/@react-spectrum/ai/src/HorizontalCard.tsx b/packages/@react-spectrum/ai/src/HorizontalCard.tsx
index bdbd2e80f9e..11b5828bbd6 100644
--- a/packages/@react-spectrum/ai/src/HorizontalCard.tsx
+++ b/packages/@react-spectrum/ai/src/HorizontalCard.tsx
@@ -28,6 +28,7 @@ import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {FooterContext} from '@react-spectrum/s2/Footer';
 import {GridListItem, GridListItemProps} from 'react-aria-components/GridList';
+import {IconContext} from '@react-spectrum/s2/Icon';
 import {ImageContext} from '@react-spectrum/s2/Image';
 import {ImageCoordinator} from '@react-spectrum/s2/ImageCoordinator';
 import {inertValue} from 'react-aria/private/utils/inertValue';
@@ -312,7 +313,7 @@ const image = style({
   pointerEvents: 'none'
 });
 
-let title = style({
+let title = style<{size: 'XS' | 'S' | 'M' | 'L' | 'XL'; isBasic?: boolean}>({
   font: 'title',
   fontSize: {
     size: {
@@ -323,11 +324,14 @@ let title = style({
       XL: 'title-lg'
     }
   },
-  lineClamp: 3,
+  lineClamp: {
+    default: 3,
+    isBasic: 1
+  },
   gridArea: 'title'
 });
 
-let description = style({
+let description = style<{size: 'XS' | 'S' | 'M' | 'L' | 'XL'; isBasic?: boolean}>({
   font: 'body',
   fontSize: {
     size: {
@@ -338,7 +342,10 @@ let description = style({
       XL: 'body'
     }
   },
-  lineClamp: 3,
+  lineClamp: {
+    default: 3,
+    isBasic: 1
+  },
   gridArea: 'description'
 });
 
@@ -347,7 +354,7 @@ let content = style({
   // By default, all elements are displayed in a stack.
   // If an action menu is present, place it next to the title.
   gridTemplateColumns: {
-    default: ['1fr'],
+    default: ['minmax(0, 1fr)'],
     ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']
   },
   gridTemplateAreas: {
@@ -356,6 +363,7 @@ let content = style({
   },
   columnGap: 4,
   flexGrow: 1,
+  minWidth: 0,
   alignItems: 'baseline',
   alignContent: 'start',
   rowGap: {
@@ -456,8 +464,8 @@ const Card = forwardRef(function Card(
           {
             slots: {
               [DEFAULT_SLOT]: {},
-              title: {styles: title({size})},
-              description: {styles: description({size})}
+              title: {styles: title({size, isBasic})},
+              description: {styles: description({size, isBasic})}
             }
           }
         ],
@@ -802,6 +810,15 @@ export const HorizontalCard = forwardRef(function HorizontalCard(
   );
 });
 
+const iconThumbnailStyles = style({
+  position: 'relative',
+  alignSelf: 'center',
+  flexShrink: 0,
+  pointerEvents: 'none',
+  userSelect: 'none',
+  size: '--basic-thumb-size'
+});
+
 export const BasicHorizontalCard = forwardRef(function BasicHorizontalCard(
   props: BasicCardProps,
   ref: DOMRef<HTMLDivElement>
@@ -840,6 +857,17 @@ export const BasicHorizontalCard = forwardRef(function BasicHorizontalCard(
                 }
               }
             ],
+            [
+              IconContext,
+              {
+                slots: {
+                  icon: {},
+                  thumbnail: {
+                    styles: iconThumbnailStyles
+                  }
+                }
+              }
+            ],
             [
               FooterContext,
               {
diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx
index d48a7f04857..9356f696e64 100644
--- a/packages/@react-spectrum/ai/src/PromptField.tsx
+++ b/packages/@react-spectrum/ai/src/PromptField.tsx
@@ -37,11 +37,11 @@ import {
   useRef,
   useState
 } from 'react';
-import {DOMRef} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {IconContext} from '@react-spectrum/s2';
 import {Image, Text} from '@react-spectrum/s2/Card';
-import intlMessages from '../intl/*.json';
 // @ts-ignore
+import intlMessages from '../intl/*.json';
 import {isFileDropItem, useDrop} from 'react-aria-components/useDrop';
 import {Link} from '@react-spectrum/s2/Link';
 import {Menu, MenuItem, MenuItemProps, MenuTrigger} from '@react-spectrum/s2/Menu';
@@ -70,8 +70,8 @@ import {
 } from 'react-aria-components/TokenField';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/s2/Tooltip';
 import {useControlledState} from 'react-stately/useControlledState';
-import {useDOMRef} from './useDOMRef';
 import {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';
+import {useFocusableRef} from './useDOMRef';
 import {useFocusWithin} from 'react-aria/useFocusWithin';
 import {useKeyboard} from 'react-aria/useKeyboard';
 import {useLocale} from 'react-aria/I18nProvider';
@@ -182,7 +182,7 @@ function matchMimeType(mimeType: string, acceptedMimeTypes: string[]): boolean {
 
 export const PromptField = forwardRef(function PromptField(
   props: PromptFieldProps,
-  ref: DOMRef<HTMLDivElement>
+  ref: FocusableRef<HTMLDivElement>
 ) {
   let {
     children,
@@ -195,7 +195,10 @@ export const PromptField = forwardRef(function PromptField(
     variant = 'balanced',
     brandColor
   } = props;
-  let domRef = useDOMRef(ref);
+  // Not using RAC DropZone because it adds its own focusable button,
+  // and we want to avoid an extra tab. We support pasting files directly into the input.
+  let inputRef = useRef<HTMLDivElement>(null);
+  let domRef = useFocusableRef(ref, inputRef);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
   let [prompt, setPrompt] = useControlledState(
     props.value,
@@ -207,10 +210,6 @@ export const PromptField = forwardRef(function PromptField(
     props.defaultAttachments ?? [],
     props.onAttachmentsChange
   );
-
-  // Not using RAC DropZone because it adds its own focusable button,
-  // and we want to avoid an extra tab. We support pasting files directly into the input.
-  let inputRef = useRef<HTMLDivElement>(null);
   let {dropProps, isDropTarget} = useDrop({
     ref: inputRef,
     hasDropButton: true,
@@ -342,6 +341,9 @@ export interface PromptTokenFieldProps {
   pixelLoader?: Cell[] | Cell[][];
   placeholder?: string;
   onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  // TODO: temp api for coworker so that the weird popover shrinking behavior
+  // doesn't appear when rendering near edge of page
+  menuWidth?: number;
 }
 
 export function PromptTokenField(props: PromptTokenFieldProps) {
@@ -351,6 +353,7 @@ export function PromptTokenField(props: PromptTokenFieldProps) {
     children,
     pixelLoader,
     placeholder,
+    menuWidth,
     onKeyDown: onKeyDownProp
   } = props;
   let {keyboardProps} = useKeyboard({onKeyDown: onKeyDownProp});
@@ -473,6 +476,7 @@ export function PromptTokenField(props: PromptTokenFieldProps) {
           filterAnchor={filterAnchor}
           items={useDeferredValue(items)}
           isFocused={isFocused}
+          menuWidth={menuWidth}
         />
       </Autocomplete>
     </div>
@@ -483,10 +487,12 @@ export interface PromptTokenFieldPopoverProps extends Omit<PopoverProps, 'should
   filterAnchor?: Position | null;
   items?: React.ReactNode[] | null | Promise<React.ReactNode[] | null>;
   isFocused?: boolean;
+  // TODO: temp for coworker see above comment
+  menuWidth?: number;
 }
 
 function PromptTokenFieldPopover(props: PromptTokenFieldPopoverProps) {
-  let {filterAnchor, items, isFocused} = props;
+  let {filterAnchor, items, isFocused, menuWidth} = props;
   let {inputRef} = useContext(PromptFieldContext);
 
   let resolvedItems = items instanceof Promise ? use(items) : items;
@@ -506,6 +512,7 @@ function PromptTokenFieldPopover(props: PromptTokenFieldPopoverProps) {
       isNonModal
       hideArrow
       placement="bottom start"
+      UNSAFE_style={menuWidth != null ? {width: menuWidth} : undefined}
       getTargetRect={target => {
         return tokenFieldPositionToDOMRange(target, filterAnchor!).getBoundingClientRect();
       }}>
@@ -611,10 +618,11 @@ export interface PromptFieldVoiceButtonProps {
   lang?: string;
   isDisabled?: boolean;
   onError?: (code: VoiceInputErrorCode) => void;
+  onToggle?: (isListening: boolean) => void;
 }
 
 export function PromptFieldVoiceButton(props: PromptFieldVoiceButtonProps) {
-  let {lang: langProp, isDisabled: isDisabledProp, onError} = props;
+  let {lang: langProp, isDisabled: isDisabledProp, onError, onToggle} = props;
   let {locale} = useLocale();
   let lang = langProp ?? locale;
   let {prompt, setPrompt, inputRef, setListening} = useContext(PromptFieldContext);
@@ -646,14 +654,20 @@ export function PromptFieldVoiceButton(props: PromptFieldVoiceButtonProps) {
     setPrompt(finalPrompt);
   });
 
+  let onToggleEvent = useEffectEvent((isListening: boolean) => {
+    onToggle?.(isListening);
+  });
+
   let wasListeningRef = useRef(false);
   useEffect(() => {
     if (isVoiceListening) {
       updateBasePrompt();
       wasListeningRef.current = true;
+      onToggleEvent(true);
     } else if (wasListeningRef.current) {
       wasListeningRef.current = false;
       restoreFocus();
+      onToggleEvent(false);
     }
   }, [isVoiceListening]);
 
diff --git a/packages/@react-spectrum/ai/src/useDOMRef.ts b/packages/@react-spectrum/ai/src/useDOMRef.ts
index 8b3afaf7881..7cc24518b7c 100644
--- a/packages/@react-spectrum/ai/src/useDOMRef.ts
+++ b/packages/@react-spectrum/ai/src/useDOMRef.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue, RefObject} from '@react-types/shared';
+import {DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
 import {useImperativeHandle, useRef} from 'react';
 
 export function createDOMRef<T extends HTMLElement = HTMLElement>(
@@ -23,6 +23,21 @@ export function createDOMRef<T extends HTMLElement = HTMLElement>(
   };
 }
 
+export function createFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(
+  domRef: RefObject<D | null>,
+  focusableRef?: RefObject<T | null>
+): FocusableRefValue<T, D> {
+  let resolvedFocusableRef = focusableRef || domRef;
+  return {
+    ...createDOMRef(domRef),
+    focus() {
+      if (resolvedFocusableRef.current) {
+        resolvedFocusableRef.current.focus();
+      }
+    }
+  };
+}
+
 export function useDOMRef<T extends HTMLElement = HTMLElement>(
   ref: DOMRef<T>
 ): RefObject<T | null> {
@@ -30,3 +45,12 @@ export function useDOMRef<T extends HTMLElement = HTMLElement>(
   useImperativeHandle(ref, () => createDOMRef(domRef));
   return domRef;
 }
+
+export function useFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(
+  ref: FocusableRef<T, D>,
+  focusableRef?: RefObject<T | null>
+): RefObject<D | null> {
+  let domRef = useRef<D>(null);
+  useImperativeHandle(ref, () => createFocusableRef<T, D>(domRef, focusableRef));
+  return domRef;
+}
diff --git a/packages/@react-spectrum/ai/stories/AttachmentList.stories.tsx b/packages/@react-spectrum/ai/stories/AttachmentList.stories.tsx
index cae286fa369..57dc6287524 100644
--- a/packages/@react-spectrum/ai/stories/AttachmentList.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/AttachmentList.stories.tsx
@@ -13,6 +13,8 @@
 import {Attachment as AttachmentComponent, AttachmentList} from '../src/AttachmentList';
 import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils';
 import {Content} from '@react-spectrum/s2/Content';
+import File from '@react-spectrum/s2/icons/File';
+import FileText from '@react-spectrum/s2/icons/FileText';
 import {Image} from '@react-spectrum/s2/Image';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
@@ -99,3 +101,67 @@ function AttachmentListRender(args) {
 export const AIAttachmentList: Story = {
   render: args => <AttachmentListRender {...args} />
 };
+
+function NonImageAttachmentListRender(args) {
+  let {isInvalid, size, uploadProgress, ...listArgs} = args;
+  return (
+    <AttachmentList {...listArgs} styles={style({width: 500})}>
+      {/* TODO: what should the thumbnail only look like with icons */}
+      <AttachmentComponent
+        uploadProgress={uploadProgress}
+        isInvalid={isInvalid}
+        size={size}
+        aria-label="report.pdf">
+        <File slot="thumbnail" />
+      </AttachmentComponent>
+      <AttachmentComponent
+        uploadProgress={uploadProgress}
+        isInvalid={isInvalid}
+        size={size}
+        aria-label="notes.txt">
+        <FileText slot="thumbnail" />
+        <Content>
+          <Text slot="title">notes.txt</Text>
+          <Text slot="description">Plain text document</Text>
+        </Content>
+      </AttachmentComponent>
+      <AttachmentComponent
+        uploadProgress={uploadProgress}
+        isInvalid={isInvalid}
+        size={size}
+        aria-label="data.csv">
+        <File slot="thumbnail" />
+        <Content>
+          <Text slot="title">data.csv</Text>
+        </Content>
+      </AttachmentComponent>
+    </AttachmentList>
+  );
+}
+
+export const NonImageAttachments: Story = {
+  render: args => <NonImageAttachmentListRender {...args} />
+};
+
+export const LongContents: Story = {
+  name: 'Long contents',
+  render: (args: any) => (
+    <AttachmentList>
+      <AttachmentComponent
+        size={args.size}
+        styles={style({maxWidth: 300})}
+        aria-label="Very long file name that exceeds the container width.pdf">
+        <Image
+          slot="thumbnail"
+          src={new URL('../../s2/stories/assets/placeholder.png', import.meta.url).toString()}
+        />
+        <Content>
+          <Text slot="title">Very long file name that exceeds the container width.pdf</Text>
+          <Text slot="description">
+            Long long long long long long long long long long description.
+          </Text>
+        </Content>
+      </AttachmentComponent>
+    </AttachmentList>
+  )
+};
diff --git a/packages/@react-spectrum/ai/stories/PromptField.stories.tsx b/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
index 132b78c9d59..e8c004ba22d 100644
--- a/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
@@ -43,6 +43,7 @@ import {
 import {Content} from '@react-spectrum/s2/Content';
 import Data from '@react-spectrum/s2/icons/Data';
 import * as data from '../src/loader/data';
+import type {FocusableRefValue} from '@react-types/shared';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Image} from '@react-spectrum/s2/Image';
 import LinkIcon from '@react-spectrum/s2/icons/Link';
@@ -89,6 +90,10 @@ const meta: Meta<typeof PromptField> = {
     placeholder: {
       control: 'text',
       table: {category: 'PromptTokenField'}
+    },
+    menuWidth: {
+      control: 'number',
+      table: {category: 'PromptTokenField'}
     }
   },
   args: {
@@ -97,6 +102,7 @@ const meta: Meta<typeof PromptField> = {
     attachmentVariant: 'thumbnail',
     attachmentInvalid: false,
     placeholder: undefined,
+    menuWidth: undefined,
     ...getActionArgs(events)
   },
   title: 'AI/PromptField',
@@ -245,35 +251,45 @@ interface UploadState {
   progress?: number;
 }
 
+function atEnd(v: PromptFieldValue) {
+  let segs = v.segments;
+  return {index: segs.length - 1, offset: segs[segs.length - 1].text.length};
+}
+
+let prompt1 = new PromptFieldValue([
+  {type: 'text', text: 'Analyze '},
+  {type: 'token', text: 'New Customers', value: {type: 'audience', title: 'New Customers'}},
+  {type: 'text', text: ' and suggest targeting strategies'}
+]);
+
+let prompt2 = new PromptFieldValue([
+  {type: 'text', text: 'Write a brief for '},
+  {
+    type: 'token',
+    text: 'Spring Launch 2026',
+    value: {type: 'campaign', title: 'Spring Launch 2026'}
+  }
+]);
+
 let prompt3Base = new PromptFieldValue([
   {type: 'text', text: 'Summarize the '},
   {type: 'token', text: 'Welcome Flow', value: {type: 'journey', title: 'Welcome Flow'}}
 ]);
-let prompt3End = {
-  index: 1,
-  offset: prompt3Base.segments[1].text.length
-};
 
 let prompts = [
-  new PromptFieldValue([
-    {type: 'text', text: 'Analyze '},
-    {type: 'token', text: 'New Customers', value: {type: 'audience', title: 'New Customers'}},
-    {type: 'text', text: ' and suggest targeting strategies'}
-  ]),
-  new PromptFieldValue([
-    {type: 'text', text: 'Write a brief for '},
-    {
-      type: 'token',
-      text: 'Spring Launch 2026',
-      value: {type: 'campaign', title: 'Spring Launch 2026'}
-    }
-  ]),
-  prompt3Base.replaceRange(prompt3End, prompt3End, ' journey performance from test.com ')
+  prompt1.withCaretPosition(atEnd(prompt1)),
+  prompt2.withCaretPosition(atEnd(prompt2)),
+  prompt3Base.replaceRange(
+    atEnd(prompt3Base),
+    atEnd(prompt3Base),
+    ' journey performance from test.com /'
+  )
 ];
 
 function EverythingRender(args) {
-  let {placeholder, ...otherArgs} = args;
+  let {placeholder, menuWidth, ...otherArgs} = args;
   let [value, setValue] = useState<TokenFieldValue>(() => new PromptFieldValue([]));
+  let promptFieldRef = useRef<FocusableRefValue<HTMLDivElement>>(null);
   let [attachments, setAttachments] = useState<PromptFieldAttachment[]>([]);
   let [attachmentState, setAttachmentState] = useState<Map<string, UploadState>>(new Map());
   let historyRef = useRef<TokenFieldValue[]>([]);
@@ -352,13 +368,19 @@ function EverythingRender(args) {
     <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>
       <MessageSuggestionList title="Suggestions">
         {prompts.map((prompt, i) => (
-          <MessageSuggestion key={i} onPress={() => setValue(prompt)}>
+          <MessageSuggestion
+            key={i}
+            onPress={() => {
+              setValue(prompt);
+              promptFieldRef.current?.focus();
+            }}>
             {prompt.toString()}
           </MessageSuggestion>
         ))}
       </MessageSuggestionList>
       <PromptField
         {...otherArgs}
+        ref={promptFieldRef}
         value={value}
         onChange={handleChange}
         attachments={attachments}
@@ -424,6 +446,7 @@ function EverythingRender(args) {
           }
           pixelLoader={data[args.pixelLoader]}
           placeholder={placeholder}
+          menuWidth={menuWidth}
           onKeyDown={onKeyDown}>
           {segment => (
             <PromptToken>
@@ -508,7 +531,7 @@ function EverythingRender(args) {
           </InsertMenuButton>
           {/* TODO is this kind of styling expected from the user? Or should we have a slot that places the mic button next to the submit button? */}
           <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
-            <PromptFieldVoiceButton />
+            <PromptFieldVoiceButton onToggle={action('onToggle')} />
             <PromptFieldSubmitButton />
           </div>
         </PromptFieldToolbar>