@lynn123411/dsh-model-submenu 0.2.5 → 0.3.0

package/src/client/ModelSubmenu.tsx

@@ -1,28 +1,39 @@
-import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
 import { createPortal } from 'react-dom'
 import {
-  IconCheckOutlineRegular,
   IconChevronDownOutlineRegular,
-  IconChevronLeftOutlineRegular,
-  IconChevronRightOutlineRegular,
-  IconDataOutlineRegular,
+  IconFlatListOutlineRegular,
   IconWarningOutlineRegular,
   MenuSurface,
   Toast,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ModelDirectoryState, ModelSelectInjected } from '@deepseek-ai/dsh-client-ui-model-selection/client'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import { ModelPicker } from './ModelPicker.tsx'
+import { ModelRow } from './ModelRow.tsx'
+import type { FactsSource } from './facts-source.ts'
+import {
+  isFavorite,
+  orderWithFavorites,
+  readFavorites,
+  toggleFavorite,
+  type FavoriteModel,
+  type FavoritesStorage,
+} from './favorites.ts'
+import { effortFor, readEfforts, rememberEffort, type RememberedEffort } from './effort-memory.ts'
+import type { EffortChoice, Selection } from './selection.ts'
+import { reasoningOf } from './rows.ts'
+import { effortChoices, planEffortCommit, planModelCommit } from './selection.ts'
 import css from './ModelSubmenu.module.css'
 
-type ModelSubmenuProps = ModelSelectInjected & { locked: boolean } & PropsLocale<'modelSubmenu'>
+type ModelSubmenuProps = ModelSelectInjected & { locked: boolean } & PropsLocale<'modelSubmenu'> & {
+  /** The live settings-derived metadata the picker's line reads. */
+  readonly factsSource: FactsSource
+}
 
-type Selection = Parameters<ModelSelectInjected['select']>[0]
 type ProviderGroup = ModelDirectoryState['groups'][number]
 type CatalogModel = ProviderGroup['models'][number]
 
-/** Which list the open menu is showing. */
-type Pane = 'root' | 'providers' | 'models' | 'effort'
-
 /** Unplaced portal card: hidden but laid out at a fixed origin so offsetWidth/offsetHeight are real. */
 const MEASURE_STYLE = {
   visibility: 'hidden',
@@ -34,27 +45,26 @@ const cls = (...parts: readonly (string | false | undefined)[]): string => parts
 
 /**
  * The composer's model seat (`conversation.input.model`), taken over from the
- * built-in occupant with a provider level: the root pane keeps the built-in's
- * two cells — 供应商 in place of 模型, plus the native 推理等级 — the provider
- * cell drills into the catalog's providers, and a provider drills into its
- * models before submitting. The trigger, the menu surface, the keyboard
- * contract (arrows move, Tab settles, Escape and Shift+Tab leave a drilled pane
- * first), the effort list and the failure surfaces are the built-in ones.
+ * built-in occupant with a provider-scoped menu: one provider's models above,
+ * the reasoning row as segments, the cache warning, and the door to the picker
+ * that lists every provider.
+ *
+ * Every click commits at once: a model, a reasoning level, or the picker door.
+ * Closing the menu never writes anything, and the picker reads the level the
+ * Host already accepted, so its "current" reading is never stale.
  */
-export function ModelSubmenu({ locked, available, directory, load, select, t }: ModelSubmenuProps) {
+export function ModelSubmenu({ locked, available, directory, load, select, t, factsSource }: ModelSubmenuProps) {
   const state = useSyncExternalStore((fn) => directory.subscribe(fn), () => directory.getSnapshot())
   const [open, setOpen] = useState(false)
-  const [pane, setPane] = useState<Pane>('root')
-  const [providerId, setProviderId] = useState<string | null>(null)
-  const lastActionRef = useRef<'load' | 'select'>('load')
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [favorites, setFavorites] = useState<readonly FavoriteModel[]>(() => readFavorites(storageOf()))
+  const [memory, setMemory] = useState<readonly RememberedEffort[]>(() => readEfforts(storageOf()))
   const [toast, setToast] = useState<{ seq: number; text: string } | null>(null)
   const toastSeq = useRef(0)
   const rootRef = useRef<HTMLDivElement | null>(null)
   const triggerRef = useRef<HTMLButtonElement | null>(null)
   const menuRef = useRef<HTMLDivElement | null>(null)
   const [menuPos, setMenuPos] = useState<{ left: number; top: number } | null>(null)
-  const itemRefs = useRef(new Map<string, HTMLButtonElement>())
-  const focusIntent = useRef<string | null>(null)
   const id = useId()
 
   const groups = state.groups
@@ -63,52 +73,76 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
   const currentModel = currentGroup?.models.find((model) => model.id === current?.model)
   const reasoning = currentModel?.reasoning
   const effectiveEffort = current?.reasoningEffort ?? reasoning?.defaultEffort
-  const effortLabel = reasoning === undefined
-    ? undefined
-    : effectiveEffort === undefined
-      ? t('effort.providerDefault')
-      : reasoning.efforts.find((level) => level.id === effectiveEffort)?.name ?? effectiveEffort
-  const effortChoices = useMemo(() => reasoning === undefined ? [] : [
-    ...reasoning.defaultEffort === undefined
-      ? [{ key: 'provider-default', effort: undefined as string | undefined, label: t('effort.providerDefault') }]
-      : [],
-    ...reasoning.efforts.map((level) => ({ key: `effort:${level.id}`, effort: level.id as string | undefined, label: level.name })),
-  ], [reasoning, t])
-
-  const shownGroup = pane === 'models' && providerId !== null ? groups.find((group) => group.id === providerId) : undefined
+  /**
+   * The trigger's caption. A model that advertises no levels still says so in
+   * the same place: the blue caption beside the name reads 默认 rather than
+   * disappearing, so the shape of the control never changes with the model.
+   */
+  const effortLabel = reasoning === undefined || effectiveEffort === undefined
+    ? t('effort.providerDefault')
+    : reasoning.efforts.find((level) => level.id === effectiveEffort)?.name ?? effectiveEffort
+  const choices = useMemo(() => effortChoices(reasoning, t('effort.providerDefault')), [reasoning, t])
   const busy = state.status === 'selecting'
+  const live = useMemo(() => selectionOf(state), [state])
+  const reason = useMemo(() => reasoningOf(groups), [groups])
+  const facts = useSyncExternalStore((fn) => factsSource.subscribe(fn), () => factsSource.getSnapshot())
+
+  const menuRows = useMemo(() => currentGroup === undefined ? [] : orderWithFavorites(
+    currentGroup.models,
+    (model) => isFavorite(favorites, currentGroup.id, model.id),
+  ), [currentGroup, favorites])
 
+  const raiseToast = (text: string) => {
+    toastSeq.current += 1
+    setToast({ seq: toastSeq.current, text })
+  }
   const reload = () => {
-    lastActionRef.current = 'load'
     load()
   }
+  const submit = (selection: Selection, onDone: (() => void) | null, onRejected?: () => void) => {
+    select(selection).then((result) => {
+      if (result === undefined || result.ok) {
+        // The Host accepted it, so this is now the level this model uses.
+        remember(selection.provider, selection.model, selection.reasoningEffort)
+        onDone?.()
+        return
+      }
+      onRejected?.()
+      raiseToast(result.error.code === 'session/writer-held'
+        ? t('error.sessionInUse')
+        : t('error.action', { message: `${result.error.code}: ${result.error.message}` }))
+    })
+  }
+  /** Close the menu. Closing writes nothing: every choice already committed on click. */
+  const closeMenu = useCallback((restoreFocus: boolean) => {
+    setOpen(false)
+    if (restoreFocus) queueMicrotask(() => { triggerRef.current?.focus() })
+  }, [])
 
   useEffect(() => {
     if (!open) return
     const closeOutside = (event: MouseEvent) => {
       if (rootRef.current?.contains(event.target as Node) === true) return
       if (menuRef.current?.contains(event.target as Node) === true) return
-      setOpen(false)
-      setPane('root')
+      closeMenu(false)
     }
     document.addEventListener('mousedown', closeOutside)
     return () => {
       document.removeEventListener('mousedown', closeOutside)
     }
-  }, [open])
+  }, [open, closeMenu])
 
   useEffect(() => {
-    const intent = focusIntent.current
-    focusIntent.current = null
-    if (!open || intent === null) return
-    if (intent === 'initial') {
-      const checked = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"][aria-checked="true"]:not([disabled]), [role="menuitem"][aria-current="true"]:not([disabled])')
-      const first = [...itemRefs.current].find(([key]) => !key.startsWith('back:'))?.[1]
-      ;(checked ?? first ?? triggerRef.current)?.focus()
-      return
-    }
-    ;(itemRefs.current.get(intent) ?? triggerRef.current)?.focus()
-  }, [open, pane])
+    if (!open) return
+    const frame = requestAnimationFrame(() => {
+      const checked = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"][aria-checked="true"]:not([disabled])')
+      const first = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"]:not([disabled])')
+      const target = checked ?? first ?? triggerRef.current
+      target?.scrollIntoView({ block: 'nearest' })
+      target?.focus()
+    })
+    return () => { cancelAnimationFrame(frame) }
+  }, [open])
 
   useLayoutEffect(() => {
     if (!open) {
@@ -121,6 +155,7 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
       const MARGIN = 12
       const lw = menuRef.current?.offsetWidth ?? 0
       const lh = menuRef.current?.offsetHeight ?? 0
+      // Right edges align, so the card grows leftward from the trigger's corner.
       let x = rect.right - lw
       let y = rect.top - 8 - lh
       if (lw > 0) x = Math.min(Math.max(x, MARGIN), window.innerWidth - lw - MARGIN)
@@ -134,61 +169,71 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
       window.removeEventListener('scroll', place, true)
       window.removeEventListener('resize', place)
     }
-  }, [open, pane, state])
+  }, [open, state])
 
   if (!available) return null
 
   const show = () => {
-    setPane('root')
-    setProviderId(null)
     setOpen(true)
     reload()
   }
-  const close = (restoreFocus = false) => {
+  /** The picker door: the level already landed on click, so only the surface changes. */
+  const openPicker = () => {
     setOpen(false)
-    setPane('root')
-    setProviderId(null)
-    if (restoreFocus) queueMicrotask(() => {
-      triggerRef.current?.focus()
-    })
+    setPickerOpen(true)
   }
-  const drill = (next: Pane) => {
-    focusIntent.current = 'initial'
-    setPane(next)
+  /** Record one model's level, so switching away and back restores it. */
+  const remember = (provider: string, model: string, effort: string | undefined) => {
+    setMemory(rememberEffort(storageOf(), provider, model, effort))
   }
-  /** Leave the shown pane for its parent, handing the keyboard back to the row that opened it. */
-  const back = () => {
-    if (pane === 'models') {
-      focusIntent.current = providerId === null ? null : `provider:${providerId}`
-      setPane('providers')
+  const chooseModel = (provider: string, model: CatalogModel) => {
+    const picked = planModelCommit(live, provider, model.id, reason, effortFor(memory, provider, model.id))
+    if (picked === null) {
+      setOpen(false)
+      queueMicrotask(() => { triggerRef.current?.focus() })
       return
     }
-    focusIntent.current = pane === 'effort' ? 'root:effort' : 'root:provider'
-    setPane('root')
+    // A model click is the decision: close at once, and keep the menu open when
+    // the host rejects it so the user can try another model.
+    setOpen(false)
+    submit(picked, () => { queueMicrotask(() => { triggerRef.current?.focus() }) }, () => {
+      // The host refused it: put the menu back so the user can pick another.
+      setOpen(true)
+    })
   }
+  const rowButtons = () => [...(menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]:not([disabled])') ?? [])]
   const moveFocus = (offset: number) => {
-    const items = [...itemRefs.current.values()]
+    const items = rowButtons()
     if (items.length === 0) return
     const active = items.findIndex((item) => item === document.activeElement)
     items[active === -1 ? offset > 0 ? 0 : items.length - 1 : (active + offset + items.length) % items.length]?.focus()
   }
+  const onEffortKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+    if (choices.length === 0 || live === null) return
+    event.preventDefault()
+    const index = choices.findIndex((choice) => choice.effort === effectiveEffort)
+    const step = event.key === 'ArrowRight' ? 1 : -1
+    const next = choices[((index === -1 ? 0 : index) + step + choices.length) % choices.length]
+    if (next === undefined) return
+    const pending = planEffortCommit(live, next.effort)
+    if (pending !== null) submit(pending, null)
+  }
   const onRootKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape' && open) {
       event.preventDefault()
-      if (pane !== 'root') back()
-      else close(true)
+      closeMenu(true)
       return
     }
     if (!open) return
     if (event.key === 'Tab') {
       if (event.shiftKey) {
         event.preventDefault()
-        if (pane !== 'root') back()
-        else close(true)
+        closeMenu(true)
         return
       }
       const focused = document.activeElement
-      const rows = [...itemRefs.current.values()]
+      const rows = rowButtons()
       if (focused instanceof HTMLButtonElement && rows.includes(focused)) {
         event.preventDefault()
         focused.click()
@@ -196,8 +241,8 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
       }
       if (focused !== triggerRef.current) return
       event.preventDefault()
-      const checked = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"][aria-checked="true"]:not([disabled]), [role="menuitem"][aria-current="true"]:not([disabled])')
-      ;(checked ?? rows.find((item) => !item.disabled))?.focus()
+      const checked = menuRef.current?.querySelector<HTMLElement>('[role="menuitemradio"][aria-checked="true"]:not([disabled])')
+      ;(checked ?? rows[0])?.focus()
       return
     }
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
@@ -205,46 +250,24 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
       moveFocus(event.key === 'ArrowDown' ? 1 : -1)
     }
   }
+  /**
+   * The keyboard leaving the seat closes the menu — but that is not one of the
+   * four closing gestures that write a mark, so it closes without committing.
+   * Otherwise clicking the notice text or a divider inside the menu, which moves
+   * focus without unmounting it, would land a level nobody asked to commit.
+   */
   const onBlur = (event: React.FocusEvent) => {
-    if (event.relatedTarget instanceof Node && (rootRef.current?.contains(event.relatedTarget) === true || menuRef.current?.contains(event.relatedTarget) === true)) return
-    close()
-  }
-  const settleSelection = (result: Awaited<ReturnType<ModelSelectInjected['select']>>) => {
-    if (result === undefined) return
-    if (result.ok) {
-      if (rootRef.current !== null) close(true)
-      return
-    }
-    const { error } = result
-    toastSeq.current += 1
-    setToast({
-      seq: toastSeq.current,
-      text: error.code === 'session/writer-held' ? t('error.sessionInUse') : t('error.action', { message: `${error.code}: ${error.message}` }),
-    })
-  }
-  const submit = (selection: Selection) => {
-    lastActionRef.current = 'select'
-    select(selection).then(settleSelection)
-  }
-  /** A model commits outright; its reasoning levels stay behind the root's effort cell. */
-  const chooseModel = (provider: string, model: CatalogModel) => {
-    if (current?.provider === provider && current.model === model.id) {
-      close(true)
-      return
-    }
-    submit({ provider, model: model.id })
+    if (pickerOpen) return
+    if (event.relatedTarget instanceof Node
+      && (rootRef.current?.contains(event.relatedTarget) === true || menuRef.current?.contains(event.relatedTarget) === true)) return
+    setOpen(false)
   }
-  const chooseEffort = (effort: string | undefined) => {
-    if (current === null) return
-    if (effectiveEffort === effort) {
-      close(true)
-      return
-    }
-    submit({ provider: current.provider, model: current.model, ...effort === undefined ? {} : { reasoningEffort: effort } })
+  const toggleFavoriteOf = (provider: string, model: string) => {
+    setFavorites(toggleFavorite(storageOf(), provider, model))
   }
+
   const waiting = current === null && state.status === 'loading'
   const modelLabel = waiting ? t('trigger.loading') : currentModel?.name ?? (current === null ? t('trigger.fallback') : `${current.provider}/${current.model}`)
-  const triggerLabel = effortLabel === undefined ? modelLabel : `${modelLabel} · ${effortLabel}`
   const triggerAria = waiting
     ? t('trigger.loading')
     : current === null
@@ -252,18 +275,12 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
       : effortLabel === undefined
         ? t('trigger.aria', { model: modelLabel })
         : t('trigger.ariaEffort', { model: modelLabel, effort: effortLabel })
+  const providerName = currentGroup?.name
+    ?? state.failures.find((failure) => failure.id === current?.provider)?.name
+    ?? current?.provider
+    ?? ''
+  const providerFailure = current === null ? undefined : state.failures.find((failure) => failure.id === current.provider)
 
-  itemRefs.current = new Map()
-  const itemRef = (key: string) => (node: HTMLButtonElement | null) => {
-    if (node === null) itemRefs.current.delete(key)
-    else itemRefs.current.set(key, node)
-  }
-  const backRow = () => (
-    <button ref={itemRef('back')} type="button" role="menuitem" className={css.cell} onClick={back}>
-      <IconChevronLeftOutlineRegular className={css.cellChevron} />
-      <span className={css.cellLabel}>{t('back')}</span>
-    </button>
-  )
   return (
     <div ref={rootRef} className={css.root} onKeyDown={onRootKeyDown} onBlur={onBlur}>
       <button
@@ -274,14 +291,14 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
         aria-haspopup="menu"
         aria-expanded={open}
         aria-controls={open ? `${id}-menu` : undefined}
-        title={triggerLabel}
+        title={effortLabel === undefined ? modelLabel : `${modelLabel} · ${effortLabel}`}
         disabled={locked}
         onClick={() => {
-          if (open) close()
+          if (open) closeMenu(false)
           else show()
         }}
       >
-        <IconDataOutlineRegular className={css.triggerIcon} size={16} />
+        <IconFlatListOutlineRegular className={css.triggerIcon} size={16} />
         <span className={css.triggerLabel}>{modelLabel}</span>
         {effortLabel !== undefined && <span className={css.triggerEffort}>{effortLabel}</span>}
         <IconChevronDownOutlineRegular className={cls(css.chevron, open && css.chevronOpen)} />
@@ -292,125 +309,95 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
           id={`${id}-menu`}
           className={css.menu}
           style={menuPos ?? MEASURE_STYLE}
-          role="menu"
-          aria-label={pane === 'models' && shownGroup !== undefined ? shownGroup.name : pane === 'effort' ? t('menu.effort') : t('menu.aria')}
+          role="group"
+          aria-label={t('menu.aria')}
           aria-busy={state.status === 'loading' || busy}
         >
-          {pane === 'root' && (
-            <Fragment>
-              <button ref={itemRef('root:provider')} type="button" role="menuitem" className={css.cell} onClick={() => drill('providers')}>
-                <span className={css.cellLabel}>{t('menu.provider')}</span>
-                <span className={css.cellValue}>{currentGroup?.name ?? current?.provider ?? ''}</span>
-                <IconChevronRightOutlineRegular className={css.cellChevron} />
-              </button>
-              {reasoning !== undefined && (
-                <button ref={itemRef('root:effort')} type="button" role="menuitem" className={css.cell} onClick={() => drill('effort')}>
-                  <span className={css.cellLabel}>{t('menu.effort')}</span>
-                  <span className={css.cellValue}>{effortLabel}</span>
-                  <IconChevronRightOutlineRegular className={css.cellChevron} />
-                </button>
-              )}
-            </Fragment>
+          <div className={css.providerName} title={providerName}>{providerName}</div>
+          {state.status === 'loading' && <div className={css.notice}>{t('status.loading')}</div>}
+          {state.error !== null && state.status === 'error' && (
+            <div className={css.notice}>
+              <span>{t('status.failed', { message: state.error })}</span>
+              <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
+            </div>
           )}
-          {pane === 'providers' && (
-            <Fragment>
-              {state.status === 'loading' && <div className={css.status}>{t('status.loading')}</div>}
-              {state.error !== null && lastActionRef.current === 'load' && (
-                <div className={css.error}>
-                  <span>{t('error.action', { message: state.error })}</span>
-                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
-                </div>
-              )}
-              {state.failures.map((failure) => (
-                <div className={css.warning} key={failure.id}>
-                  <span>{t('warning.groupLoad', { name: failure.name, message: failure.message })}</span>
-                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
-                </div>
-              ))}
-              {state.status === 'ready' && groups.length === 0 && <div className={css.empty}>{t('empty.models')}</div>}
-              <div className={cls(css.groups, 'scrollable')}>
-                {groups.map((group) => {
-                  const mine = current?.provider === group.id
-                  return (
-                    <button
-                      key={group.id}
-                      ref={itemRef(`provider:${group.id}`)}
-                      type="button"
-                      role="menuitem"
-                      aria-current={mine ? 'true' : undefined}
-                      className={css.cell}
-                      title={group.name}
-                      onClick={() => {
-                        setProviderId(group.id)
-                        drill('models')
-                      }}
-                    >
-                      <span className={css.cellLabel}>{group.name}</span>
-                      <span className={css.cellValue}>{mine ? currentModel?.name ?? current?.model ?? '' : t('provider.modelCount', { count: String(group.models.length) })}</span>
-                      {mine && <span className={css.check}><IconCheckOutlineRegular /></span>}
-                      <IconChevronRightOutlineRegular className={css.cellChevron} />
-                    </button>
-                  )
-                })}
-              </div>
-            </Fragment>
+          {providerFailure !== undefined && (
+            <div className={css.notice}>
+              <span>{t('status.providerFailed', { name: providerFailure.name, message: providerFailure.message })}</span>
+              <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
+            </div>
           )}
-          {pane === 'models' && shownGroup !== undefined && (
-            <Fragment>
-              {backRow()}
-              <div className={cls(css.groups, 'scrollable')}>
-                {shownGroup.models.map((model) => {
-                  const selected = current?.provider === shownGroup.id && current.model === model.id
-                  return (
+          <div className={cls(css.groups, 'scrollable')} role="menu" aria-label={t('menu.aria')}>
+            {menuRows.map((model) => (
+              <ModelRow
+                key={model.id}
+                name={model.name}
+                selected={current !== null && currentGroup !== undefined && current.provider === currentGroup.id && current.model === model.id}
+                busy={busy}
+                star="static"
+                favorited={currentGroup !== undefined && isFavorite(favorites, currentGroup.id, model.id)}
+                onPick={() => {
+                  if (currentGroup !== undefined) chooseModel(currentGroup.id, model)
+                }}
+              />
+            ))}
+            {menuRows.length === 0 && state.status === 'ready' && (
+              <div className={css.notice}>{t('status.empty')}</div>
+            )}
+          </div>
+          {choices.length > 0 && (
+            <>
+              <div className={css.divider} />
+              <div className={css.effortRow}>
+                <span className={css.effortHeading}>{t('menu.effort')}</span>
+                <div className={css.effortTrack} role="radiogroup" aria-label={t('menu.effort')} onKeyDown={onEffortKeyDown}>
+                  {choices.map((choice: EffortChoice) => (
                     <button
-                      key={model.id}
-                      ref={itemRef(`model:${shownGroup.id}/${model.id}`)}
+                      key={choice.key}
                       type="button"
-                      role="menuitemradio"
-                      aria-checked={selected}
-                      className={cls(css.option, selected && css.selected)}
-                      title={model.name}
+                      role="radio"
+                      aria-checked={choice.effort === effectiveEffort}
+                      className={css.effortSegment}
                       disabled={busy}
-                      onClick={() => chooseModel(shownGroup.id, model)}
+                      onClick={() => {
+                      if (live !== null) {
+                        const pending = planEffortCommit(live, choice.effort)
+                        if (pending !== null) submit(pending, null)
+                      }
+                    }}
                     >
-                      <span className={css.optionCopy}><span className={css.modelName}>{model.name}</span></span>
-                      <span className={css.check}>{selected ? <IconCheckOutlineRegular /> : null}</span>
+                      {choice.label}
                     </button>
-                  )
-                })}
-              </div>
-            </Fragment>
-          )}
-          {pane === 'effort' && (
-            <Fragment>
-              {backRow()}
-              {state.error !== null && lastActionRef.current === 'load' && (
-                <div className={css.error}>
-                  <span>{t('error.action', { message: state.error })}</span>
-                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
+                  ))}
                 </div>
-              )}
-              {effortChoices.length === 0
-                ? <div className={css.empty}>{t('empty.efforts')}</div>
-                : effortChoices.map((level) => (
-                  <button
-                    key={level.key}
-                    ref={itemRef(`effort:${level.key}`)}
-                    type="button"
-                    role="menuitemradio"
-                    aria-checked={effectiveEffort === level.effort}
-                    className={cls(css.option, effectiveEffort === level.effort && css.selected)}
-                    disabled={busy}
-                    onClick={() => chooseEffort(level.effort)}
-                  >
-                    <span className={css.optionCopy}><span className={css.modelName}>{level.label}</span></span>
-                    <span className={css.check}>{effectiveEffort === level.effort ? <IconCheckOutlineRegular /> : null}</span>
-                  </button>
-                ))}
-            </Fragment>
+              </div>
+              <div className={css.divider} />
+            </>
           )}
+          <p className={css.hint}>{t('menu.hint')}</p>
+          <div className={css.divider} />
+          <button type="button" role="menuitem" className={css.moreRow} onClick={openPicker}>
+            <IconFlatListOutlineRegular className={css.moreIcon} size={16} />
+            <span>{t('menu.more')}</span>
+          </button>
         </MenuSurface>
       ), document.body)}
+      <ModelPicker
+        open={pickerOpen}
+        state={state}
+        live={live}
+        facts={facts}
+        favorites={favorites}
+        busy={busy}
+        t={t}
+        onPick={(selection) => { submit(selection, () => { setPickerOpen(false) }) }}
+        onToggleFavorite={toggleFavoriteOf}
+        onReload={reload}
+        onClose={() => {
+          setPickerOpen(false)
+          queueMicrotask(() => { triggerRef.current?.focus() })
+        }}
+      />
       {toast !== null && (
         <Toast
           key={toast.seq}
@@ -424,4 +411,21 @@ export function ModelSubmenu({ locked, available, directory, load, select, t }:
       )}
     </div>
   )
-}
+}
+
+/** The selection in force, or null while the host has not resolved one. */
+function selectionOf(state: ModelDirectoryState): Selection | null {
+  if (state.current === null) return null
+  return state.current.reasoningEffort === undefined
+    ? { provider: state.current.provider, model: state.current.model }
+    : { provider: state.current.provider, model: state.current.model, reasoningEffort: state.current.reasoningEffort }
+}
+
+/** Isolate the browser's storage so a locked-down browser reads as "no favorites". */
+function storageOf(): FavoritesStorage | undefined {
+  try {
+    return globalThis.localStorage
+  } catch {
+    return undefined
+  }
+}