dsh-kenari-plugin 0.2.1 → 0.2.2

package/README.en.md

@@ -79,7 +79,7 @@ Under **Settings → Models → Kenari → Edit → Model catalog**, "Add model"
 - Filters are `in plan`, `free`, and the capability tags. "In plan" and "free" are mutually exclusive, and `embedding` is exclusive on its own (it has no chat endpoint, so mixing it with anything returns an empty list). The rest combine
 - "Add selected" **appends** to the current entries, and rows already in the route cannot be selected
 
-The write is immediate with no save step, and the list inside that card refreshes only after you collapse and reopen Edit. The Host computes the data and serves it at `GET /api/kenari.models`, the same facts as `kenari_list_models`, and no key is needed.
+The write is immediate: the picker closes itself once it is done and those rows are already in the card behind it. Every other part of that card behaves the same way — display name, base URL, protocol, and each row's id, name, context window and max output are written as soon as you stop typing, and deleting a row or restoring the default catalog takes effect the moment you click. Which is why Cancel/Save now sit under the API key field and commit nothing but the key (they stay hidden while that field is empty). The Host computes the data and serves it at `GET /api/kenari.models`, the same facts as `kenari_list_models`, and no key is needed.
 
 ### Three protocol lines and the compat preset
 

package/README.md

@@ -79,7 +79,7 @@ KENARI_API_KEY=kn-...
 - 过滤片有 `套餐内` `免费` 与各能力标签。「套餐内」与「免费」互斥，`embedding` 独占（它没有 chat 端点，混选只会得到空列表），其余可多选
 - 「添加所选」**追加**到现有条目之后，已在路由里的行不能再勾
 
-写入是即时的，没有保存步骤；同一张卡里的列表要收起再展开才会刷新。数据由 Host 侧算好（`GET /api/kenari.models`），与 `kenari_list_models` 同源，没有 key 也能看。
+写入是即时的：挑选器写完即关，卡片里当场多出那几行。卡片其余部分同理——显示名、API 地址、协议，以及每行的 id／显示名／上下文窗口／最大输出，都在改完（停止输入）后立即写入；删除一行与「恢复默认模型」也是点完即生效。正因如此，「取消／保存」被挪到 API 密钥字段下方，只负责提交密钥（密钥框为空时这两个按钮不显示）。数据由 Host 侧算好（`GET /api/kenari.models`），与 `kenari_list_models` 同源，没有 key 也能看。
 
 ### 三条协议线与兼容预设
 

package/client/index.js

@@ -375,6 +375,142 @@ window.__ModuleLoader__.load({
      */
     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
@@ -936,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
@@ -945,16 +1118,178 @@ 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
     }
 
     /**
@@ -977,7 +1312,251 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Re-mount the editing card this bundle's picker was opened from.
+     * 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
@@ -989,26 +1568,117 @@ window.__ModuleLoader__.load({
      * 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.
      *
-     * Fail-open — no toggle found (a dsh release renamed it) returns false and the
-     * caller falls back to the copy that tells the user to reopen the card.
+     * 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.
-     * @returns whether a remount was started.
+     * @param addedIds - the model ids the card's list must contain to count as refreshed.
+     * @returns whether the card now lists every added id.
      */
-    function refreshProviderEditor(button) {
+    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')
-      const toggle = editToggleOf(row)
-      if (toggle === null || typeof toggle.click !== 'function') return false
-      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.
-      setTimeout(() => {
+      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()
-      }, 0)
-      return true
+        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
     }
 
     /**
@@ -1166,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, onAdded } = 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('')
@@ -1228,16 +1898,32 @@ window.__ModuleLoader__.load({
         if (profiles.length === 0 || routeNs === undefined || routeProvider === undefined) return
         setWrite({ status: 'saving' })
         addModels({ settingsNs: routeNs, provider: routeProvider }, profiles).then(
-          (result) => {
+          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` reports whether that remount was
-            // possible; when it is not, the copy says how to get there by hand.
-            const remounted = typeof onAdded === 'function' && onAdded() === true
+            // 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
@@ -1401,8 +2087,11 @@ window.__ModuleLoader__.load({
         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.
-        onAdded: () => refreshProviderEditor(nativeButton),
+        // 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,
       })
 
       /**
@@ -1510,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,
@@ -2012,6 +2701,235 @@ window.__ModuleLoader__.load({
           : { 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 })
       ctx.slots.inject('settings.section', () =>
         ctx.slots.register(
@@ -2049,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
@@ -2067,7 +2990,25 @@ window.__ModuleLoader__.load({
       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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-kenari-plugin",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Kenari (kenari.id) as a first-class citizen of DeepSeek Harness: session models, web search/fetch provider with fallback, and REST capability tools.",
   "license": "MIT",
   "repository": {