@fonlan/dsh-model-router 0.1.0 → 0.2.1

package/src/client/api.ts

@@ -14,6 +14,10 @@ export interface RouterModelView {
 }
 
 export interface ModelRouterState {
+  /** Whether the composer quick route-switcher button is enabled. */
+  showQuickSwitch: boolean
+  /** Whether model ids are matched with their leading vendor/ prefix ignored. */
+  ignoreModelIdPrefix: boolean
   providers: RouterProviderView[]
   models: RouterModelView[]
 }
@@ -53,4 +57,8 @@ export const api = {
   reorder: (modelId: string, order: string[]) =>
     call<ModelRouterState>('reorder', { modelId, order }),
   refresh: () => call<ModelRouterState>('refresh'),
+  setShowQuickSwitch: (value: boolean) =>
+    call<ModelRouterState>('set-show-quick-switch', { value }),
+  setIgnoreModelIdPrefix: (value: boolean) =>
+    call<ModelRouterState>('set-ignore-model-id-prefix', { value }),
 }

package/src/client/index.tsx

@@ -1,18 +1,19 @@
 /**
  * @fonlan/dsh-model-router client half: the Model Router settings page plus
- * bilingual dictionaries. The composer model picker needs no client
- * injection — the host catalog already renders the `model-router` group and
- * each model's description carries the active provider.
+ * a quick provider switcher beside DSH's composer model selector.
  */
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type {} from '@deepseek-ai/dsh-client-ui-model-selection/client'
 import { LOCALE_NS, zh, en } from './locales'
 import { makeSettingsSection } from './settings-section'
+import { registerRouteSwitcher } from './route-switcher'
 
 /** Services required before mounting (provided by the client runtime). */
-export const inject = ['slots', 'locale']
+export const inject = ['slots', 'locale', 'modelDirectories', 'sessions']
 
 /** Client plugin body. */
 export function apply(ctx: ClientContext): void {
@@ -32,4 +33,6 @@ export function apply(ctx: ClientContext): void {
       locale: LOCALE_NS,
     }, SettingsSection as never),
   )
+
+  registerRouteSwitcher(ctx)
 }

package/src/client/locales.ts

@@ -19,6 +19,18 @@ export const zh = {
   switchFailed: '切换失败：{message}',
   reorderFailed: '排序失败：{message}',
   providerCount: '{count} 个提供商',
+  routeButtonLabel: '快速切换模型路由',
+  routeButtonTitle: '切换当前模型的提供商',
+  routeButtonAria: '切换当前模型提供商，当前为 {provider}',
+  routeMenuTitle: '{model} · 选择提供商',
+  routeLoading: '加载路由…',
+  unknownProvider: '未知提供商',
+  noCredentialShort: '未配置凭据',
+  globalRouteHint: '切换后对所有会话的后续请求生效',
+  showQuickSwitchLabel: '在输入栏显示快速路由切换按钮',
+  showQuickSwitchDescription: '开启后，当当前模型是 model-router 路由时，在输入框模型选择器右侧显示 provider 快速切换按钮。',
+  ignorePrefixLabel: '匹配时忽略模型 ID 前缀',
+  ignorePrefixDescription: '开启后，deepseek/deepseek-v4-flash 与 deepseek-v4-flash 视为同一模型，统一显示不带前缀的模型 id（默认开启）。',
 }
 
 export const en = {
@@ -36,4 +48,16 @@ export const en = {
   switchFailed: 'Switch failed: {message}',
   reorderFailed: 'Reorder failed: {message}',
   providerCount: '{count} providers',
+  routeButtonLabel: 'Quick model route switcher',
+  routeButtonTitle: 'Switch the current model provider',
+  routeButtonAria: 'Switch current model provider, currently {provider}',
+  routeMenuTitle: '{model} · Choose provider',
+  routeLoading: 'Loading routes…',
+  unknownProvider: 'Unknown provider',
+  noCredentialShort: 'No credentials',
+  globalRouteHint: 'Changes apply to subsequent requests in all sessions',
+  showQuickSwitchLabel: 'Show quick route switcher in the composer',
+  showQuickSwitchDescription: 'When enabled, a provider quick-switch button appears next to the model selector when the current model is a model-router route.',
+  ignorePrefixLabel: 'Ignore model ID prefix when matching',
+  ignorePrefixDescription: 'When enabled, deepseek/deepseek-v4-flash and deepseek-v4-flash are treated as the same model and shown without the prefix (on by default).',
 }

package/src/client/route-switcher.css

@@ -0,0 +1,136 @@
+/* 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

@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useMemo, 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
+
+  const loadRouterState = useCallback(async () => {
+    setRouterLoading(true)
+    try {
+      setRouterState(await api.state())
+      setRouterError(null)
+    } catch (cause) {
+      setRouterError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      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)
+    setRouterState(null)
+    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.
+  useEffect(() => {
+    if (!isRouterModel || modelId === null || directoryState.status !== 'ready') return
+    void loadRouterState()
+  }, [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')
+  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))
+  })
+}

package/src/client/settings-section.css

@@ -13,6 +13,41 @@
   line-height: 20px;
 }
 
+.mr-quick-switch {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-inverted);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-module-platform);
+  cursor: pointer;
+}
+
+.mr-quick-switch input[type="checkbox"] {
+  margin-top: 2px;
+  accent-color: var(--dsw-alias-accent);
+}
+
+.mr-quick-switch-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.mr-quick-switch-label {
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.mr-quick-switch-desc {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
 .mr-toolbar {
   display: flex;
   justify-content: space-between;

package/src/client/settings-section.tsx

@@ -58,6 +58,8 @@ export function makeSettingsSection(ctx: ClientContext): () => JSX.Element {
     const [loading, setLoading] = useState(true)
     const [busyModel, setBusyModel] = useState<string | null>(null)
     const [drag, setDrag] = useState<{ modelId: string; index: number } | null>(null)
+    const [quickSwitchBusy, setQuickSwitchBusy] = useState(false)
+    const [ignorePrefixBusy, setIgnorePrefixBusy] = useState(false)
 
     const load = useCallback(async () => {
       setLoading(true)
@@ -110,11 +112,67 @@ export function makeSettingsSection(ctx: ClientContext): () => JSX.Element {
       }
     }, [t])
 
+    const toggleQuickSwitch = useCallback(async (value: boolean) => {
+      if (state === null) return
+      const previous = state.showQuickSwitch
+      setState(prev => prev === null ? prev : { ...prev, showQuickSwitch: value })
+      setQuickSwitchBusy(true)
+      try {
+        setState(await api.setShowQuickSwitch(value))
+        setError(null)
+      } catch (cause) {
+        setState(prev => prev === null ? prev : { ...prev, showQuickSwitch: previous })
+        setError(cause instanceof Error ? cause.message : String(cause))
+      } finally {
+        setQuickSwitchBusy(false)
+      }
+    }, [state])
+
+    const toggleIgnorePrefix = useCallback(async (value: boolean) => {
+      if (state === null) return
+      const previous = state.ignoreModelIdPrefix
+      setState(prev => prev === null ? prev : { ...prev, ignoreModelIdPrefix: value })
+      setIgnorePrefixBusy(true)
+      try {
+        setState(await api.setIgnoreModelIdPrefix(value))
+        setError(null)
+      } catch (cause) {
+        setState(prev => prev === null ? prev : { ...prev, ignoreModelIdPrefix: previous })
+        setError(cause instanceof Error ? cause.message : String(cause))
+      } finally {
+        setIgnorePrefixBusy(false)
+      }
+    }, [state])
+
     const models = useMemo(() => state?.models ?? [], [state])
 
     return (
       <div className="mr-root">
         <p className="mr-description">{t('settingsDescription')}</p>
+        <label className="mr-quick-switch">
+          <input
+            type="checkbox"
+            checked={state?.showQuickSwitch ?? true}
+            disabled={loading || quickSwitchBusy}
+            onChange={(event) => void toggleQuickSwitch(event.target.checked)}
+          />
+          <span className="mr-quick-switch-copy">
+            <span className="mr-quick-switch-label">{t('showQuickSwitchLabel')}</span>
+            <span className="mr-quick-switch-desc">{t('showQuickSwitchDescription')}</span>
+          </span>
+        </label>
+        <label className="mr-quick-switch">
+          <input
+            type="checkbox"
+            checked={state?.ignoreModelIdPrefix ?? true}
+            disabled={loading || ignorePrefixBusy}
+            onChange={(event) => void toggleIgnorePrefix(event.target.checked)}
+          />
+          <span className="mr-quick-switch-copy">
+            <span className="mr-quick-switch-label">{t('ignorePrefixLabel')}</span>
+            <span className="mr-quick-switch-desc">{t('ignorePrefixDescription')}</span>
+          </span>
+        </label>
         <div className="mr-toolbar">
           <span className="mr-count">{t('modelsCount', { count: models.length })}</span>
           <button type="button" className="mr-button" onClick={() => void load()} disabled={loading}>