dsh-kenari-plugin 0.2.0 → 0.2.2

package/client/index.js

@@ -188,13 +188,15 @@ window.__ModuleLoader__.load({
         'catalog.readonly': '设置只读，不能写入。',
         'catalog.settingsReadOnly': '设置只读，改动只能在配置文件里做。',
         'catalog.noNamespace': '设置里没有 {ns} 这一节，先让插件把预设写进去。',
+        'catalog.writeRefused': '写入被拒绝，{count} 个模型没进设置。多半是设置刚被别处改过，重新打开面板再试一次。',
         'catalog.plansError': '套餐表读取失败，「套餐内」标签与筛选这次不可用：{message}',
         'catalog.empty': '当前筛选下没有模型。',
         'catalog.summary': '显示 {visible} / {total} 个，待加入 {addable} 个。「套餐内」表示这个付费模型由订阅套餐覆盖，否则走余额。',
         'catalog.footerNote': '加入后立即生效',
         'catalog.submit': '添加所选（{count}）',
         'catalog.saving': '正在加入…',
-        'catalog.added': '已加入 {count} 个模型。模型页的列表要重新展开「编辑」才会刷新。',
+        'catalog.added': '已加入 {count} 个模型，编辑卡片已刷新。',
+        'catalog.addedStale': '已加入 {count} 个模型。模型页的列表要重新展开「编辑」才会刷新。',
         'catalog.chatOnly': '（不支持会话）',
         'catalog.inRoute': '已在路由',
 
@@ -311,13 +313,15 @@ window.__ModuleLoader__.load({
         'catalog.readonly': 'Settings are read-only; nothing can be written.',
         'catalog.settingsReadOnly': 'Settings are read-only; changes have to go in the configuration file.',
         'catalog.noNamespace': 'Your settings have no {ns} section yet. Let the plugin write its preset first.',
+        'catalog.writeRefused': 'The write was refused and {count} models did not reach your settings. Usually the document changed elsewhere; reopen the panel and try again.',
         'catalog.plansError': 'Could not read the plan table, so the "In plan" tag and filter are unavailable this time: {message}',
         'catalog.empty': 'No model matches these filters.',
         'catalog.summary': 'Showing {visible} of {total}, {addable} ready to add. "In plan" means a subscription covers this paid model; otherwise it is billed to your balance.',
         'catalog.footerNote': 'Applies immediately',
         'catalog.submit': 'Add selected ({count})',
         'catalog.saving': 'Adding…',
-        'catalog.added': 'Added {count} models. The list on the Models page refreshes once you reopen Edit.',
+        'catalog.added': 'Added {count} models; the editor card was refreshed.',
+        'catalog.addedStale': 'Added {count} models. The list on the Models page refreshes once you reopen Edit.',
         'catalog.chatOnly': '(not a chat model)',
         'catalog.inRoute': 'Already in the route',
 
@@ -360,6 +364,153 @@ window.__ModuleLoader__.load({
      */
     const TAKEOVER_LABELS = ['添加模型', 'Add model', '获取可用模型', 'Fetch available models']
 
+    /**
+     * The row's own editing toggle, in the locales this build ships.
+     *
+     * Clicking it is `setEditing(open ? undefined : target)`, and the card itself
+     * renders as `open ? <ProviderEditor/> : null` — so collapse unmounts the card
+     * and expand mounts a fresh one. Same identity problem as {@link TAKEOVER_LABELS}:
+     * the class is a hash and the button carries the same 编辑/Edit text in both
+     * locales, so text is what there is to match.
+     */
+    const EDIT_LABELS = ['编辑', 'Edit']
+
+    /**
+     * The card's footer pair. `apply` is dsh's own word for it — the English face
+     * says Apply, not Save — and it is these two that {@link parkFooterUnderKey}
+     * relocates and that this bundle takes over the submit half of.
+     */
+    const SUBMIT_LABELS = ['保存', 'Apply']
+    const CANCEL_LABELS = ['取消', 'Cancel']
+
+    /** The link that sends the route back to the shipped catalog. */
+    const RESET_LABELS = ['恢复默认模型', 'Restore defaults']
+
+    /**
+     * The prefix of each row's model-id field, in the locales this build ships
+     * (`ModelListEditor` labels them `${modelId} ${index + 1}`). Reading those
+     * fields back is how the remount below proves the card it re-seeded really
+     * carries the models that were just written.
+     */
+    const MODEL_ID_LABELS = ['模型 ID', 'Model ID']
+
+    /**
+     * dsh's per-row removal button, in the locales this build ships.
+     *
+     * Unlike every other label this bundle matches, this one has NO text: the
+     * button is an icon, so its aria-label (`${removeModel} ${index + 1}`) is the
+     * only identity it has.
+     */
+    const REMOVE_LABELS = ['删除模型', 'Delete model']
+
+    /** The route this plugin owns, as the Models page and the marker seat name it. */
+    const KENARI_PROVIDER = 'kenari'
+
+    /**
+     * The route's own fields, matched by their exact aria-labels (the model rows
+     * use the same words with a row number appended, so only an exact match is the
+     * card-level field). `path` is the key inside the route's settings profile.
+     */
+    const CARD_FIELDS = [
+      { labels: ['显示名称', 'Display name'], path: 'displayName' },
+      { labels: ['API 地址', 'Base URL'], path: 'baseURL' },
+      { labels: ['API 协议', 'API protocol'], path: 'api' },
+    ]
+
+    /**
+     * The per-row fields, matched by `${label} ${rowNumber}`. `model` is the key
+     * inside one entry of the route's `models` array, and `capacity` marks the two
+     * magnitudes, which are edited as K/M text rather than as a number.
+     */
+    const ROW_FIELDS = [
+      { labels: ['模型 ID', 'Model ID'], model: 'id' },
+      { labels: ['显示名称', 'Display name'], model: 'name' },
+      { labels: ['上下文窗口', 'Context window'], model: 'contextWindow', capacity: true },
+      { labels: ['最大输出 token', 'Max output tokens'], model: 'maxTokens', capacity: true },
+    ]
+
+    /** The value a field is set to when the user empties it: the key leaves the profile. */
+    const UNSET = Symbol('unset')
+
+    /** The credential reference a key typed into a route with none stored lands under. */
+    const DEFAULT_KEY_REF = 'KENARI_API_KEY'
+
+    /**
+     * What an aria-label names in the Kenari card, or null when it is not a field
+     * this bundle writes.
+     *
+     * Card fields are matched exactly and rows by `label + row number`: dsh labels
+     * a row's field with the row index it renders in, which is the index this
+     * bundle's writes use too.
+     * @param label - the input's aria-label.
+     * @returns the target, or null.
+     */
+    function fieldTargetOf(label) {
+      if (typeof label !== 'string' || label.length === 0) return null
+      for (let at = 0; at < CARD_FIELDS.length; at += 1) {
+        const field = CARD_FIELDS[at]
+        if (field.labels.indexOf(label) !== -1) return { where: 'card', path: field.path }
+      }
+      // Longest label first: 显示名称 is a prefix of nothing, but 模型 ID must not
+      // claim a row whose label merely starts with it (there is none today, and
+      // the trailing-number test makes that structural rather than incidental).
+      for (let index = 0; index < ROW_FIELDS.length; index += 1) {
+        const field = ROW_FIELDS[index]
+        for (let at = 0; at < field.labels.length; at += 1) {
+          const prefix = `${field.labels[at]} `
+          if (label.indexOf(prefix) !== 0) continue
+          const number = label.slice(prefix.length)
+          if (!/^[0-9]+$/.test(number)) continue
+          const row = Number(number)
+          if (row < 1) continue
+          return { where: 'row', model: field.model, index: row - 1, capacity: field.capacity === true }
+        }
+      }
+      return null
+    }
+
+    /**
+     * A capacity field's text as the number to store, or undefined when it is not
+     * a count this card can mean.
+     *
+     * dsh spells these as K/M text and counts K as 1000 (its own hint says 256K is
+     * 256000), so the same vocabulary is parsed here rather than a second one
+     * invented. An unreadable value is left alone: the card keeps showing what the
+     * user typed, and — since dsh's own 保存 no longer runs on this card — nothing
+     * silently stores a NaN.
+     * @param text - the field's current text.
+     * @returns the count, or undefined.
+     */
+    function capacityOf(text) {
+      if (typeof text !== 'string') return undefined
+      const trimmed = text.trim()
+      if (trimmed.length === 0) return UNSET
+      const match = /^(\d+(?:\.\d+)?)\s*([KkMm]?)$/.exec(trimmed)
+      if (match === null) return undefined
+      const scale = match[2] === '' ? 1 : match[2] === 'K' || match[2] === 'k' ? 1000 : 1000000
+      const value = Number(match[1]) * scale
+      return Number.isFinite(value) && value > 0 ? value : undefined
+    }
+
+    /**
+     * How many collapse/expand attempts the remount gets, and how long each
+     * waits for the page to paint, in milliseconds. The card is re-seeded from
+     * the Models page's own settings snapshot, which React re-renders
+     * asynchronously after the write — so the first attempt can legitimately land
+     * before it, and the wait is what a later one needs. The budget bounds a
+     * hopeless case at roughly a second, after which the caller says so.
+     */
+    const REFRESH_ATTEMPTS = 8
+    const REFRESH_RETRY_MS = 60
+
+    /**
+     * How long a burst of card edits is collected before it is written, in
+     * milliseconds. Long enough to swallow a run of clicks on adjacent rows and the
+     * keystrokes of one field, short enough that a single edit still looks
+     * immediate.
+     */
+    const CARD_WRITE_DEBOUNCE_MS = 120
+
     /**
      * Whether a button's label (already trimmed) belongs to this takeover. An
      * exact match, never a prefix: the Models page carries other 添加… buttons
@@ -921,8 +1072,45 @@ window.__ModuleLoader__.load({
      * A `disabled` button never dispatches a click at all, so the native
      * gates (adding while the editor is busy, fetching without a base URL) hold
      * here too without this function re-reading any of them.
+     *
+     * The same listener carries the two other halves of the card's live editing:
+     * `input`/`change` on its fields (each edit is written as it is made) and a
+     * click on 保存 (which, with every other field writing itself, is left holding
+     * only the API key).
      */
-    function installEntryTakeover() {
+    function installEntryTakeover(hooks) {
+      const onRemove = hooks !== null && hooks !== undefined && typeof hooks.onRemove === 'function'
+        ? hooks.onRemove
+        : null
+      const onField = hooks !== null && hooks !== undefined && typeof hooks.onField === 'function'
+        ? hooks.onField
+        : null
+      const onKey = hooks !== null && hooks !== undefined && typeof hooks.onKey === 'function'
+        ? hooks.onKey
+        : null
+      const onReset = hooks !== null && hooks !== undefined && typeof hooks.onReset === 'function'
+        ? hooks.onReset
+        : null
+
+      /** One field edit, read off whichever input the event came from. */
+      const onFieldEvent = (event) => {
+        if (takeoverBypassed || !pickerChannel.mounted) return
+        const field = event.target
+        if (field === null || field === undefined || typeof field.getAttribute !== 'function') return
+        const card = cardWithMarker(field)
+        if (card === null) return
+        // The key is not written here — it is what the card's 保存 commits — but
+        // its content is what decides whether that button is offered at all.
+        if (field.type === 'password') {
+          syncFooterVisibility(card)
+          return
+        }
+        if (onField === null) return
+        const target = fieldTargetOf(ariaLabelOf(field))
+        if (target === null) return
+        onField(card, target, typeof field.value === 'string' ? field.value : '')
+      }
+
       const onClickCapture = (event) => {
         if (takeoverBypassed || !pickerChannel.mounted) return
         const target = event.target
@@ -930,16 +1118,567 @@ window.__ModuleLoader__.load({
         const button = target.closest('button')
         if (button === null) return
         const label = typeof button.textContent === 'string' ? button.textContent.trim() : ''
+        // dsh's own 编辑 toggle, riding along on this listener because the fold it
+        // mounts is where this plugin's entry points live. Nothing is prevented or
+        // stopped here: the click has to reach dsh for the card to open at all.
+        if (EDIT_LABELS.indexOf(label) !== -1) {
+          if (cardWithMarker(button) !== null) void revealEditorFoldSoon()
+          return
+        }
+        const card = cardWithMarker(button)
+        // 恢复默认模型, and 保存: both are dsh actions this plugin takes over rather
+        // than lets run. The reset drops the route's stored array (the card then
+        // re-mounts showing the shipped presets, exactly as dsh's draft edit
+        // looked), and 保存 — which the card now shows under the key — commits the
+        // typed key, because everything else on the card has already been written.
+        if (card !== null && RESET_LABELS.indexOf(label) !== -1 && onReset !== null) {
+          event.preventDefault()
+          event.stopPropagation()
+          onReset(card)
+          return
+        }
+        if (card !== null && SUBMIT_LABELS.indexOf(label) !== -1 && onKey !== null) {
+          const input = keyInputOf(card)
+          const value = input === null || typeof input.value !== 'string' ? '' : input.value
+          event.preventDefault()
+          event.stopPropagation()
+          onKey(card, value)
+          return
+        }
+        // dsh's per-row removal, taken over the same way 添加模型 is — but here the
+        // click is deliberately NOT prevented, because the card has to drop the row
+        // itself for the click to look immediate. What this adds is the write: the
+        // stored route loses the model now instead of at 保存, so a deletion lands
+        // exactly like an addition does, and the draft that dsh just edited is
+        // re-seeded from the document a moment later.
+        if (card !== null && onRemove !== null) {
+          const removalRow = removalRowOf(button, card)
+          if (removalRow !== -1) {
+            const shown = cardModelIds(card)
+            const removed = shown === null ? undefined : shown[removalRow]
+            if (typeof removed === 'string' && removed.length > 0) onRemove(card, removed)
+            return
+          }
+        }
         if (!isTakeoverLabel(label)) return
-        if (cardWithMarker(button) === null) return
+        if (card === null) return
         event.preventDefault()
         event.stopPropagation()
         pickerChannel.open(button)
       }
       document.addEventListener('click', onClickCapture, true)
+      document.addEventListener('input', onFieldEvent, true)
+      document.addEventListener('change', onFieldEvent, true)
       return () => {
         document.removeEventListener('click', onClickCapture, true)
+        document.removeEventListener('input', onFieldEvent, true)
+        document.removeEventListener('change', onFieldEvent, true)
+      }
+    }
+
+    /** A node's aria-label, or '' when it has none. */
+    function ariaLabelOf(node) {
+      if (node === null || node === undefined || typeof node.getAttribute !== 'function') return ''
+      const label = node.getAttribute('aria-label')
+      return typeof label === 'string' ? label : ''
+    }
+
+    /** Whether an already-read aria-label is one of dsh's per-row removal buttons. */
+    function isRemoveLabel(label) {
+      for (let at = 0; at < REMOVE_LABELS.length; at += 1) {
+        if (label.indexOf(`${REMOVE_LABELS[at]} `) === 0) return true
       }
+      return false
+    }
+
+    /**
+     * Which model row a removal button owns, or -1 when this click is not one of
+     * dsh's removal buttons.
+     *
+     * Counted from the card's own removal buttons, which `ModelListEditor` renders
+     * one per row in row order — the order {@link cardModelIds} reads, so the two
+     * indexes name the same row. Counting beats parsing the trailing number out of
+     * the aria-label: the label's own numbering would be another dsh detail to
+     * track, while the DOM here is already the source of the rows.
+     * @param button - the clicked button.
+     * @param card - the provider's card element.
+     * @returns the row index, or -1.
+     */
+    function removalRowOf(button, card) {
+      if (!isRemoveLabel(ariaLabelOf(button))) return -1
+      if (card === null || card === undefined || typeof card.querySelectorAll !== 'function') return -1
+      const buttons = card.querySelectorAll('button')
+      if (buttons === null || buttons === undefined || typeof buttons.length !== 'number') return -1
+      let index = 0
+      for (let at = 0; at < buttons.length; at += 1) {
+        const node = buttons[at]
+        if (node === button) return index
+        if (isRemoveLabel(ariaLabelOf(node))) index += 1
+      }
+      return -1
+    }
+
+    /**
+     * The list left after dropping one model id, in order.
+     *
+     * Filters by id rather than by index: the row the user clicked is named by
+     * what that row shows, and a stored array whose order drifted must not make
+     * the click delete its neighbour.
+     * @param models - the stored model entries.
+     * @param id - the id to drop.
+     * @returns a new list without it.
+     */
+    function withoutModel(models, id) {
+      const kept = []
+      for (let at = 0; at < models.length; at += 1) {
+        const model = models[at]
+        if (model !== null && model !== undefined && model.id === id) continue
+        kept.push(model)
+      }
+      return kept
+    }
+
+    /**
+     * One route model array with the edited rows' fields applied.
+     *
+     * Each row is found by the id its card row shows, so an edit follows the row
+     * the user typed into rather than a position that may have moved. The id is
+     * also the one field whose edit erases that link — the draft then names an id
+     * the document does not have — and only that case (and only while both lists
+     * still have the same length) falls back to the row's position.
+     *
+     * Entries are copied, never rebuilt: this card edits four fields of a model
+     * and knows nothing about the rest of them, so anything it does not edit has
+     * to survive the write.
+     * @param models - the stored model entries.
+     * @param draftIds - the ids the card's rows show, or null when they cannot be read.
+     * @param rows - edited row index to the fields changed in it.
+     * @returns a new array, or the same one when nothing changed.
+     */
+    function patchModels(models, draftIds, rows) {
+      if (rows === null || rows === undefined || typeof rows.size !== 'number' || rows.size === 0) return models
+      const next = models.map((model) => (model !== null && typeof model === 'object' ? { ...model } : model))
+      let touched = false
+      for (const [index, patch] of rows) {
+        let target = -1
+        const draftId = draftIds !== null && index < draftIds.length ? draftIds[index] : undefined
+        if (typeof draftId === 'string' && draftId.length > 0) {
+          for (let at = 0; at < next.length; at += 1) {
+            const entry = next[at]
+            if (entry !== null && entry !== undefined && typeof entry === 'object' && entry.id === draftId) {
+              target = at
+              break
+            }
+          }
+        }
+        if (target === -1 && draftIds !== null && draftIds.length === next.length) target = index
+        const entry = target === -1 ? undefined : next[target]
+        if (entry === null || entry === undefined || typeof entry !== 'object') continue
+        for (const key of Object.keys(patch)) {
+          const value = patch[key]
+          if (value === UNSET) {
+            if (key in entry) {
+              delete entry[key]
+              touched = true
+            }
+            continue
+          }
+          if (entry[key] !== value) {
+            entry[key] = value
+            touched = true
+          }
+        }
+      }
+      return touched ? next : models
+    }
+
+    /**
+     * The row's editing toggle, found from the row a taken-over button sits in.
+     *
+     * Scoped to `closest('li')` — the same per-provider list item the marker
+     * lookup uses — so a sibling provider's identical 编辑 button is never claimed.
+     * @param row - the provider's list item, or null.
+     * @returns the toggle button, or null when this DOM is not the shape we know.
+     */
+    function editToggleOf(row) {
+      if (row === null || row === undefined || typeof row.querySelectorAll !== 'function') return null
+      const buttons = row.querySelectorAll('button')
+      for (let index = 0; index < buttons.length; index += 1) {
+        const node = buttons[index]
+        const label = typeof node.textContent === 'string' ? node.textContent.trim() : ''
+        if (EDIT_LABELS.indexOf(label) !== -1) return node
+      }
+      return null
+    }
+
+    /**
+     * The model ids the card's own rows currently show, or null when `row` is
+     * not the shape this bundle knows.
+     *
+     * Read straight from the row inputs rather than from any snapshot: it is the
+     * DOM the user is looking at that has to carry the answer.
+     * @param row - the provider's list item, or null.
+     * @returns the ids in row order, or null when the row cannot be read.
+     */
+    function cardModelIds(row) {
+      if (row === null || row === undefined || typeof row.querySelectorAll !== 'function') return null
+      const inputs = row.querySelectorAll('input')
+      if (inputs === null || inputs === undefined || typeof inputs.length !== 'number') return null
+      const ids = []
+      for (let index = 0; index < inputs.length; index += 1) {
+        const node = inputs[index]
+        if (node === null || node === undefined) continue
+        const label = typeof node.getAttribute === 'function' ? node.getAttribute('aria-label') : null
+        if (typeof label !== 'string') continue
+        for (let at = 0; at < MODEL_ID_LABELS.length; at += 1) {
+          if (label.indexOf(MODEL_ID_LABELS[at]) === 0) {
+            ids.push(typeof node.value === 'string' ? node.value : '')
+            break
+          }
+        }
+      }
+      return ids
+    }
+
+    /**
+     * Let the page paint the state this plugin just changed. The remount below
+     * has to wait for React, and a fixed delay is the only thing that can: the
+     * work being waited on is another component's render, which no DOM event
+     * announces.
+     * @returns a promise settling after one retry interval.
+     */
+    function afterPaint() {
+      return new Promise((resolve) => {
+        setTimeout(resolve, REFRESH_RETRY_MS)
+      })
+    }
+
+    /**
+     * Re-open the card's 自定义设置 fold, which the remount re-creates closed.
+     *
+     * The models this plugin adds live inside that fold, so without this the
+     * list refreshes out of sight and the user still has to expand it to see
+     * what they added. `open` is the browser's own attribute here — React renders
+     * this `<details>` without controlling it, so setting it is not a state
+     * write it would undo.
+     * @param row - the provider's list item.
+     */
+    function openEditorFold(row) {
+      if (row === null || row === undefined || typeof row.querySelector !== 'function') return
+      const fold = row.querySelector('details')
+      if (fold !== null && fold !== undefined) fold.open = true
+    }
+
+    /** The card's API-key field: the one password input it renders. */
+    function keyInputOf(card) {
+      if (card === null || card === undefined || typeof card.querySelectorAll !== 'function') return null
+      const inputs = card.querySelectorAll('input')
+      if (inputs === null || inputs === undefined || typeof inputs.length !== 'number') return null
+      for (let at = 0; at < inputs.length; at += 1) {
+        if (inputs[at] !== null && inputs[at] !== undefined && inputs[at].type === 'password') return inputs[at]
+      }
+      return null
+    }
+
+    /**
+     * The card's action row: the smallest ancestor of the commit button that also
+     * holds the dismiss one. Its class is a CSS-module hash; this shape is not.
+     * @param card - the provider's card element.
+     * @returns the row, or null when the card is not the shape this bundle knows.
+     */
+    function footerOf(card) {
+      if (card === null || card === undefined || typeof card.querySelectorAll !== 'function') return null
+      const buttons = card.querySelectorAll('button')
+      if (buttons === null || buttons === undefined || typeof buttons.length !== 'number') return null
+      let submit = null
+      let cancel = null
+      for (let at = 0; at < buttons.length; at += 1) {
+        const node = buttons[at]
+        if (node === null || node === undefined) continue
+        const label = typeof node.textContent === 'string' ? node.textContent.trim() : ''
+        if (submit === null && SUBMIT_LABELS.indexOf(label) !== -1) submit = node
+        if (cancel === null && CANCEL_LABELS.indexOf(label) !== -1) cancel = node
+      }
+      if (submit === null || cancel === null) return null
+      let footer = submit.parentElement
+      while (footer !== null && footer !== undefined && footer !== card
+        && typeof footer.contains === 'function' && !footer.contains(cancel)) {
+        footer = footer.parentElement
+      }
+      return footer === null || footer === undefined || footer === card ? null : footer
+    }
+
+    /**
+     * Show the card's 取消/保存 only while the key field holds something.
+     *
+     * Those two buttons now commit exactly one thing — the key — so with the field
+     * empty they offer a commit of nothing, and the card is cleaner without them.
+     * dsh never pre-fills the field (its placeholder is 已配置——输入新值可替换),
+     * so a card opens with them hidden and they appear on the first keystroke.
+     *
+     * `hidden` would lose to dsh's own `display` rule for that row, hence the
+     * inline style, cleared rather than set to a literal so the row keeps looking
+     * the way dsh drew it.
+     * @param card - the provider's card element.
+     */
+    function syncFooterVisibility(card) {
+      const footer = footerOf(card)
+      if (footer === null || footer.style === null || footer.style === undefined) return
+      const input = keyInputOf(card)
+      const typed = input !== null && typeof input.value === 'string' && input.value.trim().length > 0
+      footer.style.display = typed ? '' : 'none'
+    }
+
+    /**
+     * Put the card's 取消/保存 directly under the API-key field.
+     *
+     * Everything else on this card writes itself now — the model list on add and
+     * delete, and every other field on its own edit — so the pair that used to
+     * mean "commit this whole card" only has the key left to commit. Moving it
+     * there is what makes that read off the screen instead of needing an
+     * explanation.
+     *
+     * A move, not a copy: dsh's own nodes keep their own handlers, and React only
+     * re-creates them when it re-creates the editor — at which point this runs
+     * again from {@link arrangeCard}. Nothing is removed from the DOM, so there is
+     * no node React would later fail to remove.
+     * @param card - the provider's card element.
+     */
+    function parkFooterUnderKey(card) {
+      const footer = footerOf(card)
+      if (footer === null) return
+      const keyInput = keyInputOf(card)
+      const keyField = keyInput === null ? null : keyInput.parentElement
+      if (keyField === null || keyField === undefined || keyField.parentElement === null) return
+      if (keyField.nextElementSibling !== footer) keyField.parentElement.insertBefore(footer, keyField.nextElementSibling)
+      syncFooterVisibility(card)
+    }
+
+    /**
+     * Put one card's editor into the shape this plugin's copy describes: the model
+     * list unfolded, and the footer under the key it now belongs to.
+     *
+     * Called from both places the editor is (re)built: the 编辑 click dsh handles
+     * itself, and this plugin's own remount after a write.
+     * @param row - the provider's list item.
+     */
+    function arrangeCard(row) {
+      openEditorFold(row)
+      if (row !== null && row !== undefined) parkFooterUnderKey(row)
+    }
+
+    /**
+     * The folds this bundle has already revealed, one entry per editor mount.
+     *
+     * React re-creates the `<details>` every time the card reopens, so a fresh
+     * element is revealed again while the one a user collapsed by hand is left
+     * alone — the memory has to be per element, not per card.
+     */
+    const revealedFolds = new WeakSet()
+
+    /**
+     * Open one card's 自定义设置 fold, once per element.
+     *
+     * Why it is needed: that fold holds the model list AND the two buttons this
+     * plugin takes over, and dsh renders it closed. A card opened by hand
+     * therefore buries the list — and this plugin's way in — one click deep,
+     * every single time. Opening it as the editor appears is what makes the
+     * models visible on the spot.
+     *
+     * Once per element, deliberately: the user's collapse is theirs to make, and
+     * re-opening it on every mutation would fight them out of the control.
+     * @param card - the provider's card element, or null.
+     */
+    function revealFoldOf(card) {
+      if (card === null || card === undefined || typeof card.querySelector !== 'function') return
+      const fold = card.querySelector('details')
+      if (fold === null || fold === undefined) return
+      if (revealedFolds.has(fold)) return
+      revealedFolds.add(fold)
+      fold.open = true
+    }
+
+    /** Reveal the mounted Kenari card's fold; a no-op while no card is on screen. */
+    function revealEditorFold() {
+      const card = markedCard()
+      revealFoldOf(card)
+      parkFooterUnderKey(card)
+    }
+
+    /**
+     * Reveal the fold of the editor a click just toggled.
+     *
+     * The card's own 编辑 toggle is dsh's button, so the editor it mounts does
+     * not exist yet when the click is handled: the reveal is retried across one
+     * paint. A toggle that closed the card instead finds no fold and does
+     * nothing, which is what keeps a hand-collapsed fold from snapping back.
+     * @returns settlement after both reveal attempts.
+     */
+    async function revealEditorFoldSoon() {
+      revealEditorFold()
+      await afterPaint()
+      revealEditorFold()
+    }
+
+    /** Whether the card's editor is mounted right now. */
+    function editorMounted(row) {
+      return row !== null
+        && row !== undefined
+        && typeof row.querySelector === 'function'
+        && row.querySelector('details') !== null
+    }
+
+    /**
+     * Leave one card open, with its model list unfolded.
+     *
+     * Called after a remount, including a remount whose list never agreed: the
+     * user opened this picker from an expanded card, and collapsing it would
+     * hide the very list the dialog's copy is talking about. Re-open is a click
+     * on the same toggle (the card is only ever closed by one), and the fold is
+     * re-opened because the remount re-creates it closed.
+     * @param row - the provider's list item.
+     * @param wasOpen - whether the editor was mounted when the work began.
+     * @returns settlement after the card has been re-opened.
+     */
+    async function leaveEditorOpen(row, wasOpen) {
+      // Only a card that was open to begin with is restored: a user who collapsed
+      // it while the write was in flight asked for it closed, and a deletion must
+      // not fight that the way a dialog's own success may override a stale draft.
+      if (wasOpen && !editorMounted(row)) {
+        const toggle = editToggleOf(row)
+        if (toggle !== null && typeof toggle.click === 'function') {
+          toggle.click()
+          await afterPaint()
+        }
+      }
+      arrangeCard(row)
+    }
+
+    /**
+     * Re-mount the editing card this bundle's picker was opened from, and report
+     * success only once its list actually lists what was just written.
+     *
+     * Why it is needed: the card seeds its model list once, at mount, and
+     * deliberately does not follow a pushed settings refresh — that is what keeps
+     * a half-typed API key from being overwritten. A write made from this plugin's
+     * modal therefore lands *behind* the card, and its list would stay stale until
+     * something remounted it. Collapse-then-expand IS that remount, and it is the
+     * card's own control rather than a synthetic dialog close.
+     *
+     * The draft it discards was already invalid: the card's revision fence is stale
+     * after this plugin's write, so its next save would be refused as stale anyway.
+     *
+     * Why the result is checked instead of assumed: the remount re-seeds from the
+     * Models page's snapshot, and a single collapse/expand issued the moment the
+     * write resolves can run before React has re-rendered that page. The card then
+     * looks refreshed and still lists the OLD models — the exact bug this exists to
+     * fix, wearing the success copy. So each attempt is compared against the ids it
+     * must show, spaced by a paint, until it agrees or the budget runs out.
+     *
+     * Fail-open — no toggle found (a dsh release renamed it), or a list that never
+     * agrees, returns false and the caller falls back to the copy that names the
+     * manual way. Either way the card is left open with its fold unfolded, since
+     * the user came here from an expanded card — a collapsed one would hide both
+     * the list and the copy talking about it.
+     * @param button - the native button the takeover intercepted.
+     * @param addedIds - the model ids the card's list must contain to count as refreshed.
+     * @returns whether the card now lists every added id.
+     */
+    async function refreshProviderEditor(button, addedIds) {
+      if (button === null || button === undefined || typeof button.closest !== 'function') return false
+      const wanted = Array.isArray(addedIds) ? addedIds.filter((id) => typeof id === 'string') : []
+      // Resolved ONCE, before anything is clicked: the button that opened the
+      // picker lives INSIDE the editor, so collapsing detaches it and every later
+      // `button.closest('li')` would answer null. The row itself survives — dsh
+      // keys it by provider and only the editor inside it comes and goes.
+      const row = button.closest('li')
+      if (row === null || row === undefined) return false
+      return remountEditorWhile(row, (shown) => wanted.every((id) => shown.indexOf(id) !== -1))
+    }
+
+    /**
+     * Collapse and expand one card until its list agrees, then leave it as the
+     * user had it.
+     *
+     * The loop is shared by both writes this plugin makes to a route: an addition
+     * wants its ids to appear, a removal wants its id to be gone, and everything
+     * else — the pair of clicks, the paint between them, the budget, the row
+     * resolved once, the fold re-opened — is the same either way.
+     * @param row - the provider's list item.
+     * @param agrees - reads the ids the card now lists and answers whether the change is on screen.
+     * @returns whether the card ever agreed.
+     */
+    /**
+     * Every scroller above one node, with where each is scrolled to.
+     *
+     * Recorded because a remount collapses the card first, and a collapse shortens
+     * the page: the browser clamps a scroller's `scrollTop` to the shorter content
+     * the moment it shrinks, so by the time the card is expanded again the position
+     * is already gone. Reading it before the first click is the only way to put it
+     * back.
+     * @param node - the element the card's scrolling is measured from.
+     * @returns the positions, in the order they were found.
+     */
+    function scrollMarksOf(node) {
+      const marks = []
+      let parent = node === null || node === undefined ? null : node.parentElement
+      while (parent !== null && parent !== undefined) {
+        if (typeof parent.scrollTop === 'number'
+          && (parent.scrollTop > 0 || parent.scrollHeight > parent.clientHeight)) {
+          marks.push({ node: parent, top: parent.scrollTop, left: parent.scrollLeft })
+        }
+        parent = parent.parentElement
+      }
+      const root = typeof document === 'undefined' ? null : document.scrollingElement
+      if (root !== null && root !== undefined && typeof root.scrollTop === 'number') {
+        marks.push({ node: root, top: root.scrollTop, left: root.scrollLeft })
+      }
+      return marks
+    }
+
+    /**
+     * Put every recorded scroller back where it was.
+     *
+     * Called after the card has been expanded again, and again after the fold is
+     * re-opened: the fold changes the height too, so restoring before that would
+     * be clamped all over again.
+     * @param marks - what {@link scrollMarksOf} returned.
+     */
+    function restoreScroll(marks) {
+      for (let at = 0; at < marks.length; at += 1) {
+        const mark = marks[at]
+        if (typeof mark.node.scrollTop !== 'number') continue
+        mark.node.scrollTop = mark.top
+        mark.node.scrollLeft = mark.left
+      }
+    }
+
+    async function remountEditorWhile(row, agrees) {
+      const wasOpen = editorMounted(row)
+      const marks = scrollMarksOf(row)
+      let agreed = false
+      for (let attempt = 0; attempt < REFRESH_ATTEMPTS && !agreed; attempt += 1) {
+        const toggle = editToggleOf(row)
+        if (toggle === null || typeof toggle.click !== 'function') break
+        toggle.click()
+        // The second click must land after React commits the first: collapse is a
+        // state update, and re-reading `open` inside the same click would expand
+        // nothing. The row node survives the collapse (it is keyed by provider), so
+        // the toggle is looked up again there instead of reusing a detached node.
+        await afterPaint()
+        const again = editToggleOf(row)
+        if (again !== null && typeof again.click === 'function') again.click()
+        await afterPaint()
+        const shown = cardModelIds(row)
+        if (shown === null) break
+        agreed = agrees(shown)
+        restoreScroll(marks)
+      }
+      await leaveEditorOpen(row, wasOpen)
+      // After the fold, not before: re-opening it changes the height too, and a
+      // position restored under it would be clamped a second time.
+      restoreScroll(marks)
+      return agreed
     }
 
     /**
@@ -1097,7 +1836,7 @@ window.__ModuleLoader__.load({
      * because a catalog browser that cannot add anything just duplicated it.
      */
     function useCatalogPanel(props) {
-      const { routeNs, routeProvider, loadPanel, addModels } = props
+      const { routeNs, routeProvider, loadPanel, addModels, onAdded, onComplete } = props
       const [state, setState] = React.useState({ status: 'loading' })
       const [reloads, setReloads] = React.useState(0)
       const [query, setQuery] = React.useState('')
@@ -1159,14 +1898,40 @@ window.__ModuleLoader__.load({
         if (profiles.length === 0 || routeNs === undefined || routeProvider === undefined) return
         setWrite({ status: 'saving' })
         addModels({ settingsNs: routeNs, provider: routeProvider }, profiles).then(
-          (result) => {
-            setWrite(result.ok === true
-              ? { status: 'added', message: t('catalog.added', { count: profiles.length }) }
-              : { status: 'error', message: result.message })
-            if (result.ok === true) {
-              setPicked([])
-              setReloads((current) => current + 1)
+          async (result) => {
+            if (result.ok !== true) {
+              setWrite({ status: 'error', message: result.message })
+              return
+            }
+            // The card behind this modal seeds its list once, at mount, and does not
+            // follow pushed settings refreshes — so it has to be remounted for the
+            // write to show up in it. `onAdded` answers whether the card now really
+            // lists those ids; its own verification is what keeps this copy honest,
+            // because a remount that ran too early looks identical from here.
+            let remounted = false
+            if (typeof onAdded === 'function') {
+              try {
+                remounted = (await onAdded(profiles.map((profile) => profile.id))) === true
+              } catch (_remountFailure) {
+                remounted = false
+              }
             }
+            // Confirmed on the card itself: the rows are already on screen behind
+            // this dialog, so the dialog has nothing left to say and gets out of
+            // the way. An unconfirmed refresh keeps it open, because then its copy
+            // is the only thing that can tell the user to reopen the card.
+            if (remounted && typeof onComplete === 'function') {
+              onComplete()
+              return
+            }
+            setWrite({
+              status: 'added',
+              message: remounted
+                ? t('catalog.added', { count: profiles.length })
+                : t('catalog.addedStale', { count: profiles.length }),
+            })
+            setPicked([])
+            setReloads((current) => current + 1)
           },
           (err) => setWrite({ status: 'error', message: String(err && err.message ? err.message : err) }),
         )
@@ -1316,7 +2081,18 @@ window.__ModuleLoader__.load({
      */
     function ModelCatalogModal(props) {
       const { onClose, nativeButton, loadPanel, addModels, routeNs, routeProvider } = props
-      const panel = useCatalogPanel({ routeNs, routeProvider, loadPanel, addModels })
+      const panel = useCatalogPanel({
+        routeNs,
+        routeProvider,
+        loadPanel,
+        addModels,
+        // The card this modal was opened from is the row's editing card; remounting
+        // it is what makes the freshly written models visible in its list. The ids
+        // travel with the ask so the remount can check its own work, and a confirmed
+        // refresh closes this dialog rather than reporting what the card now shows.
+        onAdded: (addedIds) => refreshProviderEditor(nativeButton, addedIds),
+        onComplete: onClose,
+      })
 
       /**
        * The way back out: close this dialog, then re-click the button dsh
@@ -1423,7 +2199,7 @@ window.__ModuleLoader__.load({
       // picker is about Kenari, so another pi-ai route renders nothing — not
       // even the marker, which is what keeps the takeover from claiming that
       // route's otherwise identical button.
-      if (props.provider === undefined || props.provider.provider !== 'kenari') return null
+      if (props.provider === undefined || props.provider.provider !== KENARI_PROVIDER) return null
       return React.createElement(
         React.Fragment,
         null,
@@ -1773,6 +2549,11 @@ window.__ModuleLoader__.load({
      */
     function apply(ctx) {
       const scope = ctx.settingsScope.bind({ namespace: NS })
+      // The route's own scope, held beside this plugin's: writes to the pi-ai
+      // section go through it rather than through a bare `settings.mutate`, and
+      // that is what folds the write answer into the shared settings mirror the
+      // Models page reads. See `addModels`.
+      const routeScope = ctx.settingsScope.bind({ namespace: PI_AI_NS })
 
       // Bind the translator before anything can render: the components below
       // call it, and every one of them is reachable from here on.
@@ -1882,6 +2663,16 @@ window.__ModuleLoader__.load({
        * list that is currently in effect (user layer when it owns the array,
        * else the composition layer the patch pinned) and only append. Without
        * that, adding one paid model would silently drop the free presets.
+       *
+       * The write goes through this route's settings scope, not a bare
+       * `settings.mutate`: the scope folds the write answer into the shared
+       * settings mirror the Models page reads, so the editing card this plugin
+       * remounts right after reads the new list. A bare wire write would leave
+       * that mirror waiting for the Host's push, which the remount can outrun.
+       *
+       * The scope reports no failure — a refused or unanswered write reloads the
+       * mirror and settles — so success is decided by the document afterwards,
+       * never by what this function assumed it wrote.
        */
       const addModels = async (route, profiles) => {
         const read = await readPiAi()
@@ -1894,13 +2685,249 @@ window.__ModuleLoader__.load({
           if (model && typeof model.id === 'string') byId.set(model.id, model)
         }
         for (const profile of profiles) if (!byId.has(profile.id)) byId.set(profile.id, profile)
-        const written = await ctx.remote.settings.mutate(
-          route.settingsNs,
+        await routeScope.mutate(
           [{ op: 'set', path: ['providers', route.provider, 'models'], value: [...byId.values()] }],
           read.view.revision,
         )
-        if (!written.ok) return { ok: false, message: `${written.error.code}: ${written.error.message}` }
-        return { ok: true }
+        const after = await readPiAi()
+        const present = new Set(
+          routeModelsOf(after.view, route.provider)
+            .map((model) => (model && typeof model.id === 'string' ? model.id : undefined))
+            .filter((id) => id !== undefined),
+        )
+        const missing = profiles.filter((profile) => !present.has(profile.id)).length
+        return missing === 0
+          ? { ok: true }
+          : { ok: false, message: t('catalog.writeRefused', { count: missing }) }
+      }
+
+      /**
+       * Everything the card writes, collected and flushed as one write.
+       *
+       * The card used to hand dsh a draft and wait for its 保存; now every edit
+       * lands in the document as it is made — a removed row, a restored default
+       * catalog, a renamed model, an endpoint, a display name — and 保存 is left
+       * holding only the API key, which is why it sits under that field.
+       *
+       * Collected rather than written per edit, for two reasons. Each write is a
+       * read-modify-write of the document, so overlapping ones would fence the
+       * second on a revision the first had already superseded and it would be
+       * refused; and a burst of keystrokes should be one write, not one per
+       * character (which is also what keeps a capacity typed as `1M` from being
+       * stored as `1` on its way through).
+       *
+       * Only one edit re-mounts the card: restoring the shipped catalog, whose list
+       * the draft still holds. A field edit is already on screen where the user
+       * typed it (and re-mounting under a caret would take the caret with it), and a
+       * removal is already on screen too — dsh made that edit in the draft itself —
+       * so neither has anything to rebuild.
+       */
+      const pendingEdits = {
+        card: null,
+        removals: new Set(),
+        rows: new Map(),
+        paths: new Map(),
+        reset: false,
+        timer: null,
+        tail: Promise.resolve(),
+      }
+
+      const cardEdit = (card, edit) => {
+        pendingEdits.card = card
+        if (edit.removal !== undefined) pendingEdits.removals.add(edit.removal)
+        if (edit.reset === true) pendingEdits.reset = true
+        if (edit.path !== undefined) pendingEdits.paths.set(edit.path, edit.value)
+        if (edit.row !== undefined) {
+          const at = pendingEdits.rows.get(edit.row.index) ?? {}
+          pendingEdits.rows.set(edit.row.index, { ...at, [edit.row.model]: edit.row.value })
+        }
+        if (pendingEdits.timer !== null) return
+        pendingEdits.timer = setTimeout(flushCardEdits, CARD_WRITE_DEBOUNCE_MS)
+      }
+
+      const flushCardEdits = () => {
+        pendingEdits.timer = null
+        const batch = {
+          card: pendingEdits.card,
+          removals: [...pendingEdits.removals],
+          rows: new Map(pendingEdits.rows),
+          paths: new Map(pendingEdits.paths),
+          reset: pendingEdits.reset,
+        }
+        pendingEdits.removals.clear()
+        pendingEdits.rows.clear()
+        pendingEdits.paths.clear()
+        pendingEdits.reset = false
+        const run = () => applyCardEdits(batch)
+        pendingEdits.tail = pendingEdits.tail.then(run, run)
+      }
+
+      const applyCardEdits = async (batch) => {
+        try {
+          const read = await readPiAi()
+          if (read.failure !== undefined || read.view === undefined) return
+          // A read-only deployment keeps dsh's own behaviour: the card stays a
+          // draft, and it is left alone rather than re-mounted out from under it.
+          if (read.writable !== true) return
+          const modelsPath = ['providers', KENARI_PROVIDER, 'models']
+          const ops = []
+          let remount = false
+          let removed = null
+          if (batch.reset) {
+            ops.push({ op: 'unset', path: modelsPath })
+            remount = true
+          } else {
+            const existing = routeModelsOf(read.view, KENARI_PROVIDER)
+            let next = existing
+            let changed = false
+            for (let at = 0; at < batch.removals.length; at += 1) {
+              const shortened = withoutModel(next, batch.removals[at])
+              if (shortened.length !== next.length) changed = true
+              next = shortened
+            }
+            const patched = patchModels(next, batch.card === null ? null : cardModelIds(batch.card), batch.rows)
+            if (patched !== next) changed = true
+            next = patched
+            if (changed) {
+              ops.push({ op: 'set', path: modelsPath, value: next })
+              if (batch.removals.length > 0) removed = batch.removals
+            }
+          }
+          for (const [field, value] of batch.paths) {
+            ops.push(value === UNSET
+              ? { op: 'unset', path: ['providers', KENARI_PROVIDER, field] }
+              : { op: 'set', path: ['providers', KENARI_PROVIDER, field], value })
+          }
+          if (ops.length === 0) return
+          await routeScope.mutate(ops, read.view.revision)
+          // Restoring the shipped catalog is the one edit that needs the card
+          // rebuilt: its draft still holds the custom list, and nothing shorter of a
+          // remount can take it away.
+          if (remount && batch.card !== null) {
+            await remountEditorWhile(batch.card, () => true)
+            return
+          }
+          // A removal needs no remount at all. dsh made that edit in the card's own
+          // draft, so the row is already gone from the screen, and the draft and the
+          // document now say the same thing — collapsing the card here would only
+          // flash it away to rebuild what is already right (and, if the user had
+          // scrolled the list, drop them somewhere else). What is left to check is
+          // the document, not the card.
+          //
+          // A removal that did NOT land is the one case that has to be shown: the
+          // row is gone from the draft but still stored, so the card is rebuilt to
+          // put it back where the user can see that it survived.
+          if (removed !== null && batch.card !== null) {
+            const after = await readPiAi()
+            const stored = after.view === undefined
+              ? []
+              : routeModelsOf(after.view, KENARI_PROVIDER).map((model) => (model === null || model === undefined ? undefined : model.id))
+            const survived = removed.filter((id) => stored.indexOf(id) !== -1)
+            if (survived.length > 0) {
+              await remountEditorWhile(batch.card, (shown) => survived.some((id) => shown.indexOf(id) !== -1))
+            }
+          }
+        } catch (_cardWriteFailure) {
+          // Fail-open: nothing re-seeds the card, so a write that did not land
+          // shows as the old value in the card's own list rather than as a silent
+          // success.
+        }
+      }
+
+      /** Take one edit off the card's inputs and queue it. */
+      const onCardField = (card, target, raw) => {
+        if (target.where === 'card') {
+          cardEdit(card, { path: target.path, value: raw.trim().length === 0 ? UNSET : raw })
+          return
+        }
+        if (target.capacity === true) {
+          const value = capacityOf(raw)
+          // Not a count this card can mean: the text stays where the user put it
+          // rather than being stored as something it is not.
+          if (value === undefined) return
+          cardEdit(card, { row: { index: target.index, model: target.model, value } })
+          return
+        }
+        const value = raw.trim()
+        if (target.model === 'id') {
+          // An id is the entry's identity: a blank or duplicated one names nothing
+          // the adapter could address, so it stays in the card unhidden.
+          if (value.length === 0) return
+          const shown = cardModelIds(card)
+          if (shown !== null && shown.filter((id) => id === value).length > 1) return
+        }
+        cardEdit(card, { row: { index: target.index, model: target.model, value: value.length === 0 ? UNSET : value } })
+      }
+
+      /**
+       * Commit the key the card's 保存 now stands for.
+       *
+       * The value crosses to the Host and never comes back (the credential seam
+       * has no read path), so this is the one edit with nothing to verify against:
+       * a store that is refused leaves the field filled and says so, rather than
+       * pretending.
+       */
+      const onCardKey = (card, raw) => {
+        const value = raw.trim()
+        if (value.length === 0) {
+          closeCard(card)
+          return
+        }
+        void storeKey(card, value)
+      }
+
+      const storeKey = async (card, value) => {
+        const read = await readPiAi()
+        if (read.failure !== undefined || read.view === undefined || read.writable !== true) return
+        const profile = pathGet(read.view.user, ['providers', KENARI_PROVIDER])
+        const named = profile !== null && typeof profile === 'object' ? profile.apiKeyEnv : undefined
+        const keyRef = typeof named === 'string' && named.length > 0 ? named : DEFAULT_KEY_REF
+        try {
+          await ctx.remote.credentials.set(keyRef, value)
+        } catch (err) {
+          showCardFailure(card, String(err !== null && err !== undefined && err.message ? err.message : err))
+          return
+        }
+        // dsh's own save records the reference the key was stored under; without it
+        // the route still resolves the same name by derivation, but the card would
+        // go on showing an endpoint it no longer names.
+        if (typeof named !== 'string' || named.length === 0) {
+          try {
+            await routeScope.mutate([{ op: 'set', path: ['providers', KENARI_PROVIDER, 'apiKeyEnv'], value: keyRef }], read.view.revision)
+          } catch (_referenceFailure) { /* the derived name is the same one */ }
+        }
+        clearCardFailure(card)
+        closeCard(card)
+      }
+
+      /** Fold the card away, the way dsh folds it after its own save. */
+      function closeCard(card) {
+        const toggle = editToggleOf(card)
+        if (toggle !== null && typeof toggle.click === 'function') toggle.click()
+      }
+
+      // The one place a refused key write can be seen: dsh's own error line is
+      // React's, so this is a node of this bundle's own, put under the key field
+      // and taken away again on the next attempt.
+      const CARD_FAILURE_ATTR = 'data-kenari-card-failure'
+
+      function clearCardFailure(card) {
+        if (card === null || card === undefined || typeof card.querySelector !== 'function') return
+        const shown = card.querySelector(`[${CARD_FAILURE_ATTR}]`)
+        if (shown !== null && shown !== undefined && typeof shown.remove === 'function') shown.remove()
+      }
+
+      function showCardFailure(card, message) {
+        if (card === null || card === undefined || typeof card.querySelector !== 'function') return
+        clearCardFailure(card)
+        if (typeof document.createElement !== 'function') return
+        const line = document.createElement('p')
+        line.setAttribute(CARD_FAILURE_ATTR, '')
+        line.setAttribute('style', 'margin:6px 0 0;font-size:12px;color:#d4380d')
+        line.textContent = message
+        const input = keyInputOf(card)
+        const field = input === null ? null : input.parentElement
+        if (field !== null && field !== undefined && typeof field.appendChild === 'function') field.appendChild(line)
       }
 
       const injected = () => ({ scope, loadModels, describeKey })
@@ -1940,7 +2967,12 @@ window.__ModuleLoader__.load({
       // One document-level listener, torn down with this fiber. It is inert
       // until the Kenari card mounts, because a click only means anything when
       // this plugin's dialog can answer it.
-      ctx.effect(() => installEntryTakeover(), 'kenari: 模型目录入口接管')
+      ctx.effect(() => installEntryTakeover({
+        onRemove: (card, modelId) => { cardEdit(card, { removal: modelId }) },
+        onReset: (card) => { cardEdit(card, { reset: true }) },
+        onField: onCardField,
+        onKey: onCardKey,
+      }), 'kenari: 模型目录入口接管')
       ensureDialogWidth()
 
       // The settings nav glyph. dsh picks its own by section id, so this is the
@@ -1957,6 +2989,26 @@ window.__ModuleLoader__.load({
     exports.__internals = {
       CAPABILITY_TAGS,
       TAKEOVER_LABELS,
+      EDIT_LABELS,
+      MODEL_ID_LABELS,
+      REMOVE_LABELS,
+      SUBMIT_LABELS,
+      CANCEL_LABELS,
+      RESET_LABELS,
+      UNSET,
+      fieldTargetOf,
+      capacityOf,
+      patchModels,
+      footerOf,
+      syncFooterVisibility,
+      scrollMarksOf,
+      restoreScroll,
+      isRemoveLabel,
+      removalRowOf,
+      withoutModel,
+      refreshProviderEditor,
+      cardModelIds,
+      revealFoldOf,
       isTakeoverLabel,
       MARKER_ATTR,
       pathGet,