@lynn123411/dsh-model-submenu 0.3.3 → 0.3.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lynn123411/dsh-model-submenu",
-  "version": "0.3.3",
-  "description": "给输入框的模型选择器换成两层：一层只列当前供应商的模型与思考等级，一层弹窗列全部供应商的模型。",
+  "version": "0.3.10",
+  "description": "增强输入框的模型菜单：第一行直接打开跨供应商的模型弹窗，第二行的推理等级是可拖动的滑块，档位带配色。",
   "license": "MIT",
   "packageManager": "pnpm@11.7.0",
   "publishConfig": {
@@ -10,7 +10,7 @@
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0",
-    "dsh": ">=0.2.1-rc.2"
+    "dsh": ">=0.2.2-rc.2"
   },
   "main": "lib/index.js",
   "exports": {
@@ -48,6 +48,7 @@
       "inject": [
         "@deepseek-ai/dsh-api-remotes",
         "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-conversation",
         "@deepseek-ai/dsh-client-ui-model-selection",
         "@deepseek-ai/dsh-client-ui-settings",
         "@deepseek-ai/dsh-client-ui-slots"
@@ -60,11 +61,11 @@
     "smoke": "node scripts/smoke-client.mjs",
     "assert:lib-untracked": "node scripts/assert-lib-untracked.mjs",
     "check": "pnpm typecheck && pnpm build && pnpm smoke && pnpm test && pnpm assert:lib-untracked",
-    "test": "node scripts/test-favorites.mjs && node scripts/test-facts.mjs && node scripts/test-commit.mjs && node scripts/test-rows.mjs && node scripts/test-effort-memory.mjs && node scripts/test-render.mjs"
+    "test": "node scripts/test-favorites.mjs && node scripts/test-facts.mjs && node scripts/test-commit.mjs && node scripts/test-rows.mjs && node scripts/test-effort-memory.mjs && node scripts/test-slider.mjs && node scripts/test-render.mjs"
   },
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.5",
-    "@deepseek-ai/dsh-client-ui-primitives": ">=0.2.1-rc.2",
+    "@deepseek-ai/cordis": "^4.1.0",
+    "@deepseek-ai/dsh-client-ui-primitives": ">=0.2.2-rc.2",
     "react": "^18.2.0"
   },
   "peerDependenciesMeta": {
@@ -73,19 +74,19 @@
     }
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.5",
-    "@deepseek-ai/dsh-api-remotes": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-api-session-controller": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-locale": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-store": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-conversation": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-model-selection": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-primitives": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-renderer": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-settings": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-session": ">=0.2.1-rc.2",
-    "@deepseek-ai/dsh-typert-protocol": ">=0.2.1-rc.2",
+    "@deepseek-ai/cordis": "^4.1.0",
+    "@deepseek-ai/dsh-api-remotes": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-api-session-controller": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-locale": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-store": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-ui-conversation": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-ui-model-selection": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-session": ">=0.2.2-rc.2",
+    "@deepseek-ai/dsh-typert-protocol": ">=0.2.2-rc.2",
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",
     "@types/react-dom": "~18.3.0",

package/src/client/EffortSlider.tsx

@@ -0,0 +1,159 @@
+/**
+ * The reasoning-level slider that replaces the Host's effort drill.
+ *
+ * The Host's second menu cell is a button that drills into a list of levels.
+ * This slider sits inside that same cell, between the Host's label and value, so
+ * the levels are reachable without leaving the menu. Levels are discrete: the
+ * knob snaps to one detent per level, the drag only moves the knob, and the
+ * release commits once. Keyboard arrows step and commit immediately.
+ *
+ * The fill takes the level's color, so the track and the two captions read as
+ * one signal: "off" is neutral, the levels above it walk a blue-to-violet ramp,
+ * and only the top level fills with the whole gradient.
+ *
+ * "Provider default" is not a detent: it is a state, drawn as an empty track
+ * with a hollow knob, so it never reads as the lowest level.
+ */
+import { useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+import type { EffortChoice } from './selection.ts';
+import { LEVEL_GRADIENT, isTopLevel, levelColor } from './level-color.ts';
+import { knobOffset, offsetOf, stepAt } from './slider.ts';
+import css from './ModelOptions.module.css';
+
+/** Props of the slider: the levels, the one in force, and the commit path. */
+export interface EffortSliderProps {
+  /** The levels in catalog order, lowest first. */
+  readonly steps: readonly EffortChoice[];
+  /** Index of the level in force, already clamped into `steps`. */
+  readonly current: number;
+  /** Whether the provider default is in force instead of a level. */
+  readonly defaultActive: boolean;
+  /** Where the knob rests while the provider default is in force. */
+  readonly defaultIndex: number;
+  /** Localized name of the provider default, read while it is in force. */
+  readonly defaultLabel: string;
+  /** Whether a selection is in flight; input is ignored while it is. */
+  readonly busy: boolean;
+  /** Accessible name, taken from the Host's own row label. */
+  readonly label: string;
+  /** @param index - the level the user settled on. */
+  readonly onCommit: (index: number) => void;
+}
+
+/**
+ * Render the slider.
+ * @param props - levels, the level in force, and the commit path.
+ * @returns one focusable slider over the discrete levels.
+ */
+export function EffortSlider({
+  steps, current, defaultActive, defaultIndex, defaultLabel, busy, label, onCommit,
+}: EffortSliderProps) {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  // The drag index lives in a ref as well as in state: a press and a release can
+  // arrive in one task, and the release must not read a render that never ran.
+  const dragRef = useRef<number | null>(null);
+  const [drag, setDrag] = useState<number | null>(null);
+  const resting = defaultActive ? defaultIndex : current;
+  const active = drag ?? resting;
+  const beginDrag = (index: number | null): void => {
+    dragRef.current = index;
+    setDrag(index);
+  };
+
+  const indexAt = (clientX: number): number => {
+    const track = trackRef.current;
+    if (track === null) return active;
+    const rect = track.getBoundingClientRect();
+    return stepAt(clientX, rect.left, rect.width, steps.length);
+  };
+
+  const onPointerDown = (event: PointerEvent<HTMLDivElement>): void => {
+    if (busy) return;
+    // The Host's menu cell owns this subtree; without these the press would
+    // also settle the cell and pull focus out of the slider.
+    event.preventDefault();
+    event.stopPropagation();
+    beginDrag(indexAt(event.clientX));
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // A synthetic pointer has no capture to take; the drag still tracks moves.
+    }
+    event.currentTarget.focus();
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>): void => {
+    if (dragRef.current === null || busy) return;
+    const next = indexAt(event.clientX);
+    if (next !== dragRef.current) beginDrag(next);
+  };
+
+  const settle = (event: PointerEvent<HTMLDivElement>, commit: boolean): void => {
+    if (dragRef.current === null) return;
+    const next = indexAt(event.clientX);
+    beginDrag(null);
+    if (!commit) return;
+    // Leaving the provider default is a change even when the knob lands where
+    // the default already pointed.
+    if (next !== current || defaultActive) onCommit(next);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+    if (busy) return;
+    const last = steps.length - 1;
+    const next = event.key === 'ArrowRight' || event.key === 'ArrowUp'
+      ? Math.min(active + 1, last)
+      : event.key === 'ArrowLeft' || event.key === 'ArrowDown'
+        ? Math.max(active - 1, 0)
+        : event.key === 'Home'
+          ? 0
+          : event.key === 'End'
+            ? last
+            : null;
+    if (next === null) return;
+    // The menu walks rows with the arrow keys; a slider keeps them for itself.
+    event.preventDefault();
+    event.stopPropagation();
+    if (next !== current || defaultActive) onCommit(next);
+  };
+
+  const knobFraction = offsetOf(active, steps.length);
+  const offset = knobOffset(knobFraction);
+  // The provider default fills nothing: the knob shows where it lands, the
+  // track stays empty so it never reads as a chosen level.
+  const idle = defaultActive && drag === null;
+  const filled = idle ? 0 : knobFraction;
+  const fill = isTopLevel(active, steps.length) ? LEVEL_GRADIENT : levelColor(active, steps.length);
+  return <div
+    ref={trackRef}
+    className={css.slider}
+    role="slider"
+    tabIndex={0}
+    aria-label={label}
+    aria-valuemin={0}
+    aria-valuemax={Math.max(0, steps.length - 1)}
+    aria-valuenow={active}
+    aria-valuetext={defaultActive && drag === null ? defaultLabel : steps[active]?.label}
+    aria-disabled={busy || undefined}
+    data-busy={busy ? '' : undefined}
+    data-dragging={drag === null ? undefined : ''}
+    data-default={defaultActive && drag === null ? '' : undefined}
+    onPointerDown={onPointerDown}
+    onPointerMove={onPointerMove}
+    onPointerUp={(event) => { settle(event, true); }}
+    onPointerCancel={(event) => { settle(event, false); }}
+    onKeyDown={onKeyDown}
+    onClick={(event) => { event.stopPropagation(); }}
+  >
+    <div className={css.sliderTrack} aria-hidden="true">
+      <div className={css.sliderFill} style={{ width: knobOffset(filled), background: fill }} />
+      {steps.map((step, index) => <span
+        key={step.key}
+        className={css.sliderTick}
+        data-on={index <= active && !idle ? '' : undefined}
+        style={{ left: knobOffset(offsetOf(index, steps.length)) }}
+      />)}
+      <div className={css.sliderKnob} style={{ left: offset }} />
+    </div>
+  </div>;
+}

package/src/client/EffortTint.tsx

@@ -0,0 +1,61 @@
+/**
+ * Tint the composer's effort caption with the level's color.
+ *
+ * The slider's fill and the menu's value already carry the level's color; the
+ * caption on the collapsed trigger is the third place the level shows, and it
+ * lives outside the menu. This entry stays mounted for the whole session and
+ * writes that one color, so all three read as one signal.
+ *
+ * The caption is recognized as the trigger's `span[class*='triggerEffort']`
+ * child — the same class-substring contract the menu row uses. When the model
+ * declares no levels the span does not exist and nothing is written.
+ */
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import type { ModelSelectInjected } from '@deepseek-ai/dsh-client-ui-model-selection/client';
+import { levelColor } from './level-color.ts';
+import { effortChoices, liveReasoning } from './selection.ts';
+
+/** Props of the tint: the shared catalog face. */
+export type EffortTintProps = Pick<ModelSelectInjected, 'available' | 'directory'>;
+
+/**
+ * Render nothing and keep the trigger caption colored.
+ * @param props - the session's catalog face.
+ * @returns an inert marker.
+ */
+export function EffortTint({ available, directory }: EffortTintProps) {
+  const markerRef = useRef<HTMLSpanElement | null>(null);
+  const [caption, setCaption] = useState<HTMLElement | null>(null);
+  const state = useSyncExternalStore(
+    (listener) => directory.subscribe(listener),
+    () => directory.getSnapshot(),
+  );
+  const levels = effortChoices(liveReasoning(state));
+  const effort = state.current?.reasoningEffort;
+  const chosen = effort === undefined ? -1 : levels.findIndex((level) => level.effort === effort);
+  // The provider default has no color of its own: the caption keeps the Host's.
+  const color = available && chosen >= 0 && levels.length >= 2
+    ? levelColor(chosen, levels.length)
+    : null;
+
+  // The Host rebuilds the trigger on every model change, so the caption is
+  // re-read after each render; the identity guard keeps that from looping.
+  useLayoutEffect(() => {
+    const card = markerRef.current?.closest('[data-composer-card]');
+    const next = card?.querySelector<HTMLElement>(
+      '[data-slot="conversation.input.model"] button[aria-haspopup="menu"] span[class*="triggerEffort"]',
+    ) ?? null;
+    if (next !== caption) setCaption(next);
+  });
+
+  useLayoutEffect(() => {
+    if (caption === null || color === null) return;
+    const saved = caption.style.color;
+    caption.style.color = color;
+    return () => {
+      caption.style.color = saved;
+    };
+  }, [caption, color]);
+
+  return <span ref={markerRef} hidden />;
+}

package/src/client/ModelMenuBridge.tsx

@@ -0,0 +1,203 @@
+/**
+ * Bridge the Host's own model menu: the model cell opens the all-provider
+ * picker, and the effort cell carries the reasoning-level slider.
+ *
+ * The Host draws the root menu's first two cells itself: the model cell drills
+ * into the current provider's list, the effort cell into the levels. This plugin
+ * wants the first to open its dialog and the second to stop drilling, and the
+ * Host exposes no hook for either. This entry is mounted exactly while the root
+ * pane is open, so it can take the click on the menu surface before the cells'
+ * own handlers run and mount the slider into the effort cell.
+ *
+ * The cells are recognized as the menu surface's direct `role="menuitem"`
+ * children, which is the Host's root-menu shape; the options slot output sits in
+ * its own wrapper, so other plugins' rows never join that list. When the second
+ * cell is missing the model declares no reasoning levels and the row is left
+ * alone; when the first is missing the click falls through to the Host.
+ *
+ * Clicking the cell's label switches to the provider default, which is a state
+ * rather than a detent: the slider shows it as an empty track under a hollow
+ * knob, so it never reads as the weakest level.
+ */
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import type { ModelSelectInjected } from '@deepseek-ai/dsh-client-ui-model-selection/client';
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+import { EffortSlider } from './EffortSlider.tsx';
+import type { PickerStore } from './picker-state.ts';
+import { effortChoices, liveReasoning, planEffortCommit, selectionOf, type Selection } from './selection.ts';
+import css from './ModelOptions.module.css';
+
+/** Props of the bridge: menu state, the owning session, and the seat's injected face. */
+export type ModelMenuBridgeProps = PropsRuntime<'conversation.input.model.options'>
+  & PropsLocale<'modelSubmenu'>
+  & Pick<ModelSelectInjected, 'available' | 'directory' | 'select'>
+  & {
+    /** Session whose catalog and picker this menu drives. */
+    readonly sessionId: string;
+    /** Carries the open request to the overlay view. */
+    readonly picker: PickerStore;
+  }
+
+/**
+ * Render the marker, redirect the model cell, and mount the effort slider.
+ * @param props - menu state, session, catalog face, and localized copy.
+ * @returns an inert marker plus the slider while the effort cell is present.
+ */
+export function ModelMenuBridge({
+  sessionId, picker, dismiss, reportFailure, available, directory, select, t,
+}: ModelMenuBridgeProps) {
+  const markerRef = useRef<HTMLSpanElement | null>(null);
+  const sliderRef = useRef<HTMLDivElement | null>(null);
+  const [surface, setSurface] = useState<HTMLElement | null>(null);
+  const [effortRow, setEffortRow] = useState<HTMLElement | null>(null);
+  const [rowLabel, setRowLabel] = useState<string | null>(null);
+
+  const state = useSyncExternalStore(
+    (listener) => directory.subscribe(listener),
+    () => directory.getSnapshot(),
+  );
+  const current = state.current;
+  const reasoning = liveReasoning(state);
+  const levels = useMemo(() => effortChoices(reasoning), [reasoning]);
+  const declared = levels.findIndex((level) => level.effort === reasoning?.defaultEffort);
+  const chosen = current?.reasoningEffort === undefined
+    ? -1
+    : levels.findIndex((level) => level.effort === current.reasoningEffort);
+  // The provider default is a state, not a detent: it is in force whenever the
+  // session carries no explicit level.
+  const defaultActive = current !== null && current.reasoningEffort === undefined;
+  const currentIndex = chosen >= 0 ? chosen : declared >= 0 ? declared : 0;
+  const defaultIndex = declared >= 0 ? declared : 0;
+  const canDefault = !defaultActive;
+  const busy = state.pending !== null;
+  // One detent is not a choice: leave the Host's row exactly as it is.
+  const showSlider = available && levels.length >= 2 && effortRow !== null;
+
+  // The Host rebuilds its cells on every render, so the surface and the effort
+  // cell are re-read after each one; the identity guards keep that from looping.
+  useLayoutEffect(() => {
+    const foundSurface = markerRef.current?.closest('[data-menu-material]');
+    const nextSurface = foundSurface instanceof HTMLElement ? foundSurface : null;
+    if (nextSurface !== surface) setSurface(nextSurface);
+    const cells = nextSurface === null
+      ? []
+      : [...nextSurface.querySelectorAll<HTMLElement>(':scope > button[role="menuitem"]')];
+    const nextRow = cells.length >= 2 ? cells[1] ?? null : null;
+    if (nextRow !== effortRow) setEffortRow(nextRow);
+    const nextLabel = nextRow?.querySelector("span[class*='cellLabel']")?.textContent?.trim() ?? '';
+    if (nextLabel !== (rowLabel ?? '')) setRowLabel(nextLabel);
+  });
+
+  const submit = (selection: Selection | null): void => {
+    if (selection === null) return;
+    void select(selection).then((result) => {
+      if (result === undefined || result.ok) return;
+      reportFailure(result.error.code === 'session/writer-held'
+        ? t('error.sessionInUse')
+        : t('error.action', { message: `${result.error.code}: ${result.error.message}` }));
+    });
+  };
+  const commit = (index: number): void => {
+    const live = selectionOf(state);
+    const level = levels[index];
+    if (live === null || level === undefined) return;
+    submit(planEffortCommit(live, level.effort));
+  };
+  const commitDefault = (): void => {
+    const live = selectionOf(state);
+    if (live === null) return;
+    submit(planEffortCommit(live, undefined));
+  };
+
+  // The Host rebuilds `dismiss` on every render, so the listener reads the
+  // current one through a ref instead of being torn down and reinstalled.
+  const latest = useRef({ sessionId, picker, dismiss, showSlider, canDefault, commitDefault });
+  latest.current = { sessionId, picker, dismiss, showSlider, canDefault, commitDefault };
+
+  useEffect(() => {
+    if (surface === null) return;
+    const redirect = (event: MouseEvent): void => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      const cells = [...surface.querySelectorAll<HTMLElement>(':scope > button[role="menuitem"]')];
+      const modelCell = cells[0];
+      if (modelCell !== undefined && modelCell.contains(target)) {
+        // Capture on the surface runs before the React root's bubble listener, so
+        // stopping here keeps the cell's own drill handler from ever running.
+        event.preventDefault();
+        event.stopPropagation();
+        const request = latest.current;
+        request.dismiss();
+        request.picker.open(request.sessionId);
+        return;
+      }
+      const row = cells[1];
+      if (row === undefined || !row.contains(target) || !latest.current.showSlider) return;
+      // The slider owns its own presses; only the label and the value are inert.
+      if (sliderRef.current?.contains(target) === true) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const label = row.querySelector("span[class*='cellLabel']");
+      if (latest.current.canDefault && label !== null && label.contains(target)) {
+        latest.current.commitDefault();
+        return;
+      }
+      sliderRef.current?.querySelector<HTMLElement>('[role="slider"]')?.focus();
+    };
+    surface.addEventListener('click', redirect, true);
+    return () => {
+      surface.removeEventListener('click', redirect, true);
+    };
+  }, [surface]);
+
+  // The slider takes the whole slack beside the label: the value and the
+  // chevron go, because the level is already written under the composer and the
+  // row no longer drills anywhere. Every write is recorded and put back.
+  useLayoutEffect(() => {
+    if (effortRow === null || !showSlider) return;
+    const label = effortRow.querySelector<HTMLElement>("span[class*='cellLabel']");
+    const value = effortRow.querySelector<HTMLElement>("span[class*='cellValue']");
+    const chevron = effortRow.querySelector<SVGElement>("svg[class*='cellChevron']");
+    const saved = {
+      value: value?.style.display ?? '',
+      chevron: chevron?.style.display ?? '',
+      cursor: label?.style.cursor ?? '',
+      title: label?.getAttribute('title') ?? null,
+    };
+    if (value !== null) value.style.display = 'none';
+    if (chevron !== null) chevron.style.display = 'none';
+    if (label !== null && canDefault) {
+      label.style.cursor = 'pointer';
+      label.title = t('effort.useDefault');
+    }
+    return () => {
+      if (value !== null) value.style.display = saved.value;
+      if (chevron !== null) chevron.style.display = saved.chevron;
+      if (label !== null) {
+        label.style.cursor = saved.cursor;
+        if (saved.title === null) label.removeAttribute('title');
+        else label.title = saved.title;
+      }
+    };
+  }, [effortRow, showSlider, canDefault, t]);
+
+  return <>
+    <span ref={markerRef} hidden />
+    {showSlider && effortRow !== null && createPortal(
+      <div ref={sliderRef} className={css.sliderCell}>
+        <EffortSlider
+          steps={levels}
+          current={currentIndex}
+          defaultActive={defaultActive}
+          defaultIndex={defaultIndex}
+          defaultLabel={t('effort.providerDefault')}
+          busy={busy}
+          label={rowLabel !== null && rowLabel !== '' ? rowLabel : t('effort.label')}
+          onCommit={commit}
+        />
+      </div>,
+      effortRow,
+    )}
+  </>;
+}