@fonlan/dsh-model-router 0.3.4 → 0.3.6

package/src/client/model-seat.tsx

@@ -41,6 +41,34 @@ interface ModelSelection {
   reasoningEffort?: string
 }
 
+/**
+ * Structural subsets of the host model-catalog wire types (declared locally to
+ * avoid pulling a new peer dependency; identical to the host shapes).
+ */
+interface ModelReasoningEffort {
+  id: string
+  name: string
+  description?: string
+}
+
+interface ModelReasoning {
+  efforts: readonly ModelReasoningEffort[]
+  defaultEffort?: string
+}
+
+interface ModelCatalogModel {
+  id: string
+  name: string
+  description?: string
+  reasoning?: ModelReasoning
+}
+
+interface ModelProviderGroup {
+  id: string
+  name: string
+  models: readonly ModelCatalogModel[]
+}
+
 /** The injected business face of the composer model seat (same share the host ModelSelect receives). */
 interface ModelSeatInjected {
   available: boolean
@@ -192,7 +220,7 @@ export function ModelRouterSeat({
   }, [load, modelId, routeModel, t])
 
   // ---- host ModelSelect logic (faithful copy) ----
-  const choices = useMemo(() => directoryState.groups.flatMap(group => group.models.map(model => ({
+  const choices = useMemo(() => directoryState.groups.flatMap((group: ModelProviderGroup) => group.models.map((model: ModelCatalogModel) => ({
     group,
     model,
     selection: {
@@ -207,14 +235,14 @@ export function ModelRouterSeat({
   const effectiveEffort = current?.reasoningEffort ?? reasoning?.defaultEffort
   const effortLabel = reasoning === undefined ? undefined
     : effectiveEffort === undefined ? t('effortProviderDefault')
-    : reasoning.efforts.find(level => level.id === effectiveEffort)?.name ?? effectiveEffort
+    : reasoning.efforts.find((level: ModelReasoningEffort) => level.id === effectiveEffort)?.name ?? effectiveEffort
   const effortChoices = useMemo<Array<{ key: string; effort: string | undefined; label: string; description?: string }>>(() => reasoning === undefined ? [] : [
     ...(reasoning.defaultEffort === undefined ? [{
       key: 'provider-default',
       effort: undefined as string | undefined,
       label: t('effortProviderDefault'),
     }] : []),
-    ...reasoning.efforts.map(effort => ({
+    ...reasoning.efforts.map((effort: ModelReasoningEffort) => ({
       key: `effort:${effort.id}`,
       effort: effort.id,
       label: effort.name,
@@ -456,7 +484,7 @@ export function ModelRouterSeat({
                       <div className="mr-seat-groupTitle" id={headingId}>
                         {group.name}
                       </div>
-                      {group.models.map(model => {
+                      {group.models.map((model: ModelCatalogModel) => {
                         const selected = current?.provider === group.id && current.model === model.id
                         return (
                           <button
@@ -596,31 +624,125 @@ export function ModelRouterSeat({
   )
 }
 
-/** Register the model seat onto the composer's named model slot (priority -1 shadows the host seat). */
+/** The modelDirectories service face (structural subset of the host service). */
+interface ModelDirectoriesFace {
+  directoryFor(sessionId: SessionId): SessionDirectoryFace
+}
+
+/** The sessions service face (structural subset of the host service). */
+interface SessionsFace {
+  subagentAddress(sessionId: SessionId): unknown
+}
+
+/** One session model directory (structural subset of the host ModelDirectory). */
+interface SessionDirectoryFace {
+  store: SnapshotStore<ModelDirectoryState>
+  load(): Promise<unknown>
+  select(selection: ModelSelection): Promise<unknown>
+}
+
+/** The slots service face (structural subset; the register call is typed `never` below). */
+interface SlotsFace {
+  inject(name: string, callback: () => unknown): unknown
+  register(def: unknown, component: unknown): unknown
+}
+
+/** The scope resolved by the seat's inject block. */
+interface SeatScopeFace {
+  modelDirectories: ModelDirectoriesFace
+  sessions: SessionsFace
+  slots: SlotsFace
+}
+
+const EMPTY_DIRECTORY_STATE: ModelDirectoryState = {
+  current: null,
+  routable: null,
+  groups: [],
+  failures: [],
+  status: 'idle',
+  error: null,
+}
+
+/**
+ * Inert face for the pathological case where the session directory cannot be
+ * resolved even after `remote.session` mounted. The seat renders nothing
+ * (available: false), but crucially the slot entry never throws, so it is
+ * never abdicated and the host seat can keep the cell alive on the next
+ * registration pass.
+ */
+const INERT_DIRECTORY_STORE: SnapshotStore<ModelDirectoryState> = {
+  subscribe: () => () => {},
+  getSnapshot: () => EMPTY_DIRECTORY_STATE,
+  update: () => {},
+  set: () => {},
+}
+
+/**
+ * Build the seat face without ever throwing out of the slot `inject` hook.
+ *
+ * The seat registration below depends on `remote.session` (the namespace is
+ * mounted asynchronously at startup), so by the time this runs the host
+ * `modelDirectories.directoryFor(sessionId)` resolves — the original race is
+ * gone by construction. The try/catch here is belt-and-braces: a throwing
+ * inject would permanently abdicate this slot entry in the renderer
+ * (`reportEntryError` with `abdicate` for single slots), after which the host
+ * seat takes over and the Provider row never appears again.
+ */
+function seatFace(
+  models: ModelDirectoriesFace,
+  sessions: SessionsFace,
+  sessionId: SessionId,
+): ModelSeatInjected {
+  let directory: SessionDirectoryFace | null = null
+  try {
+    directory = models.directoryFor(sessionId)
+  } catch {
+    // unknown session / transient teardown: degrade to the inert face
+  }
+  if (directory === null) {
+    return {
+      available: false,
+      directory: INERT_DIRECTORY_STORE,
+      load: () => {},
+      select: () => Promise.resolve(false),
+    }
+  }
+  let available = true
+  try {
+    available = sessions.subagentAddress(sessionId) === undefined
+  } catch {
+    // sessions face not ready; treat as available
+  }
+  return {
+    available,
+    directory: directory.store,
+    load: () => {
+      if (available) directory?.load().catch(() => {})
+    },
+    select: (selection) =>
+      available ? directory!.select(selection).then(() => true, () => false) : Promise.resolve(false),
+  }
+}
+
+/**
+ * Register the model seat onto the composer's named model slot (priority -1
+ * shadows the host seat). The inject block additionally depends on
+ * `remote.session` so the seat registers only after the remote session
+ * namespace has mounted — `directoryFor` can throw while it is still mounting,
+ * and a throwing inject permanently abdicates the entry (the host seat then
+ * wins and the Provider row never appears).
+ */
 export function registerModelRouterSeat(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.model', () => scope.slots.register({
+  ctx.inject(['slots', 'modelDirectories', 'remote.session'], scope => {
+    const face = scope as unknown as SeatScopeFace
+    face.slots.inject('conversation.input.model', () => face.slots.register({
       name: 'conversation.input.model',
       id: 'model-router-model-seat',
       priority: -1,
       label: () => t('seatLabel'),
       locale: LOCALE_NS,
-      inject: (sessionId: SessionId) => {
-        const directory = models.directoryFor(sessionId)
-        const available = sessions.subagentAddress(sessionId) === undefined
-        return {
-          available,
-          directory: directory.store,
-          load: () => {
-            if (available) directory.load().catch(() => {})
-          },
-          select: (selection: ModelSelection) =>
-            available ? directory.select(selection).then(() => true, () => false) : Promise.resolve(false),
-        }
-      },
+      inject: (sessionId: SessionId) => seatFace(face.modelDirectories, face.sessions, sessionId),
     } as never, ModelRouterSeat as never))
   })
 }

package/src/client/{settings-card.css → settings-section.css}

@@ -1,81 +1,41 @@
-/* Model Router settings card — chrome aligned with the built-in plugin cards
-   (设置 → 插件 → 插件配置), theme-consistent via DSW alias variables. */
-.mr-settings-card {
-  border: 1px solid var(--dsw-alias-border-l2, #2a3346);
-  background: var(--dsw-alias-bg-layer-3, #0d1017);
-  border-radius: 12px;
-  list-style: none;
-  transition: border-color .16s, background .16s;
-}
+/* Model Router settings page — the page owns one entry in the settings
+   sidebar and renders its content in the panel's content column. Styles are
+   theme-consistent via DSW alias variables; the page draws its own static
+   header (title plus a one-line summary) over the always-visible controls. */
 
-.mr-settings-card:hover {
-  border-color: var(--dsw-alias-label-dimmed, #4a5468);
-}
-
-.mr-settings-card[data-open] {
-  background: var(--dsw-alias-bg-layer-2, #141a26);
-  border-color: var(--dsw-alias-label-dimmed, #4a5468);
-}
+/* page layout */
 
-.mr-settings-head {
-  appearance: none;
-  width: 100%;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 12px;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
+.mr-page {
   display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 720px;
 }
 
-.mr-settings-head:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4f8cff);
-  outline-offset: -2px;
-}
-
-.mr-settings-head-text {
-  flex-direction: column;
-  flex: 1;
-  gap: 4px;
-  min-width: 0;
+.mr-page-head {
   display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.mr-settings-title {
+.mr-page-title {
+  margin: 0;
   color: var(--dsw-alias-label-primary, #e6e6e6);
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
 }
 
-.mr-settings-sub {
+.mr-page-sub {
+  margin: 0;
   color: var(--dsw-alias-label-tertiary, #8b93a7);
   font-size: 13px;
   line-height: 1.5;
 }
 
-.mr-settings-chevron {
-  color: var(--dsw-alias-label-tertiary, #8b93a7);
-  flex: none;
-  transition: transform .16s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mr-settings-chevron[data-open] {
-  transform: rotate(180deg);
-}
+/* body layout */
 
-.mr-settings-body {
-  border-top: 1px solid var(--dsw-alias-border-l2, #2a3346);
-  margin: 0 16px;
-  padding: 12px 0 8px;
+.mr-body {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -88,7 +48,7 @@
   line-height: 1.5;
 }
 
-/* ── card body: the router controls ─────────────────────────────────────── */
+/* ── page body: the router controls ─────────────────────────────────────── */
 
 .mr-root {
   display: flex;