dsh-loadout 0.12.4 → 0.13.0

package/client.js

@@ -35,8 +35,9 @@ window.__ModuleLoader__.load({
     /** This plugin's own tools never belong inside a kit. */
     const OWN_TOOLS = ['kit_list', 'kit_apply', 'kit_create', 'kit_set_tools', 'kit_set_default', 'kit_delete']
 
-    /** The exact sentence the spec fixes for the panel footer. */
-    const FOOTER = '装备栏只决定「这个对话能用哪些工具」：切换后下一条消息即按新清单组装，随时可以切回「全部」；新对话则从「设置 → 装备栏」的默认套装开始。它作用于工具（tool）这一层——界面面板、宿主服务类插件不注册工具，因此不受影响。'
+    /** The panel footer: what this menu does, then the one thing worth acting on. */
+    const FOOTER = '装备栏只决定「这个对话能用哪些工具」：切换后下一条消息即按新清单组装，随时可以切回「全部」；装备栏作用于工具（tool）这一层——界面面板、宿主服务类插件不注册工具，因此不受影响。'
+    const FOOTER_WARN = '建议新建对话时直接选择合适套装！对话中途切换套装会改变插件清单，下一条对话要按未命中价重新计算一次，之后恢复至缓存价。长对话影响较大，短对话基本无影响；空闲对话、刚压缩的对话、重启后再切换无影响。'
 
     /** A kit's one-line reminder; keep in step with NOTE_MAX in index.js. */
     const NOTE_MAX = 20
@@ -86,6 +87,53 @@ window.__ModuleLoader__.load({
       return `${(n / 1000).toFixed(n < 10000 ? 1 : 0)}k`
     }
 
+    /** The one binding value that is not a kit: "Harness built-ins only". */
+    const DEFAULT_DSH = '@dsh'
+
+    // The cost of a switch is quoted at provider list prices, in ¥ per million
+    // tokens. It is a setting, not a constant: prices move, and a wrong number
+    // here can only make an estimate wrong — it never changes what a switch does.
+    const PRICE_KEY = 'dsh-loadout:pricing'
+    const PRICE_DEFAULT = { miss: 2, hit: 0.5 }
+    /** Below this the switch is lost in the noise, and a warning would be noise. */
+    const PRICE_MIN_TOKENS = 20000
+
+    function readPrices() {
+      try {
+        const raw = window.localStorage?.getItem(PRICE_KEY)
+        if (raw === null || raw === undefined) return { ...PRICE_DEFAULT }
+        const parsed = JSON.parse(raw)
+        const miss = Number(parsed?.miss)
+        const hit = Number(parsed?.hit)
+        return {
+          miss: Number.isFinite(miss) && miss >= 0 ? miss : PRICE_DEFAULT.miss,
+          hit: Number.isFinite(hit) && hit >= 0 ? hit : PRICE_DEFAULT.hit,
+        }
+      } catch {
+        return { ...PRICE_DEFAULT }
+      }
+    }
+
+    function writePrices(next) {
+      try {
+        window.localStorage?.setItem(PRICE_KEY, JSON.stringify(next))
+      } catch {
+        // A browser without storage just keeps the defaults for this page.
+      }
+    }
+
+    /**
+     * The bill for one switch. The floor that kept row labels quiet is gone —
+     * rows no longer quote money at all (they quote tool tokens), so the footer
+     * is the only place the number appears and it always appears there.
+     */
+    function switchCost(tokens, prices) {
+      const n = Number(tokens)
+      if (!Number.isFinite(n) || n <= 0) return ''
+      const yuan = (n / 1e6) * Math.max(0, prices.miss - prices.hit)
+      return `≈¥${yuan < 0.1 ? yuan.toFixed(3) : yuan.toFixed(2)}`
+    }
+
     // Every mutation fans out to the other panel. The chip and the settings page
     // are separate React trees with separate snapshots, so a switch made in one
     // used to leave the other showing the old numbers until it remounted.
@@ -195,6 +243,12 @@ window.__ModuleLoader__.load({
         fontSize: 11, opacity: 0.62, marginTop: 8, lineHeight: 1.6,
         borderTop: '1px solid var(--ds-border, #e5e7eb)', paddingTop: 6,
       },
+      // The one paragraph in the panel that asks for a decision before the
+      // first message, so it is not dimmed with the rest of the footer.
+      warnLine: { marginTop: 6, color: '#b45309', opacity: 0.95, lineHeight: 1.6 },
+      // The bill, stated once under the reminder: quieter than the warning
+      // because it explains the numbers rather than asking for anything.
+      billLine: { marginTop: 4, fontWeight: 600, color: '#111827', lineHeight: 1.6 },
       error: { fontSize: 11, color: '#dc2626', marginTop: 6, lineHeight: 1.5 },
       notice: { fontSize: 11, color: '#2563eb', marginTop: 6, lineHeight: 1.5 },
       input: {
@@ -202,6 +256,12 @@ window.__ModuleLoader__.load({
         border: '1px solid var(--ds-border, #d8dbe0)', background: 'transparent', color: 'inherit',
         font: 'inherit', fontSize: 12,
       },
+      // A price is four characters wide, not the width of the panel.
+      priceInput: {
+        width: 72, boxSizing: 'border-box', padding: '3px 6px', borderRadius: 6,
+        border: '1px solid var(--ds-border, #d8dbe0)', background: 'transparent', color: 'inherit',
+        font: 'inherit', fontSize: 12,
+      },
       iconButton: {
         border: 'none', background: 'transparent', color: 'inherit', cursor: 'pointer',
         fontSize: 13, lineHeight: 1, padding: '2px 4px', opacity: 0.7, flex: 'none',
@@ -231,6 +291,19 @@ window.__ModuleLoader__.load({
         background: 'rgba(37, 99, 235, 0.05)',
       },
       tag: { fontSize: 10, padding: '0 5px', borderRadius: 4, border: '1px solid currentColor', opacity: 0.7 },
+      // The new-conversation picker, sitting in the composer's tool row next to
+      // 权限/计划. It is one compact chip; the list floats above the row (below
+      // is the window edge), and opening it never reflows the page.
+      pickWrap: { position: 'relative', display: 'inline-flex', alignItems: 'center' },
+      chipMuted: { opacity: 0.55 },
+      chipStrong: { fontWeight: 600 },
+      pickPanel: {
+        position: 'absolute', bottom: 'calc(100% + 6px)', left: 0, zIndex: 60,
+        display: 'flex', flexDirection: 'column', gap: 2, padding: 6, borderRadius: 10,
+        border: '1px solid var(--ds-border, #d8dbe0)', background: 'var(--ds-surface, #fff)',
+        boxShadow: '0 12px 32px rgba(0,0,0,.16)', width: 260, maxHeight: 320, overflowY: 'auto',
+        fontSize: 12,
+      },
     }
 
     // ---- small pieces -------------------------------------------------------
@@ -291,7 +364,10 @@ window.__ModuleLoader__.load({
         }, toolName)))
     }
 
-    /** A selectable line: ✓ marker, label (with an optional tooltip), hint. */
+    /**
+     * A selectable line: ✓ marker, label (with an optional tooltip), hint, and
+     * an optional `aside` — a quiet secondary action that stops the click.
+     */
     function MenuRow(props) {
       const [hover, setHover] = useState(false)
       const disabled = props.disabled === true
@@ -327,7 +403,9 @@ window.__ModuleLoader__.load({
           ? h('span', null, props.label)
           : h(Tip, { text: props.tip }, h('span', null, props.label))),
       h('span', { style: { flex: 1 } }),
-      props.hint === undefined || props.hint === '' ? null : h('span', { style: styles.meta }, props.hint))
+      props.hint === undefined || props.hint === '' ? null : (
+        h('span', { style: styles.meta }, props.hint)
+      ))
     }
 
     /** A collapsible group header: caret, title with its count, optional action. */
@@ -365,6 +443,7 @@ window.__ModuleLoader__.load({
       const {
         catalog, draft, onChange, busy, onCancel, onSave, saveLabel,
         title, onSaveAs, saveAsLabel, nameField, namePlaceholder, clash,
+        onSaveKeep, saveKeepLabel, saveTip,
       } = props
       // Both lists start collapsed: the builder opens with a name field and a
       // summary, not with forty checkboxes.
@@ -446,14 +525,247 @@ window.__ModuleLoader__.load({
           onSaveAs === undefined
             ? null
             : h('button', { type: 'button', style: styles.ghost, disabled: busy, onClick: onSaveAs }, saveAsLabel ?? '另存为新套装'),
+          // Saving and using are two decisions. The menu may do both, so it
+          // offers both; the settings page only ever saves a kit for later.
+          onSaveKeep === undefined
+            ? null
+            : h('button', { type: 'button', style: styles.ghost, disabled: busy, onClick: onSaveKeep }, saveKeepLabel ?? '保存'),
           h('button', {
             type: 'button',
             style: { ...styles.primary, ...(typeof clash === 'string' && clash !== '' ? { opacity: 0.5 } : null) },
             disabled: busy || (typeof clash === 'string' && clash !== ''),
+            // `title`, not Tip: this button sits inside the menu's scrolling
+            // body, so a floating bubble would be clipped by the same overflow
+            // that keeps the panel short. A native tooltip always fits.
+            title: saveTip,
             onClick: onSave,
           }, saveLabel ?? '保存')))
     }
 
+    // ---- the new-conversation picker ---------------------------------------
+    /**
+     * The kit picker a brand-new conversation shows in the hero row.
+     *
+     * A conversation that has not sent a message usually has no agent yet, so
+     * there is nothing to "switch": the pick is stored as this Session's binding
+     * and installed the moment the agent appears — before the first request
+     * builds a prompt, which makes it the one switch that never re-bills the
+     * prompt cache. The row leaves with the hero at the first send.
+     *
+     * Chips instead of a popover on purpose: the hero area is empty by
+     * definition, so an inline row needs no measuring and cannot be clipped the
+     * way the header's panel would be.
+     */
+    function HeroKit(props) {
+      const sessionId = props.sessionId
+      // `preview` is a test seam for scripts/client-smoke.mjs, same as HeaderMenu.
+      const preview = props.preview ?? null
+      const [data, setData] = useState(preview?.data ?? null)
+      const [busy, setBusy] = useState(false)
+      // What the hover sentence says once a pick has landed (or why it failed);
+      // the row itself never grows a message line.
+      const [picked, setPicked] = useState(false)
+      const [failed, setFailed] = useState('')
+      // Collapsed by default: the picker answers "which kit will this
+      // conversation start with", and the list is what you open to change it.
+      const [open, setOpen] = useState(preview?.open === true)
+      const [groups, setGroups] = useState(preview?.groups ?? { presets: false, kits: false })
+      const box = useRef(null)
+      // One visit, one first look: a draft left by an earlier visit is dropped
+      // before it is ever shown, so the screen starts where the host's own mode
+      // starts — at the default.
+      const firstLook = useRef(true)
+      const lastSession = useRef(sessionId)
+      // `useSession` is a standard prop for session-scoped slots; a host that
+      // does not hand it over still only renders this slot in the hero phase.
+      const useSession = props.useSession
+      const blank = preview?.blank ?? (typeof useSession === 'function'
+        ? (useSession((snapshot) => snapshot?.blank) ?? true)
+        : true)
+
+      const refresh = useCallback(async () => {
+        if (typeof sessionId !== 'string' || sessionId === '') return
+        // A different conversation in the same slot is a different visit.
+        if (lastSession.current !== sessionId) {
+          lastSession.current = sessionId
+          firstLook.current = true
+        }
+        try {
+          let next = await load(sessionId)
+          // A draft pick left on this welcome screen by a previous visit is not a
+          // decision: ask the host to drop it before showing anything, so the
+          // user sees the same clean slate the host gives its own mode. This has
+          // to cover a welcome screen that already has an agent behind it — that
+          // is the common case, and skipping it there is what let a draft from
+          // the last visit outlive the restart that should have cleared it.
+          if (firstLook.current === true && next.draft === true) {
+            next = await request({ action: 'release', sessionId })
+          }
+          // A blank screen has no history, so nothing is lost by agreeing with
+          // it: whatever the chip shows is what the next message must use. That
+          // covers a conversation created while a different default was set —
+          // the store still carries that kit, and it used to be shown as if it
+          // had been chosen here. `follow` keeps the correction borrowed (no
+          // draft), so a later default change moves it again.
+          if (blank === true) {
+            const wanted = next.draft === true
+              ? String(next.binding ?? '')
+              : (typeof next.defaultKit === 'string' ? next.defaultKit : '')
+            if (String(next.binding ?? '') !== wanted) {
+              try {
+                next = await request({ action: 'bind', sessionId, name: wanted, follow: true })
+              } catch {
+                // Following is a courtesy, not the answer: if the host refuses,
+                // `load` already told the truth about what this screen uses.
+              }
+            }
+          }
+          firstLook.current = false
+          setData(next)
+        } catch {
+          // "No agent yet" is a normal answer for this route, not something to
+          // paint red above the composer.
+        }
+      }, [sessionId])
+
+      useEffect(() => {
+        refresh()
+      }, [refresh])
+
+      // The picker outlives the settings page: the default kit it shows when
+      // nothing is bound can change while this visit stays open, and coming back
+      // to the composer must not show the kit that was current at mount. Same
+      // sources the header menu listens to, plus focus for changes made in
+      // another window.
+      useEffect(() => {
+        const sync = () => { refresh() }
+        window.addEventListener(CHANGED_EVENT, sync)
+        window.addEventListener('focus', sync)
+        return () => {
+          window.removeEventListener(CHANGED_EVENT, sync)
+          window.removeEventListener('focus', sync)
+        }
+      }, [refresh])
+
+      // The list floats over the composer instead of pushing it down: a select
+      // that resizes the page every time it opens is worse than a covered input.
+      useEffect(() => {
+        if (!open) return undefined
+        const away = (event) => {
+          if (box.current !== null && !box.current.contains(event.target)) setOpen(false)
+        }
+        document.addEventListener('mousedown', away)
+        return () => document.removeEventListener('mousedown', away)
+      }, [open])
+
+      // The name a pick shows: the kit's title, or the two base names — `@dsh`
+      // is this plugin's wire value for 仅内置 and must never surface as text.
+      const labelOf = (name) => {
+        if (name === '') return '全部'
+        if (name === DEFAULT_DSH) return '仅内置'
+        const found = [...(data?.kits ?? []), ...(data?.presets ?? [])].find((kit) => kit.name === name)
+        return found?.title ?? found?.name ?? name
+      }
+
+      const pick = async (name) => {
+        if (busy || typeof sessionId !== 'string' || sessionId === '') return
+        setBusy(true)
+        setFailed('')
+        try {
+          setData(await request({ action: 'bind', sessionId, name }))
+          setOpen(false)
+          setPicked(true)
+        } catch (error) {
+          setFailed(String(error?.message ?? error))
+        } finally {
+          setBusy(false)
+        }
+      }
+
+      if (!blank || data === null || typeof sessionId !== 'string' || sessionId === '') return null
+      const kits = data.kits ?? []
+      const presets = data.presets ?? []
+      // `bound` separates "this conversation chose 全部" from "nothing chosen
+      // yet": without it, a fresh conversation would claim 全部 even when the
+      // default kit is what will actually start it.
+      const current = data.bound === true
+        ? (typeof data.binding === 'string' ? data.binding : '')
+        : (typeof data.defaultKit === 'string' ? data.defaultKit : '')
+      // The list marks the default kit the way the header menu does — after the
+      // name. The collapsed chip stays plain (`选择对话套装：idea`): there it is
+      // the current pick, and "default" is not what the sentence says.
+      const isDefaultName = (name) => typeof data.defaultKit === 'string' && data.defaultKit === name
+      const marked = (label, name) => (isDefaultName(name) ? `${label}（默认）` : label)
+      const defaultKitRow = kits.find((kit) => kit.name === data.defaultKit)
+      const defaultPresetRow = presets.find((preset) => preset.name === data.defaultKit)
+      const row = (name, label, tip) => h(MenuRow, {
+        key: `pick-${name === '' ? 'all' : name}`,
+        label,
+        tip,
+        active: current === name,
+        indent: true,
+        disabled: busy,
+        onClick: () => pick(name),
+      })
+      const kitRow = (kit) => h(MenuRow, {
+        key: `pick-${kit.name}`,
+        label: marked(kitLabel(kit), kit.name),
+        active: current === kit.name,
+        indent: true,
+        disabled: busy,
+        onClick: () => pick(kit.name),
+      })
+
+      // The sentence lives on hover, not on the row: the composer line is shared
+      // with the permission and plan chips, so the control only says what it is
+      // plus the current pick.
+      const tipText = failed !== ''
+        ? failed
+        : picked
+          ? `这个对话会用「${labelOf(current)}」套装，下一条消息生效`
+          : `这个新对话会用「${labelOf(current)}」套装`
+
+      return h('span', { ref: box, style: styles.pickWrap, 'data-loadout': 'kit-pick' },
+        h('button', {
+          type: 'button',
+          style: { ...styles.chip, ...(open ? styles.chipActive : null) },
+          'aria-expanded': open ? 'true' : 'false',
+          'aria-label': tipText,
+          title: tipText,
+          onClick: () => setOpen(!open),
+        },
+        h('span', { style: styles.chipMuted }, '选择对话套装'),
+        h('span', { style: styles.chipStrong }, labelOf(current)),
+        h('span', { style: styles.caret }, open ? '▾' : '▸')),
+        open
+          ? h('div', { style: styles.pickPanel },
+            row('', marked('全部', ''), '不裁剪：Harness 自带工具和所有已启用插件的工具都能用。'),
+            row(DEFAULT_DSH, marked('仅内置', DEFAULT_DSH), '只保留 Harness 自带的工具，下载插件的工具全部隐藏。'),
+            h(GroupHead, {
+              title: '预设套装',
+              count: presets.length,
+              open: groups.presets,
+              tip: '出厂自带的只读套装，点一下即可套用。',
+              onToggle: () => setGroups({ ...groups, presets: !groups.presets }),
+            }),
+            // A collapsed group still shows the default kit: the picker is how
+            // you see what this conversation will start with, and hiding it
+            // behind a fold would answer "nothing chosen" on a fresh screen.
+            groups.presets === true
+              ? presets.map(kitRow)
+              : (defaultPresetRow ? kitRow(defaultPresetRow) : null),
+            h(GroupHead, {
+              title: '我的套装',
+              count: kits.length,
+              open: groups.kits,
+              tip: '你自己保存的套装，点一下即可套用。',
+              onToggle: () => setGroups({ ...groups, kits: !groups.kits }),
+            }),
+            groups.kits === true ? kits.map(kitRow) : (defaultKitRow ? kitRow(defaultKitRow) : null))
+          : null,
+      )
+    }
+
     // ---- the header control -------------------------------------------------
     function HeaderMenu(props) {
       const sessionId = props.sessionId
@@ -462,6 +774,9 @@ window.__ModuleLoader__.load({
       const preview = props.preview ?? null
       const [open, setOpen] = useState(preview?.open === true)
       const [data, setData] = useState(preview?.data ?? null)
+      // Prices live in this browser, so the chip reads them at mount and again
+      // whenever the settings page announces a change.
+      const [prices, setPrices] = useState(readPrices)
       // Both kit groups start collapsed. The menu is a switcher, not a directory:
       // it has to show which set is on, not enumerate every set every time. A
       // collapsed group still shows the one active row, and clicking the head is
@@ -521,9 +836,12 @@ window.__ModuleLoader__.load({
       }, [refresh])
 
       // Another surface (the settings page, the /kit command) may have changed
-      // this conversation's binding while the chip sat idle.
+      // this conversation's binding — or the price settings — while the chip sat idle.
       useEffect(() => {
-        const sync = () => { refresh() }
+        const sync = () => {
+          setPrices(readPrices())
+          refresh()
+        }
         document.addEventListener('dsh-loadout:changed', sync)
         window.addEventListener('focus', sync)
         return () => {
@@ -569,6 +887,38 @@ window.__ModuleLoader__.load({
       const activePreset = base === 'kit' ? presets.find((kit) => kit.name === selection.kit) : undefined
       const applied = data?.appliedPlugins ?? []
       const available = data?.availableExtras ?? plugins.map((plugin) => plugin.id)
+      // Prompt size comes from the host's `contextPressure` projection; it is
+      // null until this conversation has sent its first request.
+      const contextTokens = Number(data?.context?.tokens) || 0
+      // One sentence for the bill, stated for every conversation size. The same
+      // text a tooltip used to carry per row — moved here because the rows are
+      // read at a glance and the reminder under them is what people act on.
+      const billSentence = contextTokens > 0
+        ? `本对话上下文（约 ${formatTokens(contextTokens)} tokens），下一条未命中价${switchCost(contextTokens, prices)}，之后恢复至缓存价。`
+        : '这个对话还没有发出第一条消息；切换后第一条消息会把整套工具定义按未命中价算一次，之后恢复至缓存价。'
+
+      /**
+       * This menu belongs to one conversation: it may switch that conversation
+       * and it may build a new kit, but choosing what *new* conversations start
+       * from is a global decision and lives in 设置 → 装备栏 (`defaultKit`).
+       */
+
+      /**
+       * A row's weight in the prompt: the tool definitions it would install.
+       *
+       * The price of *switching* is one number for the whole conversation — it
+       * depends on how long the conversation is, not on which kit you pick — so
+       * printing it on every row made 全部, 仅内置 and each kit read identically.
+       * The rows differ in how many tokens of tools they add, and that is what
+       * these hints now say; the bill itself sits once, under the reminder.
+       */
+      const toolTokens = (entry) => (Number.isFinite(entry?.tokens) ? `≈${formatTokens(entry.tokens)} tokens` : '')
+      const withDefault = (label, isDefault) => (isDefault ? `${label}（默认）` : label)
+
+      /** `≈2.4k tokens · 只读`, and nothing at all when the row has no price. */
+      const rowHint = (parts) => parts
+        .filter((part) => part !== undefined && part !== '' && part !== false)
+        .join(' · ')
 
       const run = async (payload) => {
         setBusy(true)
@@ -595,7 +945,7 @@ window.__ModuleLoader__.load({
         setSaveAs(false)
       }
 
-      const saveBuilder = async () => {
+      const saveBuilder = async (mode) => {
         if (builder === null) return
         const kitName = builder.name.trim()
         if (kitName === '') {
@@ -617,8 +967,14 @@ window.__ModuleLoader__.load({
             plugins: builder.plugins,
           })
           setData(created)
-          const appliedKit = await run({ action: 'applyBase', base: 'kit', kit: kitName })
           setBuilder(null)
+          if (mode === 'keep') {
+            // Saving is not switching: the kit is now on the list, and this
+            // conversation keeps the tools it already paid for.
+            setMessage(`已保存「${kitName}」。要在这个对话用它，点标题栏的「装备栏」。`)
+            return
+          }
+          const appliedKit = await run({ action: 'applyBase', base: 'kit', kit: kitName })
           if (appliedKit !== null) setMessage(`已保存并启用「${kitName}」`)
         } catch (error) {
           setMessage(String(error.message ?? error))
@@ -690,7 +1046,10 @@ window.__ModuleLoader__.load({
 
       const ledger = data?.ledger
       const saved = ledger?.savedTokens ?? 0
-      const summary = `当前：${label === '' ? '全部' : label}${extras.length === 0 ? '' : ` · 加挂 ${extras.length}`}${saved > 0 ? ` · 省 ~${formatTokens(saved)} tokens` : ''}`
+      // The context size is not a warning, it is the denominator of every price
+      // below: "why is this 0.23" needs "because this conversation is 200k".
+      const contextNote = contextTokens >= PRICE_MIN_TOKENS ? ` · 上下文 ~${formatTokens(contextTokens)}` : ''
+      const summary = `当前：${label === '' ? '全部' : label}${extras.length === 0 ? '' : ` · 加挂 ${extras.length}`}${saved > 0 ? ` · 省 ~${formatTokens(saved)} tokens` : ''}${contextNote}`
 
 
       const rootBody = h('div', null,
@@ -705,16 +1064,19 @@ window.__ModuleLoader__.load({
             onClick: () => { run({ action: 'refresh' }) },
           }, '⟳')),
         h(MenuRow, {
-          label: '全部',
+          label: withDefault('全部', (data?.defaultKit ?? '') === ''),
           tip: '不裁剪：Harness 自带工具和所有已启用插件的工具都能用。',
-          hint: '不限制',
+          // Both base rows pay for their own tool table: 全部 installs every
+          // tool there is, 仅内置 only the built-in ones. That difference is the
+          // reason to pick one over the other, so both rows state it.
+          hint: rowHint([toolTokens({ tokens: data?.baseTokens?.all })]),
           active: isAll,
           onClick: () => run({ action: 'applyBase', base: 'all' }),
         }),
         h(MenuRow, {
-          label: '仅内置',
+          label: withDefault('仅内置', (data?.defaultKit ?? '') === '@dsh'),
           tip: '只保留 Harness 自带的工具，下载插件的工具全部隐藏。',
-          hint: '隐藏插件',
+          hint: rowHint([toolTokens({ tokens: data?.baseTokens?.dsh })]),
           active: isDsh,
           onClick: () => run({ action: 'applyBase', base: 'dsh' }),
         }),
@@ -738,8 +1100,8 @@ window.__ModuleLoader__.load({
         // creates a set — so "new kit" never needs a click on the head first.
         activeUserKit === undefined ? null : h(MenuRow, {
           key: 'active-kit',
-          label: kitLabel(activeUserKit),
-          hint: activeUserKit.isDefault ? '默认' : '',
+          label: withDefault(kitLabel(activeUserKit), activeUserKit.isDefault),
+          hint: rowHint([toolTokens(activeUserKit)]),
           active: true,
           indent: true,
           onClick: () => run({ action: 'applyBase', base: 'kit', kit: activeUserKit.name }),
@@ -749,8 +1111,8 @@ window.__ModuleLoader__.load({
             .filter((kit) => activeUserKit === undefined || kit.name !== activeUserKit.name)
             .map((kit) => h(MenuRow, {
               key: kit.name,
-              label: kitLabel(kit),
-              hint: kit.isDefault ? '默认' : '',
+              label: withDefault(kitLabel(kit), kit.isDefault),
+              hint: rowHint([toolTokens(kit)]),
               indent: true,
               onClick: () => {
                 run({ action: 'applyBase', base: 'kit', kit: kit.name })
@@ -783,8 +1145,8 @@ window.__ModuleLoader__.load({
         SHOW_PRESETS === true && groups.presets !== true && activePreset !== undefined
           ? h(MenuRow, {
             key: 'active-preset',
-            label: activePreset.title,
-            hint: '只读',
+            label: withDefault(activePreset.title, data?.defaultKit === activePreset.name),
+            hint: rowHint([toolTokens(activePreset), '只读']),
             active: true,
             indent: true,
             onClick: () => run({ action: 'applyBase', base: 'kit', kit: activePreset.name }),
@@ -795,8 +1157,8 @@ window.__ModuleLoader__.load({
             ? h('div', { key: 'none', style: { ...styles.meta, padding: '2px 6px' } }, '没有预置套装')
             : presets.map((preset) => h(MenuRow, {
               key: preset.name,
-              label: preset.title,
-              hint: '只读',
+              label: withDefault(preset.title, data?.defaultKit === preset.name),
+              hint: rowHint([toolTokens(preset), '只读']),
               active: activePreset !== undefined && activePreset.name === preset.name,
               indent: true,
               onClick: () => {
@@ -808,9 +1170,13 @@ window.__ModuleLoader__.load({
         appliedBlock,
         h(GroupHead, {
           title: '加挂',
-          count: extras.length,
+          // "already in this conversation / plugins there are at all". For the
+          // left number that means the plugins the base brings plus the ones
+          // attached on top; under 全部 it is all of them, so it reads 6/6 and
+          // there is nothing left to add.
+          count: `${plugins.filter((plugin) => applied.includes(plugin.id) || extras.includes(plugin.id)).length}/${plugins.length}`,
           open: groups.extras,
-          tip: '在当前选择之上临时加开插件，不新建套装。已经包含的插件不能再加。',
+          tip: '在当前选择上临时加开插件，不新建套装。已经包含的插件不能再加。',
           onToggle: () => setGroups({ ...groups, extras: !groups.extras }),
           action: extras.length === 0
             ? null
@@ -880,7 +1246,14 @@ window.__ModuleLoader__.load({
                   : null)
               : null)
           : null,
-        h('div', { style: styles.footer }, FOOTER),
+        h('div', { style: styles.footer },
+          h('div', null, FOOTER),
+          h('div', { style: styles.warnLine },
+            h('strong', { style: { fontWeight: 600 } }, '重要提醒：'),
+            FOOTER_WARN),
+          // The bill, in one place instead of under every row: the reminder
+          // above is the thing people read, and a tooltip has to be found.
+          h('div', { style: styles.billLine }, billSentence)),
         message === '' ? null : h('div', { style: styles.error }, message))
 
       const body = builder === null
@@ -891,8 +1264,10 @@ window.__ModuleLoader__.load({
           onChange: (next) => { setBuilder(next); setMessage('') },
           busy,
           onCancel: () => setBuilder(null),
-          onSave: saveBuilder,
+          onSave: () => saveBuilder('apply'),
+          onSaveKeep: () => saveBuilder('keep'),
           saveLabel: '保存并启用',
+          saveTip: '工具清单会变，这个对话下一条消息要按未命中价重新计算一次。',
           clash: nameClash(builder.name, presets, kits, null),
         })
 
@@ -931,10 +1306,15 @@ window.__ModuleLoader__.load({
     // settings list they sit next to kits, and two actions make sense for them:
     // copy the command that switches a conversation, or make them the default.
     function DefaultCard(props) {
-      const { title, description, isDefault, onUse, onDefault } = props
+      const { title, description, isDefault, tokens, onUse, onDefault } = props
       return h('div', { style: styles.card },
         h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
           h('strong', null, title),
+          // Same unit as the kit cards: what this choice costs in tools. Without
+          // it 全部 and 仅内置 were the only two cards in the page with no number.
+          Number.isFinite(tokens)
+            ? h('span', { style: styles.meta, title: '按工具定义估算（约 3.5 字符 / token）' }, `≈${formatTokens(tokens)} tokens`)
+            : null,
           isDefault ? h('span', { style: { ...styles.meta, color: '#2563eb' } }, '默认') : null,
           h('span', { style: { flex: 1 } }),
           h('button', { type: 'button', style: styles.ghost, onClick: onUse }, '复制切换命令'),
@@ -1164,6 +1544,11 @@ window.__ModuleLoader__.load({
       }
 
       return h('div', { style: { padding: '4px 2px', fontSize: 12 } },
+        // This page edits defaults, not a conversation: saying so up front is
+        // cheaper than explaining why the numbers below never change while the
+        // user is only renaming a kit.
+        h('div', { style: { ...styles.meta, marginBottom: 8, lineHeight: 1.6 } },
+          '设置页不绑定具体会话，上面的数字来自最近活跃的那个对话。'),
         h('div', { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' } },
           h('button', { type: 'button', style: styles.ghost, disabled: busy, onClick: refresh }, '刷新'),
           h('button', {
@@ -1203,13 +1588,15 @@ window.__ModuleLoader__.load({
               '（估算：按工具定义长度 ÷ 3.5 字符/token）',
             ].join('　·　')),
         // This panel has no Session of its own: the host answers a bare GET from
-        // the most recently seen agent. Saying so is cheaper than explaining why
-        // the numbers "don't change" when the user is only editing a default.
-        h('div', { style: { ...styles.meta, marginTop: 4 } },
-          '设置页不绑定具体会话，上面的数字来自最近活跃的那个对话；当前对话请在标题栏「装备栏」里切换。'),
-        h('div', { style: styles.sectionTitle, marginTop: 14 }, '新对话默认套装'),
+        // the most recently seen agent, so the ledger above is that conversation's.
+        // One string, one style. As two spans the caveat sat behind a flex gap
+        // and carried its own 0.6 opacity inside a heading that is already 0.6 —
+        // nested opacity multiplies, so it rendered dimmer than the title next to
+        // it and read as a different font rather than the rest of the sentence.
+        h('div', { style: { ...styles.sectionTitle, marginTop: 14 } }, '新对话默认套装只影响新建对话'),
         h('div', { style: { ...styles.meta, marginBottom: 6 } },
-          '只影响之后新建的对话；已经开着的对话各自保留自己的选择，这里改不到它们。'),
+          // The rest of the sentence stays abbreviated for the 370px panel.
+          '当前对话在「装备栏」切换；新建时也可选套装。'),
         // 全部 and 仅内置 are choices, not kits, but they read like the kit cards
         // below (copy the switch command / make it the default) so the page has
         // one idiom instead of two.
@@ -1217,6 +1604,7 @@ window.__ModuleLoader__.load({
           h(DefaultCard, {
             title: '全部',
             description: '内置工具和已启用插件的工具都能用。',
+            tokens: data.baseTokens?.all,
             isDefault: defaultIsAll,
             onUse: () => copyCommand('全部'),
             onDefault: () => act({ action: 'default', name: '' }),
@@ -1224,6 +1612,7 @@ window.__ModuleLoader__.load({
           h(DefaultCard, {
             title: '仅内置',
             description: '只带 Harness 内置的工具，下载插件的工具默认隐藏。',
+            tokens: data.baseTokens?.dsh,
             isDefault: defaultIsDsh,
             onUse: () => copyCommand('仅内置'),
             onDefault: () => act({ action: 'default', name: '@dsh' }),
@@ -1400,6 +1789,19 @@ window.__ModuleLoader__.load({
           order: -100,
           extra: { inject: (sessionId) => ({ sessionId }) },
         }, HeaderMenu)
+        // The new-conversation picker: the one moment where switching is free,
+        // because the agent — and its first request — does not exist yet. It sits
+        // at the front of the composer's right-hand tool group, i.e. immediately
+        // to the right of the 标准模式 selector, and that row is mounted in both
+        // phases — so the component gates itself on `blank`.
+        registerSurface(ctx, {
+          name: 'conversation.input.right',
+          order: -10,
+          // Session-scoped slots get their Session id through `inject`; without
+          // it the picker could neither read this conversation's binding nor
+          // write one.
+          extra: { inject: (sessionId) => ({ sessionId }) },
+        }, HeroKit)
         // The settings page: the full editor and the place kits are stored from.
         registerSurface(ctx, {
           name: 'settings.section',