@goodandready/dsh-key-rotation 0.8.3 → 0.8.5

package/README.md

@@ -45,6 +45,7 @@
 - **🕒 Accurate Midnight PST Resets**: Corrected UTC-8 timezone calculation offset sign for calendar quota reset windows.
 - **🧹 Lifecycle Timer Cleanup**: Wrapped `canaryTimer` and `selfHealTimer` in Cordis effect scopes, eliminating background orphaned intervals on hot reload.
 - **⚡ Stale Lock Recovery in Load Balancer**: Added expired lock detection to `pickLeastLoaded` for uninterrupted least-connections routing.
+- **📊 Load Distribution & Modals (Changed in v0.8.5)**: Interactive segmented load distribution charts per pool, modal action confirmation, and 429/5xx backoff jitter (#283, #284).
 - **🎨 Native Design System (Changed in v0.8.3)**: Unified with `dsh-clinebot` baseline: modular section cards, live pool telemetry stat boxes, pill badges, and complete semantic theme token styling (#281).
 - **🌐 Localization (Changed in v0.8.2)**: Source strings are English-only. Russian/Chinese UI comes from the DSH core locale service and translation plugins (`props.t`). Active locale: host snapshot → first `navigator.languages` entry → `en` (#277).
 

package/README.ru.md

@@ -295,6 +295,7 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 - **Очистка жизненного цикла**: Патч `credentials.resolve` и слушатели событий `ctx.on` (`llm/stream`, `agent/request-error`) переведены в скоупы `ctx.effect` с автоматическим восстановлением функций и отпиской при выгрузке плагина (#238, #239).
 - **Роли секретов в схеме**: Полям `incidentGitHubToken` и `webhookActionToken` в схеме `Config` присвоена роль `.role('secret')` для маскирования в UI (#237).
 - **Архитектура настроек**: Добавлена нативная интеграция со снимками `settingsScope` в карточке настроек с безопасным фоллбеком на HTTP-мост (#235).
+- **Распределение нагрузки и модальные окна (Changed in v0.8.5)**: Диаграмма распределения нагрузки (.krot-load-chart), модальные подтверждения (.krot-modal) и джиттер кулдаунов при 429/5xx (#283, #284).
 - **Нативная дизайн-система (Changed in v0.8.3)**: Унификация со стилем `dsh-clinebot`: модульные карточки секций, плитки оперативной телеметрии пулов, капсульные бейджи и системные CSS-токены DSH (#281).
 - **Локализация (Changed in v0.8.2)**: Исходные строки только на английском (`en`). Русский и китайский приходят через core `props.t` / translation-плагины. Фолбек активной локали: snapshot → первый `navigator.languages` → `en`. Свой `settings.section` и встроенные `ru`/`zh`-таблицы удалены (#236, #275, #277).
 - **Удаление мёртвого кода**: Удалена неиспользуемая функция `mountDashboard` после перехода на header chip (#240).

package/lib/client.js

@@ -38,6 +38,15 @@ window.__ModuleLoader__.load({
       statPools: 'Configured Pools',
       statKeys: 'Total Keys',
       statHealthy: 'Healthy / Ready',
+      loadDistribution: 'Traffic Distribution',
+      statRequests: 'requests',
+      noTrafficYet: 'No traffic recorded yet',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      confirmResetTitle: 'Reset cooldowns for {p}?',
+      confirmResetDesc: 'This will immediately clear all failure counts, cooldown timers, and reset the circuit breaker.',
+      confirmRemoveProvTitle: 'Remove provider {p}?',
+      confirmRemoveProvDesc: 'Are you sure you want to remove this provider and all configured keys from rotation?',
       filterAll: 'All',
       filterReady: 'Ready',
       filterCooldown: 'In Cooldown',
@@ -229,6 +238,18 @@ window.__ModuleLoader__.load({
       '.krot-stat-box{padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:4px}',
       '.krot-stat-val{font-size:20px;font-weight:700;color:var(--dsw-alias-label-primary)}',
       '.krot-stat-lbl{font-size:12px;color:var(--dsw-alias-label-secondary)}',
+      '.krot-load-chart{margin:10px 0;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2)}',
+      '.krot-load-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--dsw-alias-label-secondary);margin-bottom:6px}',
+      '.krot-load-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1)}',
+      '.krot-load-segment{height:100%;transition:width 0.2s ease}',
+      '.krot-load-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:11px}',
+      '.krot-load-item{display:inline-flex;align-items:center;gap:4px}',
+      '.krot-load-dot{width:7px;height:7px;border-radius:50%}',
+      '.krot-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}',
+      '.krot-modal-card{width:90%;max-width:420px;background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.28);padding:20px;display:flex;flex-direction:column;gap:12px}',
+      '.krot-modal-title{font-size:16px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+      '.krot-modal-desc{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.45}',
+      '.krot-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}',
       '.krot-badge{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:5px;font-weight:500;white-space:nowrap}',
       '.krot-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}',
       '.krot-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}',
@@ -352,12 +373,12 @@ window.__ModuleLoader__.load({
     function KeyRotationSection(props) {
       const t = resolveT(props);
       const settingsScope = React.useMemo(() => {
-        if (props.ctx && props.ctx.settingsScope) {
-          try {
+        try {
+          if (props.ctx && props.ctx.settingsScope) {
             return props.ctx.settingsScope.bind({ namespace: NS });
-          } catch (_) {
-            return null;
           }
+        } catch (_) {
+          return null;
         }
         return null;
       }, [props.ctx]);
@@ -392,6 +413,7 @@ window.__ModuleLoader__.load({
       // ── all hooks live ABOVE any early return (React error 310 otherwise) ──
       const [search, setSearch] = React.useState('');
       const [statusFilter, setStatusFilter] = React.useState('all');
+      const [confirmModal, setConfirmModal] = React.useState(null);
       const [optimisticReset, setOptimisticReset] = React.useState({});
       const [selected, setSelected] = React.useState(new Set());
       const [bulkCooldown, setBulkCooldown] = React.useState('');
@@ -913,6 +935,57 @@ window.__ModuleLoader__.load({
             document.body.appendChild(a); a.click(); a.remove();
           } }, t('exportCsv'));
 
+                const loadChart = (() => {
+          if (keys.length === 0) return null;
+          const ps = status[entry.provider];
+          const keyUsages = keys.map((k, idx) => {
+            const hit = ps && Array.isArray(ps.keys) ? ps.keys.find((x) => x.ref === k) : null;
+            const u = hit && typeof hit.usage === 'number' ? hit.usage : 0;
+            return { ref: k, index: idx, usage: u };
+          });
+          const total = keyUsages.reduce((acc, x) => acc + x.usage, 0);
+          const palette = [
+            'var(--dsw-alias-state-brand-primary, #6366f1)',
+            'var(--dsw-alias-state-success-primary, #10b981)',
+            'var(--dsw-alias-state-warning-primary, #f59e0b)',
+            'var(--dsw-alias-state-info-primary, #3b82f6)',
+            '#8b5cf6',
+            '#ec4899',
+            '#14b8a6',
+          ];
+          return h('div', { className: 'krot-load-chart' },
+            h('div', { className: 'krot-load-header' },
+              h('span', { style: { fontWeight: 600 } }, '📊 ' + t('loadDistribution')),
+              h('span', null, total > 0 ? (total + ' ' + t('statRequests')) : t('noTrafficYet'))
+            ),
+            h('div', { className: 'krot-load-bar' },
+              total > 0
+                ? keyUsages.map((x, i) => {
+                    if (x.usage === 0) return null;
+                    const pct = Math.max(1, Math.round((x.usage / total) * 100));
+                    const color = palette[i % palette.length];
+                    return h('div', {
+                      key: x.ref,
+                      className: 'krot-load-segment',
+                      style: { width: pct + '%', background: color },
+                      title: x.ref + ': ' + x.usage + ' (' + pct + '%)',
+                    });
+                  })
+                : h('div', { className: 'krot-load-segment', style: { width: '100%', background: 'var(--dsw-alias-bg-layer-2)', opacity: 0.6 } })
+            ),
+            total > 0 ? h('div', { className: 'krot-load-legend' },
+              keyUsages.map((x, i) => {
+                const pct = total > 0 ? Math.round((x.usage / total) * 100) : 0;
+                const color = palette[i % palette.length];
+                return h('span', { key: x.ref, className: 'krot-load-item' },
+                  h('span', { className: 'krot-load-dot', style: { background: color } }),
+                  h('span', { style: { color: 'var(--dsw-alias-label-secondary)' } }, t('keyLabel').replace('{n}', String(x.index + 1)) + ': ' + x.usage + ' (' + pct + '%)')
+                );
+              })
+            ) : null
+          );
+        })();
+
         return h('div', { key: pIndex, className: 'krot-prov' },
           h('div', { className: 'krot-prov-head' },
             h('input', { type: 'checkbox', checked: selected.has(entry.provider), onChange: (e) => { const ns = new Set(selected); if (e.target.checked) ns.add(entry.provider); else ns.delete(entry.provider); setSelected(ns); } }),
@@ -943,9 +1016,17 @@ window.__ModuleLoader__.load({
               return h('span', { className: 'krot-tail', title: 'health score', style: { flex: 'none', color, fontWeight: 700 } }, String(score));
             })(),
             (() => { const ps = status[entry.provider]; const tot = ps && typeof ps.totalUsage === 'number' ? ps.totalUsage : null; return tot !== null ? h('span', { className: 'krot-tail', title: 'total requests', style: { flex: 'none' } }, String(tot)) : null; })(),
-            btn('✕', () => removeProvider(pIndex), { title: t('removeProvider') }),
+            btn('✕', () => setConfirmModal({
+              title: t('confirmRemoveProvTitle').replace('{p}', entry.provider),
+              desc: t('confirmRemoveProvDesc'),
+              actionLabel: t('removeProvider'),
+              danger: true,
+              onConfirm: () => removeProvider(pIndex),
+            }), { title: t('removeProvider') }),
           ),
-          filterBar, h('div', { className: 'krot-keys' }, keyRows),
+          filterBar,
+          loadChart,
+          h('div', { className: 'krot-keys' }, keyRows),
           h('div', { className: 'krot-foot' },
             btn(t('addKey'), () => addKey(pIndex), { title: t('addKeyTitle') }),
             switchesLine,
@@ -956,7 +1037,13 @@ window.__ModuleLoader__.load({
             // #224: 7-day switches per day (client-side, from the same events)
             (providerStatus && Array.isArray(providerStatus.events) && providerStatus.events.length > 0 ? h('div', { style: { display: 'flex', gap: '2px', alignItems: 'end', height: '16px', marginTop: '2px' } }, (() => { const now = Date.now(); const days = Array(7).fill(0); for (const ev of providerStatus.events) { const d = Math.floor((now - ev.at) / 86400000); if (d >= 0 && d < 7) days[6 - d]++; } const max = Math.max(1, ...days); return days.map((c, i) => h('div', { key: i, title: c + ' switches · day -' + (6 - i), style: { flex: 1, background: c ? 'var(--dsw-alias-state-info-primary, var(--dsw-alias-state-warning-primary))' : 'var(--dsw-alias-border-l2)', height: (c / max * 16) + 'px', minHeight: '2px', borderRadius: '2px' } })); })()) : null),
             (providerStatus && Array.isArray(providerStatus.events) && providerStatus.events.length > 0 ? h('details', { style: { fontSize: '11px', marginTop: '6px' } }, h('summary', null, 'Recent failures ('+providerStatus.events.length+')'), h('ul', { style: { margin: '4px 0 0', paddingLeft: '16px' } }, providerStatus.events.slice().reverse().map((ev, i) => h('li', { key: i, style: ev.type === 'probe' ? { opacity: .5 } : null }, new Date(ev.at).toLocaleTimeString() + ' ' + (ev.type === 'probe' ? '[probe] ' : '') + ev.ref + ' ' + ev.reason + ' cd=' + ev.cooldownMs)) )) : null),
-            btn(t('resetCooldown'), () => doReset(entry.provider), { disabled: !(providerStatus && providerStatus.switches > 0) || resetting === entry.provider, title: t('resetCooldown') }),
+            btn(t('resetCooldown'), () => setConfirmModal({
+              title: t('confirmResetTitle').replace('{p}', entry.provider),
+              desc: t('confirmResetDesc'),
+              actionLabel: t('resetCooldown'),
+              danger: false,
+              onConfirm: () => doReset(entry.provider),
+            }), { disabled: !(providerStatus && providerStatus.switches > 0) || resetting === entry.provider, title: t('resetCooldown') }),
             btn(testAllProvider === entry.provider ? t('testing') : t('testAll'), () => doTestAll(entry.provider), { disabled: testAllProvider === entry.provider, title: t('testAll') }),
             exportCsv,
           ),
@@ -1124,7 +1211,23 @@ window.__ModuleLoader__.load({
         ) : null,
       ].filter(Boolean);
 
+      const confirmModalEl = confirmModal ? h('div', { className: 'krot-modal-backdrop', onClick: () => setConfirmModal(null) },
+        h('div', { className: 'krot-modal-card', onClick: (e) => e.stopPropagation() },
+          h('div', { className: 'krot-modal-title' }, confirmModal.title),
+          h('div', { className: 'krot-modal-desc' }, confirmModal.desc),
+          h('div', { className: 'krot-modal-actions' },
+            btn(t('cancel'), () => setConfirmModal(null)),
+            btn(confirmModal.actionLabel || t('confirm'), () => {
+              const fn = confirmModal.onConfirm;
+              setConfirmModal(null);
+              if (fn) fn();
+            }, { primary: !confirmModal.danger, className: confirmModal.danger ? 'krot-btn-danger' : undefined })
+          )
+        )
+      ) : null;
+
       return h('div', { className: 'krot' },
+        confirmModalEl,
         statsSection,
         poolsSection,
         failoverSection,
@@ -1191,17 +1294,6 @@ window.__ModuleLoader__.load({
           type: 'button',
           className: 'krot-header-chip',
           title: 'Key Rotation',
-      sectionStats: 'Pool Health & Telemetry',
-      sectionStatsDesc: 'Real-time telemetry of active key pools, healthy credentials, and failover status.',
-      sectionFailover: 'Failover Triggers & Error Codes',
-      sectionFailoverDesc: 'Select error conditions that trigger automatic switching to the next available key.',
-      sectionTiming: 'Timing & Rotation Schedule',
-      sectionTimingDesc: 'Configure cooldown durations and scheduled periodic rotation windows.',
-      sectionBackup: 'Backup & Snapshots',
-      sectionBackupDesc: 'Export or import provider pools and create full plugin configuration snapshots.',
-      statPools: 'Configured Pools',
-      statKeys: 'Total Keys',
-      statHealthy: 'Healthy / Ready',
           onClick: () => setOpen((v) => !v),
         },
           h('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: color, flex: 'none', boxShadow: `0 0 6px ${color}` } }),
@@ -1273,7 +1365,7 @@ window.__ModuleLoader__.load({
       }
     }
 
-    module.exports = { apply, inject: ['slots', 'locale'] };
+    module.exports = { apply, inject: ['slots', 'locale', 'settingsScope'] };
     return module.exports;
   },
 });

package/lib/index.js

@@ -747,6 +747,7 @@ export function apply(ctx, config = {}) {
     poolState,
     getRotationDisabled: () => rotationDisabled,
     setRotationDisabled: (v) => { rotationDisabled = v; },
+    circuitBreaker: moduleBreaker,
   });
 
   ctx.effect(() => ctx.on('llm/stream', (options, next) => {
@@ -783,7 +784,7 @@ export function apply(ctx, config = {}) {
     if (moduleBreaker) moduleBreaker.onFailure(provider);
     const ref = pool.state.lastUsed;
     if (ref) {
-      const backoff = recordFailure(pool, ref, Date.now(), pool.cooldownMs ?? 60000, undefined, cls.soft);
+      const backoff = recordFailure(pool, ref, Date.now(), pool.cooldownMs ?? 60000, undefined, cls.soft, true);
       pushEvent(pool, ref, code || 'UNKNOWN', backoff);
       pool.state.switches = (pool.state.switches ?? 0) + 1;
       pool.state.lastReason = code || 'UNKNOWN';

package/lib/pool.js

@@ -381,3 +381,20 @@ export function budgetVerdict(spend, budget) {
   const ratio = spend / budget;
   return { spend, budget, ratio, warn: ratio >= 0.8, exceeded: ratio >= 1 };
 }
+
+
+/** Safely reset a provider's circuit breaker to closed state. */
+export function resetCircuitForProvider(circuitBreaker, provider) {
+  if (!circuitBreaker || !provider) return false;
+  try {
+    if (typeof circuitBreaker.reset === 'function') {
+      circuitBreaker.reset(provider);
+      return true;
+    }
+    if (typeof circuitBreaker.onSuccess === 'function') {
+      circuitBreaker.onSuccess(provider);
+      return true;
+    }
+  } catch (_) {}
+  return false;
+}

package/lib/rotate.js

@@ -67,7 +67,7 @@ export function createRotate(deps) {
         const _max = pool.maxCooldownMs ?? maxCooldownMs;
         const _effBase = _retry !== undefined ? Math.max(_base, Math.min(_retry, _max ?? _base * 8)) : _base;
         const cls = classifyFailure({ code: errCode, message: errMsg });
-        const _b = recordFailure(pool, targetRef, now(), _effBase, _max, cls.soft);
+        const _b = recordFailure(pool, targetRef, now(), _effBase, _max, cls.soft, true);
         if (circuitBreaker) circuitBreaker.onFailure(pool.base ?? options?.provider);
         pushEvent(pool, targetRef, errCode ?? 'UNKNOWN', _b);
         if (!pool.state.authFailCounts) pool.state.authFailCounts = new Map();

package/lib/routes-ops.js

@@ -46,6 +46,7 @@ export function registerOpsRoutes(ctx, deps) {
     poolState,
     getRotationDisabled,
     setRotationDisabled,
+    circuitBreaker,
   } = deps;
 
   // ── status route: what the settings card cannot know on its own ──
@@ -352,7 +353,13 @@ export function registerOpsRoutes(ctx, deps) {
         st.authFailCounts?.clear();
         st.brokenUntil?.clear();
         st.switches = 0; st.lastReason = undefined; st.lastSwitchAt = undefined;
-        json(res, 200, { ok: true, provider, cleared });
+        let circuitReset = false;
+        const br = circuitBreaker ?? buildRuntime().breaker;
+        if (br) {
+          if (typeof br.reset === 'function') { br.reset(provider); circuitReset = true; }
+          else if (typeof br.onSuccess === 'function') { br.onSuccess(provider); circuitReset = true; }
+        }
+        json(res, 200, { ok: true, provider, cleared, circuitReset });
         return;
       }
       if (ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-key-rotation",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "packageManager": "pnpm@10.33.2",
   "description": "Per-provider API key rotation for DeepSeek Harness: a key pool per provider, auto-created clone routes, and switching to the next key on quota/rate-limit errors. Includes a Settings section (Key Rotation) to edit the key pools, cooldown and switch codes.",
   "keywords": [