dsh-cline-pass 0.2.3 → 0.2.4

package/lib/client.js

@@ -241,6 +241,25 @@ window.__ModuleLoader__.load({
       '.cp-usage-model-tokens{font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-tertiary);min-width:52px;text-align:right}',
       '.cp-check{width:14px;height:14px;flex:none;cursor:pointer;accent-color:var(--dsw-alias-brand-primary)}',
       '.cp-tools-label{cursor:pointer;gap:8px}',
+      // The usage pill beside the model selector. It borrows the panel's ramp and
+      // track treatment so a reading looks the same in both places.
+      '.cp-pill{position:relative;display:flex;align-items:center;font-size:12px;line-height:1.4}',
+      '.cp-pill-btn{border:0.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:2px 9px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}',
+      '.cp-pill-btn:hover{background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary)}',
+      '.cp-pill-btn[aria-expanded=true]{background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary)}',
+      '.cp-pill-pop{position:absolute;bottom:calc(100% + 8px);right:0;z-index:40;min-width:236px}',
+      '.cp-pill-card{background:var(--dsw-alias-bg-layer-1);border:0.5px solid var(--dsw-alias-border-l2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:12px 14px;display:flex;flex-direction:column;gap:9px}',
+      '.cp-pill-title{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+      '.cp-pill-row{display:flex;flex-direction:column;gap:4px}',
+      '.cp-pill-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--dsw-alias-label-primary)}',
+      '.cp-pill-percent{font-variant-numeric:tabular-nums;font-weight:600}',
+      '.cp-pill-track{height:4px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);overflow:hidden}',
+      '.cp-pill-fill{height:100%;border-radius:999px}',
+      '.cp-pill-note,.cp-pill-at{font-size:11px;color:var(--dsw-alias-label-tertiary)}',
+      '.cp-pill-at{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:0.5px solid var(--dsw-alias-border-l2);padding-top:8px}',
+      '.cp-pill-fail{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--dsw-alias-label-tertiary)}',
+      '.cp-pill-retry{border:0;background:0 0;color:var(--dsw-alias-brand-primary);font:inherit;font-size:11.5px;cursor:pointer;padding:0}',
+      '.cp-pill-retry:hover{text-decoration:underline}',
       '.cp-model-hidden .cp-mono,.cp-model-hidden .cp-check{opacity:.55}',
     ].join('')
 
@@ -306,6 +325,12 @@ window.__ModuleLoader__.load({
       usageHours: '{n} 小时',
       usageMinutes: '{n} 分钟',
       usageRefresh: '刷新',
+      usagePillTitle: 'Cline Pass 用量',
+      usagePillUnavailable: '用量不可用',
+      usagePillRetry: '重试',
+      usagePillUpdatedAt: '更新于 {time}',
+      usagePillLabel: 'Pass',
+      usagePillWeekly: '周',
       usageLoading: '正在读取官方额度…',
       usageUnavailable: '暂时读不到官方额度。',
       usageEmpty: '官方未返回额度窗口。',
@@ -389,6 +414,12 @@ window.__ModuleLoader__.load({
       usageHours: '{n}h',
       usageMinutes: '{n}m',
       usageRefresh: 'Refresh',
+      usagePillTitle: 'Cline Pass usage',
+      usagePillUnavailable: 'Usage unavailable',
+      usagePillRetry: 'Retry',
+      usagePillUpdatedAt: 'Updated {time}',
+      usagePillLabel: 'Pass',
+      usagePillWeekly: 'wk',
       usageLoading: 'Reading the official quota…',
       usageUnavailable: 'The official quota is unavailable right now.',
       usageEmpty: 'The gateway reported no quota windows.',
@@ -1839,10 +1870,164 @@ window.__ModuleLoader__.load({
 
     //#endregion
 
+    //#region usage pill
+
+    /**
+     * The Cline Pass quota, next to the model selector.
+     *
+     * Only mounted while the selected model belongs to this provider: the
+     * decision the pill informs is "should I use this model right now, and how
+     * much of the window is left", and for any other model the reading is
+     * irrelevant and the request would be wasted. The gate is the whole reason
+     * this is a pill rather than a permanent widget.
+     */
+    function UsagePill(props) {
+      const state = React.useSyncExternalStore(props.directory.subscribe, props.directory.getSnapshot, props.directory.getSnapshot)
+      const current = state.current
+      if (current === null || current === undefined || String(current.provider) !== String(props.route())) return null
+      return h(UsagePillActive, props)
+    }
+
+    /** The pill itself: a compact reading, expanding into the window breakdown. */
+    function UsagePillActive(props) {
+      const t = props.t
+      const [snapshot, setSnapshot] = React.useState(null)
+      const [failed, setFailed] = React.useState(false)
+      const [open, setOpen] = React.useState(false)
+      const root = React.useRef(null)
+      // Kept across renders so the timer's callback always sees the latest one.
+      const read = React.useRef(() => {})
+
+      React.useEffect(() => {
+        let alive = true
+        let busy = false
+        /**
+         * One reading, shared by the first paint, the timer and the retry.
+         *
+         * A hidden tab is skipped rather than served: a background poll keeps a
+         * request alive for a number nobody is looking at, and the visibility
+         * handler below refreshes the moment the tab comes back.
+         */
+        const load = async (manual) => {
+          if (busy) return
+          if (manual !== true && typeof document !== 'undefined' && document.visibilityState === 'hidden') return
+          busy = true
+          try {
+            const value = await props.readUsage()
+            if (alive) { setSnapshot({ value, at: Date.now() }); setFailed(false) }
+          } catch {
+            // The last good reading stays on screen — a failed poll is not worth
+            // blanking a number that was true a minute ago.
+            if (alive) setFailed(true)
+          } finally {
+            busy = false
+          }
+        }
+        read.current = () => { void load(true) }
+        void load(true)
+        const timer = setInterval(() => { void load(false) }, 60000)
+        const onVisible = () => { if (document.visibilityState === 'visible') void load(false) }
+        document.addEventListener('visibilitychange', onVisible)
+        return () => {
+          alive = false
+          read.current = () => {}
+          clearInterval(timer)
+          document.removeEventListener('visibilitychange', onVisible)
+        }
+      }, [props.readUsage])
+
+      // A click anywhere else closes the popover, which is what a one-shot
+      // disclosure is expected to do; the listener only exists while it is open.
+      React.useEffect(() => {
+        if (!open) return undefined
+        const onDown = (event) => {
+          if (root.current !== null && event.target instanceof Node && !root.current.contains(event.target)) setOpen(false)
+        }
+        document.addEventListener('mousedown', onDown)
+        return () => document.removeEventListener('mousedown', onDown)
+      }, [open])
+
+      const accounts = snapshot?.value?.usage?.accounts ?? []
+      const account = accounts.find((entry) => entry.ok === true) ?? accounts[0]
+      const limits = account?.limits ?? []
+      const byType = new Map(limits.map((limit) => [String(limit.type), limit]))
+      const percentOf = (type) => {
+        const limit = byType.get(type)
+        return limit === undefined ? null : Math.max(0, Math.min(100, Math.round(Number(limit.percentUsed ?? 0))))
+      }
+      const five = percentOf('five_hour')
+      const weekly = percentOf('weekly')
+
+      // The collapsed reading names the two windows a user paces against; a
+      // missing one is dropped rather than shown as an empty slot.
+      const parts = []
+      if (five !== null) parts.push(`${t('usageFiveHour')} ${five}%`)
+      if (weekly !== null) parts.push(`${t('usagePillWeekly')} ${weekly}%`)
+      const summary = [t('usagePillLabel'), ...parts].join(' · ')
+
+      const rows = limits.length === 0 ? null : USAGE_WINDOWS
+        .map(([type, key]) => [type, key, byType.get(type)])
+        .filter(([, , limit]) => limit !== undefined)
+        .concat(limits
+          .filter((limit) => !USAGE_WINDOWS.some(([type]) => type === String(limit.type)))
+          .map((limit) => [String(limit.type), '', limit]))
+
+      const body = failed && snapshot === null
+        ? h('div', { key: 'fail', className: 'cp-pill-fail' }, [
+          h('span', { key: 'm' }, t('usagePillUnavailable')),
+          h('button', { key: 'r', type: 'button', className: 'cp-pill-retry', onClick: () => read.current() }, t('usagePillRetry')),
+        ])
+        : h('div', { key: 'card', className: 'cp-pill-card' }, [
+          h('div', { key: 'title', className: 'cp-pill-title' }, t('usagePillTitle')),
+          rows === null
+            ? h('div', { key: 'empty', className: 'cp-pill-fail' }, t('usagePillUnavailable'))
+            : rows.map(([type, key, limit]) => {
+              const percent = Math.max(0, Math.min(100, Number(limit.percentUsed ?? 0)))
+              const left = countdown(t, limit.resetsAt)
+              return h('div', { key: type, className: 'cp-pill-row' }, [
+                h('div', { key: 'head', className: 'cp-pill-row-head' }, [
+                  h('span', { key: 'l' }, key === '' ? type : t(key)),
+                  h('span', { key: 'v', className: 'cp-pill-percent' }, `${Math.round(percent)}%`),
+                ]),
+                h('div', { key: 'track', className: 'cp-pill-track' },
+                  h('div', { key: 'fill', className: 'cp-pill-fill', style: { width: `${percent}%`, background: usageColor(percent) } })),
+                left === '' ? null : h('div', { key: 'note', className: 'cp-pill-note' }, fill(t('usageResetsIn'), { t: left })),
+              ])
+            }),
+          snapshot === null ? null : h('div', { key: 'at', className: 'cp-pill-at' }, [
+            h('span', { key: 's' }, fill(t('usagePillUpdatedAt'), { time: stamp(snapshot.at) })),
+            h('button', { key: 'r', type: 'button', className: 'cp-pill-retry', onClick: () => read.current() }, t('usageRefresh')),
+          ]),
+        ])
+
+      return h('div', { key: 'pill', ref: root, className: 'cp-pill' }, [
+        h('button', {
+          key: 'btn',
+          type: 'button',
+          className: 'cp-pill-btn',
+          'aria-expanded': open,
+          onClick: () => setOpen((was) => !was),
+        }, snapshot === null ? t('usagePillTitle') : summary === '' ? t('usagePillTitle') : summary),
+        open ? h('div', { key: 'pop', className: 'cp-pill-pop' }, body) : null,
+      ])
+    }
+
+    /** A local timestamp, matching the panel's own reading of "updated at". */
+    function stamp(ms) {
+      const at = new Date(Number(ms ?? 0))
+      const pad = (n) => String(n).padStart(2, '0')
+      return `${at.getFullYear()}/${at.getMonth() + 1}/${at.getDate()} ${pad(at.getHours())}:${pad(at.getMinutes())}:${pad(at.getSeconds())}`
+    }
+
+    //#endregion
+
     //#region plugin
 
-    /** The slot registry and the browser RPC transport. */
-    const inject = ['slots', 'connection']
+    /**
+     * The slot registry, the browser RPC transport, and the model-selection
+     * directory the usage pill reads the selected provider from.
+     */
+    const inject = ['slots', 'connection', 'modelDirectories']
 
     /**
      * Mount the Cline Pass configuration surface.
@@ -1903,6 +2088,24 @@ window.__ModuleLoader__.load({
         inject: face,
       }, renderQuick))
 
+      // 3. The quota reading beside the model selector. It mounts for every
+      //    session but renders nothing unless the selected model is this
+      //    provider's, so no other model pays for a usage request.
+      ctx.slots.inject('conversation.input.right', () => ctx.slots.register({
+        name: 'conversation.input.right',
+        id: `${NS}-usage`,
+        order: 100,
+        inject: (sessionId) => ({
+          directory: ctx.modelDirectories.directoryFor(sessionId).store,
+          // The route name is configuration, so it is only known once a state
+          // read has landed. Read it at render time rather than capturing it:
+          // the pill can mount before the first read completes.
+          route: () => controller.store.getSnapshot().data?.provider ?? NS,
+          readUsage: async () => await controller.call('usage', {}),
+          t: translate,
+        }),
+      }, UsagePill))
+
       // The first read is lazy (each component asks for it), because the RPC
       // transport only exists once Connection has activated.
       void controller.refresh()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-cline-pass",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Self-contained Cline Pass provider for dsh: register Cline Pass subscription models on the harness LLM seam, enumerate and validate the upstream channels behind each model, pin or exclude them with failover, and drive an account pool. No proxy process and no external cline-pass-switcher install required.",
   "type": "module",
   "main": "lib/index.js",
@@ -52,7 +52,8 @@
       "platform": "web",
       "inject": [
         "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-connection"
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-model-selection"
       ]
     },
     "compatibility": {