@lynn123411/dsh-model-submenu 0.3.5 → 0.3.11

package/src/client/ModelOptions.module.css

@@ -0,0 +1,397 @@
+/*
+ * 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.
+ */
+
+/* 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 reasoning-level slider ──────────────────────────────────────────── */
+
+/* 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;
+}
+
+.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;
+}
+
+.slider[data-busy] {
+  cursor: default;
+}
+
+/* The track is a capsule and the knob a larger circle riding on it: the knob
+ * overhangs at both ends, so it reads as a knob rather than as the track's own
+ * end cap. */
+.sliderTrack {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 999px;
+  corner-shape: round;
+  background: var(--dsw-alias-border-l3);
+}
+
+/* The fill is the track's own shape cut at the knob: its right cap carries the
+ * track's radius and ends under the knob, so the color runs into the knob
+ * instead of stopping at a straight edge, and the last detent reaches the
+ * track's end. */
+.sliderFill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 999px;
+  corner-shape: round;
+  pointer-events: none;
+  /* A level change eases the color to its new width; the drag turns this off so
+   * the edge stays under the pointer. */
+  transition: width 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* 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%;
+  /* The provider default draws a 1.5px ring; border-box keeps that ring inside
+   * the 20px circle the travel is computed for. */
+  box-sizing: border-box;
+  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;
+  /* Letting go eases the knob onto the detent it settled on; the drag turns this
+   * off so the knob sits exactly under the pointer. */
+  transition: left 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.slider[data-dragging] .sliderKnob,
+.slider[data-dragging] .sliderFill {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sliderKnob,
+  .sliderFill {
+    transition: 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;
+}
+
+.slider[data-busy] .sliderKnob {
+  opacity: 0.6;
+}
+
+.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;
+}
+
+/* ── the picker rows ─────────────────────────────────────────────────────── */
+
+.rowBadge {
+  flex: none;
+  margin-inline-start: 6px;
+}
+
+.row {
+  align-items: center;
+  gap: 2px;
+  display: flex;
+}
+
+.rowPick {
+  box-sizing: border-box;
+  /* A slightly tighter side padding buys the name a few more characters, which
+   * is what keeps a long provider suffix readable inside a narrow card. */
+  padding-inline: 6px;
+  /* The scroll list is a block container, so a flex item's `flex: 1` does
+   * nothing here: the row must claim the full width or a long model name pushes
+   * the favorite mark and the check past the card's edge, where overflow clips
+   * them. */
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  min-height: 34px;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: 0 0;
+  border: none;
+  border-radius: var(--dsw-radius-md);
+  outline: none;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 7px;
+  display: flex;
+}
+
+.rowPick:hover:not(:disabled),
+.rowPick:focus-visible {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.rowPick:disabled {
+  color: var(--dsw-alias-label-dimmed);
+  cursor: default;
+}
+
+.rowCopy {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.rowName {
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  font-weight: 400;
+  line-height: 17px;
+  overflow: hidden;
+}
+
+.rowMeta {
+  color: var(--dsw-alias-label-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 18px;
+  overflow: hidden;
+}
+
+.check {
+  color: var(--dsw-alias-label-primary);
+  flex: 0 0 15px;
+  place-items: center;
+  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 {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+  background: 0 0;
+  border: none;
+  border-radius: var(--dsw-radius-sm);
+  outline: none;
+  flex: none;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  display: grid;
+  opacity: 0;
+}
+
+.starButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-l3);
+}
+
+.row:hover .starButton,
+.row:focus-within .starButton {
+  opacity: 1;
+}
+
+.starButton[aria-pressed='true'] {
+  color: var(--dsw-alias-state-warn-primary);
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .starButton {
+    opacity: 1;
+  }
+}
+
+.star {
+  flex: none;
+}
+
+/* ── shared status lines ─────────────────────────────────────────────────── */
+
+.notice {
+  color: var(--dsw-alias-label-tertiary);
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 18px;
+  display: flex;
+}
+
+.retry {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: 0 0;
+  border: none;
+  flex: none;
+  padding: 0;
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+/* ── the picker dialog ───────────────────────────────────────────────────── */
+
+.pickerDialog {
+  width: min(680px, 100%);
+  height: min(640px, 80vh);
+  gap: 0;
+  padding: 0;
+}
+
+.pickerContent {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Modal wraps children in a body row of its own; that row — the content
+ * region's last child — is what has to carry the column and give the list its
+ * remaining height, so the footer stays put while the list scrolls. */
+.pickerContent > :last-child {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.pickerSearch {
+  padding: 0 20px 12px;
+}
+
+.pickerSearchInput {
+  width: 100%;
+}
+
+/* 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. */
+.pickerTabs {
+  border-bottom: .5px solid var(--dsw-alias-border-l2);
+  gap: 2px;
+  padding: 0 16px;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.pickerTabs::-webkit-scrollbar {
+  display: none;
+}
+
+.pickerTab {
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  background: 0 0;
+  border: none;
+  border-radius: var(--dsw-radius-sm);
+  outline: none;
+  flex: none;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.pickerTab:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.pickerTab[aria-selected='true'] {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+  font-weight: 600;
+}
+
+.pickerTab:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-l3);
+}
+
+.pickerList {
+  min-height: 0;
+  flex: 1;
+  padding: 8px 12px;
+  overflow-y: auto;
+}
+
+.pickerFooter {
+  border-top: .5px solid var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-tertiary);
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  font-size: 12px;
+  line-height: 18px;
+  display: flex;
+}
+
+.footerHint {
+  align-items: center;
+  gap: 6px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.footerDot {
+  color: var(--dsw-alias-label-dimmed);
+}

package/src/client/ModelPicker.tsx

@@ -37,7 +37,7 @@ 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 {
@@ -55,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. */
@@ -71,7 +78,7 @@ export interface ModelPickerProps {
  * @returns the dialog; nothing while closed.
  */
 export function ModelPicker({
-  open, resolveText, 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)
@@ -137,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
@@ -258,7 +265,6 @@ export function ModelPicker({
                 : <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;
+  }
+}