@fonlan/dsh-model-router 0.1.0 → 0.2.0

package/lib/index.js

@@ -160,9 +160,17 @@ function setOrder(config, modelId, order, catalogProviderIds) {
 /** Shape-validate an unknown value as a RouterConfigShape (lenient). */
 function normalizeConfig(value) {
 	const models = {};
-	if (typeof value !== "object" || value === null) return { models };
-	const raw = value.models;
-	if (typeof raw !== "object" || raw === null) return { models };
+	if (typeof value !== "object" || value === null) return {
+		models,
+		showQuickSwitch: true
+	};
+	const root = value;
+	const showQuickSwitch = root.showQuickSwitch !== false;
+	const raw = root.models;
+	if (typeof raw !== "object" || raw === null) return {
+		models,
+		showQuickSwitch
+	};
 	for (const [id, entry] of Object.entries(raw)) {
 		if (typeof entry !== "object" || entry === null) continue;
 		const e = entry;
@@ -174,7 +182,10 @@ function normalizeConfig(value) {
 			active
 		};
 	}
-	return { models };
+	return {
+		models,
+		showQuickSwitch
+	};
 }
 //#endregion
 //#region src/server/catalog.ts
@@ -332,11 +343,17 @@ var ModelRouterAdapter = class extends LlmAdapter {
 //#region src/server/service.ts
 const NS = settingsNamespace(ROUTER_SETTINGS_NS);
 /** Settings document schema: one entry per model id. */
-const RouterConfigSchema = z.object({ models: z.dict(z.object({
-	order: z.array(z.string()),
-	active: z.string()
-})) });
-const EMPTY_CONFIG = { models: {} };
+const RouterConfigSchema = z.object({
+	models: z.dict(z.object({
+		order: z.array(z.string()),
+		active: z.string()
+	})),
+	showQuickSwitch: z.boolean()
+});
+const EMPTY_CONFIG = {
+	models: {},
+	showQuickSwitch: true
+};
 var ModelRouterService = class {
 	ctx;
 	cached = {
@@ -422,7 +439,10 @@ var ModelRouterService = class {
 		}
 		if (!changed) return;
 		try {
-			await this.scope.replace({ models: next });
+			await this.scope.replace({
+				models: next,
+				showQuickSwitch: this.config().showQuickSwitch
+			});
 		} catch (error) {
 			this.ctx.logger.warn(`model-router: reconcile persist failed: ${error instanceof Error ? error.message : String(error)}`);
 		}
@@ -440,6 +460,7 @@ var ModelRouterService = class {
 		const names = catalog.providerNames;
 		const creds = catalog.credentialConfigured;
 		return {
+			showQuickSwitch: config.showQuickSwitch,
 			providers: catalog.providers.map((provider) => ({
 				id: provider.id,
 				name: names.get(provider.id) ?? provider.id,
@@ -482,9 +503,22 @@ var ModelRouterService = class {
 		if (!changed) return;
 		await this.persist(models);
 	}
+	/** Toggle the composer quick route-switcher button (global, persisted). */
+	async setShowQuickSwitch(value) {
+		if (this.scope === void 0) throw new Error("model-router: settings service is not available in this profile");
+		const current = this.config();
+		if (current.showQuickSwitch === value) return;
+		await this.scope.replace({
+			models: current.models,
+			showQuickSwitch: value
+		});
+	}
 	async persist(models) {
 		if (this.scope === void 0) throw new Error("model-router: settings service is not available in this profile");
-		await this.scope.replace({ models });
+		await this.scope.replace({
+			models,
+			showQuickSwitch: this.config().showQuickSwitch
+		});
 	}
 };
 //#endregion
@@ -599,6 +633,11 @@ function registerApiRoutes(ctx, service) {
 		await service.refreshAndReconcile();
 		return service.state();
 	});
+	route("set-show-quick-switch", async (p) => {
+		if (typeof p.value !== "boolean") throw new Error("value 必须是布尔值");
+		await service.setShowQuickSwitch(p.value);
+		return service.state();
+	});
 	return () => {
 		for (const dispose of disposers) dispose();
 	};

package/lib/types/server/service.d.ts

@@ -13,6 +13,8 @@ export declare const NS: import("@deepseek-ai/dsh-settings").SettingsNamespace;
 export declare const RouterConfigSchema: z<RouterConfigShape>;
 /** The settings-page state view served by the API. */
 export interface ModelRouterState {
+    /** Whether the composer quick route-switcher button is enabled. */
+    showQuickSwitch: boolean;
     providers: Array<{
         id: string;
         name: string;
@@ -62,5 +64,7 @@ export declare class ModelRouterService implements RouterFacts {
     switchActive(modelId: string, providerId: string): Promise<void>;
     /** Replace the preference order for one model (active left untouched). */
     reorder(modelId: string, order: string[]): Promise<void>;
+    /** Toggle the composer quick route-switcher button (global, persisted). */
+    setShowQuickSwitch(value: boolean): Promise<void>;
     private persist;
 }

package/lib/types/shared/config.d.ts

@@ -51,6 +51,12 @@ export interface RouterModelConfig {
 /** 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
+     * globally; absent/unknown documents normalize to `true`.
+     */
+    showQuickSwitch: boolean;
 }
 export declare const ROUTER_PROVIDER_ID = "model-router";
 export declare const ROUTER_SETTINGS_NS = "model-router";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fonlan/dsh-model-router",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "DSH plugin: a virtual model-router provider that aggregates every configured provider and model, routes each request to the model's currently active provider, and ships a settings page for per-model provider ordering and switching.",
   "license": "MIT",
   "repository": {
@@ -61,7 +61,9 @@
         "@deepseek-ai/dsh-client-locale",
         "@deepseek-ai/dsh-client-ui-slots",
         "@deepseek-ai/dsh-client-ui-primitives",
-        "@deepseek-ai/dsh-client-ui-settings"
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-model-selection"
       ]
     }
   },
@@ -75,6 +77,8 @@
     "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-model-selection": "^0.1.0-rc.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -93,6 +97,8 @@
     "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-model-selection": "^0.1.0-rc.6",
     "vitest": "^3.2.0"
   },
   "packageManager": "pnpm@11.21.0"

package/src/client/api.ts

@@ -14,6 +14,8 @@ export interface RouterModelView {
 }
 
 export interface ModelRouterState {
+  /** Whether the composer quick route-switcher button is enabled. */
+  showQuickSwitch: boolean
   providers: RouterProviderView[]
   models: RouterModelView[]
 }
@@ -53,4 +55,6 @@ 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 }),
 }

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,16 @@ export const zh = {
   switchFailed: '切换失败：{message}',
   reorderFailed: '排序失败：{message}',
   providerCount: '{count} 个提供商',
+  routeButtonLabel: '快速切换模型路由',
+  routeButtonTitle: '切换当前模型的提供商',
+  routeButtonAria: '切换当前模型提供商，当前为 {provider}',
+  routeMenuTitle: '{model} · 选择提供商',
+  routeLoading: '加载路由…',
+  unknownProvider: '未知提供商',
+  noCredentialShort: '未配置凭据',
+  globalRouteHint: '切换后对所有会话的后续请求生效',
+  showQuickSwitchLabel: '在输入栏显示快速路由切换按钮',
+  showQuickSwitchDescription: '开启后，当当前模型是 model-router 路由时，在输入框模型选择器右侧显示 provider 快速切换按钮。',
 }
 
 export const en = {
@@ -36,4 +46,14 @@ 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.',
 }

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;