@goodandready/dsh-subscriptions 0.4.19 → 0.4.21

package/lib/client.js

@@ -13,7 +13,6 @@ window.__ModuleLoader__.load({
     const setT = (fn) => { t = fn }
 
     const CSS =
-    // card — same structure as core PluginCard (bash, agent-loop, web-search)
     '.dsub-card{list-style:none;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;transition:border-color .16s,background .16s}' +
     '.dsub-card:hover{border-color:var(--dsw-alias-label-dimmed)}' +
     '.dsub-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}' +
@@ -24,38 +23,22 @@ window.__ModuleLoader__.load({
     '.dsub-description{color:var(--dsw-alias-label-secondary);font-size:13px}' +
     '.dsub-chev{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}' +
     '.dsub-chevOpen{transform:rotate(180deg)}' +
-    '.dsub-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}' +
-    // existing dsub classes kept for SubsSection internals
-    '.dsub-wrap{display:flex;flex-direction:column;gap:22px;padding:4px 0;max-width:760px}' +
-    '.dsub-block{display:flex;flex-direction:column;gap:10px}' +
-    '.dsub-h{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}' +
+    '.dsub-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:12px}' +
+    '.dsub-block{margin-top:10px}' +
+    '.dsub-row{display:flex;align-items:center;gap:8px;margin-top:8px}' +
+    '.dsub-h{font-size:13.5px;font-weight:600;color:var(--dsw-alias-label-primary)}' +
     '.dsub-sub{font-size:12px;color:var(--dsw-alias-label-secondary)}' +
-    '.dsub-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}' +
-    '.dsub-row input,.dsub-field input,.dsub-row select{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
-    '.dsub-grow{flex:1;min-width:180px}' +
-    '.dsub-field{display:flex;flex-direction:column;gap:6px;padding:12px 0}' +
-    '.dsub-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}' +
-    '.dsub-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;height:28px;padding:0 8px;cursor:pointer}' +
-    '.dsub-foot{border-top:1px solid var(--dsw-alias-border-l2);display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px}' +
-    '.dsub-save{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:5px 14px;font-size:13px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}' +
+    '.dsub-dim{font-size:11.5px;color:var(--dsw-alias-label-tertiary)}' +
+    '.dsub-mini{appearance:none;font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:3px 8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);transition:all .15s}' +
+    '.dsub-mini:hover{background:var(--dsw-alias-bg-layer-1);border-color:var(--dsw-alias-label-dimmed)}' +
     '.dsub-ok{font-size:12px;color:var(--dsw-alias-state-success-primary)}' +
     '.dsub-bad{font-size:12px;color:var(--dsw-alias-state-error-primary)}' +
-    '.dsub-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);white-space:nowrap}' +
-    '.dsub-badge-on{color:var(--dsw-alias-state-success-primary);border-color:currentColor}' +
-    '.dsub-badge-warn{color:var(--dsw-alias-state-warning-primary);border-color:currentColor}' +
-    '.dsub-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;color:var(--dsw-alias-label-secondary);border:1px solid var(--dsw-alias-border-l2)}' +
-    '.dsub-chipOn{color:var(--dsw-alias-state-success-primary);border-color:currentColor}' +
-    '.dsub-chipWarn{color:var(--dsw-alias-state-warning-primary);border-color:currentColor}' +
-    '.dsub-chipDanger{color:var(--dsw-alias-state-error-primary);border-color:currentColor}' +
-    '.dsub-chipDot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}' +
-    '.dsub-chipActive{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-3)}' +
-    '.dsub-chipActiveWarn{color:var(--dsw-alias-state-warning-primary);border-color:currentColor}' +
-    '.dsub-chipActiveDanger{color:var(--dsw-alias-state-error-primary);border-color:currentColor}' +
-    '.dsub-chipActiveOk{color:var(--dsw-alias-state-success-primary);border-color:currentColor}' +
-    '.dsub-chipActiveBar{height:3px;width:24px;background:var(--dsw-alias-bg-layer-1);border-radius:2px;flex:none;overflow:hidden}' +
-    '.dsub-chipActiveFill{height:100%;border-radius:2px;background:currentColor}' +
-
-    '.dsub-link{background:none;border:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-size:12px;padding:0}' +
+    '.dsub-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:5px 12px;font-size:12.5px;font-weight:500;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);transition:all .15s}' +
+    '.dsub-btn:hover{background:var(--dsw-alias-bg-layer-1);border-color:var(--dsw-alias-label-dimmed)}' +
+    '.dsub-inp{height:30px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);border-radius:6px;padding:0 8px;font-size:12px;min-width:180px}' +
+    '.dsub-inp:focus{outline:none;border-color:var(--dsw-alias-brand-primary)}' +
+    '.dsub-box{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:10px;margin-top:8px;background:var(--dsw-alias-bg-layer-2)}' +
+    '.dsub-cooldown{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--dsw-alias-state-warning-primary);color:#000;font-size:11px;font-weight:600}' +
     '.dsub-bar{position:relative;height:6px;border-radius:3px;background:var(--dsw-alias-bg-layer-1);overflow:hidden;flex:1;min-width:80px}' +
     '.dsub-barFill{height:100%;border-radius:3px;background:var(--dsw-alias-state-success-primary);transition:width .2s}' +
     '.dsub-barWarn .dsub-barFill{background:var(--dsw-alias-state-warning-primary)}' +
@@ -64,20 +47,53 @@ window.__ModuleLoader__.load({
     '.dsub-manual{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:10px;border-top:1px solid var(--dsw-alias-border-l2)}' +
     '.dsub-verify{font-size:12px;color:var(--dsw-alias-state-warning-primary)}' +
     '.dsub-verify a{color:var(--dsw-alias-brand-primary)}' +
-    'background:var(--dsw-alias-bg-layer-3);box-shadow:0 0 0 1px var(--dsw-alias-border-l2),0 8px 24px rgba(0,0,0,.25);backdrop-filter:blur(18px)}' +
-    '.dsub-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:999px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:11.5px;font-weight:600;cursor:pointer;letter-spacing:.06em}' +
-    '.dsub-pill:hover{border-color:var(--dsw-alias-label-dimmed)}' +
-    '.dsub-led{width:7px;height:7px;border-radius:50%;flex:none}' +
-    '.dsub-ledOk{background:var(--dsw-alias-state-success-primary);box-shadow:0 0 6px var(--dsw-alias-state-success-primary)}' +
-    '.dsub-ledWarn{background:var(--dsw-alias-state-warning-primary);box-shadow:0 0 6px var(--dsw-alias-state-warning-primary)}' +
-    '.dsub-ledBad{background:var(--dsw-alias-state-error-primary);box-shadow:0 0 6px var(--dsw-alias-state-error-primary)}' +
-    '.dsub-ledOff{background:var(--dsw-alias-label-tertiary)}' +
-    '.dsub-modalWrap{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;background:color-mix(in srgb,#000 45%,transparent)}' +
-    '.dsub-modal{width:min(560px,92vw);max-height:min(70vh,640px);overflow:auto;border:1px solid var(--dsw-alias-border-l1);border-radius:14px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);box-shadow:0 24px 64px rgba(0,0,0,.4);padding:16px}' +
-    '.dsub-modalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}' +
-    '.dsub-modalRow{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;margin-top:8px;background:var(--dsw-alias-bg-layer-2)}' +
-    '.dsub-modalName{font-weight:600;font-size:13px}' +
-    '.dsub-modalSub{font-size:11.5px;color:var(--dsw-alias-label-secondary)}' +
+    '.dsub-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border:1px solid var(--dsw-alias-border-l2);border-radius:999px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.06);transition:all .16s ease;user-select:none}' +
+    '.dsub-pill:hover{background:var(--dsw-alias-bg-layer-3);border-color:var(--dsw-alias-label-tertiary);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.1)}' +
+    '.dsub-pill:active{transform:translateY(0)}' +
+    '.dsub-pillTag{padding:1px 5px;border-radius:4px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary)}' +
+    '.dsub-led{width:7px;height:7px;border-radius:50%;flex:none;transition:all .2s ease}' +
+    '.dsub-ledOk{background:var(--dsw-alias-state-success-primary,#10b981);box-shadow:0 0 6px rgba(16,185,129,.7)}' +
+    '.dsub-ledWarn{background:var(--dsw-alias-state-warning-primary,#f59e0b);box-shadow:0 0 6px rgba(245,158,11,.7)}' +
+    '.dsub-ledBad{background:var(--dsw-alias-state-error-primary,#ef4444);box-shadow:0 0 6px rgba(239,68,68,.7)}' +
+    '.dsub-ledOff{background:var(--dsw-alias-label-tertiary,#6b7280)}' +
+    '.dsub-modalWrap{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);animation:dsubFadeIn .16s ease-out}' +
+    '.dsub-modal{width:min(520px,94vw);max-height:min(85vh,720px);overflow-y:auto;border:1px solid var(--dsw-alias-border-l1);border-radius:16px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);padding:20px;animation:dsubScaleIn .18s cubic-bezier(.16,1,.3,1)}' +
+    '@keyframes dsubFadeIn{from{opacity:0}to{opacity:1}}' +
+    '@keyframes dsubScaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}' +
+    '.dsub-modalHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--dsw-alias-border-l2)}' +
+    '.dsub-modalTitleWrap{display:flex;align-items:center;gap:10px}' +
+    '.dsub-modalIcon{width:30px;height:30px;border-radius:8px;background:var(--dsw-alias-bg-layer-1);display:grid;place-items:center;color:var(--dsw-alias-brand-primary);font-size:14px}' +
+    '.dsub-modalBadge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary)}' +
+    '.dsub-heroCard{margin-top:14px;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,var(--dsw-alias-bg-layer-2) 0%,var(--dsw-alias-bg-layer-3) 100%);border:1px solid var(--dsw-alias-border-l1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}' +
+    '.dsub-heroHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}' +
+    '.dsub-heroTitle{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}' +
+    '.dsub-heroModel{font-size:11.5px;color:var(--dsw-alias-label-secondary);font-family:ui-monospace,monospace}' +
+    '.dsub-heroBars{display:flex;flex-direction:column;gap:8px;margin-top:10px}' +
+    '.dsub-barLabelRow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dsw-alias-label-secondary);margin-bottom:3px}' +
+    '.dsub-barTrack{height:6px;border-radius:3px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}' +
+    '.dsub-barFillGrad{height:100%;border-radius:3px;transition:width .3s ease}' +
+    '.dsub-poolTitle{margin-top:16px;margin-bottom:8px;font-size:11.5px;font-weight:700;color:var(--dsw-alias-label-secondary);text-transform:uppercase;letter-spacing:.05em}' +
+    '.dsub-accountCard{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-2);margin-top:6px;transition:border-color .15s,background .15s}' +
+    '.dsub-accountCard:hover{background:var(--dsw-alias-bg-layer-3);border-color:var(--dsw-alias-label-tertiary)}' +
+    '.dsub-brandBadge{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}' +
+    '.dsub-brandCodex{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.3)}' +
+    '.dsub-brandClaude{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}' +
+    '.dsub-brandGrok{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3)}' +
+    '.dsub-brandAgy{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}' +
+    '.dsub-brandOllama{background:rgba(107,114,128,.15);color:#9ca3af;border:1px solid rgba(107,114,128,.3)}' +
+    '.dsub-accInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}' +
+    '.dsub-accNameRow{display:flex;align-items:center;justify-content:space-between;gap:8px}' +
+    '.dsub-accName{font-size:13px;font-weight:600}' +
+    '.dsub-accStatusTag{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px}' +
+    '.dsub-statusOk{background:rgba(16,185,129,.15);color:#34d399}' +
+    '.dsub-statusWarn{background:rgba(245,158,11,.15);color:#fbbf24}' +
+    '.dsub-statusBad{background:rgba(239,68,68,.15);color:#f87171}' +
+    '.dsub-statusOff{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-tertiary)}' +
+    '.dsub-modalFoot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--dsw-alias-border-l2)}' +
+    '.dsub-btnPrimary{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:var(--dsw-alias-brand-primary,#3b82f6);color:#fff;border:0;cursor:pointer;transition:opacity .15s}' +
+    '.dsub-btnPrimary:hover{opacity:.9}' +
+    '.dsub-btnSec{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;font-size:11.5px;font-weight:500;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);border:1px solid var(--dsw-alias-border-l2);cursor:pointer;text-decoration:none;transition:all .15s}' +
+    '.dsub-btnSec:hover{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-tertiary)}' +
     '.dsub-cq{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dsw-alias-label-secondary);padding:0 6px}' +
     '.dsub-cqBar{position:relative;width:40px;height:5px;border-radius:3px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}' +
     '.dsub-cqBarFill{height:100%;border-radius:3px;background:var(--dsw-alias-state-success-primary)}' +
@@ -132,7 +148,15 @@ const cssId = 'dsh-subscriptions/settings.module.css'
       'diagIssues': 'Open issue tracker',
       'diagHint': 'The report has no tokens, emails, proxy addresses or personal data.',
       'subsPill': 'SUBS',
-      'subsModalTitle': 'Subscription console',
+      'subsModalTitle': 'Subscription Hub',
+      'subsActiveHero': 'Active Subscription',
+      'subsPoolTitle': 'Provider Accounts',
+      'subsRefresh': 'Refresh',
+      'subsOpenSettings': 'All Settings →',
+      'subsFastMode': 'Fast Mode 1.5x',
+      'subsHealthy': 'Healthy',
+      'subsFree': 'free',
+      'subsUsed': 'used',
       'subsModalClose': 'Close',
       'subsLogged': 'connected',
       'subsNotLogged': 'not connected',
@@ -233,6 +257,14 @@ const cssId = 'dsh-subscriptions/settings.module.css'
       'diagHint': 'В отчёте нет токенов, email, адресов прокси и персональных данных.',
       'subsPill': 'SUBS',
       'subsModalTitle': 'Консоль подписок',
+      'subsActiveHero': 'Активная подписка',
+      'subsPoolTitle': 'Пул аккаунтов',
+      'subsRefresh': 'Обновить',
+      'subsOpenSettings': 'Все настройки →',
+      'subsFastMode': 'Режим Fast 1.5x',
+      'subsHealthy': 'Исправен',
+      'subsFree': 'свободно',
+      'subsUsed': 'израсходовано',
       'subsModalClose': 'Закрыть',
       'subsLogged': 'подключен',
       'subsNotLogged': 'не подключен',
@@ -1082,37 +1114,56 @@ const cssId = 'dsh-subscriptions/settings.module.css'
 
     // #83: пилл SUBS(N) в шапке сессии со светодиодом здоровья пула и
     // модальной консолью аккаунтов (закрытие: крестик, Escape, клик мимо).
+    function brandBadge(prov) {
+      const p = String(prov || '').toLowerCase()
+      if (p.includes('codex') || p.includes('chatgpt') || p.includes('openai')) return { label: 'OpenAI', cls: 'dsub-brandCodex', icon: '⚡' }
+      if (p.includes('claude') || p.includes('anthropic')) return { label: 'Claude', cls: 'dsub-brandClaude', icon: '✳' }
+      if (p.includes('grok') || p.includes('xai')) return { label: 'Grok', cls: 'dsub-brandGrok', icon: '✦' }
+      if (p.includes('antigravity') || p.includes('google') || p.includes('gemini')) return { label: 'AGY', cls: 'dsub-brandAgy', icon: '◆' }
+      if (p.includes('ollama')) return { label: 'Ollama', cls: 'dsub-brandOllama', icon: '🦙' }
+      return { label: (p.charAt(0).toUpperCase() || 'P'), cls: 'dsub-brandCodex', icon: '●' }
+    }
+
     function SubsPill(props) {
       const t = (props && props.t) || ((k) => k)
-      const [state, setState] = React.useState({ logged: [], usage: 0, accounts: [], open: false, active: null })
+      const [state, setState] = React.useState({ logged: [], usage: 0, accounts: [], open: false, active: null, loading: false })
+
+      const pull = () => {
+        setState((s) => Object.assign({}, s, { loading: true }))
+        refreshLoggedIn().then((r) => {
+          const logged = r.logged || []
+          fetch('/dsh-subscriptions/config', { cache: 'no-store' })
+            .then((res) => res.json())
+            .then((cfg) => {
+              setState((s) => Object.assign({}, s, { logged, usage: r.usage, accounts: (cfg && cfg.accounts) || [], active: r.active, loading: false }))
+            })
+            .catch(() => {
+              setState((s) => Object.assign({}, s, { logged, usage: r.usage, accounts: [], active: r.active, loading: false }))
+            })
+        }).catch(() => {
+          setState((s) => Object.assign({}, s, { loading: false }))
+        })
+      }
+
       React.useEffect(() => {
-        let alive = true
-        const pull = () => {
-          refreshLoggedIn().then((r) => {
-            if (!alive) return
-            const logged = r.logged || []
-            fetch('/dsh-subscriptions/config', { cache: 'no-store' })
-              .then((res) => res.json())
-              .then((cfg) => {
-                if (!alive) return
-                setState({ logged, usage: r.usage, accounts: (cfg && cfg.accounts) || [], open: false, active: r.active })
-              })
-              .catch(() => { if (alive) setState({ logged, usage: r.usage, accounts: [], open: false, active: r.active }) })
-          }).catch(() => {})
-        }
         pull()
-        const id = setInterval(pull, 20 * 1000)
-        return () => { alive = false; clearInterval(id) }
+        const id = setInterval(pull, 25 * 1000)
+        return () => clearInterval(id)
       }, [])
+
       React.useEffect(() => {
         if (!state.open) return undefined
         const onKey = (e) => { if (e.key === 'Escape') setState((s) => Object.assign({}, s, { open: false })) }
         document.addEventListener('keydown', onKey)
         return () => document.removeEventListener('keydown', onKey)
       }, [state.open])
+
       const n = state.logged.length
+      const total = state.accounts.length || n
       const led = n === 0 ? 'dsub-ledOff' : (state.usage >= 90 ? 'dsub-ledBad' : (state.usage >= 50 ? 'dsub-ledWarn' : 'dsub-ledOk'))
       const now = Date.now()
+
+      // Header Pill Label
       let pillText = t('subsPill') + ' (' + n + ')'
       if (state.active) {
         const a = state.active
@@ -1121,29 +1172,116 @@ const cssId = 'dsh-subscriptions/settings.module.css'
         const provName = a.provider ? (a.provider.charAt(0).toUpperCase() + a.provider.slice(1)) : ''
         pillText = (a.provider === 'codex' && a.fastMode ? '⚡ ' : '') + provName + (winStr ? ' · ' + winStr : (a.usagePercent != null ? ' · ' + Math.round(a.usagePercent) + '%' : ''))
       }
+
+      // Active Hero Card Renderer
+      const renderActiveHero = () => {
+        if (!state.active) return null
+        const a = state.active
+        const b = brandBadge(a.provider)
+        const wins = Array.isArray(a.windows) ? a.windows : []
+        const primaryWin = wins.find((w) => (w.label || w.id) === '5h') || wins[0]
+        const secWin = wins.find((w) => (w.label || w.id) === '7d') || wins[1]
+        const primPct = primaryWin && primaryWin.usedPercent != null ? Math.round(primaryWin.usedPercent) : (a.usagePercent != null ? Math.round(a.usagePercent) : 0)
+        const secPct = secWin && secWin.usedPercent != null ? Math.round(secWin.usedPercent) : null
+
+        return React.createElement('div', { className: 'dsub-heroCard' },
+          React.createElement('div', { className: 'dsub-heroHead' },
+            React.createElement('div', { className: 'dsub-heroTitle' },
+              React.createElement('span', { className: 'dsub-brandBadge ' + b.cls, style: { width: 24, height: 24, fontSize: 11 } }, b.icon),
+              React.createElement('span', null, (a.provider ? a.provider.toUpperCase() : 'LLM') + (a.index ? ' #' + a.index : '')),
+              a.fastMode ? React.createElement('span', { className: 'dsub-pillTag', style: { background: 'rgba(245,158,11,.15)', color: '#fbbf24' } }, '⚡ FAST 1.5x') : null,
+            ),
+            React.createElement('span', { className: 'dsub-heroModel' }, a.model || 'active model'),
+          ),
+          React.createElement('div', { className: 'dsub-heroBars' },
+            React.createElement('div', null,
+              React.createElement('div', { className: 'dsub-barLabelRow' },
+                React.createElement('span', { style: { fontWeight: 600 } }, (primaryWin && primaryWin.label) ? primaryWin.label + ' window' : t('subs5hWindow')),
+                React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums', fontWeight: 600 } }, primPct + '% ' + t('subsUsed') + ' (' + (100 - primPct) + '% ' + t('subsFree') + ')'),
+              ),
+              React.createElement('div', { className: 'dsub-barTrack' },
+                React.createElement('div', {
+                  className: 'dsub-barFillGrad',
+                  style: {
+                    width: Math.min(100, Math.max(0, primPct)) + '%',
+                    background: primPct >= 90 ? 'var(--dsw-alias-state-error-primary,#ef4444)' : (primPct >= 50 ? 'var(--dsw-alias-state-warning-primary,#f59e0b)' : 'var(--dsw-alias-state-success-primary,#10b981)'),
+                  },
+                }),
+              ),
+            ),
+            secWin ? React.createElement('div', null,
+              React.createElement('div', { className: 'dsub-barLabelRow' },
+                React.createElement('span', null, (secWin.label || '7d') + ' window'),
+                React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, secPct + '%'),
+              ),
+              React.createElement('div', { className: 'dsub-barTrack' },
+                React.createElement('div', {
+                  className: 'dsub-barFillGrad',
+                  style: {
+                    width: Math.min(100, Math.max(0, secPct)) + '%',
+                    background: secPct >= 90 ? '#ef4444' : (secPct >= 50 ? '#f59e0b' : '#3b82f6'),
+                  },
+                }),
+              ),
+            ) : null,
+          ),
+        )
+      }
+
+      // Accounts list
       const rows = state.accounts.map((a, i) => {
         const isLogged = state.logged.includes(a.provider)
         const cooled = a.cooldownUntil && a.cooldownUntil > now
         const pct = a.usagePercent != null ? Math.round(a.usagePercent) : null
-        return React.createElement('div', { className: 'dsub-modalRow', key: i },
-          React.createElement('span', { className: 'dsub-led ' + (pct == null ? 'dsub-ledOff' : (pct >= 90 ? 'dsub-ledBad' : (pct >= 50 ? 'dsub-ledWarn' : 'dsub-ledOk'))) }),
-          React.createElement('span', { className: 'dsub-modalName' }, a.provider + (a.index ? ' #' + a.index : '')),
-          React.createElement('span', { style: { flex: 1 } }),
-          React.createElement('span', { className: 'dsub-modalSub' },
-            (isLogged ? t('subsLogged') : t('subsNotLogged')) +
-            (cooled ? ' · ' + t('subsCooldown') : '') +
-            (pct != null ? ' · ' + pct + '%' : '')
+        const b = brandBadge(a.provider)
+        const isActiveThis = state.active && state.active.provider === a.provider && state.active.index === a.index
+
+        let statusClass = 'dsub-statusOff'
+        let statusText = t('subsNotLogged')
+        if (cooled) {
+          statusClass = 'dsub-statusWarn'
+          statusText = t('subsCooldown')
+        } else if (isLogged) {
+          if (pct >= 90) { statusClass = 'dsub-statusBad'; statusText = '90%+ ' + t('subsUsed') }
+          else if (pct >= 50) { statusClass = 'dsub-statusWarn'; statusText = pct + '% ' + t('subsUsed') }
+          else { statusClass = 'dsub-statusOk'; statusText = (pct != null ? pct + '% · ' : '') + t('subsLogged') }
+        }
+
+        return React.createElement('div', { className: 'dsub-accountCard', key: i },
+          React.createElement('div', { className: 'dsub-brandBadge ' + b.cls }, b.icon),
+          React.createElement('div', { className: 'dsub-accInfo' },
+            React.createElement('div', { className: 'dsub-accNameRow' },
+              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                React.createElement('span', { className: 'dsub-accName' }, a.provider.toUpperCase() + (a.index ? ' #' + a.index : '')),
+                isActiveThis ? React.createElement('span', { className: 'dsub-pillTag', style: { background: 'rgba(16,185,129,.15)', color: '#34d399' } }, 'ACTIVE') : null,
+                a.proxy ? React.createElement('span', { className: 'dsub-dim', title: a.proxy }, '🌐 proxy') : null,
+              ),
+              React.createElement('span', { className: 'dsub-accStatusTag ' + statusClass }, statusText),
+            ),
+            (isLogged && pct != null) ? React.createElement('div', { className: 'dsub-barTrack', style: { marginTop: 4, height: 4 } },
+              React.createElement('div', {
+                className: 'dsub-barFillGrad',
+                style: {
+                  width: Math.min(100, Math.max(0, pct)) + '%',
+                  background: pct >= 90 ? '#ef4444' : (pct >= 50 ? '#f59e0b' : '#10b981'),
+                },
+              }),
+            ) : null,
           ),
         )
       })
+
       return React.createElement(React.Fragment, null,
         React.createElement('button', {
-          type: 'button', className: 'dsub-pill', 'aria-expanded': state.open ? 'true' : 'false',
+          type: 'button',
+          className: 'dsub-pill',
+          'aria-expanded': state.open ? 'true' : 'false',
           title: t('subsPill') + ': ' + (n > 0 ? (n + ' ' + t('connected')) : t('notConnected')),
           onClick: () => setState((s) => Object.assign({}, s, { open: !s.open })),
         },
           React.createElement('span', { className: 'dsub-led ' + led }),
-          pillText,
+          React.createElement('span', null, pillText),
+          React.createElement('span', { style: { fontSize: 9, opacity: 0.6, marginLeft: 2 } }, '▼'),
         ),
         state.open ? React.createElement('div', {
           className: 'dsub-modalWrap',
@@ -1151,16 +1289,36 @@ const cssId = 'dsh-subscriptions/settings.module.css'
         },
           React.createElement('div', { className: 'dsub-modal', role: 'dialog', 'aria-label': t('subsModalTitle') },
             React.createElement('div', { className: 'dsub-modalHead' },
-              React.createElement('span', { className: 'dsub-h' }, t('subsModalTitle')),
-              React.createElement('button', {
-                type: 'button', className: 'dsub-mini',
-                onClick: () => setState((s) => Object.assign({}, s, { open: false })),
-              }, t('subsModalClose') + ' ×'),
+              React.createElement('div', { className: 'dsub-modalTitleWrap' },
+                React.createElement('div', { className: 'dsub-modalIcon' }, '⚡'),
+                React.createElement('div', null,
+                  React.createElement('div', { style: { fontWeight: 700, fontSize: 15 } }, t('subsModalTitle')),
+                  React.createElement('div', { className: 'dsub-dim' }, n + ' of ' + total + ' ' + t('connected')),
+                ),
+              ),
+              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                React.createElement('button', {
+                  type: 'button',
+                  className: 'dsub-mini',
+                  title: t('subsRefresh'),
+                  onClick: () => pull(),
+                }, state.loading ? '…' : '🔄'),
+                React.createElement('button', {
+                  type: 'button',
+                  className: 'dsub-mini',
+                  onClick: () => setState((s) => Object.assign({}, s, { open: false })),
+                }, '✕'),
+              ),
             ),
-            rows.length ? rows : React.createElement('div', { className: 'dsub-sub' }, t('subsNotLogged')),
-            React.createElement('div', { className: 'dsub-row', style: { marginTop: 12 } },
+            renderActiveHero(),
+            React.createElement('div', { className: 'dsub-poolTitle' }, t('subsPoolTitle')),
+            rows.length ? rows : React.createElement('div', { className: 'dsub-sub', style: { padding: '12px 0' } }, t('subsNotLogged')),
+            React.createElement('div', { className: 'dsub-modalFoot' },
+              React.createElement('span', { className: 'dsub-dim' }, 'DSH Subscriptions'),
               React.createElement('a', {
-                className: 'dsub-mini', href: '#', onClick: (e) => {
+                className: 'dsub-btnSec',
+                href: '#',
+                onClick: (e) => {
                   e.preventDefault()
                   setState((s) => Object.assign({}, s, { open: false }))
                   try {
@@ -1174,11 +1332,6 @@ const cssId = 'dsh-subscriptions/settings.module.css'
         ) : null,
       )
     }
-    // #82: перетаскиваемый HUD-бабл (shell.overlay) с кольцевой шкалой
-    // остатка активной подписки, прилипанием к краям и frosted-панелью.
-    const HUD_KEY = 'dsh-subscriptions.hud'
-    const HUD_SIZE = 64
-
 
     function registerSubsPill(ctx) {
       ctx.effect(() => {

package/lib/index.js

@@ -373,7 +373,7 @@ export function apply(ctx, config) {
       verifier: row.verifier,
       challenge: row.challenge,
       state: row.state,
-    }, code, fetch)
+    }, code, fetchForRef(ref))
     const slots = normalizeSlots(live().slots)
     const slot = slots.find((s) => s.ref === ref)
     if (slot && slot.label) blob.label = slot.label
@@ -921,7 +921,7 @@ export function apply(ctx, config) {
       }
       try {
         const cfg = vendorConfig(provider, live())
-        const start = await vendor.deviceStart(cfg, fetch)
+        const start = await vendor.deviceStart(cfg, fetchForRef(oauthRef(provider, index)))
         const state = 'dev-' + Date.now() + '-' + Math.random().toString(36).slice(2, 10)
         sweepPending(Date.now())
         pending.set(state, {
@@ -970,7 +970,7 @@ export function apply(ctx, config) {
       const vendor = getVendor(row.provider)
       try {
         const cfg = vendorConfig(row.provider, live())
-        const out = await vendor.devicePoll(cfg, { deviceAuthId: row.deviceAuthId, userCode: row.userCode }, fetch)
+        const out = await vendor.devicePoll(cfg, { deviceAuthId: row.deviceAuthId, userCode: row.userCode }, fetchForRef(row.ref))
         if (out.status !== 'authorized') {
           writeJson(res, 200, { ok: true, status: out.status })
           return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-subscriptions",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "description": "Use ChatGPT Codex, Claude, Grok, and Antigravity subscriptions as DeepSeek Harness LLM providers via OAuth.",
   "license": "MIT",
   "type": "module",