@goodandready/dsh-usage-guard 0.1.5 → 0.1.7

package/README.md

@@ -112,6 +112,20 @@ Logs informative diagnostic warnings naming the exact session, turn, step, raw p
 
 ---
 
+## 🚀 Changed in v0.1.7
+
+* **Design Alignment with `dsh-clinebot` (#6)**:
+  - Idempotent `ensureCss()` outside component render with `<style id="dsh-usage-guard-full-css" data-dsh-plugin="dsh-usage-guard">`.
+  - Wrapped settings card in an `ErrorBoundary` to gracefully contain render errors and offer a "Retry" mechanism without breaking DSH Settings.
+  - Native DSH theme tokens for card styling (`.ug-section-card`, `.ug-field-card`, `.ug-stat-box`, `.ug-badge-ok`, `.ug-badge-warn`, `.ug-btn-primary`).
+  - Added protection status telemetry grid displaying current operational mode and target Cordis service.
+  - Built-in `makeT(dict, fallback)` supporting Russian and English locales with template interpolation.
+  - Added `refreshMirrorUntilVisible(ctx)` with an unref timer to guarantee host settings scope visibility.
+* **Parser Stability & Cache Aliases Hardening**:
+  - Added recognition of nested OpenAI cache details (`prompt_tokens_details.cachedTokens`, `prompt_tokens_details.cacheCreationTokens`).
+  - Hardened number coercion and sanitization against `Infinity`, `-Infinity`, `NaN`, and malformed strings.
+  - Defensive error handling when accessing live settings scopes.
+
 ## 🚀 Changed in v0.1.5
 
 * **Strict `settings.plugin.item` Registration (#3)**:

package/README.ru.md

@@ -112,6 +112,20 @@ graph LR
 
 ---
 
+## 🚀 Изменения в версии v0.1.7 (Changed in v0.1.7)
+
+* **Единый стиль по референсу `dsh-clinebot` (#6)**:
+  - Идемпотентный вызов `ensureCss()` вынесен за пределы цикла рендера (`#dsh-usage-guard-full-css` с атрибутом `data-dsh-plugin="dsh-usage-guard"`).
+  - Карточка настроек защищена компонентом `ErrorBoundary`: ошибки интерфейса не роняют панель настроек DSH и сопровождаются кнопкой «Retry».
+  - Полное использование токенов темы DSH для карточек, полей и бейджей (`.ug-section-card`, `.ug-field-card`, `.ug-stat-box`, `.ug-badge-ok`, `.ug-badge-warn`, `.ug-btn-primary`).
+  - Добавлен блок телеметрии статуса защиты и целевой службы `sessionProjections`.
+  - Внедрена функция локализации `makeT(ru, en)` с поддержкой интерполяции переменных `{var}` и fallback.
+  - Фоновая синхронизация зеркала настроек `refreshMirrorUntilVisible(ctx)` с безопасным unref-таймером.
+* **Аудит стабильности и расширение синонимов расхода**:
+  - Добавлена поддержка вложенных структур кэша OpenAI (`prompt_tokens_details.cachedTokens`, `prompt_tokens_details.cacheCreationTokens`).
+  - Усилена функция приведения чисел (`coerceNumber`) против `Infinity`, `-Infinity`, `NaN` и мусорных строк.
+  - Безопасная обработка настроек ядра и перехват исключений хоста.
+
 ## 🚀 Изменения в версии v0.1.5 (Changed in v0.1.5)
 
 * **Строгая регистрация в `settings.plugin.item` (#3)**:

package/lib/client.js

@@ -1,106 +1,252 @@
+// Plugin Settings Card (settings.plugin.item).
 window.__ModuleLoader__.load({
   id: '@goodandready/dsh-usage-guard',
   factory: (require) => {
-    var module = { exports: {} };
+    const module = { exports: {} };
     const React = require('react');
     const NS = 'dsh-usage-guard';
 
-    let ChevronIcon = null;
-    try {
-      const primitives = require('@deepseek-ai/dsh-client-ui-primitives');
-      ChevronIcon = primitives && primitives.IconChevronDownOutline14;
-    } catch (_) {
-      ChevronIcon = null;
+    const en = {
+      title: 'Usage Guard',
+      subtitle: 'Token-usage sanitizer & session crash protection',
+      header_desc: 'Guards session history projections from corrupted or missing token counters across all LLM providers.',
+      badge_active: 'Active Guard',
+      badge_report_only: 'Report Only',
+      'settings.loading': 'Loading Usage Guard settings…',
+      'settings.unavailable': 'Settings scope unavailable (host namespace is not ready).',
+      'settings.retry': 'Retry',
+      saved: 'Settings saved successfully',
+      save: 'Save Changes',
+      saving: 'Saving…',
+      repair: 'Auto-repair token counters',
+      repairDesc: 'Replace missing, non-numeric, or malformed counters with 0 before summing to prevent NaN history lockups.',
+      report: 'Log diagnostic warnings',
+      reportDesc: 'Log a detailed warning naming the session turn, step, and raw sample whenever damaged usage arrives.',
+      stats_title: 'Protection Status',
+      stats_mode: 'Current Mode',
+      stats_mode_repair: 'Active Repair (Safe)',
+      stats_mode_report: 'Audit Only (Unsafe)',
+      stats_scope: 'Scope Target',
+      stats_scope_val: 'sessionProjections',
+    };
+
+    const ru = {
+      title: 'Usage Guard',
+      subtitle: 'Санитайзер расхода токенов и защита от сбоев сессий',
+      header_desc: 'Защищает проекции истории сессий от повреждённых или отсутствующих счётчиков токенов всех LLM-провайдеров.',
+      badge_active: 'Защита активна',
+      badge_report_only: 'Только аудит',
+      'settings.loading': 'Загрузка настроек Usage Guard…',
+      'settings.unavailable': 'Настройки недоступны (пространство хоста ещё не готово).',
+      'settings.retry': 'Повторить попытку',
+      saved: 'Настройки успешно сохранены',
+      save: 'Сохранить изменения',
+      saving: 'Сохранение…',
+      repair: 'Автоматическая починка счётчиков',
+      repairDesc: 'Подставлять 0 вместо пропущенных или нечисловых счётчиков до сложения ядра, предотвращая зависание истории с ошибкой NaN.',
+      report: 'Диагностические предупреждения',
+      reportDesc: 'Выводить в системный журнал подробную строку с указанием сессии, хода, шага и сырой порции при обнаружении повреждений.',
+      stats_title: 'Статус защиты',
+      stats_mode: 'Текущий режим',
+      stats_mode_repair: 'Активная починка (Безопасно)',
+      stats_mode_report: 'Только аудит (Небезопасно)',
+      stats_scope: 'Целевая служба',
+      stats_scope_val: 'sessionProjections',
+    };
+
+    function makeT(dict, fallback) {
+      return function t(key, vars) {
+        let val = (dict && dict[key]) || (fallback && fallback[key]) || key;
+        if (vars && typeof val === 'string') {
+          for (const k of Object.keys(vars)) {
+            val = val.replace(new RegExp('\\{' + k + '\\}', 'g'), String(vars[k]));
+          }
+        }
+        return val;
+      };
     }
 
-    function FallbackChevron(props) {
-      return React.createElement('svg', {
-        width: 14,
-        height: 14,
-        viewBox: '0 0 14 14',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 1.5,
-        style: props.style,
-        className: props.className,
-        'aria-hidden': true,
-      }, React.createElement('path', { d: 'M3.5 5.25L7 8.75L10.5 5.25' }));
+    function FallbackChevron() {
+      return React.createElement(
+        'svg',
+        { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'aria-hidden': true },
+        React.createElement('path', {
+          d: 'M3.5 5.25L7 8.75L10.5 5.25',
+          stroke: 'currentColor',
+          strokeWidth: 1.5,
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+        })
+      );
     }
-    const Chevron = ChevronIcon || FallbackChevron;
+    const Chevron = FallbackChevron;
+
+    function ensureCss() {
+      if (typeof document === 'undefined') return;
+      if (document.getElementById('dsh-usage-guard-full-css')) return;
+      const style = document.createElement('style');
+      style.id = 'dsh-usage-guard-full-css';
+      style.dataset.dshPlugin = NS;
+      style.textContent = `
+.ug-section-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;list-style:none}
+.ug-head-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;width:100%;padding:0;text-align:left}
+.ug-head-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.ug-head-sub{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:2px}
+
+.ug-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}
+.ug-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}
+.ug-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}
+.ug-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}
+
+.ug-body{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--dsw-alias-border-l2);padding-top:16px;margin-top:4px}
+.ug-field-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
+.ug-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
+.ug-row-title{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.ug-field-desc{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.4}
+
+.ug-checkbox{width:18px;height:18px;accent-color:var(--dsw-alias-state-brand-primary, #6366f1);cursor:pointer}
+
+.ug-stats-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:10px}
+.ug-stat-box{padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:2px}
+.ug-stat-val{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.ug-stat-lbl{font-size:11px;color:var(--dsw-alias-label-secondary)}
+
+.ug-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:7px 16px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}
+.ug-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
+.ug-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
+.ug-btn-primary:hover:not(:disabled){opacity:0.9}
+.ug-btn:disabled{opacity:0.5;cursor:not-allowed}
 
-    function PluginCard({ ctx }) {
-      const [expanded, setExpanded] = React.useState(false);
-      const [snap, setSnap] = React.useState({ status: 'loading', value: null, writable: false });
+.ug-alert-ok{padding:10px 14px;border-radius:8px;background:rgba(16,185,129,0.1);color:var(--dsw-alias-state-success-primary);font-size:13px;border:1px solid rgba(16,185,129,0.2)}
+.ug-alert-bad{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px;border:1px solid rgba(239,68,68,0.2)}
+`;
+      document.head.appendChild(style);
+    }
+
+    function createErrorBoundary() {
+      if (!React || typeof React.Component !== 'function') {
+        return function NoopBoundary(props) { return props?.children || null; };
+      }
+      return class ErrorBoundary extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { hasError: false, error: null };
+        }
+        static getDerivedStateFromError(error) {
+          return { hasError: true, error };
+        }
+        componentDidCatch(error, errorInfo) {
+          console.error('[dsh-usage-guard] UI Error:', error, errorInfo);
+        }
+        render() {
+          if (this.state.hasError) {
+            return React.createElement(
+              'div',
+              { className: 'ug-alert-bad', style: { margin: '12px 0' } },
+              React.createElement('div', { style: { fontWeight: 600, marginBottom: '4px' } }, '⚠️ Usage Guard UI Error:'),
+              React.createElement('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'ug-btn',
+                  style: { marginTop: '8px', fontSize: '12px', padding: '4px 10px' },
+                  onClick: () => this.setState({ hasError: false, error: null }),
+                },
+                'Retry'
+              )
+            );
+          }
+          return this.props?.children || null;
+        }
+      };
+    }
+    const ErrorBoundary = createErrorBoundary();
+
+    function SettingsPage({ ctx, t }) {
+      const [snap, setSnap] = React.useState({ status: 'loading', value: {} });
       const [draft, setDraft] = React.useState({ repair: true, report: true });
       const [saving, setSaving] = React.useState(false);
-      const [msg, setMsg] = React.useState('');
-
-      const initializedRef = React.useRef(false);
+      const [msg, setMsg] = React.useState({ text: '', ok: true });
       const isDirtyRef = React.useRef(false);
       const msgTimerRef = React.useRef(null);
 
       React.useEffect(() => {
-        return () => {
-          if (msgTimerRef.current) clearTimeout(msgTimerRef.current);
-        };
-      }, []);
-
-      React.useEffect(() => {
-        let off = null;
+        let active = true;
         try {
-          const scope = ctx.settingsScope && ctx.settingsScope.bind ? ctx.settingsScope.bind({ namespace: NS }) : null;
+          const scope = ctx?.settingsScope && typeof ctx.settingsScope.bind === 'function'
+            ? ctx.settingsScope.bind({ namespace: NS })
+            : null;
           if (!scope) {
-            setSnap({ status: 'unavailable', value: null, writable: true });
-            return;
+            setSnap({ status: 'unavailable', value: {} });
+            return () => {};
           }
-          const update = () => {
-            const s = scope.getSnapshot ? scope.getSnapshot() : { status: 'unavailable', value: null };
-            setSnap(s);
-            if (s.status === 'ready' && s.value && (!initializedRef.current || !isDirtyRef.current)) {
-              initializedRef.current = true;
-              setDraft({
-                repair: s.value.repair ?? true,
-                report: s.value.report ?? true,
-              });
+          const read = async () => {
+            try {
+              const res = await scope.get();
+              if (active && res && typeof res === 'object') {
+                setSnap({ status: 'ready', value: res });
+                if (!isDirtyRef.current) {
+                  setDraft({
+                    repair: res.repair !== false,
+                    report: res.report !== false,
+                  });
+                }
+              }
+            } catch (_) {
+              if (active) setSnap({ status: 'unavailable', value: {} });
             }
           };
-          update();
-          if (scope.subscribe) off = scope.subscribe(update);
+          read();
+          const unwatch = typeof scope.watch === 'function'
+            ? scope.watch((next) => {
+                if (!active || !next || typeof next !== 'object') return;
+                setSnap({ status: 'ready', value: next });
+                if (!isDirtyRef.current) {
+                  setDraft({
+                    repair: next.repair !== false,
+                    report: next.report !== false,
+                  });
+                }
+              })
+            : () => {};
+          return () => {
+            active = false;
+            try { unwatch(); } catch (_) {}
+          };
         } catch (_) {
-          setSnap({ status: 'unavailable', value: null, writable: true });
+          setSnap({ status: 'unavailable', value: {} });
+          return () => {};
         }
-        return () => {
-          try { off && off(); } catch {}
-        };
       }, [ctx]);
 
-      const t = (() => {
-        try {
-          return ctx.locale && ctx.locale.bind ? ctx.locale.bind(NS) : (k) => k;
-        } catch (_) {
-          return (k) => k;
-        }
-      })();
+      React.useEffect(() => {
+        return () => {
+          if (msgTimerRef.current) clearTimeout(msgTimerRef.current);
+        };
+      }, []);
 
-      const showMessage = (text, autoDismiss = false) => {
+      const showMessage = (text, ok = true) => {
         if (msgTimerRef.current) clearTimeout(msgTimerRef.current);
-        setMsg(text);
-        if (autoDismiss) {
-          msgTimerRef.current = setTimeout(() => {
-            setMsg('');
-          }, 3000);
+        setMsg({ text, ok });
+        msgTimerRef.current = setTimeout(() => {
+          setMsg({ text: '', ok: true });
+        }, 4000);
+      };
+
+      const handleToggle = (field, checked) => {
+        isDirtyRef.current = true;
+        if (msg.text) {
+          if (msgTimerRef.current) clearTimeout(msgTimerRef.current);
+          setMsg({ text: '', ok: true });
         }
+        setDraft((prev) => ({ ...prev, [field]: checked }));
       };
 
       const onSave = async () => {
+        if (!ctx?.settingsScope || typeof ctx.settingsScope.bind !== 'function') return;
         setSaving(true);
-        setMsg('');
         try {
-          if (!ctx.settingsScope || !ctx.settingsScope.bind) {
-            showMessage('settingsScope unavailable', false);
-            setSaving(false);
-            return;
-          }
           const scope = ctx.settingsScope.bind({ namespace: NS });
           const errs = [];
           for (const k of ['repair', 'report']) {
@@ -114,7 +260,7 @@ window.__ModuleLoader__.load({
             showMessage(errs.join('; '), false);
           } else {
             isDirtyRef.current = false;
-            showMessage(t('saved') || 'Saved', true);
+            showMessage(t('saved'), true);
           }
         } catch (e) {
           showMessage(String(e && e.message ? e.message : e), false);
@@ -122,130 +268,288 @@ window.__ModuleLoader__.load({
         setSaving(false);
       };
 
-      const handleToggle = (field, checked) => {
-        isDirtyRef.current = true;
-        if (msg) {
-          if (msgTimerRef.current) clearTimeout(msgTimerRef.current);
-          setMsg('');
-        }
-        setDraft((prev) => ({ ...prev, [field]: checked }));
-      };
+      if (snap.status === 'loading') {
+        return React.createElement(
+          'div',
+          { className: 'ug-field-card', style: { color: 'var(--dsw-alias-label-secondary)' } },
+          t('settings.loading')
+        );
+      }
+
+      if (snap.status === 'unavailable') {
+        return React.createElement(
+          'div',
+          { className: 'ug-alert-bad' },
+          t('settings.unavailable')
+        );
+      }
+
+      const isRepair = draft.repair !== false;
+
+      return React.createElement(
+        'div',
+        { className: 'ug-body' },
 
-      const isRepairActive = draft.repair !== false;
-      const badgeLabel = isRepairActive ? (t('active') || 'ACTIVE') : (t('reportOnly') || 'REPORT ONLY');
-      const badgeClass = isRepairActive ? 'ug-badge ug-badge-green' : 'ug-badge ug-badge-yellow';
-
-      return React.createElement('div', { className: 'ug-card' },
-        React.createElement('style', {'data-dsh-plugin': 'dsh-usage-guard'}, `
-          .ug-card { border:1px solid var(--dsw-alias-border-l2); background:var(--dsw-alias-bg-layer-3); border-radius:12px; list-style:none }
-          .ug-head { appearance:none; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer; background:0 0; border:0; border-radius:12px; display:flex; align-items:center; gap:12px; padding:14px 16px }
-          .ug-title { color:var(--dsw-alias-label-primary); font-size:15px; font-weight:600; line-height:1.4 }
-          .ug-sub { color:var(--dsw-alias-label-secondary); font-size:13px }
-          .ug-body { border-top:1px solid var(--dsw-alias-border-l2); margin:0 16px; padding-bottom:8px }
-          .ug-field { display:flex; flex-direction:column; gap:6px; padding:12px 0 }
-          .ug-row { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; font-weight:500; color:var(--dsw-alias-label-primary) }
-          .ug-checkbox { width:16px; height:16px; accent-color:var(--dsw-alias-color-primary, #6366f1); cursor:pointer }
-          .ug-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 }
-          .ug-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) }
-          .ug-save:disabled { opacity:0.6; cursor:not-allowed }
-          .ug-chev { margin-left:auto; flex:none; color:var(--dsw-alias-label-tertiary); transition:transform .16s }
-          .ug-chev-open { transform:rotate(180deg) }
-          .ug-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; border:1px solid var(--dsw-alias-border-l2); margin-left:auto }
-          .ug-badge-green { background:var(--dsw-alias-color-success, #2da44e); color:#fff; border-color:transparent }
-          .ug-badge-yellow { background:var(--dsw-alias-color-warning, #d9a400); color:#fff; border-color:transparent }
-        `),
-        React.createElement('button', {
-          className: 'ug-head',
-          onClick: () => setExpanded(!expanded),
-          'aria-expanded': expanded,
-        },
-          React.createElement('span', { className: 'ug-title' }, t('title') || 'Usage Guard'),
-          React.createElement('span', { className: 'ug-sub' }, t('subtitle') || 'Token-usage sanitizer & session crash protection'),
-          React.createElement('span', { className: badgeClass }, badgeLabel),
-          React.createElement(Chevron, { className: 'ug-chev' + (expanded ? ' ug-chev-open' : ''), 'aria-hidden': true })
+        // Telemetry / Protection status banner
+        React.createElement(
+          'div',
+          { className: 'ug-stats-grid' },
+          React.createElement(
+            'div',
+            { className: 'ug-stat-box' },
+            React.createElement('span', { className: 'ug-stat-lbl' }, t('stats_mode')),
+            React.createElement(
+              'span',
+              {
+                className: 'ug-stat-val',
+                style: { color: isRepair ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-warning-primary)' },
+              },
+              isRepair ? t('stats_mode_repair') : t('stats_mode_report')
+            )
+          ),
+          React.createElement(
+            'div',
+            { className: 'ug-stat-box' },
+            React.createElement('span', { className: 'ug-stat-lbl' }, t('stats_scope')),
+            React.createElement('span', { className: 'ug-stat-val' }, t('stats_scope_val'))
+          )
+        ),
+
+        // Field 1: repair
+        React.createElement(
+          'div',
+          { className: 'ug-field-card' },
+          React.createElement(
+            'label',
+            { className: 'ug-row', htmlFor: 'ug-repair-toggle' },
+            React.createElement('span', { className: 'ug-row-title' }, t('repair')),
+            React.createElement('input', {
+              id: 'ug-repair-toggle',
+              type: 'checkbox',
+              className: 'ug-checkbox',
+              checked: !!draft.repair,
+              onChange: (e) => handleToggle('repair', e.target.checked),
+            })
+          ),
+          React.createElement('div', { className: 'ug-field-desc' }, t('repairDesc'))
         ),
-        expanded ? React.createElement('div', { className: 'ug-body' },
-          snap.status === 'loading' ? React.createElement('div', { className: 'ug-field', style: { color: 'var(--dsw-alias-label-secondary)', fontSize: 13 } }, t('loading') || 'Loading…') : null,
-          snap.status === 'unavailable' ? React.createElement('div', { className: 'ug-field', style: { color: 'var(--dsw-alias-label-secondary)', fontSize: 13 } }, t('unavailable') || 'Settings scope unavailable') : null,
-          snap.status === 'ready' ? React.createElement('div', null,
-            React.createElement('div', { className: 'ug-field' },
-              React.createElement('label', { className: 'ug-row', htmlFor: 'ug-repair-toggle' },
-                React.createElement('span', null, t('repair') || 'Auto-repair token counters'),
-                React.createElement('input', {
-                  id: 'ug-repair-toggle',
-                  type: 'checkbox',
-                  className: 'ug-checkbox',
-                  checked: !!draft.repair,
-                  onChange: (e) => handleToggle('repair', e.target.checked),
-                })
-              ),
-              React.createElement('div', { className: 'ug-sub' }, t('repairDesc') || 'Replace missing or non-numeric counters with 0 before summing to prevent NaN history lockups')
-            ),
-            React.createElement('div', { className: 'ug-field' },
-              React.createElement('label', { className: 'ug-row', htmlFor: 'ug-report-toggle' },
-                React.createElement('span', null, t('report') || 'Log diagnostic warnings'),
-                React.createElement('input', {
-                  id: 'ug-report-toggle',
-                  type: 'checkbox',
-                  className: 'ug-checkbox',
-                  checked: !!draft.report,
-                  onChange: (e) => handleToggle('report', e.target.checked),
-                })
-              ),
-              React.createElement('div', { className: 'ug-sub' }, t('reportDesc') || 'Log a line naming the turn, step, and raw sample whenever damaged usage arrives')
-            ),
-            React.createElement('div', { className: 'ug-foot' },
-              msg ? React.createElement('span', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', marginRight: 'auto' } }, msg) : null,
-              React.createElement('button', {
-                className: 'ug-save',
-                onClick: onSave,
-                disabled: saving,
-              }, saving ? (t('saving') || 'Saving…') : (t('save') || 'Save'))
+
+        // Field 2: report
+        React.createElement(
+          'div',
+          { className: 'ug-field-card' },
+          React.createElement(
+            'label',
+            { className: 'ug-row', htmlFor: 'ug-report-toggle' },
+            React.createElement('span', { className: 'ug-row-title' }, t('report')),
+            React.createElement('input', {
+              id: 'ug-report-toggle',
+              type: 'checkbox',
+              className: 'ug-checkbox',
+              checked: !!draft.report,
+              onChange: (e) => handleToggle('report', e.target.checked),
+            })
+          ),
+          React.createElement('div', { className: 'ug-field-desc' }, t('reportDesc'))
+        ),
+
+        // Feedback message
+        msg.text
+          ? React.createElement(
+              'div',
+              { className: msg.ok ? 'ug-alert-ok' : 'ug-alert-bad' },
+              msg.text
             )
-          ) : null
-        ) : null
+          : null,
+
+        // Actions
+        React.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '4px' } },
+          React.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ug-btn ug-btn-primary',
+              onClick: onSave,
+              disabled: saving,
+            },
+            saving ? t('saving') : t('save')
+          )
+        )
       );
     }
 
-    module.exports.inject = ['slots', 'locale', 'settingsScope'];
-    module.exports.apply = function apply(ctx) {
-      try {
-        ctx.locale.register(NS, {
-          en: {
-            title: 'Usage Guard',
-            subtitle: 'Token-usage sanitizer & session crash protection',
-            active: 'ACTIVE',
-            reportOnly: 'REPORT ONLY',
-            saved: 'Saved',
-            loading: 'Loading…',
-            unavailable: 'Settings scope unavailable',
-            save: 'Save',
-            saving: 'Saving…',
-            repair: 'Auto-repair token counters',
-            repairDesc: 'Replace missing or non-numeric counters with 0 before summing to prevent NaN history lockups.',
-            report: 'Log diagnostic warnings',
-            reportDesc: 'Log a line naming the turn, step, and raw sample whenever damaged usage arrives.',
+    // Accordion PluginCard for settings.plugin.item
+    function PluginCard(props) {
+      const [open, setOpen] = React.useState(false);
+      const t = props?.t || makeT(ru, en);
+
+      React.useEffect(() => {
+        ensureCss();
+      }, []);
+
+      const isRepairActive = props?.repair !== false;
+      const badgeText = isRepairActive ? t('badge_active') : t('badge_report_only');
+      const badgeClass = isRepairActive ? 'ug-badge ug-badge-ok' : 'ug-badge ug-badge-warn';
+
+      return React.createElement(
+        'li',
+        { className: 'ug-section-card' },
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'ug-head-btn',
+            'aria-expanded': open,
+            onClick: () => setOpen((v) => !v),
           },
-        });
-      } catch (_) {}
-
-      // Register exclusively in settings.plugin.item (DSH Settings → Plugins tab).
-      // Custom top-level sidebar sections (settings.section) are forbidden for simple plugin settings cards.
-      try {
-        if (ctx.slots && typeof ctx.slots.register === 'function') {
-          ctx.slots.register(
+          React.createElement(
+            'div',
+            { style: { flex: 1, paddingRight: '12px' } },
+            React.createElement('div', { className: 'ug-head-title' }, t('title')),
+            React.createElement('div', { className: 'ug-head-sub' }, t('subtitle'))
+          ),
+          React.createElement('span', { className: badgeClass, style: { marginRight: '12px' } }, badgeText),
+          React.createElement(
+            'span',
             {
-              name: 'settings.plugin.item',
-              key: NS,
-              locale: NS,
-              inject: () => ({ ctx }),
+              style: {
+                transform: open ? 'rotate(180deg)' : 'none',
+                transition: 'transform .16s ease',
+                display: 'inline-flex',
+                color: 'var(--dsw-alias-label-tertiary)',
+              },
             },
-            PluginCard,
-          );
+            React.createElement(Chevron)
+          )
+        ),
+        open
+          ? React.createElement(
+              ErrorBoundary,
+              null,
+              React.createElement(SettingsPage, {
+                ...props,
+                ctx: (props && props.ctx) || ctx,
+                t,
+              })
+            )
+          : null
+      );
+    }
+
+    function refreshMirrorUntilVisible(ctx) {
+      const visible = () => {
+        try {
+          const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope;
+          const view = s?.describe?.()?.getSnapshot?.()?.view;
+          return !!view && Array.isArray(view.namespaces) && view.namespaces.some((row) => row.ns === NS);
+        } catch (_) {
+          return false;
         }
-      } catch (_) {}
-    };
+      };
+      if (visible()) return () => {};
+      let tries = 0;
+      const timer = setInterval(() => {
+        if (visible() || tries >= 15) {
+          clearInterval(timer);
+          return;
+        }
+        tries += 1;
+        try {
+          const s = (ctx?.get && ctx.get('lanSettings')) || ctx?.settingsScope;
+          s?.describe?.()?.load?.();
+        } catch (_) {}
+      }, 1000);
+      if (timer && typeof timer.unref === 'function') {
+        timer.unref();
+      }
+      return () => clearInterval(timer);
+    }
+
+    let ctx = null;
+
+    function apply(c) {
+      ctx = c;
+      const addLocale = (locale, dictionary) => {
+        try {
+          return ctx.locale.register(NS, locale, dictionary);
+        } catch (_) {
+          return () => {};
+        }
+      };
+
+      if (ctx.locale && typeof ctx.locale.register === 'function') {
+        if (typeof ctx.effect === 'function') {
+          ctx.effect(() => {
+            const undo = [addLocale('en', en), addLocale('ru', ru)];
+            return () => {
+              for (const off of undo) off();
+            };
+          }, 'dsh-usage-guard: dictionaries');
+        } else {
+          addLocale('en', en);
+          addLocale('ru', ru);
+        }
+      }
 
+      if (typeof ctx.effect === 'function') {
+        ctx.effect(
+          () => refreshMirrorUntilVisible(ctx),
+          'dsh-usage-guard: re-read the settings mirror until namespace appears',
+        );
+      }
+
+      function registerSlotWhenReady(slotName, registerFn) {
+        if (!ctx.slots) return;
+        if (typeof ctx.slots.inject === 'function') {
+          try {
+            ctx.slots.inject(slotName, () => {
+              try {
+                return registerFn();
+              } catch (err) {
+                console.warn('[dsh-usage-guard] Error registering slot ' + slotName + ':', err);
+              }
+            });
+            return;
+          } catch (err) {
+            console.warn('[dsh-usage-guard] Failed to inject slot ' + slotName + ':', err);
+          }
+        }
+        if (typeof ctx.slots.register === 'function') {
+          try {
+            registerFn();
+          } catch (err) {
+            console.warn('[dsh-usage-guard] Failed direct registration for ' + slotName + ':', err);
+          }
+        }
+      }
+
+      registerSlotWhenReady('settings.plugin.item', () =>
+        ctx.slots.register(
+          {
+            name: 'settings.plugin.item',
+            key: NS,
+            locale: NS,
+            inject: () => ({ ctx }),
+          },
+          (props) =>
+            React.createElement(
+              ErrorBoundary,
+              null,
+              React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx })
+            )
+        )
+      );
+    }
+
+    module.exports = {
+      apply,
+      inject: ['slots', 'locale', 'settingsScope'],
+      makeT,
+      ensureCss,
+      createErrorBoundary,
+    };
     return module.exports;
   },
-});
+});

package/lib/index.js

@@ -52,13 +52,20 @@ export function apply(ctx, config) {
   try {
     live = Config(structuredClone(config ?? {})) ?? config
   } catch (_) {
-    live = Config({}) ?? {}
+    live = Config({}) ?? { repair: true, report: true }
   }
 
   ctx.inject(['settings'], (sctx) => {
-    const scope = sctx.settings.register(name, Config, { base: config })
-    live = scope.get() ?? live
-    sctx.effect(() => scope.watch((next) => { live = next ?? live }))
+    try {
+      const scope = sctx.settings.register(name, Config, { base: config })
+      try {
+        const fresh = scope.get()
+        if (fresh && typeof fresh === 'object') live = fresh
+      } catch (_) {}
+      sctx.effect(() => scope.watch((next) => {
+        if (next && typeof next === 'object') live = next
+      }))
+    } catch (_) {}
   })
 
   // О каждом сочетании сессии, хода, шага и набора полей жалуемся один раз:
@@ -90,7 +97,7 @@ export function apply(ctx, config) {
       return event
     }
 
-    if (live.report !== false) {
+    if (live && live.report !== false) {
       const sessionTag = event?.sessionId ?? event?.data?.sessionId ?? event?.data?.turn ?? 'global'
       const seen = `${String(sessionTag)}/${String(found.turn)}/${String(found.step)}/${bad.join(',')}`
       if (!told.has(seen)) {
@@ -108,7 +115,7 @@ export function apply(ctx, config) {
       }
     }
 
-    const result = live.repair === false ? event : healed(event, bad)
+    const result = live && live.repair === false ? event : healed(event, bad)
     eventCache.set(event, result)
     return result
   }
@@ -119,4 +126,4 @@ export function apply(ctx, config) {
       'dsh-usage-guard: обезвреживание порций расхода',
     )
   })
-}
+}

package/lib/usage.js

@@ -1,15 +1,23 @@
-// Счётчики токенов: что проверяем и как чиним.
+// Как устроена порция расхода в событиях сессии.
 //
-// Харнесс складывает расход в четыре ведра:
+// Харнесс слушает шину событий сессии и собирает статистику по двум типам
+// записей:
+//
+//   1. Потоковые порции ответа ассистента:
+//      `assistant/chunk` -> `event.data.chunk.usage`
+//
+//   2. Финальное сообщение ассистента:
+//      `assistant/message` -> `event.data.usage`
+//
+// В обоих случаях ядро ждёт четыре поля:
 //
 //     uncachedInputTokens: usage.inputTokens,
 //     outputTokens:        usage.outputTokens,
 //     cacheReadTokens:     usage.cacheReadTokens ?? 0,
 //     cacheWriteTokens:    usage.cacheWriteTokens ?? 0,
 //
-// Первые два он берёт без проверки. Сложение `total += undefined` даёт NaN,
-// а проверка схемы в ядре требует неотрицательное целое число (zod.int().nonnegative()).
-// Из-за этого одна битая порция валит не просто
+// Если первые два поля пропущены, не являются числом или содержат нечисловую строку,
+// их сложение с нулём даёт NaN. Из-за этого одна битая порция валит не просто
 // счётчик, а всю историю сессии.
 export const FIELDS = ['inputTokens', 'outputTokens', 'cacheReadTokens', 'cacheWriteTokens']
 
@@ -65,6 +73,7 @@ function sound(value) {
 /**
  * Безопасное приведение значения к корректному неотрицательному целому числу.
  * Округляет дробные числа и парсит числовые строки (в т.ч. с десятичной точкой).
+ * Исключает NaN, Infinity, отрицательные величины и мусорные строки.
  */
 function coerceNumber(value) {
   if (typeof value === 'number') {
@@ -134,14 +143,21 @@ export function borrowed(usage, field) {
     if (num !== undefined) return num
   }
 
-  // 2. Поиск во вложенных деталях кэша (OpenAI-style: prompt_tokens_details.cached_tokens)
+  // 2. Поиск во вложенных деталях кэша (OpenAI-style: prompt_tokens_details.cached_tokens / cachedTokens)
   if (field === 'cacheReadTokens' && usage.prompt_tokens_details && typeof usage.prompt_tokens_details === 'object') {
     const details = usage.prompt_tokens_details
-    const num = coerceNumber(details.cached_tokens ?? details.cachedTokens)
+    const num = coerceNumber(details.cached_tokens ?? details.cachedTokens ?? details.cache_read_tokens)
+    if (num !== undefined) return num
+  }
+
+  // 3. Поиск во вложенных деталях создания кэша (cache_creation_input_tokens)
+  if (field === 'cacheWriteTokens' && usage.prompt_tokens_details && typeof usage.prompt_tokens_details === 'object') {
+    const details = usage.prompt_tokens_details
+    const num = coerceNumber(details.cache_creation_tokens ?? details.cacheCreationTokens)
     if (num !== undefined) return num
   }
 
-  // 3. Само поле, если оно было передано валидной строкой или нецелым числом (напр. "123" или 15.4)
+  // 4. Само поле, если оно было передано валидной строкой или нецелым числом (напр. "123" или 15.4)
   const selfNum = coerceNumber(usage[field])
   if (selfNum !== undefined) return selfNum
 
@@ -206,4 +222,4 @@ export function complaint(found, bad) {
     .map((field) => (found.usage && borrowed(found.usage, field) !== undefined ? `${field} recovered via alias` : `${field} zeroed`))
     .join('; ')
   return `malformed usage sample — ${where}; received: ${safeStringify(found.usage)}; ${taken}`
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-usage-guard",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Keeps a malformed token-usage sample from taking a whole session history down with it: a missing or non-numeric counter becomes zero before the harness adds it up, so the fold never yields NaN and already-broken sessions open again.",
   "keywords": [
     "deepseek-harness",