@lynn123411/dsh-model-submenu 0.3.3 → 0.3.10

package/src/client/{ModelSubmenu.module.css → ModelOptions.module.css}

@@ -1,125 +1,123 @@
 /*
- * The composer model seat and the picker it opens. The menu surface renders
- * through the primitives' MenuSurface and the dialog through Modal, so neither
- * this file paints a floating fill — it only places content on the surfaces
- * those two own.
+ * The reasoning-level slider, the picker, and the composer overlay that hosts
+ * the picker. The dialog renders through the primitives' Modal, so this file
+ * paints no floating fill — it only places content on the surface that
+ * component owns.
  */
 
-.root {
-  min-width: 0;
-  position: relative;
-  display: flex;
+/* The overlay entry is only a mount point for the dialog and its toast; it must
+ * not take space inside the composer card. */
+.pickerHost {
+  display: contents;
 }
 
-/* The Models glyph replaces the text when the composer row cannot fit it; the
- * row owns both variables, so this plugin follows the same compact contract as
- * the built-in occupant. */
-.trigger {
-  min-width: 0;
-  max-width: min(360px, 45cqw);
-  height: 28px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 24px;
-  outline: none;
-  align-items: center;
-  gap: 4px;
-  padding: 0 4px 0 8px;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 20px;
-  display: flex;
-}
+/* ── the reasoning-level slider ──────────────────────────────────────────── */
 
-.trigger:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
+/* The Host's effort cell is a flex row: label, value, chevron. The slider takes
+ * the slack between the label and the value, so the cell keeps the Host's own
+ * metrics and the menu does not grow. */
+.sliderCell {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  align-self: stretch;
+  min-width: 96px;
 }
 
-.trigger:focus-visible {
-  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
+.slider {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: 100%;
+  min-width: 0;
+  outline: none;
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-.trigger:disabled {
-  color: var(--dsw-alias-label-dimmed);
+.slider[data-busy] {
   cursor: default;
 }
 
-.triggerLabel {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  overflow: hidden;
-  display: var(--dsh-composer-model-text-display, block);
+.sliderTrack {
+  position: relative;
+  width: 100%;
+  height: 20px;
+  border-radius: 999px;
+  corner-shape: round;
+  background: var(--dsw-alias-border-l3);
 }
 
-/* The effort caption is the accent the reference UI uses to say "this is the
- * thinking level in force"; it carries no extra meaning of its own. */
-.triggerEffort {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  color: var(--dsw-alias-state-business-primary);
-  flex-shrink: 1000;
+/* The fill takes the level's color and is clipped to the filled part, so the
+ * color under the knob is the color the level's text takes. */
+.sliderFill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 999px;
+  corner-shape: round;
   overflow: hidden;
-  display: var(--dsh-composer-model-text-display, block);
+  pointer-events: none;
+}
+
+/* One detent per level: the dot is the only thing that says the levels are
+ * discrete, so it stays visible on both sides of the knob. */
+.sliderTick {
+  position: absolute;
+  top: 50%;
+  width: 4px;
+  height: 4px;
+  margin: -2px 0 0 -2px;
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--dsw-alias-label-tertiary);
+  pointer-events: none;
+}
+
+/* On the filled part the detent goes dark: white would read as one more grain
+ * of stardust, and the dot has to stay the thing that says "levels". */
+.sliderTick[data-on] {
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.sliderKnob {
+  position: absolute;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--dsw-alias-label-primary-foreground);
+  box-shadow: var(--dsw-elevation-soft);
+  pointer-events: none;
 }
 
-.triggerIcon {
-  flex: 0 0 auto;
-  display: var(--dsh-composer-model-icon-display, none);
+/* Provider default: nothing is filled and the knob is a hollow ring, so the
+ * state never reads as the weakest level. */
+.slider[data-default] .sliderKnob {
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1.5px solid var(--dsw-alias-label-tertiary);
+  box-shadow: none;
 }
 
-.chevron {
-  color: var(--dsw-alias-label-caption);
-  flex: none;
-  transition: transform .12s;
+.slider[data-busy] .sliderKnob {
+  opacity: 0.6;
 }
 
-.chevronOpen {
-  transform: rotate(180deg);
+.slider:focus-visible .sliderTrack {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 3px;
 }
 
-.menu {
-  z-index: 1100;
-  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
-  /* A fixed width keeps the card independent of the trigger's text length, so
-   * opening the menu never reflows the composer. */
-  box-sizing: border-box;
-  width: min(252px, calc(100vw - 24px));
-  max-height: min(70vh, calc(100vh - 96px));
-  box-shadow: var(--dsw-elevation-prominent);
-  color: var(--dsw-alias-label-primary);
-  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
-  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
-  border: 0;
-  flex-direction: column;
-  padding: 4px;
-  display: flex;
-  position: fixed;
-  overflow: hidden;
-}
+/* ── the picker rows ─────────────────────────────────────────────────────── */
 
-/* The provider name is a heading, not a control: it says which provider's
- * models the list below belongs to. */
-.providerName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 24px;
-  color: var(--dsw-alias-label-tertiary);
-  align-items: center;
-  padding: 3px 8px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  overflow: hidden;
-  display: flex;
-}
-
-.groups {
-  min-height: 0;
-  overflow-y: auto;
+.rowBadge {
+  flex: none;
+  margin-inline-start: 6px;
 }
 
 .row {
@@ -146,7 +144,7 @@
   cursor: pointer;
   background: 0 0;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--dsw-radius-md);
   outline: none;
   align-items: center;
   gap: 4px;
@@ -181,13 +179,6 @@
   overflow: hidden;
 }
 
-/* The menu's names carry the weight: at this size a regular face reads thin
- * against the card. The picker's rows keep theirs regular — there the metadata
- * line already separates the rows. */
-.menu .rowName {
-  font-weight: 600;
-}
-
 .rowMeta {
   color: var(--dsw-alias-label-tertiary);
   text-overflow: ellipsis;
@@ -204,16 +195,6 @@
   display: grid;
 }
 
-/* The menu's favorite mark: it lives inside the row button, so hovering it
- * highlights the row and clicking it picks the model — no separate hit area. */
-.starStatic {
-  color: var(--dsw-alias-state-warn-primary);
-  flex: none;
-  place-items: center;
-  width: 14px;
-  display: grid;
-}
-
 /* The picker's star is a real control: outline until hover or focus, solid and
  * gold once favorited, and visible without hover on touch screens. */
 .starButton {
@@ -221,7 +202,7 @@
   cursor: pointer;
   background: 0 0;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-sm);
   outline: none;
   flex: none;
   place-items: center;
@@ -255,114 +236,7 @@
   flex: none;
 }
 
-.divider {
-  height: .5px;
-  background: var(--dsw-alias-border-l2);
-  flex: none;
-  margin: 3px 2px;
-}
-
-.effortRow {
-  align-items: center;
-  gap: 6px;
-  padding: 3px 6px;
-  display: flex;
-}
-
-.effortHeading {
-  color: var(--dsw-alias-label-primary);
-  flex: none;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-/* The segments scroll sideways rather than wrap, so the row keeps one height
- * however many levels a model advertises. */
-.effortTrack {
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-radius: 999px;
-  align-items: center;
-  gap: 1px;
-  min-width: 0;
-  margin-left: auto;
-  padding: 2px;
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.effortTrack::-webkit-scrollbar {
-  display: none;
-}
-
-.effortSegment {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 999px;
-  outline: none;
-  flex: none;
-  padding: 2px 7px;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.effortSegment:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary);
-}
-
-.effortSegment[aria-checked='true'] {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-layer-1);
-  box-shadow: var(--dsw-elevation-soft);
-  font-weight: 600;
-}
-
-.effortSegment:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.effortSegment:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-  outline-offset: -2px;
-}
-
-.hint {
-  color: var(--dsw-alias-label-tertiary);
-  margin: 0;
-  padding: 6px 8px;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.moreRow {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  align-items: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 5px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.moreRow:hover,
-.moreRow:focus-visible {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.moreIcon {
-  color: var(--dsw-alias-label-tertiary);
-  flex: none;
-}
+/* ── shared status lines ─────────────────────────────────────────────────── */
 
 .notice {
   color: var(--dsw-alias-label-tertiary);
@@ -423,8 +297,7 @@
 
 /* The tabs scroll sideways rather than wrap: the dialog keeps one row of
  * providers however many the catalog has, so the list below starts at the same
- * height every time. The bar keeps its hairline and hides its scrollbar the way
- * the effort track does. */
+ * height every time. The bar keeps its hairline and hides its scrollbar. */
 .pickerTabs {
   border-bottom: .5px solid var(--dsw-alias-border-l2);
   gap: 2px;
@@ -445,7 +318,7 @@
   cursor: pointer;
   background: 0 0;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--dsw-radius-sm);
   outline: none;
   flex: none;
   padding: 6px 10px;

package/src/client/ModelPicker.tsx

@@ -29,18 +29,22 @@ import {
   reasoningOf,
   rowsForTab,
   searchRows,
+  type CatalogModel,
   type ModelRow as CatalogRow,
   type PickerTab,
 } from './rows.ts'
+import { Tag, isMobileDevice } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ModelFactsLookup } from './facts-source.ts'
 import type { Selection } from './selection.ts'
 import { planModelCommit } from './selection.ts'
-import css from './ModelSubmenu.module.css'
+import css from './ModelOptions.module.css'
 
 /** Props the seat hands the picker. */
 export interface ModelPickerProps {
   /** Whether the dialog is showing. */
   readonly open: boolean
+  /** Resolve a catalog badge's localized text for the active language. */
+  readonly resolveText: (text: NonNullable<CatalogModel['badge']>['text']) => string
   /** The shared directory snapshot. */
   readonly state: ModelDirectoryState
   /** The selection in force, null before a first selection resolves. */
@@ -51,6 +55,13 @@ export interface ModelPickerProps {
   readonly favorites: readonly { readonly provider: string; readonly model: string }[]
   /** Whether a selection is in flight. */
   readonly busy: boolean
+  /**
+   * The reasoning level this browser last used for one model, if any.
+   * @param provider - the provider route key.
+   * @param model - the model id inside that provider.
+   * @returns the remembered level, or undefined when none is remembered.
+   */
+  readonly rememberedOf?: (provider: string, model: string) => string | undefined
   /** Submit one selection. */
   readonly onPick: (selection: Selection) => void
   /** Toggle one model's favorite. */
@@ -67,7 +78,7 @@ export interface ModelPickerProps {
  * @returns the dialog; nothing while closed.
  */
 export function ModelPicker({
-  open, state, live, facts, favorites, busy, onPick, onToggleFavorite, onReload, onClose, t,
+  open, resolveText, state, live, facts, favorites, busy, rememberedOf, onPick, onToggleFavorite, onReload, onClose, t,
 }: ModelPickerProps & PropsLocale<'modelSubmenu'>) {
   const id = useId()
   const searchRef = useRef<HTMLInputElement | null>(null)
@@ -97,7 +108,10 @@ export function ModelPicker({
     setTab(ALL_TAB)
     setHighlight(0)
     if (listRef.current !== null) listRef.current.scrollTop = 0
-    const frame = requestAnimationFrame(() => { searchRef.current?.focus() })
+    // 粗指针设备不自动聚焦文本输入：移动端弹键盘会顶起布局，宿主座位也这样守。
+    const frame = requestAnimationFrame(() => {
+      if (!isMobileDevice()) searchRef.current?.focus()
+    })
     return () => { cancelAnimationFrame(frame) }
   }, [open])
 
@@ -130,7 +144,7 @@ export function ModelPicker({
     }
   }
   const pick = (row: CatalogRow) => {
-    const selection = planModelCommit(live, row.provider, row.model, reason)
+    const selection = planModelCommit(live, row.provider, row.model, reason, rememberedOf?.(row.provider, row.model))
     if (selection === null) {
       onClose()
       return
@@ -246,9 +260,11 @@ export function ModelPicker({
           <div key={`${row.provider}/${row.model}`} data-row-index={index} id={`${id}-row-${index}`}>
             <ModelRow
               name={row.entry.name}
+              badge={row.entry.badge === undefined
+                ? undefined
+                : <Tag tone={row.entry.badge.tone} className={css.rowBadge}>{resolveText(row.entry.badge.text)}</Tag>}
               selected={live?.provider === row.provider && live.model === row.model}
               busy={busy}
-              star="interactive"
               favorited={isFavorite(favorites, row.provider, row.model)}
               meta={metaLine({
                 row,

package/src/client/ModelPickerHost.tsx

@@ -0,0 +1,146 @@
+/**
+ * The composer overlay's picker view: the dialog, its catalog, and its verbs.
+ *
+ * It lives in `conversation.input.overlay` rather than beside the row, because
+ * the Host unmounts the model menu as soon as a row is clicked. Everything the
+ * dialog reads arrives through this entry's injected face.
+ */
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { IconWarningOutlineRegular, Toast } from '@deepseek-ai/dsh-client-ui-primitives';
+import type { 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 type { FactsSource } from './facts-source.ts';
+import {
+  readFavorites,
+  toggleFavorite,
+  type FavoriteModel,
+  type FavoritesStorage,
+} from './favorites.ts';
+import {
+  effortFor,
+  readEfforts,
+  rememberEffort,
+  type RememberedEffort,
+} from './effort-memory.ts';
+import { selectionOf, type Selection } from './selection.ts';
+import type { PickerStore } from './picker-state.ts';
+import css from './ModelOptions.module.css';
+
+/** Props of the overlay view: the session, the store, and the seat's injected face. */
+export type ModelPickerHostProps = PropsLocale<'modelSubmenu'>
+  & ModelSelectInjected
+  & {
+    /** Session whose catalog this view renders. */
+    readonly sessionId: string;
+    /** The request written by the menu row. */
+    readonly picker: PickerStore;
+    /** The settings-derived metadata the picker's line reads. */
+    readonly factsSource: FactsSource;
+  }
+
+/**
+ * Render the picker for this session.
+ * @param props - session, store, catalog face, and localized copy.
+ * @returns the dialog while the store names this session; otherwise nothing.
+ */
+export function ModelPickerHost({
+  sessionId, picker, available, directory, load, select, resolveText, factsSource, t,
+}: ModelPickerHostProps) {
+  const request = useSyncExternalStore(picker.subscribe, picker.getSnapshot);
+  const state = useSyncExternalStore((listener) => directory.subscribe(listener), () => directory.getSnapshot());
+  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 busy = state.status === 'selecting';
+  const live = useMemo(() => selectionOf(state), [state]);
+  const facts = useSyncExternalStore((listener) => factsSource.subscribe(listener), () => factsSource.getSnapshot());
+  const open = request.sessionId === sessionId;
+  // The injected face is cached per entry and session, but the read goes through
+  // a ref anyway: a catalog load writes the store, so an unstable `load` in the
+  // dependency list would reload on every render it caused.
+  const loadRef = useRef(load);
+  loadRef.current = load;
+
+  // Opening reads the catalog again: another client may have changed it, and a
+  // failed load has to be retryable from the same gesture.
+  useEffect(() => {
+    if (open) loadRef.current();
+  }, [open]);
+
+  // The Host's own menu changes the reasoning level without passing through this
+  // plugin, so the memory is written from the directory snapshot too — a picker
+  // click alone would only ever record levels chosen in the dialog. The key guard
+  // keeps one write per distinct selection instead of one per snapshot.
+  const current = state.current;
+  const rememberedRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (current === null) return;
+    const key = `${current.provider}/${current.model}/${current.reasoningEffort ?? ''}`;
+    if (rememberedRef.current === key) return;
+    rememberedRef.current = key;
+    setMemory(rememberEffort(storageOf(), current.provider, current.model, current.reasoningEffort));
+  }, [current]);
+
+  if (!available) return null;
+
+  const raiseToast = (text: string): void => {
+    toastSeq.current += 1;
+    setToast({ seq: toastSeq.current, text });
+  };
+  const submit = (selection: Selection): void => {
+    void select(selection).then((result) => {
+      if (result === undefined || result.ok) {
+        setMemory(rememberEffort(storageOf(), selection.provider, selection.model, selection.reasoningEffort));
+        picker.close();
+        return;
+      }
+      raiseToast(result.error.code === 'session/writer-held'
+        ? t('error.sessionInUse')
+        : t('error.action', { message: `${result.error.code}: ${result.error.message}` }));
+    });
+  };
+
+  return <div ref={rootRef} className={css.pickerHost}>
+    <ModelPicker
+      open={open}
+      resolveText={resolveText}
+      state={state}
+      live={live}
+      facts={facts}
+      favorites={favorites}
+      busy={busy}
+      t={t}
+      rememberedOf={(provider, model) => effortFor(memory, provider, model)}
+      onPick={submit}
+      onToggleFavorite={(provider, model) => {
+        setFavorites(toggleFavorite(storageOf(), provider, model));
+      }}
+      onReload={load}
+      onClose={() => {
+        picker.close();
+      }}
+    />
+    {toast !== null && <Toast
+      key={toast.seq}
+      text={toast.text}
+      icon={<IconWarningOutlineRegular />}
+      anchor={rootRef.current?.closest('[data-composer-card]') ?? null}
+      onDone={() => {
+        setToast(null);
+      }}
+    />}
+  </div>;
+}
+
+/** 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;
+  }
+}