@goodandready/dsh-subscriptions 0.7.34 → 0.7.36

package/lib/client.js

@@ -313,6 +313,13 @@ window.__ModuleLoader__.load({
       "save": "Save",
       "saved": "Saved",
       "cancel": "Cancel",
+      "checkAllAccounts": "⚡ Check all",
+      "refreshAllQuotas": "🔄 Refresh quotas",
+      "importAllCli": "📥 Import all CLI",
+      "batchProgress": "{done}/{total} done",
+      "moveUp": "Move up",
+      "moveDown": "Move down",
+      "copyRef": "Copy account ref",
       "unsavedChanges": "Unsaved changes",
       "accountLabel": "Account",
       "usageRemaining": "Remaining quota",
@@ -712,6 +719,13 @@ window.__ModuleLoader__.load({
       "save": "保存",
       "saved": "已保存",
       "cancel": "取消",
+      "checkAllAccounts": "⚡ 全部检查",
+      "refreshAllQuotas": "🔄 刷新配额",
+      "importAllCli": "📥 导入全部 CLI",
+      "batchProgress": "已完成 {done}/{total}",
+      "moveUp": "上移",
+      "moveDown": "下移",
+      "copyRef": "复制账户引用",
       "unsavedChanges": "有未保存的更改",
       "accountLabel": "账户",
       "usageRemaining": "剩余配额",
@@ -1018,6 +1032,17 @@ window.__ModuleLoader__.load({
     }
     const Chevron = ChevronIcon || FallbackChevron
 
+    function lazyPanel(name) {
+      const Component = React.lazy(() => require.async('./client.panels.js').then((mod) => ({ default: mod[name] })))
+      return function LazyPanel(props) {
+        return h(React.Suspense, { fallback: null }, h(Component, props))
+      }
+    }
+    const WebhookTestButton = lazyPanel('WebhookTestButton')
+    const VaultSnapshotsPanel = lazyPanel('VaultSnapshotsPanel')
+    const ProviderPacksPanel = lazyPanel('ProviderPacksPanel')
+    const SourcesPanel = lazyPanel('SourcesPanel')
+
     // #839 model-list helpers
     function modelListSearchText(model) {
       const parts = [model && model.id, model && model.name, model && model.alias, model && model.provider, model && model.providerName]
@@ -1432,6 +1457,8 @@ window.__ModuleLoader__.load({
         }
       }
       const [checking, setChecking] = React.useState({})
+      const [batch, setBatch] = React.useState(null)
+      const batchCancelRef = React.useRef(false)
       const [saved, setSaved] = React.useState(false)
       const [savedSnapshot, setSavedSnapshot] = React.useState(null)
       const [tokenDraft, setTokenDraft] = React.useState({})
@@ -1544,6 +1571,21 @@ window.__ModuleLoader__.load({
       const updateSlot = (provider, index, patch) => setSlots((prev) => prev.map((s) => (
         s && s.provider === provider && Number(s.index) === Number(index) ? Object.assign({}, s, patch) : s
       )))
+      const moveSlot = (provider, index, delta) => setSlots((prev) => {
+        const positions = prev
+          .map((slot, position) => ({ slot, position }))
+          .filter((row) => row.slot && row.slot.provider === provider)
+        const from = positions.findIndex((row) => Number(row.slot.index) === Number(index))
+        const to = from + delta
+        if (from < 0 || to < 0 || to >= positions.length) return prev
+        const next = prev.slice()
+        const a = positions[from].position
+        const b = positions[to].position
+        const tmp = next[a]
+        next[a] = next[b]
+        next[b] = tmp
+        return next
+      })
       const accountOf = (provider, index) => accounts.find((a) => a.provider === provider && a.index === index) || {}
 
       const save = async () => {
@@ -1762,6 +1804,34 @@ window.__ModuleLoader__.load({
         later(() => setInfo(''), 3000)
       }
 
+      const runBatch = async (kind, provider) => {
+        if (batch) return
+        const rows = slots.filter((slot) => slot && slot.provider === provider)
+        if (!rows.length) return
+        batchCancelRef.current = false
+        setBatch({ kind, provider, done: 0, total: rows.length })
+        const queue = rows.slice()
+        const worker = async () => {
+          while (queue.length && !batchCancelRef.current) {
+            const slot = queue.shift()
+            try {
+              if (kind === 'import') await importLocalCli(slot.provider, slot.index)
+              else await doCheck(slot.provider, slot.index)
+            } catch (e) {
+              setErr(cleanErrorMessage(e.message || e))
+            } finally {
+              setBatch((b) => b ? Object.assign({}, b, { done: b.done + 1 }) : b)
+            }
+          }
+        }
+        await Promise.all([worker(), worker()])
+        setBatch(null)
+      }
+      const cancelBatch = () => {
+        batchCancelRef.current = true
+        setBatch((b) => b ? Object.assign({}, b, { cancelled: true }) : b)
+      }
+
       const importToken = async (provider, index) => {
         setErr('')
         const tok = (tokenDraft[provider + ':' + index] || '').trim()
@@ -2849,10 +2919,22 @@ h('div', { className: 'dsub-row' },
             .map((slot, i) => ({ slot: slot, i: i }))
             .filter((row) => row.slot.provider === prov.id)
           return h('div', { className: 'dsub-block', key: prov.id },
-            h('div', { className: 'dsub-h' }, prov.name),
+            h('div', { className: 'dsub-h', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 6, flexWrap: 'wrap' } },
+              h('span', null, prov.name),
+              h('div', { className: 'dsub-row', style: { marginTop: 0, gap: 4, flexWrap: 'wrap' } },
+                h('button', { type: 'button', className: 'dsub-mini', disabled: Boolean(batch), onClick: () => runBatch('check', prov.id).catch((e) => setErr(cleanErrorMessage(e.message || e))) }, t('checkAllAccounts')),
+                h('button', { type: 'button', className: 'dsub-mini', disabled: Boolean(batch), onClick: () => runBatch('check', prov.id).catch((e) => setErr(cleanErrorMessage(e.message || e))) }, t('refreshAllQuotas')),
+                h('button', { type: 'button', className: 'dsub-mini', disabled: Boolean(batch), onClick: () => runBatch('import', prov.id).catch((e) => setErr(cleanErrorMessage(e.message || e))) }, t('importAllCli')),
+                batch && batch.provider === prov.id ? h(React.Fragment, null,
+                  h('span', { className: 'dsub-sub' }, t('batchProgress').replace('{done}', String(batch.done)).replace('{total}', String(batch.total))),
+                  h('button', { type: 'button', className: 'dsub-mini', onClick: cancelBatch }, t('cancel'))
+                ) : null,
+              ),
+            ),
             rows.map((row) => {
               const account = accountOf(row.slot.provider, row.slot.index)
               const key = row.slot.provider + ':' + row.slot.index
+              const rowPosition = rows.findIndex((candidate) => candidate.i === row.i)
               const on = !!account.configured
               const poolEnabled = row.slot.poolEnabled !== false
               const poolModels = Array.isArray(row.slot.poolModels) ? row.slot.poolModels : null
@@ -2903,6 +2985,9 @@ h('div', { className: 'dsub-row' },
                     },
                   }),
                   h('span', { className: 'dsub-badge' + (account.isRevoked ? ' dsub-badge-bad' : (account.validationUrl ? ' dsub-badge-warn' : (on ? ' dsub-badge-on' : ''))) }, badgeFor(account, t)),
+                  account.capabilities && account.capabilities.vision ? h('span', { className: 'dsub-model-tag', title: 'Vision' }, '👁') : null,
+                  account.capabilities && account.capabilities.tools ? h('span', { className: 'dsub-model-tag', title: 'Tools' }, '🔧') : null,
+                  account.capabilities && account.capabilities.thinking ? h('span', { className: 'dsub-model-tag', title: 'Thinking' }, '🧠') : null,
                   normalizePlanBadge(row.slot.provider, account.plan || account.paidTierName || (account.quota && account.quota.plan)),
                   h('button', {
                     type: 'button', className: 'dsub-mini',
@@ -2968,6 +3053,20 @@ h('div', { className: 'dsub-row' },
                     type: 'button', className: 'dsub-mini', title: t('quarantineParkTitle'),
                     onClick: () => doParkQuarantine(row.slot.provider, row.slot.index, 3600000),
                   }, ('⏸ ' + t('quarantinePark'))) : null)),
+                  h('button', {
+                    type: 'button', className: 'dsub-mini', title: t('moveUp'),
+                    disabled: rowPosition <= 0,
+                    onClick: () => moveSlot(row.slot.provider, row.slot.index, -1),
+                  }, '↑'),
+                  h('button', {
+                    type: 'button', className: 'dsub-mini', title: t('moveDown'),
+                    disabled: rowPosition < 0 || rowPosition >= rows.length - 1,
+                    onClick: () => moveSlot(row.slot.provider, row.slot.index, 1),
+                  }, '↓'),
+                  h('button', {
+                    type: 'button', className: 'dsub-mini', title: t('copyRef'),
+                    onClick: () => copyText(row.slot.ref || key),
+                  }, '📋'),
                   h('button', {
                     type: 'button', className: 'dsub-mini', title: t('removeSlot'),
                     onClick: () => {
@@ -4260,181 +4359,6 @@ h('div', { className: 'dsub-row' },
       )
     }
 
-    function WebhookTestButton(props) {
-      const t = (props && props.t) || ((k) => k)
-      const [state, setState] = React.useState({ busy: false, message: '', error: null })
-      const send = () => {
-        setState({ busy: true, message: '', error: null })
-        fetch('/dsh-subscriptions/webhook/test', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
-          .then(async (res) => {
-            const data = await res.json().catch(() => ({}))
-            if (!res.ok || !data.delivered) throw new Error((data.error && data.error.message) || ('HTTP ' + res.status))
-            setState({ busy: false, message: t('delivered'), error: null })
-          })
-          .catch((err) => setState({ busy: false, message: '', error: String(err && err.message || err) }))
-      }
-      return h('div', { className: 'dsub-row' },
-        h('button', { type: 'button', className: 'dsub-mini', disabled: state.busy, onClick: send }, state.busy ? '…' : t('sendTest')),
-        state.message ? h('span', { className: 'dsub-ok' }, state.message) : null,
-        state.error ? h('span', { className: 'dsub-bad' }, state.error) : null,
-      )
-    }
-
-    // #736: vault snapshot list with create/restore. Payload stays server-side.
-    function VaultSnapshotsPanel(props) {
-      const t = (props && props.t) || ((k) => k)
-      const [state, setState] = React.useState({ snapshots: [], stats: null, message: '', error: null, busy: false })
-      const pull = () => {
-        fetch('/dsh-subscriptions/vault/snapshots', { cache: 'no-store' })
-          .then((res) => res.json())
-          .then((data) => setState((st) => Object.assign({}, st, { snapshots: data.snapshots || [], stats: data.stats || null, error: null })))
-          .catch((err) => setState((st) => Object.assign({}, st, { error: String(err && err.message || err) })))
-      }
-      React.useEffect(() => { pull() }, [])
-      const call = (url, body) => fetch(url, {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify(body || {}),
-      }).then(async (res) => {
-        const data = await res.json().catch(() => ({}))
-        if (!res.ok || !data.ok) throw new Error((data.error && data.error.message) || ('HTTP ' + res.status))
-        return data
-      })
-      const create = () => {
-        setState((st) => Object.assign({}, st, { busy: true, message: '', error: null }))
-        call('/dsh-subscriptions/vault/snapshots', { label: 'manual' })
-          .then((data) => { setState((st) => Object.assign({}, st, { busy: false, message: t('created') + ' ' + data.snapshot.id })); pull() })
-          .catch((err) => setState((st) => Object.assign({}, st, { busy: false, error: String(err && err.message || err) })))
-      }
-      const restore = (id) => {
-        setState((st) => Object.assign({}, st, { busy: true, message: '', error: null }))
-        call('/dsh-subscriptions/vault/snapshots/restore', { id })
-          .then((data) => { setState((st) => Object.assign({}, st, { busy: false, message: t('restoredSlots') + ' ' + data.slotCount })); pull() })
-          .catch((err) => setState((st) => Object.assign({}, st, { busy: false, error: String(err && err.message || err) })))
-      }
-      return h('div', { className: 'dsub-section-card' },
-        h('div', { className: 'dsub-section-title' }, t('vaultSnapshots'), h('button', { type: 'button', className: 'dsub-mini', onClick: create, disabled: state.busy }, state.busy ? '…' : t('createSnapshot'))),
-        h('div', { className: 'dsub-section-desc' }, t('vaultSnapshotsHint')),
-        state.stats ? h('div', { className: 'dsub-dim' }, state.stats.count + ' snapshots · ' + state.stats.bytes + ' bytes · ' + state.stats.path) : null,
-        state.snapshots.length ? state.snapshots.map((snap) => h('div', { className: 'dsub-row', key: snap.id },
-          h('span', { className: 'dsub-h' }, snap.id),
-          h('span', { className: 'dsub-dim' }, (snap.label || '-') + ' · ' + snap.slotCount + ' slots · ' + snap.createdAt),
-          h('button', { type: 'button', className: 'dsub-mini', disabled: state.busy, onClick: () => restore(snap.id) }, t('restoreSnapshot')),
-        )) : h('div', { className: 'dsub-dim' }, t('noSnapshots')),
-        state.message ? h('div', { className: 'dsub-ok' }, state.message) : null,
-        state.error ? h('div', { className: 'dsub-bad' }, state.error) : null,
-      )
-    }
-
-    // #724: provider pack manager. Displays ids/models only; headers are masked.
-    function ProviderPacksPanel(props) {
-      const t = (props && props.t) || ((k) => k)
-      const [state, setState] = React.useState({ packs: [], text: '', message: '', error: null, busy: false })
-      const publicPack = (pack) => {
-        const copy = Object.assign({}, pack)
-        if (copy.clientSecret) copy.clientSecret = '••••'
-        if (copy.headers && typeof copy.headers === 'object') {
-          copy.headers = Object.fromEntries(Object.keys(copy.headers).map((key) => [key, '••••']))
-        }
-        return copy
-      }
-      const pull = () => {
-        fetch('/dsh-subscriptions/config', { cache: 'no-store' })
-          .then((res) => res.json())
-          .then((cfg) => setState((st) => Object.assign({}, st, { packs: (cfg.config && cfg.config.providerPacks) || [] })))
-          .catch((err) => setState((st) => Object.assign({}, st, { error: String(err && err.message || err) })))
-      }
-      React.useEffect(() => { pull() }, [])
-      const parse = () => {
-        const raw = JSON.parse(state.text || '{}')
-        return raw && raw.pack ? raw.pack : raw
-      }
-      const validate = (pack) => fetch('/dsh-subscriptions/provider-packs/validate', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ pack }),
-      }).then(async (res) => {
-        const data = await res.json()
-        if (!res.ok || !data.ok) throw new Error((data.error && data.error.message) || ('HTTP ' + res.status))
-        return data.pack
-      })
-      const save = () => {
-        setState((st) => Object.assign({}, st, { busy: true, message: '', error: null }))
-        Promise.resolve().then(parse)
-          .then(async (pack) => {
-            const checked = await validate(pack)
-            const cfg = await fetch('/dsh-subscriptions/config', { cache: 'no-store' }).then((res) => res.json())
-            const packs = ((cfg.config && cfg.config.providerPacks) || []).filter((p) => p && p.id !== pack.id)
-            packs.push(pack)
-            const res = await fetch('/dsh-subscriptions/config', {
-              method: 'PUT',
-              headers: { 'content-type': 'application/json' },
-              body: JSON.stringify({ config: Object.assign({}, cfg.config, { providerPacks: packs }), revision: cfg.revision }),
-            })
-            if (!res.ok) throw new Error('HTTP ' + res.status)
-            setState((st) => Object.assign({}, st, { packs, busy: false, message: t('saved') + ' ' + checked.id, text: '' }))
-          })
-          .catch((err) => setState((st) => Object.assign({}, st, { busy: false, error: String(err && err.message || err) })))
-      }
-      const exportPacks = () => setState((st) => Object.assign({}, st, { text: JSON.stringify(st.packs.map(publicPack), null, 2), message: t('exported') }))
-      return h('div', { className: 'dsub-section-card' },
-        h('div', { className: 'dsub-section-title' }, t('providerPacks'), h('button', { type: 'button', className: 'dsub-mini', onClick: pull }, '↻')),
-        h('div', { className: 'dsub-section-desc' }, t('providerPacksHint')),
-        state.packs.length ? state.packs.map((pack) => h('div', { className: 'dsub-row', key: pack.id },
-          h('span', { className: 'dsub-h' }, pack.id),
-          h('span', { className: 'dsub-dim' }, (pack.displayName || '') + ' · ' + ((pack.models || []).length) + ' models'),
-        )) : h('div', { className: 'dsub-dim' }, t('noPacks')),
-        h('textarea', {
-          className: 'dsub-inp',
-          style: { width: '100%', minHeight: 120, fontFamily: 'ui-monospace,monospace', padding: 8 },
-          value: state.text,
-          placeholder: '{"id":"acme","displayName":"Acme AI","authUrl":"https://…","tokenUrl":"https://…","baseUrl":"https://…","clientId":"…","models":[{"id":"acme-1"}]}',
-          onChange: (e) => setState((st) => Object.assign({}, st, { text: e.target.value, message: '', error: null })),
-        }),
-        h('div', { className: 'dsub-row' },
-          h('button', { type: 'button', className: 'dsub-mini', disabled: state.busy, onClick: save }, state.busy ? '…' : t('validateAndSave')),
-          h('button', { type: 'button', className: 'dsub-mini', onClick: exportPacks }, t('exportPacks')),
-        ),
-        state.message ? h('div', { className: 'dsub-ok' }, state.message) : null,
-        state.error ? h('div', { className: 'dsub-bad' }, state.error) : null,
-      )
-    }
-
-    // #713: read-only source chain panel. Never renders key values.
-    function SourcesPanel(props) {
-      const t = (props && props.t) || ((k) => k)
-      const [state, setState] = React.useState({ loading: true, data: null, error: null })
-      const pull = () => {
-        fetch('/dsh-subscriptions/sources', { cache: 'no-store' })
-          .then((res) => res.json())
-          .then((data) => setState({ loading: false, data, error: null }))
-          .catch((err) => setState({ loading: false, data: null, error: String(err && err.message || err) }))
-      }
-      React.useEffect(() => {
-        pull()
-        const id = setInterval(pull, 30 * 1000)
-        return () => clearInterval(id)
-      }, [])
-      const sourceLabel = (source) => source === 'api-key' ? t('apiKeySource') : (source === 'oauth' ? t('oauthSource') : (source === 'ollama' ? t('ollamaSource') : t('sourceNone')))
-      return h('div', { className: 'dsub-section-card' },
-        h('div', { className: 'dsub-section-title' }, t('sources'), h('button', { type: 'button', className: 'dsub-mini', onClick: pull }, state.loading ? '…' : '↻')),
-        h('div', { className: 'dsub-section-desc' }, t('sourcesHint')),
-        state.error ? h('div', { className: 'dsub-bad' }, state.error) : null,
-        state.data && state.data.keyRotation && !state.data.keyRotation.available
-          ? h('div', { className: 'dsub-dim' }, t('keyRotationOffline') + (state.data.keyRotation.reason ? ': ' + state.data.keyRotation.reason : ''))
-          : null,
-        state.data && state.data.keyRotation && state.data.keyRotation.available
-          ? h('div', { className: 'dsub-dim' }, t('keyRotationHealth') + ': ' + state.data.keyRotation.healthyKeys + '/' + state.data.keyRotation.totalKeys + ' healthy keys')
-          : null,
-        (state.data && state.data.providers ? state.data.providers : []).map((row) => h('div', { className: 'dsub-row', key: row.provider },
-          h('span', { className: 'dsub-h' }, row.provider),
-          h('span', { className: 'dsub-pillTag' }, sourceLabel(row.selected)),
-          row.candidates.map((c, i) => h('span', { key: i, className: 'dsub-dim' },
-            sourceLabel(c.source) + (c.available ? ' ✓' : ' ✕'))),
-        )),
-      )
-    }
-
     // #688: floating/docked quota capsule. Draggable unless docked; opens settings.
     function QuotaCapsule(props) {
       const t = (props && props.t) || ((k) => k)

package/lib/client.panels.js

@@ -0,0 +1,187 @@
+/* global window */
+window.__ModuleLoader__.load({
+  id: '@goodandready/dsh-subscriptions',
+  chunk: 'client.panels.js',
+  factory: (require) => {
+    const React = require('react')
+    const h = React.createElement
+
+    function WebhookTestButton(props) {
+      const t = (props && props.t) || ((k) => k)
+      const [state, setState] = React.useState({ busy: false, message: '', error: null })
+      const send = () => {
+        setState({ busy: true, message: '', error: null })
+        fetch('/dsh-subscriptions/webhook/test', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+          .then(async (res) => {
+            const data = await res.json().catch(() => ({}))
+            if (!res.ok || !data.delivered) throw new Error((data.error && data.error.message) || ('HTTP ' + res.status))
+            setState({ busy: false, message: t('delivered'), error: null })
+          })
+          .catch((err) => setState({ busy: false, message: '', error: String(err && err.message || err) }))
+      }
+      return h('div', { className: 'dsub-row' },
+        h('button', { type: 'button', className: 'dsub-mini', disabled: state.busy, onClick: send }, state.busy ? '…' : t('sendTest')),
+        state.message ? h('span', { className: 'dsub-ok' }, state.message) : null,
+        state.error ? h('span', { className: 'dsub-bad' }, state.error) : null,
+      )
+    }
+
+    // #736: vault snapshot list with create/restore. Payload stays server-side.
+    function VaultSnapshotsPanel(props) {
+      const t = (props && props.t) || ((k) => k)
+      const [state, setState] = React.useState({ snapshots: [], stats: null, message: '', error: null, busy: false })
+      const pull = () => {
+        fetch('/dsh-subscriptions/vault/snapshots', { cache: 'no-store' })
+          .then((res) => res.json())
+          .then((data) => setState((st) => Object.assign({}, st, { snapshots: data.snapshots || [], stats: data.stats || null, error: null })))
+          .catch((err) => setState((st) => Object.assign({}, st, { error: String(err && err.message || err) })))
+      }
+      React.useEffect(() => { pull() }, [])
+      const call = (url, body) => fetch(url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body || {}),
+      }).then(async (res) => {
+        const data = await res.json().catch(() => ({}))
+        if (!res.ok || !data.ok) throw new Error((data.error && data.error.message) || ('HTTP ' + res.status))
+        return data
+      })
+      const create = () => {
+        setState((st) => Object.assign({}, st, { busy: true, message: '', error: null }))
+        call('/dsh-subscriptions/vault/snapshots', { label: 'manual' })
+          .then((data) => { setState((st) => Object.assign({}, st, { busy: false, message: t('created') + ' ' + data.snapshot.id })); pull() })
+          .catch((err) => setState((st) => Object.assign({}, st, { busy: false, error: String(err && err.message || err) })))
+      }
+      const restore = (id) => {
+        setState((st) => Object.assign({}, st, { busy: true, message: '', error: null }))
+        call('/dsh-subscriptions/vault/snapshots/restore', { id })
+          .then((data) => { setState((st) => Object.assign({}, st, { busy: false, message: t('restoredSlots') + ' ' + data.slotCount })); pull() })
+          .catch((err) => setState((st) => Object.assign({}, st, { busy: false, error: String(err && err.message || err) })))
+      }
+      return h('div', { className: 'dsub-section-card' },
+        h('div', { className: 'dsub-section-title' }, t('vaultSnapshots'), h('button', { type: 'button', className: 'dsub-mini', onClick: create, disabled: state.busy }, state.busy ? '…' : t('createSnapshot'))),
+        h('div', { className: 'dsub-section-desc' }, t('vaultSnapshotsHint')),
+        state.stats ? h('div', { className: 'dsub-dim' }, state.stats.count + ' snapshots · ' + state.stats.bytes + ' bytes · ' + state.stats.path) : null,
+        state.snapshots.length ? state.snapshots.map((snap) => h('div', { className: 'dsub-row', key: snap.id },
+          h('span', { className: 'dsub-h' }, snap.id),
+          h('span', { className: 'dsub-dim' }, (snap.label || '-') + ' · ' + snap.slotCount + ' slots · ' + snap.createdAt),
+          h('button', { type: 'button', className: 'dsub-mini', disabled: state.busy, onClick: () => restore(snap.id) }, t('restoreSnapshot')),
+        )) : h('div', { className: 'dsub-dim' }, t('noSnapshots')),
+        state.message ? h('div', { className: 'dsub-ok' }, state.message) : null,
+        state.error ? h('div', { className: 'dsub-bad' }, state.error) : null,
+      )
+    }
+
+    // #724: provider pack manager. Displays ids/models only; headers are masked.
+    function ProviderPacksPanel(props) {
+      const t = (props && props.t) || ((k) => k)
+      const [state, setState] = React.useState({ packs: [], text: '', message: '', error: null, busy: false })
+      const publicPack = (pack) => {
+        const copy = Object.assign({}, pack)
+        if (copy.clientSecret) copy.clientSecret = '••••'
+        if (copy.headers && typeof copy.headers === 'object') {
+          copy.headers = Object.fromEntries(Object.keys(copy.headers).map((key) => [key, '••••']))
+        }
+        return copy
+      }
+      const pull = () => {
+        fetch('/dsh-subscriptions/config', { cache: 'no-store' })
+          .then((res) => res.json())
+          .then((cfg) => setState((st) => Object.assign({}, st, { packs: (cfg.config && cfg.config.providerPacks) || [] })))
+          .catch((err) => setState((st) => Object.assign({}, st, { error: String(err && err.message || err) })))
+      }
+      React.useEffect(() => { pull() }, [])
+      const parse = () => {
+        const raw = JSON.parse(state.text || '{}')
+        return raw && raw.pack ? raw.pack : raw
+      }
+      const validate = (pack) => fetch('/dsh-subscriptions/provider-packs/validate', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ pack }),
+      }).then(async (res) => {
+        const data = await res.json()
+        if (!res.ok || !data.ok) throw new Error((data.error && data.error.message) || ('HTTP ' + res.status))
+        return data.pack
+      })
+      const save = () => {
+        setState((st) => Object.assign({}, st, { busy: true, message: '', error: null }))
+        Promise.resolve().then(parse)
+          .then(async (pack) => {
+            const checked = await validate(pack)
+            const cfg = await fetch('/dsh-subscriptions/config', { cache: 'no-store' }).then((res) => res.json())
+            const packs = ((cfg.config && cfg.config.providerPacks) || []).filter((p) => p && p.id !== pack.id)
+            packs.push(pack)
+            const res = await fetch('/dsh-subscriptions/config', {
+              method: 'PUT',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ config: Object.assign({}, cfg.config, { providerPacks: packs }), revision: cfg.revision }),
+            })
+            if (!res.ok) throw new Error('HTTP ' + res.status)
+            setState((st) => Object.assign({}, st, { packs, busy: false, message: t('saved') + ' ' + checked.id, text: '' }))
+          })
+          .catch((err) => setState((st) => Object.assign({}, st, { busy: false, error: String(err && err.message || err) })))
+      }
+      const exportPacks = () => setState((st) => Object.assign({}, st, { text: JSON.stringify(st.packs.map(publicPack), null, 2), message: t('exported') }))
+      return h('div', { className: 'dsub-section-card' },
+        h('div', { className: 'dsub-section-title' }, t('providerPacks'), h('button', { type: 'button', className: 'dsub-mini', onClick: pull }, '↻')),
+        h('div', { className: 'dsub-section-desc' }, t('providerPacksHint')),
+        state.packs.length ? state.packs.map((pack) => h('div', { className: 'dsub-row', key: pack.id },
+          h('span', { className: 'dsub-h' }, pack.id),
+          h('span', { className: 'dsub-dim' }, (pack.displayName || '') + ' · ' + ((pack.models || []).length) + ' models'),
+        )) : h('div', { className: 'dsub-dim' }, t('noPacks')),
+        h('textarea', {
+          className: 'dsub-inp',
+          style: { width: '100%', minHeight: 120, fontFamily: 'ui-monospace,monospace', padding: 8 },
+          value: state.text,
+          placeholder: '{"id":"acme","displayName":"Acme AI","authUrl":"https://…","tokenUrl":"https://…","baseUrl":"https://…","clientId":"…","models":[{"id":"acme-1"}]}',
+          onChange: (e) => setState((st) => Object.assign({}, st, { text: e.target.value, message: '', error: null })),
+        }),
+        h('div', { className: 'dsub-row' },
+          h('button', { type: 'button', className: 'dsub-mini', disabled: state.busy, onClick: save }, state.busy ? '…' : t('validateAndSave')),
+          h('button', { type: 'button', className: 'dsub-mini', onClick: exportPacks }, t('exportPacks')),
+        ),
+        state.message ? h('div', { className: 'dsub-ok' }, state.message) : null,
+        state.error ? h('div', { className: 'dsub-bad' }, state.error) : null,
+      )
+    }
+
+    // #713: read-only source chain panel. Never renders key values.
+    function SourcesPanel(props) {
+      const t = (props && props.t) || ((k) => k)
+      const [state, setState] = React.useState({ loading: true, data: null, error: null })
+      const pull = () => {
+        fetch('/dsh-subscriptions/sources', { cache: 'no-store' })
+          .then((res) => res.json())
+          .then((data) => setState({ loading: false, data, error: null }))
+          .catch((err) => setState({ loading: false, data: null, error: String(err && err.message || err) }))
+      }
+      React.useEffect(() => {
+        pull()
+        const id = setInterval(pull, 30 * 1000)
+        return () => clearInterval(id)
+      }, [])
+      const sourceLabel = (source) => source === 'api-key' ? t('apiKeySource') : (source === 'oauth' ? t('oauthSource') : (source === 'ollama' ? t('ollamaSource') : t('sourceNone')))
+      return h('div', { className: 'dsub-section-card' },
+        h('div', { className: 'dsub-section-title' }, t('sources'), h('button', { type: 'button', className: 'dsub-mini', onClick: pull }, state.loading ? '…' : '↻')),
+        h('div', { className: 'dsub-section-desc' }, t('sourcesHint')),
+        state.error ? h('div', { className: 'dsub-bad' }, state.error) : null,
+        state.data && state.data.keyRotation && !state.data.keyRotation.available
+          ? h('div', { className: 'dsub-dim' }, t('keyRotationOffline') + (state.data.keyRotation.reason ? ': ' + state.data.keyRotation.reason : ''))
+          : null,
+        state.data && state.data.keyRotation && state.data.keyRotation.available
+          ? h('div', { className: 'dsub-dim' }, t('keyRotationHealth') + ': ' + state.data.keyRotation.healthyKeys + '/' + state.data.keyRotation.totalKeys + ' healthy keys')
+          : null,
+        (state.data && state.data.providers ? state.data.providers : []).map((row) => h('div', { className: 'dsub-row', key: row.provider },
+          h('span', { className: 'dsub-h' }, row.provider),
+          h('span', { className: 'dsub-pillTag' }, sourceLabel(row.selected)),
+          row.candidates.map((c, i) => h('span', { key: i, className: 'dsub-dim' },
+            sourceLabel(c.source) + (c.available ? ' ✓' : ' ✕'))),
+        )),
+      )
+    }
+
+
+    return { WebhookTestButton, VaultSnapshotsPanel, ProviderPacksPanel, SourcesPanel }
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-subscriptions",
-  "version": "0.7.34",
+  "version": "0.7.36",
   "description": "Use ChatGPT Codex, Claude, Grok, Antigravity, Kimi, GLM, Cursor, Kiro, Copilot, Qwen, ERNIE, Spark, JetBrains, Perplexity, Replit, and Cody subscriptions as DeepSeek Harness LLM providers via OAuth.",
   "license": "MIT",
   "type": "module",