feat(web): align the model catalog with the pi-ai provider form

Both editors live in `ui-models` and list the same thing, so they now share one row shape rather than diverging when #1368 lands: a bordered entry per model, id and display name on the row, and the capacities behind the row's own disclosure. The context window is joined there by the per-model output cap the adapter just gained; both read a decimal K/M suffix. The shared class names carry this file's token spellings, not that branch's. `--dsw-alias-border-subtle`, `--dsw-alias-text-tertiary`, and `--dsw-alias-text-primary` are undeclared, so they resolve to the light-mode literals in their fallback slots — the defect this section was moved off. A styles test now rejects any `--dsw-*` name the token sheet does not declare, so the next editor to name one fails instead of shipping a light-only surface. The keystroke buffer is now per capacity field rather than per row, since a row holds two of them.
2026-08-04 14:53:17 +08:00
parent 1d2ea70e9b
commit 17b480de51
14 changed files with 400 additions and 204 deletions
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-models/README.md
-README.md: 6ce66b5e0614fc2b6820c5d95f294fcc1a30d4de
-README.zh.md: 0a28aa627d4d0c8dd54cffe690d334d4e10fa69d
+README.md: d403b15247173e6290214eeae7a401851e835700
+README.zh.md: adb37bb25420bf4e038153ba8a5c213b8a993791
@@ -8,7 +8,7 @@ Rows are the *configured* providers (their profile resolves in the owning namesp

 The DeepSeek step projects `deepseek-official` readiness from that same joined snapshot after earlier onboarding pages complete. It recognizes the official adapter through its `llm-deepseek` configurable-provider declaration, so an undeclared live route with the same provider id is not treated as repairable configuration. A configured literal `apiKey` secret sidecar or configured credential reference completes the step without rendering, including a read-only launch-environment credential. Only a mounted, active adapter with a missing writable reference shows the page that opens Settings on Models, whose existing setup card exclusively owns key input and `credentials.set`; the step never holds a secret. An absent adapter, inactive route, failed join, read-only deployment, or unusable settings or credential capability completes the step without rendering so onboarding cannot block the product; Models remains the diagnostic surface.

-Every edit lands as `settings.mutate` path ops against the stored section — a set per changed field, an unset per cleared one, and a single unset for a deleted provider row. The page only ever holds the REDACTED descriptor, so it names the fields it can see rather than rebuilding a section: a stored literal secret it never received is mentioned by no op and survives. DeepSeek's `models` is one replace-by-value array: the editor shows inherited effective rows until the first model edit materializes the complete array in the user layer, while reset unsets that override. A context window is typed as a count with an optional decimal `K` or `M` suffix (`256K`, `1M`; `1M` is 1000K) and stored as the plain count, spelled back in the shortest form that round-trips. Empty ids, duplicate ids, empty explicit names, and unreadable, non-positive, or fractional context windows fail before any write. Each write carries the `revision` the card opened at, so a concurrent write from another tab or an external `settings.yaml` edit is refused as `settings-conflict` and the card asks the user to reopen instead of replaying its stale snapshot. The page refetches on the pushed invalidations (`settings/changed`, `credentials/changed`, `models/changed`, and `connection/reset`) once it has loaded, so an external `settings.yaml` edit, a second tab, or a settings-born route converges without polling.
+Every edit lands as `settings.mutate` path ops against the stored section — a set per changed field, an unset per cleared one, and a single unset for a deleted provider row. The page only ever holds the REDACTED descriptor, so it names the fields it can see rather than rebuilding a section: a stored literal secret it never received is mentioned by no op and survives. DeepSeek's `models` is one replace-by-value array: the editor shows inherited effective rows until the first model edit materializes the complete array in the user layer, while reset unsets that override. A row carries the model id and display name; its context window and output cap sit behind the row's own disclosure, the same shape the pi-ai provider form uses. Either capacity is typed as a count with an optional decimal `K` or `M` suffix (`256K`, `1M`; `1M` is 1000K) and stored as the plain count, spelled back in the shortest form that round-trips. Empty ids, duplicate ids, empty explicit names, and unreadable, non-positive, or fractional capacities fail before any write. Each write carries the `revision` the card opened at, so a concurrent write from another tab or an external `settings.yaml` edit is refused as `settings-conflict` and the card asks the user to reopen instead of replaying its stale snapshot. The page refetches on the pushed invalidations (`settings/changed`, `credentials/changed`, `models/changed`, and `connection/reset`) once it has loaded, so an external `settings.yaml` edit, a second tab, or a settings-born route converges without polling.

 ## Model Experience

@@ -8,7 +8,7 @@

 前序首次使用引导页面完成后，DeepSeek 步骤会从同一个联接快照得出 `deepseek-official` 的就绪状态。它通过 `llm-deepseek` 的可配置提供方声明识别官方适配器，因此同 id 但未声明的存活路由不属于可修复配置。若 `apiKey` 字面量对应的 secret 槽位标记为已设置，或凭据引用已配置，该步骤会直接完成而不渲染，其中包括来自启动环境且只读的凭据。只有已挂载且活跃、引用可写但尚未配置的适配器才会显示前往「设置」Models 分区的页面；密钥输入和 `credentials.set` 仅由该分区已有的设置卡片负责，该步骤绝不持有 secret。适配器缺失、路由不活跃、联接失败、部署只读或设置／凭据能力不可用时，该步骤均不渲染并直接完成，以免首次使用引导阻塞产品；Models 页仍是诊断界面。

-每一次编辑都以 `settings.mutate` 的路径 op 落到已存分节上——每个变更字段一条 set、每个清空字段一条 unset、删除提供方行则是单独一条 unset。页面自始至终只持有**脱敏后**的 descriptor，因此它点名自己看得见的字段，而不是重建分节：一个它从未收到过的已存字面机密不会被任何 op 提及，也就得以留存。DeepSeek 的 `models` 是一个按值整体替换的数组：编辑器会显示继承而来的生效模型行，直到第一次模型编辑将完整数组具化到用户层；重置则会取消该覆盖。上下文窗口按数值键入，可带十进制的 `K` 或 `M` 后缀（`256K`、`1M`；`1M` 即 1000K），存储为纯数值，回显时写成能够往返的最短形式。空 ID、重复 ID、显式填写的空名称，以及无法读取、非正数或非整数的上下文窗口都会在写入前失败。每次写入都携带该卡片打开时的 `revision`，因此来自另一个标签页或对 `settings.yaml` 的外部编辑所产生的并发写入会以 `settings-conflict` 被拒绝，卡片会请用户重新打开，而不是把自己的陈旧快照重放上去。页面加载完成后会在推送的失效事件（`settings/changed`、`credentials/changed`、`models/changed` 与 `connection/reset`）上重拉，因此外部的 `settings.yaml` 编辑、第二个标签页或 settings 新生的路由都无需轮询即可收敛。
+每一次编辑都以 `settings.mutate` 的路径 op 落到已存分节上——每个变更字段一条 set、每个清空字段一条 unset、删除提供方行则是单独一条 unset。页面自始至终只持有**脱敏后**的 descriptor，因此它点名自己看得见的字段，而不是重建分节：一个它从未收到过的已存字面机密不会被任何 op 提及，也就得以留存。DeepSeek 的 `models` 是一个按值整体替换的数组：编辑器会显示继承而来的生效模型行，直到第一次模型编辑将完整数组具化到用户层；重置则会取消该覆盖。每个模型行承载模型 ID 与显示名称，其上下文窗口与最大输出 token 数则收在该行自己的折叠区里，与 pi-ai 提供方表单采用的形态相同。两项容量都按数值键入，可带十进制的 `K` 或 `M` 后缀（`256K`、`1M`；`1M` 即 1000K），存储为纯数值，回显时写成能够往返的最短形式。空 ID、重复 ID、显式填写的空名称，以及无法读取、非正数或非整数的容量都会在写入前失败。每次写入都携带该卡片打开时的 `revision`，因此来自另一个标签页或对 `settings.yaml` 的外部编辑所产生的并发写入会以 `settings-conflict` 被拒绝，卡片会请用户重新打开，而不是把自己的陈旧快照重放上去。页面加载完成后会在推送的失效事件（`settings/changed`、`credentials/changed`、`models/changed` 与 `connection/reset`）上重拉，因此外部的 `settings.yaml` 编辑、第二个标签页或 settings 新生的路由都无需轮询即可收敛。

 ## 模型体验

@@ -7,33 +7,46 @@

 import { useState } from 'react'
 import type { ReactNode } from 'react'
-import { IconPlusOutline16, IconTrashOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import {
+  IconChevronDownOutline14, IconChevronRightOutline14, IconPlusOutline16, IconTrashOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
 import type { en } from './locales.ts'
 import styles from './ModelsSection.module.css'

 /** One catalog entry kept structurally open so hidden or future fields survive an edit. */
 export type DeepSeekModelDraft = Record<string, unknown>

-/** Accepted context-window spellings: a decimal count with an optional K/M suffix. */
-const CONTEXT_WINDOW_PATTERN = /^(\d+(?:\.\d+)?)([km])?$/i
+/** The catalog fields this editor writes. */
+type CatalogField = 'id' | 'name' | 'contextWindow' | 'maxTokens'
+
+/** The two token counts edited as K/M-suffixed text behind a row's disclosure. */
+type CapacityField = 'contextWindow' | 'maxTokens'
+
+/** Row index encoded in an editing-buffer key. */
+function rowOf(key: string): number {
+  return Number(key.slice(0, key.indexOf(':')))
+}
+
+/** Accepted capacity spellings: a decimal count with an optional K/M suffix. */
+const CAPACITY_PATTERN = /^(\d+(?:\.\d+)?)([km])?$/i

 /** Decimal suffix scales — `1M` is 1000K, matching how model capacities are quoted. */
-const CONTEXT_WINDOW_SCALE = { k: 1_000, m: 1_000_000 } as const
+const CAPACITY_SCALE = { k: 1_000, m: 1_000_000 } as const

 /**
- * Read a typed context window, so a user can write `256K` or `1M` instead of
- * counting zeroes. The stored value stays a plain token count.
+ * Read a typed capacity, so a user can write `256K` or `1M` instead of counting
+ * zeroes. The stored value stays a plain token count.
 * @param text - raw field text.
 * @returns the count; `undefined` when blank (inherit), `NaN` when unreadable
 * (rejected by {@link validateDeepSeekModels} before any write).
 */
-export function parseContextWindow(text: string): number | undefined {
+export function parseCapacity(text: string): number | undefined {
  const trimmed = text.trim()
  if (trimmed.length === 0) return undefined
-  const match = CONTEXT_WINDOW_PATTERN.exec(trimmed)
+  const match = CAPACITY_PATTERN.exec(trimmed)
  if (match === null) return Number.NaN
  const suffix = match[2]?.toLowerCase()
-  const scale = suffix === 'k' || suffix === 'm' ? CONTEXT_WINDOW_SCALE[suffix] : 1
+  const scale = suffix === 'k' || suffix === 'm' ? CAPACITY_SCALE[suffix] : 1
  const scaled = Number(match[1]) * scale
  // A decimal multiple is exact in intent but not in binary floating point
  // (2.3 * 1e6 lands a few ULPs high), so an integral intent snaps back.
@@ -43,15 +56,15 @@ export function parseContextWindow(text: string): number | undefined {

 /**
 * Spell a stored count back in the shortest form that survives a round trip
- * through {@link parseContextWindow}; a count that is not a whole number of
+ * through {@link parseCapacity}; a count that is not a whole number of
 * thousands stays written out.
- * @param value - stored context window.
+ * @param value - stored capacity.
 * @returns the field text.
 */
-export function formatContextWindow(value: number): string {
+export function formatCapacity(value: number): string {
  if (!Number.isInteger(value) || value <= 0) return String(value)
-  if (value % CONTEXT_WINDOW_SCALE.m === 0) return `${String(value / CONTEXT_WINDOW_SCALE.m)}M`
-  if (value % CONTEXT_WINDOW_SCALE.k === 0) return `${String(value / CONTEXT_WINDOW_SCALE.k)}K`
+  if (value % CAPACITY_SCALE.m === 0) return `${String(value / CAPACITY_SCALE.m)}M`
+  if (value % CAPACITY_SCALE.k === 0) return `${String(value / CAPACITY_SCALE.k)}K`
  return String(value)
 }

@@ -61,6 +74,7 @@ export interface DeepSeekModelsValidationFailure {
  index: number
  /** Message key owned by the Models settings section. */
  key: 'modelIdRequired' | 'modelIdDuplicate' | 'modelNameInvalid' | 'modelContextInvalid'
+  | 'modelMaxTokensInvalid'
 }

 /** Convert a schema-validated catalog value into records without dropping hidden fields. */
@@ -99,6 +113,11 @@ export function validateDeepSeekModels(value: unknown): DeepSeekModelsValidation
      && (typeof contextWindow !== 'number' || !Number.isInteger(contextWindow) || contextWindow <= 0)) {
      return { index, key: 'modelContextInvalid' }
    }
+    const maxTokens = model['maxTokens']
+    if (maxTokens !== undefined
+      && (typeof maxTokens !== 'number' || !Number.isInteger(maxTokens) || maxTokens <= 0)) {
+      return { index, key: 'modelMaxTokensInvalid' }
+    }
  }
  return undefined
 }
@@ -109,8 +128,10 @@ export interface DeepSeekModelsEditorProps {
  models: readonly DeepSeekModelDraft[]
  /** Whether the user layer currently owns the whole array. */
  overridden: boolean
-  /** Fallback capacity used when a row omits its exact value. */
+  /** Fallback context capacity used when a row omits its exact value. */
  defaultContextWindow: number | undefined
+  /** Fallback output cap used when a row omits its exact value. */
+  defaultMaxTokens: number | undefined
  /** Section copy. */
  t: (key: keyof typeof en) => string
  /** Disable every mutation. */
@@ -122,25 +143,27 @@ export interface DeepSeekModelsEditorProps {
 }

 /**
- * Render the direct DeepSeek adapter's id/name/context-window catalog.
+ * Render the direct DeepSeek adapter's model catalog: id and display name on
+ * each row, capacities behind the row's own disclosure.
 * @param props - effective rows plus the array-level override actions.
 * @returns the catalog editor.
 */
 export function DeepSeekModelsEditor(props: DeepSeekModelsEditorProps): ReactNode {
-  // Context windows are edited as text, so a row's keystrokes are held here
+  // Capacities are edited as text, so a field's keystrokes are held here
  // rather than re-derived from the parsed count on every change, which would
  // rewrite `1000` to `1K` mid-word. Unreadable text is kept past blur so the
  // save-time rejection names a row the user can still see — which is why
-  // this is one entry PER ROW: a single active buffer would be displaced by
-  // editing any other row, and the abandoned row would fall back to rendering
-  // its stored NaN as the literal `NaN`.
+  // this is one entry PER FIELD: a single active buffer would be displaced by
+  // editing any other field, and the abandoned one would fall back to
+  // rendering its stored NaN as the literal `NaN`.
  //
-  // Entries are keyed by row index, so the two operations that move indexes
-  // maintain them: `remove` re-keys around the dropped row, and reset clears
-  // them all because the rows they annotated are gone.
-  const [editing, setEditing] = useState<ReadonlyMap<number, string>>(() => new Map())
+  // Keys carry the row index, so the two operations that move indexes maintain
+  // them: `remove` re-keys around the dropped row, and reset clears them all
+  // because the rows they annotated are gone.
+  const [editing, setEditing] = useState<ReadonlyMap<string, string>>(() => new Map())
+  const [expanded, setExpanded] = useState<ReadonlySet<number>>(() => new Set())

-  const update = (index: number, key: 'id' | 'name' | 'contextWindow', value: unknown): void => {
+  const update = (index: number, key: CatalogField, value: unknown): void => {
    const next = props.models.map((model, at) => {
      const copy = { ...model }
      if (at !== index) return copy
@@ -153,10 +176,20 @@ export function DeepSeekModelsEditor(props: DeepSeekModelsEditorProps): ReactNod

  const remove = (index: number): void => {
    setEditing((current) => {
-      const next = new Map<number, string>()
-      for (const [at, text] of current) {
+      const next = new Map<string, string>()
+      for (const [key, text] of current) {
+        const at = rowOf(key)
        if (at === index) continue
-        next.set(at > index ? at - 1 : at, text)
+        // Only the row number moves; the field half of the key is untouched.
+        next.set(at > index ? key.replace(/^\d+/, String(at - 1)) : key, text)
+      }
+      return next
+    })
+    setExpanded((current) => {
+      const next = new Set<number>()
+      for (const at of current) {
+        if (at === index) continue
+        next.add(at > index ? at - 1 : at)
      }
      return next
    })
@@ -165,34 +198,73 @@ export function DeepSeekModelsEditor(props: DeepSeekModelsEditorProps): ReactNod

  const reset = (): void => {
    setEditing(new Map())
+    setExpanded(new Set())
    props.onReset()
  }

-  /** The row's field text: its live keystrokes, else the stored count spelled short. */
-  const contextText = (model: DeepSeekModelDraft, index: number): string => {
-    const typed = editing.get(index)
-    if (typed !== undefined) return typed
-    const value = model['contextWindow']
-    return typeof value === 'number' ? formatContextWindow(value) : ''
-  }
-
-  const settleContext = (index: number): void => {
-    const typed = editing.get(index)
-    if (typed === undefined) return
-    // Unreadable text stays on screen: the save-time rejection names a row the
-    // user can still see and correct.
-    const parsed = parseContextWindow(typed)
-    if (parsed !== undefined && Number.isNaN(parsed)) return
-    setEditing((current) => {
-      const next = new Map(current)
-      next.delete(index)
+  const toggle = (index: number): void => {
+    setExpanded((current) => {
+      const next = new Set(current)
+      if (!next.delete(index)) next.add(index)
      return next
    })
  }

+  /** The field's text: its live keystrokes, else the stored count spelled short. */
+  const capacityText = (model: DeepSeekModelDraft, index: number, field: CapacityField): string => {
+    const typed = editing.get(`${String(index)}:${field}`)
+    if (typed !== undefined) return typed
+    const value = model[field]
+    return typeof value === 'number' ? formatCapacity(value) : ''
+  }
+
+  const settleCapacity = (index: number, field: CapacityField): void => {
+    const key = `${String(index)}:${field}`
+    const typed = editing.get(key)
+    if (typed === undefined) return
+    // Unreadable text stays on screen: the save-time rejection names a row the
+    // user can still see and correct.
+    const parsed = parseCapacity(typed)
+    if (parsed !== undefined && Number.isNaN(parsed)) return
+    setEditing((current) => {
+      const next = new Map(current)
+      next.delete(key)
+      return next
+    })
+  }
+
+  /** One capacity field of one row, rendered inside the row's disclosure. */
+  const capacityField = (
+    model: DeepSeekModelDraft,
+    index: number,
+    field: CapacityField,
+    fallback: number | undefined,
+  ): ReactNode => (
+    <label className={styles['modelField']}>
+      <span className={styles['modelFieldLabel']}>{props.t(field === 'contextWindow' ? 'contextWindow' : 'maxTokens')}</span>
+      <input
+        className={styles['input']}
+        type="text"
+        inputMode="numeric"
+        value={capacityText(model, index, field)}
+        placeholder={fallback === undefined
+          ? props.t(field === 'contextWindow' ? 'contextWindowPlaceholder' : 'maxTokensPlaceholder')
+          : formatCapacity(fallback)}
+        aria-label={`${props.t(field === 'contextWindow' ? 'contextWindow' : 'maxTokens')} ${String(index + 1)}`}
+        disabled={props.disabled}
+        onChange={(event) => {
+          const text = event.target.value
+          setEditing(current => new Map(current).set(`${String(index)}:${field}`, text))
+          update(index, field, parseCapacity(text))
+        }}
+        onBlur={() => { settleCapacity(index, field) }}
+      />
+    </label>
+  )
+
  return (
    <section className={styles['modelCatalog']} aria-label={props.t('models')}>
-      <div className={styles['modelCatalogHeader']}>
+      <div className={styles['modelListHead']}>
        <div className={styles['modelCatalogHeading']}>
          <span className={styles['modelCatalogTitle']}>{props.t('models')}</span>
          <span className={styles['modelCatalogMeta']}>
@@ -215,66 +287,65 @@ export function DeepSeekModelsEditor(props: DeepSeekModelsEditorProps): ReactNod
      {props.models.length === 0
        ? <p className={styles['modelEmpty']}>{props.t('modelsEmpty')}</p>
        : (
-          <div className={styles['modelTable']}>
-            {/* Captions sit above the rows and are hidden from assistive tech:
-                every field already carries the indexed `aria-label` naming it. */}
-            <div className={styles['modelColumns']} aria-hidden="true">
-              <span>{props.t('modelId')}</span>
-              <span>{props.t('modelName')}</span>
-              <span>{props.t('contextWindow')}</span>
-            </div>
+          <div className={styles['modelList']}>
            {props.models.map((model, index) => (
-              <div className={styles['modelRow']} key={index}>
-                <input
-                  className={styles['input']}
-                  type="text"
-                  value={typeof model['id'] === 'string' ? model['id'] : ''}
-                  aria-label={`${props.t('modelId')} ${String(index + 1)}`}
-                  disabled={props.disabled}
-                  onChange={(event) => { update(index, 'id', event.target.value) }}
-                  onBlur={(event) => {
-                    // Settle a pasted id rather than trimming per keystroke,
-                    // which would stop the user typing an interior space.
-                    const trimmed = event.target.value.trim()
-                    if (trimmed !== event.target.value) update(index, 'id', trimmed)
-                  }}
-                />
-                <input
-                  className={styles['input']}
-                  type="text"
-                  value={typeof model['name'] === 'string' ? model['name'] : ''}
-                  placeholder={props.t('modelNamePlaceholder')}
-                  aria-label={`${props.t('modelName')} ${String(index + 1)}`}
-                  disabled={props.disabled}
-                  onChange={(event) => {
-                    update(index, 'name', event.target.value === '' ? undefined : event.target.value)
-                  }}
-                />
-                <input
-                  className={styles['input']}
-                  type="text"
-                  value={contextText(model, index)}
-                  placeholder={props.defaultContextWindow === undefined
-                    ? props.t('contextWindowPlaceholder')
-                    : formatContextWindow(props.defaultContextWindow)}
-                  aria-label={`${props.t('contextWindow')} ${String(index + 1)}`}
-                  disabled={props.disabled}
-                  onChange={(event) => {
-                    const text = event.target.value
-                    setEditing(current => new Map(current).set(index, text))
-                    update(index, 'contextWindow', parseContextWindow(text))
-                  }}
-                  onBlur={() => { settleContext(index) }}
-                />
-                <button
-                  type="button"
-                  className={styles['rowDelete']}
-                  disabled={props.disabled}
-                  onClick={() => { remove(index) }}
-                >
-                  <IconTrashOutline16 size={14} />
-                  <span className={styles['hiddenLabel']}>{props.t('removeModel')}</span>
-                </button>
+              <div className={styles['modelEntry']} key={index}>
+                <div className={styles['modelRow']}>
+                  <input
+                    className={styles['input']}
+                    type="text"
+                    value={typeof model['id'] === 'string' ? model['id'] : ''}
+                    placeholder={props.t('modelId')}
+                    aria-label={`${props.t('modelId')} ${String(index + 1)}`}
+                    disabled={props.disabled}
+                    onChange={(event) => { update(index, 'id', event.target.value) }}
+                    onBlur={(event) => {
+                      // Settle a pasted id rather than trimming per keystroke,
+                      // which would stop the user typing an interior space.
+                      const trimmed = event.target.value.trim()
+                      if (trimmed !== event.target.value) update(index, 'id', trimmed)
+                    }}
+                  />
+                  <input
+                    className={styles['input']}
+                    type="text"
+                    value={typeof model['name'] === 'string' ? model['name'] : ''}
+                    placeholder={props.t('modelName')}
+                    aria-label={`${props.t('modelName')} ${String(index + 1)}`}
+                    disabled={props.disabled}
+                    onChange={(event) => {
+                      update(index, 'name', event.target.value === '' ? undefined : event.target.value)
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className={styles['iconButton']}
+                    aria-label={`${props.t('modelAdvanced')} ${String(index + 1)}`}
+                    aria-expanded={expanded.has(index)}
+                    title={props.t('modelAdvanced')}
+                    onClick={() => { toggle(index) }}
+                  >
+                    {expanded.has(index) ? <IconChevronDownOutline14 /> : <IconChevronRightOutline14 />}
+                  </button>
+                  <button
+                    type="button"
+                    className={`${styles['iconButton']} ${styles['iconButtonDanger']}`}
+                    aria-label={`${props.t('removeModel')} ${String(index + 1)}`}
+                    title={props.t('removeModel')}
+                    disabled={props.disabled}
+                    onClick={() => { remove(index) }}
+                  >
+                    <IconTrashOutline16 size={14} />
+                  </button>
+                </div>
+                {expanded.has(index)
+                  ? (
+                    <div className={styles['modelAdvanced']}>
+                      {capacityField(model, index, 'contextWindow', props.defaultContextWindow)}
+                      {capacityField(model, index, 'maxTokens', props.defaultMaxTokens)}
+                    </div>
+                  )
+                  : null}
              </div>
            ))}
          </div>
@@ -156,8 +156,7 @@
 .dangerButton:disabled,
 .addButton:disabled,
 .linkButton:disabled,
-.addModelButton:disabled,
-.rowDelete:disabled {
+.addModelButton:disabled {
  opacity: 0.4;
  cursor: default;
 }
@@ -168,7 +167,7 @@
 .addButton:focus-visible,
 .linkButton:focus-visible,
 .addModelButton:focus-visible,
-.rowDelete:focus-visible,
+.iconButton:focus-visible,
 .customizedSummary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
@@ -347,13 +346,6 @@
  border-top: 1px solid var(--dsw-alias-border-l2);
 }

-.modelCatalogHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
 .modelCatalogHeading {
  display: flex;
  flex-direction: column;
@@ -375,54 +367,89 @@
  line-height: 18px;
 }

-.modelTable {
+/* Model list, shared with the pi-ai provider form (PR #1368): one bordered
+   entry per model, id and display name on the row, capacities behind the
+   row's own disclosure. The token names are this file's, not that branch's —
+   `--dsw-alias-border-subtle`, `--dsw-alias-text-tertiary`, and
+   `--dsw-alias-text-primary` are undefined here and resolve to their
+   light-mode literals, which is the defect this section was just moved off. */
+.modelList {
  display: flex;
  flex-direction: column;
-  gap: 6px;
-}
-
-/* Captions and rows share one track list so the columns line up. */
-.modelColumns,
-.modelRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(88px, 0.75fr) 28px;
-  align-items: center;
  gap: 8px;
 }

-.modelColumns {
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
-  line-height: 18px;
+.modelListHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
 }

-/* The inset belongs on the caption cell, not the strip: padding on the grid
-   container would narrow its tracks against the rows' and walk the captions
-   left column by column. 1px border + 10px padding is the field text inset. */
-.modelColumns > span {
-  padding-left: 11px;
+.modelEntry {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  padding: 6px;
 }

-.rowDelete {
-  box-sizing: border-box;
-  position: relative;
+.modelRow {
  display: grid;
-  place-items: center;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Square, label-free affordances: the row's own inputs carry the meaning, so
+   the actions stay glyphs and announce themselves through aria-label. */
+.iconButton {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
  width: 28px;
  height: 28px;
-  padding: 0;
  border: none;
-  border-radius: 8px;
+  border-radius: 6px;
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
 }

-.rowDelete:hover:not(:disabled) {
+.iconButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.iconButton:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+/* The delete glyph keeps the danger tint the rest of the section uses. */
+.iconButtonDanger:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
  color: var(--dsw-alias-state-error-primary);
 }

+.modelAdvanced {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 8px;
+  padding: 8px 4px 2px;
+}
+
+.modelField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.modelFieldLabel {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
 .modelEmpty {
  padding: 12px;
  border: 1px dashed var(--dsw-alias-border-l3);
@@ -262,6 +262,7 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
    const modelsOverridden = hasPath(draft, ['models'])
    const models = modelDrafts(modelsOverridden ? customModels : inheritedModels())
    const defaultContextWindow = getPath(fallback, ['defaultContextWindow'])
+    const defaultMaxTokens = getPath(fallback, ['maxTokens'])
    return (
      <>
        <div className={styles['field']}>
@@ -323,6 +324,7 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
                  defaultContextWindow={typeof defaultContextWindow === 'number'
                    ? defaultContextWindow
                    : undefined}
+                  defaultMaxTokens={typeof defaultMaxTokens === 'number' ? defaultMaxTokens : undefined}
                  t={t}
                  disabled={disabled}
                  onChange={(next) => { setDraft(current => setPath(current, ['models'], next)) }}
@@ -40,6 +40,9 @@ export const en = {
  modelNamePlaceholder: 'Uses the model ID when empty',
  contextWindow: 'Context window',
  contextWindowPlaceholder: 'Uses the provider default',
+  maxTokens: 'Max output tokens',
+  maxTokensPlaceholder: 'Uses the provider default',
+  modelAdvanced: 'Capacities',
  addModel: 'Add model',
  removeModel: 'Delete model',
  modelsEmpty: 'No models will be shown in the selector. Unlisted IDs can still be sent directly.',
@@ -47,6 +50,7 @@ export const en = {
  modelIdDuplicate: 'Model ID must be unique.',
  modelNameInvalid: 'Display name cannot be empty.',
  modelContextInvalid: 'Context window must be a positive count, like 131072, 256K, or 1M.',
+  modelMaxTokensInvalid: 'Max output tokens must be a positive count, like 8192, 64K, or 1M.',
  advancedHint: 'Other fields live in settings.yaml; edit that section directly.',
  onboardingTitle: 'Add an API key to get started',
  onboardingDescription: 'Configure the official DeepSeek provider to start building.',
@@ -97,6 +101,9 @@ export const zh: typeof en = {
  modelNamePlaceholder: '留空时使用模型 ID',
  contextWindow: '上下文窗口',
  contextWindowPlaceholder: '使用提供方默认值',
+  maxTokens: '最大输出 token 数',
+  maxTokensPlaceholder: '使用提供方默认值',
+  modelAdvanced: '容量',
  addModel: '添加模型',
  removeModel: '删除模型',
  modelsEmpty: '模型选择器中将不显示任何模型；目录外 ID 仍可直接发送。',
@@ -104,6 +111,7 @@ export const zh: typeof en = {
  modelIdDuplicate: '模型 ID 不能重复。',
  modelNameInvalid: '显示名称不能为空。',
  modelContextInvalid: '上下文窗口必须是正数，例如 131072、256K 或 1M。',
+  modelMaxTokensInvalid: '最大输出 token 数必须是正数，例如 8192、64K 或 1M。',
  advancedHint: '其余字段在 settings.yaml 中，请直接编辑对应段。',
  onboardingTitle: '添加一个 API Key 开始使用',
  onboardingDescription: '配置 DeepSeek 官方模型，即可开始使用。',
@@ -9,7 +9,7 @@ import { ModelsSection, needsSetup, removeProviderProfile } from '../src/client/
 import type { ModelsSectionInjected, ModelsSectionProps } from '../src/client/ModelsSection.tsx'
 import { pathOps } from '../src/client/ProviderEditor.tsx'
 import {
-  DeepSeekModelsEditor, formatContextWindow, modelDrafts, parseContextWindow, validateDeepSeekModels,
+  DeepSeekModelsEditor, formatCapacity, modelDrafts, parseCapacity, validateDeepSeekModels,
 } from '../src/client/DeepSeekModelsEditor.tsx'
 import { deriveKeyRef, ModelsSettingsStore } from '../src/client/store.ts'
 import type { ProviderRow } from '../src/client/store.ts'
@@ -19,6 +19,16 @@ afterEach(cleanup)

 const t: ModelsSectionInjected['t'] = key => en[key]

+/** Open one row's capacity disclosure (1-based, as the labels read). */
+function expandRow(position: number): void {
+  fireEvent.click(screen.getByLabelText(`${en.modelAdvanced} ${String(position)}`))
+}
+
+/** The capacity inputs of every open row, in row order. */
+function capacityInputs(label: string): HTMLInputElement[] {
+  return screen.getAllByLabelText<HTMLInputElement>(new RegExp(label))
+}
+
 const PiAiConfig = Schema.object({
  token: Schema.string().role('secret'),
  providers: Schema.dict(Schema.object({
@@ -79,9 +89,10 @@ function wireNamespaces(): SettingsNamespaceView[] {
        baseURL: 'https://base',
        reasoningEffort: 'high',
        defaultContextWindow: 1_000_000,
+        maxTokens: 256_000,
        models: DEFAULT_DEEPSEEK_MODELS,
      },
-      base: { defaultContextWindow: 1_000_000, models: DEFAULT_DEEPSEEK_MODELS },
+      base: { defaultContextWindow: 1_000_000, maxTokens: 256_000, models: DEFAULT_DEEPSEEK_MODELS },
      user: { reasoningEffort: 'high' },
      applies: 'live',
      secrets: [{ path: ['apiKey'], set: false }],
@@ -297,10 +308,11 @@ describe('ModelsSection', () => {
    fireEvent.click(screen.getByText(en.addModel))
    const ids = screen.getAllByLabelText(new RegExp(en.modelId))
    const names = screen.getAllByLabelText(new RegExp(en.modelName))
-    const windows = screen.getAllByLabelText(new RegExp(en.contextWindow))
+    expandRow(3)
    fireEvent.change(ids[2] as HTMLInputElement, { target: { value: 'private-preview' } })
    fireEvent.change(names[2] as HTMLInputElement, { target: { value: 'Private Preview' } })
-    fireEvent.change(windows[2] as HTMLInputElement, { target: { value: '131072' } })
+    // Only row 3 is open, so its capacity is addressed by its own label.
+    fireEvent.change(screen.getByLabelText(`${en.contextWindow} 3`), { target: { value: '131072' } })
    fireEvent.click(screen.getByText(en.apply))

    await waitFor(() => { expect(mutate).toHaveBeenCalledTimes(1) })
@@ -345,39 +357,46 @@ describe('ModelsSection', () => {
    expect(validateDeepSeekModels([{ id: 'model', contextWindow: 0 }]))
      .toEqual({ index: 0, key: 'modelContextInvalid' })
    expect(validateDeepSeekModels([{ id: 'model', contextWindow: 1 }])).toBeUndefined()
+    expect(validateDeepSeekModels([{ id: 'model', maxTokens: null }]))
+      .toEqual({ index: 0, key: 'modelMaxTokensInvalid' })
+    expect(validateDeepSeekModels([{ id: 'model', maxTokens: 1.5 }]))
+      .toEqual({ index: 0, key: 'modelMaxTokensInvalid' })
+    expect(validateDeepSeekModels([{ id: 'model', maxTokens: 0 }]))
+      .toEqual({ index: 0, key: 'modelMaxTokensInvalid' })
+    expect(validateDeepSeekModels([{ id: 'model', maxTokens: 8192 }])).toBeUndefined()
  })

  it('reads context windows written as counts, thousands, or millions', () => {
-    expect(parseContextWindow('')).toBeUndefined()
-    expect(parseContextWindow('   ')).toBeUndefined()
-    expect(parseContextWindow('131072')).toBe(131_072)
-    expect(parseContextWindow(' 256K ')).toBe(256_000)
-    expect(parseContextWindow('256k')).toBe(256_000)
-    expect(parseContextWindow('1M')).toBe(1_000_000)
-    expect(parseContextWindow('1m')).toBe(1_000_000)
+    expect(parseCapacity('')).toBeUndefined()
+    expect(parseCapacity('   ')).toBeUndefined()
+    expect(parseCapacity('131072')).toBe(131_072)
+    expect(parseCapacity(' 256K ')).toBe(256_000)
+    expect(parseCapacity('256k')).toBe(256_000)
+    expect(parseCapacity('1M')).toBe(1_000_000)
+    expect(parseCapacity('1m')).toBe(1_000_000)
    // 1M is 1000K, not 1024K: capacities are quoted in decimal.
-    expect(parseContextWindow('1M')).toBe(parseContextWindow('1000K'))
+    expect(parseCapacity('1M')).toBe(parseCapacity('1000K'))
    // 2.3 * 1e6 is a few ULPs high in binary floating point; an integral
    // intent must not become a fractional count the validator rejects.
-    expect(parseContextWindow('2.3M')).toBe(2_300_000)
-    expect(Number.isInteger(parseContextWindow('1.5M'))).toBe(true)
+    expect(parseCapacity('2.3M')).toBe(2_300_000)
+    expect(Number.isInteger(parseCapacity('1.5M'))).toBe(true)
    // A genuinely fractional count survives as one, for the validator to reject.
-    expect(parseContextWindow('0.0001K')).toBeCloseTo(0.1)
-    expect(parseContextWindow('abc')).toBeNaN()
-    expect(parseContextWindow('1G')).toBeNaN()
-    expect(parseContextWindow('1M1')).toBeNaN()
+    expect(parseCapacity('0.0001K')).toBeCloseTo(0.1)
+    expect(parseCapacity('abc')).toBeNaN()
+    expect(parseCapacity('1G')).toBeNaN()
+    expect(parseCapacity('1M1')).toBeNaN()
  })

  it('spells a stored count in the shortest form that round-trips', () => {
-    expect(formatContextWindow(1_000_000)).toBe('1M')
-    expect(formatContextWindow(256_000)).toBe('256K')
-    expect(formatContextWindow(1_500_000)).toBe('1500K')
-    expect(formatContextWindow(131_072)).toBe('131072')
+    expect(formatCapacity(1_000_000)).toBe('1M')
+    expect(formatCapacity(256_000)).toBe('256K')
+    expect(formatCapacity(1_500_000)).toBe('1500K')
+    expect(formatCapacity(131_072)).toBe('131072')
    // Values the validator will reject are shown as-is rather than dressed up.
-    expect(formatContextWindow(Number.NaN)).toBe('NaN')
-    expect(formatContextWindow(0)).toBe('0')
+    expect(formatCapacity(Number.NaN)).toBe('NaN')
+    expect(formatCapacity(0)).toBe('0')
    for (const text of ['1M', '256K', '131072', '1500K']) {
-      expect(formatContextWindow(parseContextWindow(text) as number)).toBe(text)
+      expect(formatCapacity(parseCapacity(text) as number)).toBe(text)
    }
  })

@@ -386,7 +405,9 @@ describe('ModelsSection', () => {
      mutate: vi.fn(() => Promise.resolve(ok(wireNamespaces()[0]))),
    })
    fireEvent.click(screen.getByText(en.customized))
-    const windows = screen.getAllByLabelText<HTMLInputElement>(new RegExp(en.contextWindow))
+    expandRow(1)
+    expandRow(2)
+    const windows = capacityInputs(en.contextWindow)
    // The inherited 1000000 reads back short.
    expect((windows[0] as HTMLInputElement).value).toBe('1M')

@@ -422,7 +443,9 @@ describe('ModelsSection', () => {
  it('keeps unreadable context-window text on screen and refuses the write', async () => {
    const { mutate } = await mountSection()
    fireEvent.click(screen.getByText(en.customized))
-    const windows = screen.getAllByLabelText<HTMLInputElement>(new RegExp(en.contextWindow))
+    expandRow(1)
+    expandRow(2)
+    const windows = capacityInputs(en.contextWindow)
    fireEvent.change(windows[0] as HTMLInputElement, { target: { value: '1 gazillion' } })
    // Blurring a row that is not the edited one leaves the buffer alone.
    fireEvent.blur(windows[1] as HTMLInputElement)
@@ -483,7 +506,9 @@ describe('ModelsSection', () => {
    // losing the text the user was told they could still correct.
    await mountSection()
    fireEvent.click(screen.getByText(en.customized))
-    const windows = screen.getAllByLabelText<HTMLInputElement>(new RegExp(en.contextWindow))
+    expandRow(1)
+    expandRow(2)
+    const windows = capacityInputs(en.contextWindow)
    fireEvent.change(windows[0] as HTMLInputElement, { target: { value: 'not a number' } })
    fireEvent.blur(windows[0] as HTMLInputElement)
    fireEvent.change(windows[1] as HTMLInputElement, { target: { value: '2M' } })
@@ -495,13 +520,15 @@ describe('ModelsSection', () => {
  it('re-keys the typed text around a removed row', async () => {
    await mountSection()
    fireEvent.click(screen.getByText(en.customized))
-    const windows = (): HTMLInputElement[] =>
-      screen.getAllByLabelText<HTMLInputElement>(new RegExp(en.contextWindow))
+    const windows = (): HTMLInputElement[] => capacityInputs(en.contextWindow)
    const removeRow = (at: number): void => {
-      fireEvent.click(screen.getAllByText(en.removeModel)[at] as HTMLElement)
+      fireEvent.click(screen.getAllByLabelText(new RegExp(en.removeModel))[at] as HTMLElement)
    }
    // Three rows, with text parked on the outer two.
    fireEvent.click(screen.getByText(en.addModel))
+    expandRow(1)
+    expandRow(2)
+    expandRow(3)
    fireEvent.change(windows()[0] as HTMLInputElement, { target: { value: 'top text' } })
    fireEvent.blur(windows()[0] as HTMLInputElement)
    fireEvent.change(windows()[2] as HTMLInputElement, { target: { value: 'bottom text' } })
@@ -529,12 +556,15 @@ describe('ModelsSection', () => {
      mutate: vi.fn(() => Promise.resolve(ok(wireNamespaces()[0]))),
    })
    fireEvent.click(screen.getByText(en.customized))
-    const windows = screen.getAllByLabelText<HTMLInputElement>(new RegExp(en.contextWindow))
+    expandRow(1)
+    const windows = capacityInputs(en.contextWindow)
    fireEvent.change(windows[0] as HTMLInputElement, { target: { value: 'garbage' } })
    fireEvent.blur(windows[0] as HTMLInputElement)
    fireEvent.click(screen.getByText(en.resetModels))

-    const restored = screen.getAllByLabelText<HTMLInputElement>(new RegExp(en.contextWindow))
+    // Reset collapses every row, so the restored capacity needs opening again.
+    expandRow(1)
+    const restored = capacityInputs(en.contextWindow)
    expect((restored[0] as HTMLInputElement).value).toBe('1M')

    // Reset put the draft back where it started, so Apply writes nothing at
@@ -544,6 +574,40 @@ describe('ModelsSection', () => {
    expect(mutate).not.toHaveBeenCalled()
  })

+  it('edits an output cap per model and carries its text across a removal', async () => {
+    const { mutate } = await mountSection({
+      mutate: vi.fn(() => Promise.resolve(ok(wireNamespaces()[0]))),
+    })
+    fireEvent.click(screen.getByText(en.customized))
+    expandRow(1)
+    expandRow(2)
+    // The profile's own cap is the placeholder both rows inherit.
+    expect(capacityInputs(en.maxTokens).map(input => input.placeholder)).toEqual(['256K', '256K'])
+
+    fireEvent.change(screen.getByLabelText(`${en.maxTokens} 2`), { target: { value: '64K' } })
+    fireEvent.blur(screen.getByLabelText(`${en.maxTokens} 2`))
+    expect(screen.getByLabelText<HTMLInputElement>(`${en.maxTokens} 2`).value).toBe('64K')
+
+    // Dropping the row above carries the cap text down with its own row.
+    fireEvent.click(screen.getAllByLabelText(new RegExp(en.removeModel))[0] as HTMLElement)
+    expect(screen.getByLabelText<HTMLInputElement>(`${en.maxTokens} 1`).value).toBe('64K')
+    // The disclosure closes on a second press.
+    expandRow(1)
+    expect(screen.queryByLabelText(`${en.maxTokens} 1`)).toBeNull()
+
+    fireEvent.click(screen.getByText(en.apply))
+    await waitFor(() => { expect(mutate).toHaveBeenCalledTimes(1) })
+    expect(mutate.mock.calls[0]?.[0]).toEqual({
+      ns: 'llm-deepseek',
+      ops: [{
+        op: 'set',
+        path: ['models'],
+        value: [{ ...DEFAULT_DEEPSEEK_MODELS[1], maxTokens: 64_000 }],
+      }],
+      expectedRevision: 0,
+    })
+  })
+
  it('settles a pasted id and refuses whitespace that would never match', async () => {
    await mountSection()
    fireEvent.click(screen.getByText(en.customized))
@@ -567,14 +631,18 @@ describe('ModelsSection', () => {
      models={[{}]}
      overridden={false}
      defaultContextWindow={undefined}
+      defaultMaxTokens={undefined}
      t={t}
      disabled={true}
      onChange={vi.fn()}
      onReset={vi.fn()}
    />)
    expect(screen.getByLabelText<HTMLInputElement>(`${en.modelId} 1`).value).toBe('')
+    expandRow(1)
    expect(screen.getByLabelText<HTMLInputElement>(`${en.contextWindow} 1`).placeholder)
      .toBe(en.contextWindowPlaceholder)
+    expect(screen.getByLabelText<HTMLInputElement>(`${en.maxTokens} 1`).placeholder)
+      .toBe(en.maxTokensPlaceholder)
  })

  it('can empty and reset the model override, then clear optional fields without dropping hidden data', async () => {
@@ -582,14 +650,15 @@ describe('ModelsSection', () => {
      mutate: vi.fn(() => Promise.resolve(ok(wireNamespaces()[0]))),
    })
    fireEvent.click(screen.getByText(en.customized))
-    fireEvent.click(screen.getAllByText(en.removeModel)[0] as HTMLElement)
-    fireEvent.click(screen.getByText(en.removeModel))
+    fireEvent.click(screen.getAllByLabelText(new RegExp(en.removeModel))[0] as HTMLElement)
+    fireEvent.click(screen.getByLabelText(new RegExp(en.removeModel)))
    expect(screen.getByText(en.modelsEmpty)).toBeTruthy()
    fireEvent.click(screen.getByText(en.resetModels))
    expect(screen.getByText(en.modelsInherited)).toBeTruthy()

    const names = screen.getAllByLabelText(new RegExp(en.modelName))
-    const windows = screen.getAllByLabelText(new RegExp(en.contextWindow))
+    expandRow(1)
+    const windows = capacityInputs(en.contextWindow)
    fireEvent.change(names[0] as HTMLInputElement, { target: { value: '' } })
    fireEvent.change(windows[0] as HTMLInputElement, { target: { value: '' } })
    fireEvent.click(screen.getByText(en.apply))
@@ -3,6 +3,10 @@ import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'

 const css = readFileSync(fileURLToPath(new URL('../src/client/ModelsSection.module.css', import.meta.url)), 'utf8')
+const tokens = readFileSync(
+  fileURLToPath(new URL('../../ui-theme/src/styles/design-platform.css', import.meta.url)),
+  'utf8',
+)

 /** The declarations of one top-level rule, by selector. */
 function block(selector: string): string {
@@ -12,12 +16,15 @@ function block(selector: string): string {
 }

 describe('ModelsSection theme styles', () => {
-  it('uses the shared theme tokens without light-only fallbacks', () => {
-    // The section once named `--border`/`--surface`/`--text-*`/`--accent-strong`,
-    // which nothing in this app defines, so it rendered the light-mode literals
-    // written as their fallbacks and stayed light under the dark theme.
+  it('names only theme variables the token sheet defines', () => {
+    // A `--dsw-*` name the sheet never declares is not a near miss: it silently
+    // resolves to whatever literal sits in its fallback slot, which is how this
+    // section stayed light under the dark theme before. Undeclared names have
+    // no fallback at all and inherit, so both spellings must fail here.
+    const named = [...css.matchAll(/var\((--dsw-[a-z0-9-]+)/g)].map(match => match[1])
+    const undeclared = [...new Set(named)].filter(name => !tokens.includes(`  ${String(name)}:`))
+    expect(undeclared).toEqual([])
    expect(css).not.toMatch(/var\(--(?:surface|text-|border|accent-strong)/)
-    expect(css).toContain('color: var(--dsw-alias-label-primary)')
  })

  it('separates the row card from the editor it expands into', () => {