@fonlan/dsh-model-router 0.3.0 → 0.3.3

package/src/client/route-switcher.tsx

@@ -1,252 +0,0 @@
-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

@@ -1,245 +0,0 @@
-/* Model Router settings page — theme-consistent via DSW alias variables. */
-.mr-root {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 4px 0 24px;
-}
-
-.mr-description {
-  margin: 0;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 13px;
-  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;
-  align-items: center;
-}
-
-.mr-count {
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.mr-button {
-  color: var(--dsw-alias-label-primary);
-  cursor: pointer;
-  background: var(--dsw-alias-interactive-bg-hover);
-  border: 1px solid var(--dsw-alias-border-l3);
-  border-radius: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  padding: 3px 10px;
-}
-
-.mr-button:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-  filter: brightness(1.08);
-}
-
-.mr-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.mr-error {
-  background: var(--dsw-alias-interactive-bg-hover-danger);
-  color: var(--dsw-alias-state-error-primary);
-  border-radius: 8px;
-  padding: 7px 8px;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.mr-empty {
-  color: var(--dsw-alias-label-tertiary);
-  padding: 16px 0;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.mr-models {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.mr-card {
-  border: 1px solid var(--dsw-alias-border-inverted);
-  border-radius: 12px;
-  padding: 10px 12px;
-  background: var(--dsw-alias-bg-module-platform);
-  transition: opacity 0.12s;
-}
-
-.mr-card-busy {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.mr-card-header {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-}
-
-.mr-model-name {
-  color: var(--dsw-alias-label-primary);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-.mr-model-id {
-  color: var(--dsw-alias-label-tertiary);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  line-height: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-  flex: 1;
-}
-
-.mr-provider-count {
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
-  line-height: 18px;
-  flex: none;
-}
-
-.mr-drag-hint {
-  margin: 2px 0 6px;
-  color: var(--dsw-alias-label-caption);
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.mr-providers {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.mr-provider {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 2px 8px 2px 4px;
-}
-
-.mr-provider-active {
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-color: var(--dsw-alias-border-l3);
-}
-
-.mr-provider-nocred {
-  opacity: 0.55;
-}
-
-.mr-provider-drop {
-  border-color: var(--dsw-alias-border-brand);
-}
-
-.mr-grip {
-  color: var(--dsw-alias-label-caption);
-  cursor: grab;
-  font-size: 12px;
-  line-height: 20px;
-  flex: none;
-  user-select: none;
-}
-
-.mr-grip:active {
-  cursor: grabbing;
-}
-
-.mr-provider-button {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  color: var(--dsw-alias-label-primary);
-  background: none;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font: inherit;
-  padding: 4px 0;
-}
-
-.mr-provider-button:disabled {
-  cursor: default;
-}
-
-.mr-provider-name {
-  font-size: 13px;
-  line-height: 20px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.mr-provider-nocred-label {
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
-  line-height: 18px;
-  flex: none;
-}
-
-.mr-active-badge {
-  flex: none;
-  color: var(--dsw-alias-label-inverted, #fff);
-  background: var(--dsw-alias-border-brand, #4d6bfe);
-  border-radius: 999px;
-  font-size: 11px;
-  line-height: 16px;
-  padding: 0 8px;
-}