@fonlan/dsh-model-router 0.3.1 → 0.3.3

package/src/shared/config.ts

@@ -64,12 +64,28 @@ export interface RouterModelConfig {
   active: string
 }
 
+/**
+ * How the router orders the model list it advertises to the host model
+ * picker (the `model-router` group in DSH's model selection box).
+ *
+ * - `custom`: the explicit `modelOrder` array wins; models absent from it are
+ *   appended in catalog (first-seen) order.
+ * - `name`: models sorted by their display name (active provider's name),
+ *   falling back to the merged id.
+ * - `recent`: models sorted by most-recently-used first (timestamp desc);
+ *   never-used models come last in catalog order.
+ *
+ * Absent/unknown documents normalize to `custom` (the pre-existing catalog
+ * order, so upgrading is a no-op until the user changes it).
+ */
+export type ModelSortMode = 'custom' | 'name' | 'recent'
+
 /** The whole router config document. */
 export interface RouterConfigShape {
   models: Record<string, RouterModelConfig>
   /**
-   * Whether the quick route-switcher button is shown beside the composer
-   * model selector (settings → 模型路由 → 显示快速路由切换按钮). Stored
+   * Whether the provider switching entry is shown inside the composer model
+   * picker menu (settings → 模型路由 → 在模型选择菜单中显示提供商切换). Stored
    * globally; absent/unknown documents normalize to `true`.
    */
   showQuickSwitch: boolean
@@ -81,6 +97,23 @@ export interface RouterConfigShape {
    * `true`.
    */
   ignoreModelIdPrefix: boolean
+  /**
+   * The model-list display order mode (settings → 模型路由 → 模型显示顺序).
+   * Absent/unknown documents normalize to `custom`.
+   */
+  modelSort: ModelSortMode
+  /**
+   * Explicit model id order for `custom` mode, in display order. Kept
+   * reconciled against the catalog (vanished ids pruned, new ids appended).
+   * Absent/unknown documents normalize to `[]`.
+   */
+  modelOrder: string[]
+  /**
+   * Merged model id → last-use epoch millis, for `recent` mode. Written by
+   * the router adapter whenever a model request streams. Absent/unknown
+   * documents normalize to `{}`.
+   */
+  recentlyUsed: Record<string, number>
 }
 
 export const ROUTER_PROVIDER_ID = 'model-router'
@@ -152,6 +185,59 @@ export function displayProvider(
   return merged.providers.find(p => p.provider === active) ?? merged.providers[0]
 }
 
+/** The display name a merged model advertises (active provider's name). */
+export function displayNameOf(
+  model: MergedModel,
+  config: RouterConfigShape,
+): string {
+  const ids = model.providers.map(provider => provider.provider)
+  const active = resolveActive(config, model.id, ids)
+  return displayProvider(model, active ?? undefined)?.name ?? model.id
+}
+
+/**
+ * Order the merged catalog the way the model picker should list it, per the
+ * configured `modelSort` mode. Always returns a permutation of `models`
+ * (never drops or duplicates entries).
+ *
+ * - `custom`: `config.modelOrder` first (in stored order), then any model not
+ *   present in it, in catalog order.
+ * - `name`: display-name ascending (numeric-aware, case-insensitive), ties
+ *   keep catalog order (stable sort).
+ * - `recent`: most-recently-used first; never-used models sink to the tail in
+ *   catalog order. Ties (equal timestamps, or both unused) keep catalog
+ *   order (stable sort).
+ */
+export function sortModelsForList(
+  models: readonly MergedModel[],
+  config: RouterConfigShape,
+): MergedModel[] {
+  if (config.modelSort === 'name') {
+    const byName = new Map(models.map(model => [model, displayNameOf(model, config)]))
+    return [...models].sort((left, right) =>
+      byName.get(left)!.localeCompare(byName.get(right)!, undefined, { numeric: true, sensitivity: 'base' }),
+    )
+  }
+  if (config.modelSort === 'recent') {
+    const recent = config.recentlyUsed ?? {}
+    return [...models].sort((left, right) =>
+      (recent[right.id] ?? -Infinity) - (recent[left.id] ?? -Infinity),
+    )
+  }
+  // custom: explicit order first (deduped), then the catalog-order tail
+  const listed: MergedModel[] = []
+  const seen = new Set<string>()
+  for (const id of config.modelOrder ?? []) {
+    if (seen.has(id)) continue
+    const model = models.find(candidate => candidate.id === id)
+    if (model === undefined) continue
+    seen.add(id)
+    listed.push(model)
+  }
+  const tail = models.filter(model => !seen.has(model.id))
+  return [...listed, ...tail]
+}
+
 /** Initial config for a model the user never configured: first in order wins. */
 export function initialConfigFor(providerIds: readonly string[]): RouterModelConfig | null {
   if (providerIds.length === 0) return null
@@ -256,11 +342,14 @@ function sameModels(a: Record<string, RouterModelConfig>, b: Record<string, Rout
  * for `active`, and `order` becomes the deduped union in exact-key-first
  * order. Stored keys no longer mapping to any merged model are dropped (this
  * also covers turning the flag off — split models re-initialize fresh).
+ *
+ * `modelOrder` (custom display order) is reconciled the same way: vanished
+ * ids are pruned, newly discovered models are appended in catalog order.
  */
 export function reconcileConfig(
   config: RouterConfigShape,
   models: readonly MergedModel[],
-): { models: Record<string, RouterModelConfig>; changed: boolean } {
+): { models: Record<string, RouterModelConfig>; modelOrder: string[] | undefined; changed: boolean } {
   // stored key → merged id it belongs to (exact key wins; prefixed raw keys
   // map to their stripped merged id only while the flag is on)
   const keyToMerged = new Map<string, string>()
@@ -306,7 +395,31 @@ export function reconcileConfig(
     if (entry !== undefined) next[model.id] = entry
   }
 
-  return { models: next, changed: !sameModels(next, config.models) }
+  // Reconcile the custom display order against the live catalog: prune
+  // vanished ids, append newly discovered models in catalog order. Documents
+  // that predate the field (modelOrder undefined) keep it absent — the
+  // service's normalizeConfig materializes it on the next write, and an old
+  // document must not report drift merely because the field is missing.
+  const storedOrder = config.modelOrder
+  let modelOrder: string[] | undefined
+  let orderChanged = false
+  if (storedOrder !== undefined) {
+    const catalogIds = new Set(models.map(model => model.id))
+    modelOrder = storedOrder.filter(id => catalogIds.has(id))
+    orderChanged = modelOrder.length !== storedOrder.length
+    for (const model of models) {
+      if (!modelOrder.includes(model.id)) {
+        modelOrder.push(model.id)
+        orderChanged = true
+      }
+    }
+  }
+
+  return {
+    models: next,
+    modelOrder,
+    changed: !sameModels(next, config.models) || orderChanged,
+  }
 }
 
 /** Switch a model's active provider (no-op when already active). */
@@ -354,13 +467,34 @@ export function setOrder(
 export function normalizeConfig(value: unknown): RouterConfigShape {
   const models: Record<string, RouterModelConfig> = {}
   if (typeof value !== 'object' || value === null) {
-    return { models, showQuickSwitch: true, ignoreModelIdPrefix: true }
+    return { models, showQuickSwitch: true, ignoreModelIdPrefix: true, modelSort: 'custom', modelOrder: [], recentlyUsed: {} }
+  }
+  const root = value as {
+    models?: unknown
+    showQuickSwitch?: unknown
+    ignoreModelIdPrefix?: unknown
+    modelSort?: unknown
+    modelOrder?: unknown
+    recentlyUsed?: unknown
   }
-  const root = value as { models?: unknown; showQuickSwitch?: unknown; ignoreModelIdPrefix?: unknown }
   const showQuickSwitch = root.showQuickSwitch !== false
   const ignoreModelIdPrefix = root.ignoreModelIdPrefix !== false
+  const modelSort: ModelSortMode = root.modelSort === 'name' || root.modelSort === 'recent'
+    ? root.modelSort
+    : 'custom'
+  const modelOrder = Array.isArray(root.modelOrder)
+    ? root.modelOrder.filter((x): x is string => typeof x === 'string')
+    : []
+  const recentlyUsed: Record<string, number> = {}
+  if (typeof root.recentlyUsed === 'object' && root.recentlyUsed !== null) {
+    for (const [id, ts] of Object.entries(root.recentlyUsed as Record<string, unknown>)) {
+      if (typeof ts === 'number' && Number.isFinite(ts)) recentlyUsed[id] = ts
+    }
+  }
   const raw = root.models
-  if (typeof raw !== 'object' || raw === null) return { models, showQuickSwitch, ignoreModelIdPrefix }
+  if (typeof raw !== 'object' || raw === null) {
+    return { models, showQuickSwitch, ignoreModelIdPrefix, modelSort, modelOrder, recentlyUsed }
+  }
   for (const [id, entry] of Object.entries(raw as Record<string, unknown>)) {
     if (typeof entry !== 'object' || entry === null) continue
     const e = entry as { order?: unknown; active?: unknown }
@@ -369,5 +503,5 @@ export function normalizeConfig(value: unknown): RouterConfigShape {
     if (active === '') continue
     models[id] = { order, active }
   }
-  return { models, showQuickSwitch, ignoreModelIdPrefix }
+  return { models, showQuickSwitch, ignoreModelIdPrefix, modelSort, modelOrder, recentlyUsed }
 }

package/src/client/route-switcher.css

@@ -1,136 +0,0 @@
-/* Quick provider route control beside DSH's composer model seat. */
-.mr-route-anchor {
-  /* Menu's wrapper span: never let the row crush the trigger. */
-  flex: none;
-  min-width: 0;
-}
-
-.mr-route-trigger {
-  min-width: 0;
-  max-width: 180px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 6px;
-  border: none;
-  border-radius: 24px;
-  color: var(--dsw-alias-label-secondary);
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  outline: none;
-}
-
-.mr-route-trigger:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.mr-route-trigger:focus-visible {
-  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
-}
-
-.mr-route-trigger:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-  opacity: 0.7;
-}
-
-.mr-route-trigger-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mr-route-trigger-chevron {
-  color: var(--dsw-alias-label-caption);
-  flex: none;
-  transition: transform 0.12s;
-}
-
-.mr-route-trigger[aria-expanded="true"] .mr-route-trigger-chevron {
-  transform: rotate(180deg);
-}
-
-.mr-route-item-copy {
-  min-width: 0;
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-}
-
-.mr-route-item-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mr-route-item-note {
-  flex: none;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 11px;
-  line-height: 16px;
-}
-
-/*
- * Mobile portrait: the composer row is an inline-size container. Keep the
- * fixed control row intact — attachment, permission, provider (icon-only),
- * context meter, send — and let the model seat absorb the remaining width.
- * The breakpoint matches DSH's own narrow-composer rule (<=460px).
- */
-@container (width <= 460px) {
-  .mr-route-anchor {
-    flex: 0 0 auto;
-  }
-
-  .mr-route-trigger {
-    /* The trigger now carries globe + chevron, so let it size naturally
-       instead of forcing a 28px circle that could overflow the row. */
-    height: 28px;
-    padding: 4px 6px;
-    justify-content: center;
-    border-radius: 999px;
-  }
-
-  /*
-   * Make the composer's trailing group (the parent of our [data-slot] right
-   * wrapper) shrinkable on narrow rows so the globe/chevron trigger never
-   * spills left over the permission control. The model seat inside it
-   * absorbs the compression (flex 1 1 0, min-width 0 below).
-   */
-  div:has(> [data-slot="conversation.input.right"]) {
-    flex: 1 1 auto;
-    min-width: 0;
-    justify-content: flex-end;
-    /* Mirror the trailing group's internal gap (12px) so the provider
-       trigger has equal spacing to the permission button on its left and
-       the model seat on its right. */
-    margin-left: 12px;
-  }
-
-  .mr-route-trigger-label {
-    display: none;
-  }
-
-  /*
-   * The model seat: each slot is wrapped in a display:contents
-   * [data-slot] div, so the ModelSelect root div (the real flex item of the
-   * composer row) is [data-slot="conversation.input.model"] > *. Give it
-   * the remaining row width; the other controls keep fixed sizes.
-   */
-  [data-slot="conversation.input.right"] + [data-slot="conversation.input.model"] > * {
-    flex: 1 1 0;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  [data-slot="conversation.input.right"] + [data-slot="conversation.input.model"] [aria-haspopup="menu"] {
-    width: 100%;
-    max-width: 100%;
-  }
-}

package/src/client/route-switcher.tsx

@@ -1,277 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
-import type { ClientContext, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
-import type { ModelDirectoryState } from '@deepseek-ai/dsh-client-ui-model-selection/client'
-import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import { IconChevronDownOutline14, IconGlobeOutline14, Menu, type MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
-import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
-import type {} from '@deepseek-ai/dsh-client-ui-model-selection/client'
-import { api, type ModelRouterState, type RouterModelView } from './api'
-import { LOCALE_NS } from './locales'
-import './route-switcher.css'
-
-const ROUTER_PROVIDER_ID = 'model-router'
-
-interface RouteSwitcherInjected {
-  available: boolean
-  directory: SnapshotStore<ModelDirectoryState>
-  load: () => void
-}
-
-type RouteSwitcherProps = PropsRuntime<'conversation.input.right'>
-  & PropsLocale<typeof LOCALE_NS>
-  & RouteSwitcherInjected
-
-type RouteProvider = RouterModelView['providers'][number]
-
-/**
- * The quick route switcher lives beside DSH's model seat in the composer row.
- * It reads the same per-session model directory as the host model picker, but
- * only appears when the selected model is the virtual model-router route.
- */
-export function RouteSwitcher({
-  session,
-  available,
-  directory,
-  load,
-  t,
-}: RouteSwitcherProps): JSX.Element | null {
-  const directoryState = useSyncExternalStore(
-    onChange => directory.subscribe(onChange),
-    () => directory.getSnapshot(),
-    () => directory.getSnapshot(),
-  )
-  const current = directoryState.current
-  const [routerState, setRouterState] = useState<ModelRouterState | null>(null)
-  const [routerLoading, setRouterLoading] = useState(false)
-  const [routerError, setRouterError] = useState<string | null>(null)
-  const [open, setOpen] = useState(false)
-  const [busyProvider, setBusyProvider] = useState<string | null>(null)
-
-  const isRouterModel = available && current?.provider === ROUTER_PROVIDER_ID
-  const modelId = isRouterModel ? current.model : null
-
-  /**
-   * Fetch the router state. `silent` skips the busy state: background
-   * refreshes (directory-ready, model switch) should never gray out the
-   * button — only the initial load and explicit user actions do.
-   */
-  const loadRouterState = useCallback(async (silent = false) => {
-    if (!silent) setRouterLoading(true)
-    try {
-      setRouterState(await api.state())
-      setRouterError(null)
-    } catch (cause) {
-      setRouterError(cause instanceof Error ? cause.message : String(cause))
-    } finally {
-      if (!silent) setRouterLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!available) return
-    load()
-  }, [available, load])
-
-  // Fetch the global toggle (and the model's provider list) on mount too, so a
-  // "hide quick switcher" setting applies even before the model directory
-  // settles. The button stays visible while the value is unknown (default on).
-  useEffect(() => {
-    if (!available) return
-    void loadRouterState()
-  }, [available])
-
-  useEffect(() => {
-    setOpen(false)
-    setBusyProvider(null)
-    // Keep the last-known router state across model switches: the global
-    // provider count stays valid while the per-model row refetches, so a
-    // single-provider router hides the button without a loading flash.
-    setRouterError(null)
-  }, [modelId])
-
-  // The model-selection directory is refreshed when another session changes
-  // the router settings document. Re-read the global router state after that
-  // refresh so this button never shows a stale active provider. Include the
-  // model id: switching between two router models can leave the directory in
-  // the same ready state while changing the API row we need to display.
-  //
-  // This refresh is debounced and silent: directory refreshes fire in bursts
-  // (each settings change re-loads it), and the whole point of the silent
-  // mode is that background refreshes never gray out the button.
-  const refreshTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  useEffect(() => {
-    if (!isRouterModel || modelId === null || directoryState.status !== 'ready') return
-    if (refreshTimer.current !== null) clearTimeout(refreshTimer.current)
-    refreshTimer.current = setTimeout(() => {
-      refreshTimer.current = null
-      void loadRouterState(true)
-    }, 300)
-    return () => {
-      if (refreshTimer.current !== null) clearTimeout(refreshTimer.current)
-      refreshTimer.current = null
-    }
-  }, [directoryState.status, isRouterModel, loadRouterState, modelId])
-
-  const routeModel = useMemo(
-    () => modelId === null
-      ? undefined
-      : routerState?.models.find(model => model.id === modelId),
-    [modelId, routerState],
-  )
-
-  const providers = useMemo(() => {
-    if (routeModel === undefined) return []
-    const byId = new Map(routeModel.providers.map(provider => [provider.id, provider]))
-    const ordered = routeModel.order
-      .map(id => byId.get(id))
-      .filter((provider): provider is RouteProvider => provider !== undefined)
-    const seen = new Set(ordered.map(provider => provider.id))
-    return [...ordered, ...routeModel.providers.filter(provider => !seen.has(provider.id))]
-  }, [routeModel])
-
-  const switchProvider = useCallback(async (providerId: string) => {
-    if (modelId === null || routeModel === undefined || routeModel.active === providerId) {
-      setOpen(false)
-      return
-    }
-    setBusyProvider(providerId)
-    try {
-      const next = await api.switchActive(modelId, providerId)
-      setRouterState(next)
-      setRouterError(null)
-      setOpen(false)
-      // The model directory also listens for settings updates, but an explicit
-      // refresh keeps the host model picker description in sync immediately.
-      load()
-    } catch (cause) {
-      setRouterError(t('switchFailed', { message: cause instanceof Error ? cause.message : String(cause) }))
-    } finally {
-      setBusyProvider(null)
-    }
-  }, [load, modelId, routeModel, t])
-
-  if (session.removed || !isRouterModel) return null
-  if (routerState?.showQuickSwitch === false) return null
-
-  const activeProvider = providers.find(provider => provider.id === routeModel?.active)
-  const activeName = activeProvider?.name ?? routeModel?.active ?? t('routeLoading')
-  // Nothing to switch between: hide when the router serves fewer than two
-  // providers in total (known as soon as the global state resolves, even
-  // while the per-model row is still loading), or when the current model
-  // is served by a single provider.
-  if (routerState !== null && routerState.providers.length < 2) return null
-  if (routeModel !== undefined && providers.length < 2) return null
-
-  const menuItems: MenuEntry[] = routeModel === undefined
-    ? [{
-        type: 'label',
-        id: 'route-status',
-        text: routerError ?? t('routeLoading'),
-      }]
-    : [
-        {
-          type: 'label',
-          id: 'route-model',
-          text: t('routeMenuTitle', { model: modelId }),
-        },
-        ...providers.map(provider => ({
-          id: provider.id,
-          label: (
-            <span className="mr-route-item-copy">
-              <span className="mr-route-item-name">{provider.name}</span>
-              {!provider.credentialConfigured && (
-                <span className="mr-route-item-note">{t('noCredentialShort')}</span>
-              )}
-            </span>
-          ),
-          disabled: !provider.credentialConfigured || busyProvider !== null,
-        })),
-        ...(routerError === null ? [] : [{
-          id: 'route-error',
-          label: routerError,
-          disabled: true,
-          danger: true,
-        }]),
-      ]
-
-  return (
-    <Menu
-      className="mr-route-anchor"
-      open={open}
-      side="top"
-      align="end"
-      portal
-      compact
-      dense
-      items={menuItems}
-      selectedId={routeModel?.active ?? undefined}
-      onSelect={id => {
-        if (id === 'route-error' || routeModel === undefined) {
-          void loadRouterState()
-          load()
-          return
-        }
-        void switchProvider(id)
-      }}
-      onClose={() => setOpen(false)}
-      footer={[
-        {
-          type: 'label',
-          id: 'route-global-hint',
-          text: t('globalRouteHint'),
-        },
-      ]}
-      anchor={(
-        <button
-          type="button"
-          className="mr-route-trigger"
-          aria-label={t('routeButtonAria', { provider: activeName })}
-          aria-haspopup="menu"
-          aria-expanded={open}
-          disabled={routerLoading || busyProvider !== null}
-          onClick={() => {
-            setOpen(value => !value)
-            if (!open) {
-              void loadRouterState()
-              load()
-            }
-          }}
-          title={t('routeButtonTitle')}
-        >
-          <IconGlobeOutline14 />
-          <span className="mr-route-trigger-label">{activeName}</span>
-          <span className="mr-route-trigger-chevron" aria-hidden>
-            <IconChevronDownOutline14 />
-          </span>
-        </button>
-      )}
-    />
-  )
-}
-
-/** Register the quick route switcher into the composer right-side tool row. */
-export function registerRouteSwitcher(ctx: ClientContext): void {
-  const t = ctx.locale.bind(LOCALE_NS)
-  ctx.inject(['slots', 'modelDirectories'], scope => {
-    const models = scope.modelDirectories
-    const sessions = scope.sessions
-    scope.slots.inject('conversation.input.right', () => scope.slots.register({
-      name: 'conversation.input.right',
-      id: 'model-router-route-switcher',
-      order: 100,
-      label: () => t('routeButtonLabel'),
-      locale: LOCALE_NS,
-      inject: (sessionId) => {
-        const directory = models.directoryFor(sessionId)
-        const available = sessions.subagentAddress(sessionId) === undefined
-        return {
-          available,
-          directory: directory.store,
-          load: () => {
-            if (available) directory.load().catch(() => {})
-          },
-        }
-      },
-    }, RouteSwitcher as never))
-  })
-}