@goodandready/dsh-context-lens 0.1.14 → 0.1.16

package/README.md

@@ -174,6 +174,13 @@ Audit fixes (#33–#47, #18):
 - **Test**: Added regression test suite simulating strict Cordis Context Proxy behavior.
 
 
+## Changed in v0.1.15
+
+- **Feature (#54)**: Support native DSH right sidebar (`ctx.sidebarRightTabs` + `sidebar.right.pane.tab` slot) introduced in DSH 0.1.5-alpha.1.
+- **Compatibility (#54)**: Preserve legacy `dsh-better-sidebar` integration with deterministic, non-conflicting IDs (`@goodandready/dsh-context-lens` vs `dsh-context-lens:tab`).
+- **Resilience (#54)**: Clean boot and graceful fallback across all 4 layouts (Native only, Legacy only, Both active, Neither active).
+- **Tests (#54)**: Added comprehensive test matrix in `test/sidebar-matrix-54.test.mjs`.
+
 ## Changed in v0.1.14
 
 - **Fix (#52)**: Multiline AST signature parsing in `skeletonizer.js` for TypeScript, JavaScript, Rust, and Go with complex parameter types and return annotations.
@@ -181,3 +188,11 @@ Audit fixes (#33–#47, #18):
 - **Quality & UX (#52)**: Dynamic RU/EN locale detection in `HeaderChip`, `LensTab`, and `StatusPanel` via `ctx.locale` for seamless UI integration.
 - **Perf & Stability (#52)**: Adaptive polling in `HeaderChip` pausing on hidden tabs (`visibilitychange`) and polling actively (4s) only when popover is open.
 - **Reliability (#52)**: Atomic settings save (`scope.patch` / `scope.setAll`) in `PluginCard` with graceful fallback.
+
+### UI & Styling System (v0.1.16+)
+
+Context Lens shares its visual language and component architecture with `dsh-clinebot`:
+- **Native Design System**: 100% theme integration using `--dsw-alias-*` tokens.
+- **Resilient UI Surfaces**: Every component (`PluginCard`, `LensTab`, `StatusPanel`) is protected by an `ErrorBoundary` with instant retry capability.
+- **Reactive Settings**: Live updates via `scope.subscribe()` and zero-delay reads via `scope.getSnapshot()`.
+- **Adaptive Telemetry**: Popover and tab display metric cards for tokens saved, percentage reduced, and live budget utilization.

package/README.ru.md

@@ -163,6 +163,13 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 - **Тесты**: Добавлены регрессионные тесты со строгим Cordis Context Proxy.
 
 
+## Changed in v0.1.15
+
+- **Функциональность (#54)**: Поддержка встроенной правой боковой панели DSH (`ctx.sidebarRightTabs` + слот `sidebar.right.pane.tab`) из DSH 0.1.5-alpha.1.
+- **Совместимость (#54)**: Сохранена интеграция с легаси `dsh-better-sidebar` с детерминированными неконфликтующими идентификаторами (`@goodandready/dsh-context-lens` и `dsh-context-lens:tab`).
+- **Отказоустойчивость (#54)**: Чистая инициализация во всех 4 конфигурациях (только Native, только Legacy, обе активны, обе отсутствуют).
+- **Тесты (#54)**: Добавлена матрица тестов в `test/sidebar-matrix-54.test.mjs`.
+
 ## Changed in v0.1.14
 
 - **Исправление (#52)**: Поддержка многострочных сигнатур функций и методов в `skeletonizer.js` (TypeScript, JavaScript, Rust, Go) со сложными типами параметров и аннотациями возвращаемых значений.
@@ -170,3 +177,11 @@ MIT © [GooDAnDReaDY](https://github.com/GooDAnDReaDY)
 - **Качество и локализация (#52)**: Динамическое переключение языка интерфейса (RU/EN) в чипе шапки (`HeaderChip`), боковой вкладке (`LensTab`) и панели статуса (`StatusPanel`) через `ctx.locale`.
 - **Производительность (#52)**: Адаптивный поллинг в `HeaderChip` с паузой при неактивной вкладке браузера (`document.visibilityState`) и учащённым опросом (4 сек) только при открытом поповере.
 - **Стабильность (#52)**: Атомарное сохранение конфигурации в карточке настроек (`scope.patch` / `scope.setAll`) без риска частичной записи.
+
+### Визуальный стиль и отказоустойчивость UI (v0.1.16+)
+
+Context Lens приведен к единому стандарту оформления `dsh-clinebot`:
+- **Нативные токены**: 100% совместимость со светлой и тёмной темами DSH через токены `--dsw-alias-*`.
+- **Изоляция сбоев интерфейса**: Компоненты (`PluginCard`, `LensTab`, `StatusPanel`) обёрнуты в `ErrorBoundary` с кнопкой быстрого повтора («Retry»).
+- **Реактивные настройки**: Автоматическое обновление через `scope.subscribe()` и мгновенное чтение через `scope.getSnapshot()`.
+- **Наглядная телеметрия**: Компактные карточки метрик сэкономленных токенов, процента оптимизации и шкалы сессионного бюджета.

package/lib/client.js

@@ -58,10 +58,215 @@ window.__ModuleLoader__.load({
       lowBudgetBadge: 'Мало бюджета ⚠'
     };
 
-    // #45: preview uses POST /dsh-context-lens/compress-preview (server compressor)
+    function ensureCss() {
+      if (typeof document === 'undefined') return;
+      if (document.getElementById('dsh-context-lens-css')) return;
+      const style = document.createElement('style');
+      style.id = 'dsh-context-lens-css';
+      style.dataset.dshPlugin = NS;
+      style.textContent = `
+.cl-section-card {
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-3);
+  border-radius: 12px;
+  padding: 16px 18px;
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  list-style: none;
+}
+.cl-section-header {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0;
+  text-align: left;
+}
+.cl-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+}
+.cl-badge-ok {
+  border-color: var(--dsw-alias-state-success-primary, #10b981);
+  color: var(--dsw-alias-state-success-primary, #10b981);
+  background: rgba(16, 185, 129, 0.08);
+}
+.cl-badge-warn {
+  border-color: var(--dsw-alias-state-error-primary, #ef4444);
+  color: var(--dsw-alias-state-error-primary, #ef4444);
+  background: rgba(239, 68, 68, 0.08);
+}
+.cl-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 10px;
+  margin-top: 4px;
+}
+.cl-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: 3px;
+}
+.cl-stat-val {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+}
+.cl-stat-lbl {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+}
+.cl-bar-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+}
+.cl-bar-track {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-1);
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2);
+}
+.cl-bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.3s;
+}
+.cl-input {
+  height: 34px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+.cl-input:focus {
+  outline: none;
+  border-color: var(--dsw-alias-state-brand-primary, #3b82f6);
+}
+.cl-btn {
+  appearance: none;
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  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 0.15s ease;
+}
+.cl-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));
+}
+.cl-btn-primary {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+  border-color: transparent;
+}
+.cl-btn-primary:hover:not(:disabled) {
+  opacity: 0.88;
+}
+.cl-btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.cl-banner-warn {
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--dsw-alias-state-error-primary, #ef4444);
+  color: var(--dsw-alias-state-error-primary, #ef4444);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+.cl-hist-item {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+  padding: 4px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+}
+.cl-hist-item:last-child {
+  border-bottom: none;
+}
+.cl-error-box {
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid var(--dsw-alias-state-error-primary, #ef4444);
+  color: var(--dsw-alias-state-error-primary, #ef4444);
+  font-size: 12px;
+}
+`;
+      document.head.appendChild(style);
+    }
+
+    function createErrorBoundary() {
+      if (!React || typeof React.Component !== 'function') {
+        return function NoopBoundary(props) { return (props && 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-context-lens] UI Error:', error, errorInfo);
+        }
+        render() {
+          if (this.state.hasError) {
+            return React.createElement('div', { className: 'cl-error-box' },
+              React.createElement('div', { style: { fontWeight: 600, marginBottom: 4 } }, '⚠ Context Lens UI Error'),
+              React.createElement('div', { style: { fontSize: 11, wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
+              React.createElement('button', {
+                type: 'button',
+                className: 'cl-btn',
+                style: { marginTop: 8, fontSize: 11, padding: '3px 8px' },
+                onClick: () => this.setState({ hasError: false, error: null })
+              }, 'Retry')
+            );
+          }
+          return (this.props && this.props.children) || null;
+        }
+      };
+    }
+    const ErrorBoundary = createErrorBoundary();
 
-    // #43: shared status UI for LensTab + HeaderChip popover
-        function getActiveLocale(ctx) {
+    function getActiveLocale(ctx) {
       try {
         if (ctx && ctx.locale && typeof ctx.locale.getSnapshot === 'function') {
           const snap = ctx.locale.getSnapshot();
@@ -72,13 +277,14 @@ window.__ModuleLoader__.load({
     }
 
     function StatusPanel({ stats, history, labels, onRefresh, title, showBadge, compact }) {
+      ensureCss();
       const L = labels || en;
       const warn = !!(stats && stats.lowBudget);
       const hasSavings = !!(stats && stats.savedTokens > 0);
-      const barColor = warn ? '#d73a4a' : 'var(--dsw-alias-label-primary)';
-      const previewLen = compact ? 28 : 40;
-      const barH = compact ? 5 : 6;
+      const barColor = warn ? 'var(--dsw-alias-state-error-primary, #ef4444)' : 'var(--dsw-alias-state-success-primary, #10b981)';
+      const previewLen = compact ? 28 : 44;
       const children = [];
+
       if (title || showBadge) {
         children.push(React.createElement('div', {
           key: 'head',
@@ -92,78 +298,86 @@ window.__ModuleLoader__.load({
             : React.createElement('span'),
           showBadge
             ? React.createElement('span', {
-                style: {
-                  fontSize: 11, padding: '1px 6px', borderRadius: 4,
-                  background: warn ? 'rgba(215, 58, 74, 0.15)' : 'var(--dsw-alias-bg-layer-2)',
-                  color: warn ? '#d73a4a' : 'var(--dsw-alias-label-tertiary)',
-                  border: '1px solid ' + (warn ? 'rgba(215, 58, 74, 0.3)' : 'var(--dsw-alias-border-l2)')
-                }
+                className: 'cl-badge ' + (warn ? 'cl-badge-warn' : 'cl-badge-ok')
               }, warn ? L.lowBudgetBadge : (stats ? L.active : L.readyState))
             : null
         ));
       }
-      children.push(
-        hasSavings
-          ? React.createElement('div', { key: 'sum', style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', marginBottom: compact ? 8 : 0 } },
-              `${L.saved} ${stats.savedTokens} ${L.tokens} (${stats.savedPercent}%) · ${stats.calls} ${L.ops}`)
-          : React.createElement('div', { key: 'sum', style: { fontSize: 12, color: compact ? 'var(--dsw-alias-label-tertiary)' : 'var(--dsw-alias-label-secondary)', marginBottom: compact ? 8 : 0 } }, L.noData)
-      );
+
+      if (stats) {
+        children.push(React.createElement('div', { key: 'stats', className: 'cl-stat-grid' },
+          React.createElement('div', { className: 'cl-stat-box' },
+            React.createElement('div', { className: 'cl-stat-val' }, stats.savedTokens ? `${stats.savedTokens}` : '0'),
+            React.createElement('div', { className: 'cl-stat-lbl' }, `${L.saved} ${L.tokens}`)
+          ),
+          React.createElement('div', { className: 'cl-stat-box' },
+            React.createElement('div', { className: 'cl-stat-val' }, `${stats.savedPercent || 0}%`),
+            React.createElement('div', { className: 'cl-stat-lbl' }, '% ' + L.saved)
+          ),
+          React.createElement('div', { className: 'cl-stat-box' },
+            React.createElement('div', { className: 'cl-stat-val' }, `${stats.calls || 0}`),
+            React.createElement('div', { className: 'cl-stat-lbl' }, L.ops)
+          )
+        ));
+      } else {
+        children.push(React.createElement('div', {
+          key: 'nodata',
+          style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', padding: '6px 0' }
+        }, L.noData));
+      }
+
       if (stats && stats.lowBudget && !showBadge) {
-        children.push(React.createElement('div', { key: 'warn', style: { marginTop: 6, fontSize: 11, color: '#d73a4a' } }, '⚠ ' + L.lowBudget));
+        children.push(React.createElement('div', {
+          key: 'warn',
+          className: 'cl-banner-warn',
+          style: { marginTop: 8 }
+        }, '⚠ ' + L.lowBudget));
       }
+
       if (stats && stats.budgetLimit) {
-        children.push(React.createElement('div', { key: 'budget', style: { marginTop: compact ? 6 : 8, marginBottom: compact ? 8 : 0 } },
+        children.push(React.createElement('div', { key: 'budget', className: 'cl-bar-box', style: { marginTop: 8 } },
           React.createElement('div', {
-            style: {
-              display: compact ? 'flex' : 'block',
-              justifyContent: 'space-between',
-              fontSize: 11,
-              color: warn ? '#d73a4a' : 'var(--dsw-alias-label-secondary)',
-              marginBottom: 4
-            }
+            style: { display: 'flex', justifyContent: 'space-between', fontSize: 11, color: warn ? 'var(--dsw-alias-state-error-primary, #ef4444)' : 'var(--dsw-alias-label-secondary)' }
           },
-            compact
-              ? React.createElement(React.Fragment, null,
-                  React.createElement('span', null, L.budget),
-                  React.createElement('span', null, `${stats.budgetUsed || 0} / ${stats.budgetLimit} (${stats.budgetPercent || 0}%)`)
-                )
-              : `${L.budget} ${stats.budgetUsed}/${stats.budgetLimit} ${L.tokens} (${stats.budgetPercent}%)${warn ? ' ⚠' : ''}`
+            React.createElement('span', { style: { fontWeight: 500 } }, L.budget),
+            React.createElement('span', null, `${stats.budgetUsed || 0} / ${stats.budgetLimit} (${stats.budgetPercent || 0}%)`)
           ),
-          React.createElement('div', { style: { height: barH, borderRadius: 3, background: compact ? 'var(--dsw-alias-bg-layer-1)' : 'var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-3))', overflow: 'hidden' } },
-            React.createElement('div', { style: { height: '100%', width: Math.min(100, stats.budgetPercent || 0) + '%', background: barColor, transition: 'width .2s' } })
+          React.createElement('div', { className: 'cl-bar-track' },
+            React.createElement('div', {
+              className: 'cl-bar-fill',
+              style: { width: Math.min(100, stats.budgetPercent || 0) + '%', background: barColor }
+            })
           )
         ));
       }
+
       if (history && history.length) {
         children.push(React.createElement('div', {
           key: 'hist',
-          style: { marginTop: compact ? 8 : 10, paddingTop: compact ? 8 : 0, borderTop: compact ? '1px solid var(--dsw-alias-border-l3)' : undefined }
+          style: { marginTop: 10, paddingTop: 8, borderTop: '1px solid var(--dsw-alias-border-l2)' }
         },
-          React.createElement('div', { style: { fontSize: 11, color: 'var(--dsw-alias-label-tertiary)', marginBottom: 4 } }, L.history),
+          React.createElement('div', { style: { fontSize: 11, fontWeight: 600, color: 'var(--dsw-alias-label-tertiary)', marginBottom: 4 } }, L.history),
           ...history.slice(0, 3).map((h) => React.createElement('div', {
             key: h.id,
-            style: { fontSize: 11, color: 'var(--dsw-alias-label-secondary)', padding: '2px 0', overflow: compact ? 'hidden' : undefined, textOverflow: compact ? 'ellipsis' : undefined, whiteSpace: compact ? 'nowrap' : undefined }
+            className: 'cl-hist-item',
+            style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
           }, `−${h.savedTokens} tk (${h.savedPercent}%) · ${(h.preview || '').slice(0, previewLen)}`))
         ));
       }
+
       if (onRefresh) {
         children.push(React.createElement('div', {
           key: 'act',
-          style: { marginTop: compact ? 10 : 12, display: 'flex', gap: 8, justifyContent: compact ? 'flex-end' : undefined }
+          style: { marginTop: 10, display: 'flex', justifyContent: 'flex-end' }
         },
           React.createElement('button', {
             type: 'button',
             onClick: onRefresh,
-            style: {
-              appearance: 'none', cursor: 'pointer', fontSize: compact ? 11 : 12,
-              padding: compact ? '3px 8px' : '4px 10px', borderRadius: 6,
-              border: '1px solid var(--dsw-alias-border-l2)',
-              background: compact ? 'var(--dsw-alias-bg-layer-2)' : 'var(--dsw-alias-bg-layer-3)',
-              color: compact ? 'var(--dsw-alias-label-secondary)' : 'var(--dsw-alias-label-primary)'
-            }
+            className: 'cl-btn'
           }, L.refresh)
         ));
       }
+
       return React.createElement(React.Fragment, null, ...children);
     }
 
@@ -172,7 +386,8 @@ window.__ModuleLoader__.load({
         .then((r) => r.ok ? r.json() : null);
     }
 
-    function LensTab({ ctx: _ctx, scope }) {
+    function LensTabInner({ ctx: _ctx, scope }) {
+      ensureCss();
       const [stats, setStats] = React.useState(null);
       const [history, setHistory] = React.useState([]);
       const L = React.useMemo(() => getActiveLocale(_ctx), [_ctx]);
@@ -189,7 +404,14 @@ window.__ModuleLoader__.load({
       );
     }
 
+    function LensTab(props) {
+      return React.createElement(ErrorBoundary, null,
+        React.createElement(LensTabInner, props)
+      );
+    }
+
     function HeaderChip({ ctx: _ctx }) {
+      ensureCss();
       const [stats, setStats] = React.useState(null);
       const [history, setHistory] = React.useState([]);
       const [open, setOpen] = React.useState(false);
@@ -204,7 +426,6 @@ window.__ModuleLoader__.load({
       React.useEffect(() => {
         let alive = true;
         fetchStatus();
-        // Adaptive polling: poll every 4s when popover is open, 15s when closed, pause when tab hidden
         const pollInterval = open ? 4000 : 15000;
         const id = setInterval(() => {
           if (!alive) return;
@@ -241,12 +462,12 @@ window.__ModuleLoader__.load({
       const warn = !!(stats && stats.lowBudget);
       const hasSavings = !!(stats && stats.savedTokens > 0);
       const label = hasSavings ? `Lens ${stats.savedPercent}%` : 'Lens';
-      const color = warn ? '#d73a4a' : 'var(--dsw-alias-label-secondary)';
-      const borderColor = warn ? '#d73a4a' : open ? 'var(--dsw-alias-border-l1)' : 'var(--dsw-alias-border-l2)';
+      const color = warn ? 'var(--dsw-alias-state-error-primary, #ef4444)' : 'var(--dsw-alias-label-secondary)';
+      const borderColor = warn ? 'var(--dsw-alias-state-error-primary, #ef4444)' : open ? 'var(--dsw-alias-border-l1)' : 'var(--dsw-alias-border-l2)';
 
       const popover = open ? React.createElement('div', {
         style: {
-          position: 'absolute', top: 'calc(100% + 6px)', right: 0, width: 270,
+          position: 'absolute', top: 'calc(100% + 6px)', right: 0, width: 280,
           background: 'var(--dsw-alias-bg-layer-3)', border: '1px solid var(--dsw-alias-border-l2)',
           borderRadius: 10, boxShadow: '0 8px 24px rgba(0, 0, 0, 0.28)', padding: '12px 14px',
           zIndex: 1000, fontSize: 12, color: 'var(--dsw-alias-label-primary)', cursor: 'default', textAlign: 'left'
@@ -272,16 +493,23 @@ window.__ModuleLoader__.load({
         },
           React.createElement('span', { style: { fontSize: 10, opacity: 0.8 } }, '◐'),
           label,
-          warn ? React.createElement('span', { style: { color: '#d73a4a' } }, ' ⚠') : null
+          warn ? React.createElement('span', { style: { color: 'var(--dsw-alias-state-error-primary, #ef4444)' } }, ' ⚠') : null
         ),
         popover
       );
     }
 
-    function PluginCard({ ctx: _ctx, t }) {
+    function PluginCardInner({ ctx: _ctx, t }) {
+      ensureCss();
       const [expanded, setExpanded] = React.useState(false);
-      // hooks must be before any return — React 310
-      const [draft, setDraft] = React.useState({ compressionMode: 'balanced', astSkeletonMaxDepth: 3, tokenSavingsTracking: true, budgetLimit: 100000, autoCollapse: true, autoCompressThreshold: 4000 });
+      const [draft, setDraft] = React.useState({
+        compressionMode: 'balanced',
+        astSkeletonMaxDepth: 3,
+        tokenSavingsTracking: true,
+        budgetLimit: 100000,
+        autoCollapse: true,
+        autoCompressThreshold: 4000
+      });
       const [status, setStatus] = React.useState('loading');
       const [saving, setSaving] = React.useState(false);
       const [saveErr, setSaveErr] = React.useState('');
@@ -293,8 +521,9 @@ window.__ModuleLoader__.load({
       const scopeRef = React.useRef(null);
       if (!scopeRef.current && _ctx) {
         try {
-          if (_ctx.settingsScope) {
-            scopeRef.current = _ctx.settingsScope.bind({ namespace: NS });
+          const s = (_ctx.get && _ctx.get('lanSettings')) || _ctx.settingsScope;
+          if (s && typeof s.bind === 'function') {
+            scopeRef.current = s.bind({ namespace: NS });
           }
         } catch (e) { scopeRef.current = null; }
       }
@@ -303,16 +532,17 @@ window.__ModuleLoader__.load({
       React.useEffect(() => {
         if (!scope) { setStatus('unavailable'); return; }
         let cancelled = false;
-        (async () => {
+
+        const loadSnap = async () => {
           try {
-            const snap = await scope.get();
+            const snap = (typeof scope.getSnapshot === 'function')
+              ? scope.getSnapshot()
+              : (typeof scope.get === 'function' ? await scope.get() : null);
             if (cancelled) return;
-            // check snapshot status if available
             if (snap && typeof snap === 'object' && 'status' in snap) {
               if (snap.status === 'loading') { setStatus('loading'); return; }
               if (snap.status === 'unavailable') { setStatus('unavailable'); return; }
             }
-            // snap is either values or wrapper with values
             const vals = snap && snap.values ? snap.values : snap;
             if (vals && typeof vals === 'object') {
               setDraft((d) => ({ ...d, ...vals }));
@@ -321,8 +551,23 @@ window.__ModuleLoader__.load({
           } catch (e) {
             if (!cancelled) setStatus('unavailable');
           }
-        })();
-        return () => { cancelled = true; };
+        };
+
+        loadSnap();
+
+        let unsub = null;
+        if (typeof scope.subscribe === 'function') {
+          try {
+            unsub = scope.subscribe(() => {
+              if (!cancelled) loadSnap();
+            });
+          } catch (_) {}
+        }
+
+        return () => {
+          cancelled = true;
+          if (typeof unsub === 'function') unsub();
+        };
       }, [scope]);
 
       React.useEffect(() => {
@@ -330,7 +575,6 @@ window.__ModuleLoader__.load({
         fetch('/dsh-context-lens/status').then((r) => r.ok ? r.json() : null).then((j) => {
           if (j && j.stats) {
             setStats(j.stats);
-            // #41: warn instead of force-closing the card
             setBudgetWarn(!!(j.stats.lowBudget && draft.autoCollapse !== false));
           }
         }).catch(() => {});
@@ -387,106 +631,103 @@ window.__ModuleLoader__.load({
         }
       }
 
-      // styles: ponytail minimal, theme vars only
-      return React.createElement('li', { className: 'cl-card', style: { border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-3)', borderRadius: 12, listStyle: 'none' } },
+      return React.createElement('li', { className: 'cl-section-card' },
         React.createElement('button', {
-          className: 'cl-head',
+          type: 'button',
+          className: 'cl-section-header',
           onClick: () => setExpanded(!expanded),
-          'aria-expanded': expanded,
-          style: { appearance: 'none', width: '100%', font: 'inherit', color: 'inherit', textAlign: 'left', cursor: 'pointer', background: '0 0', border: 0, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }
+          'aria-expanded': expanded
         },
-          React.createElement('span', { style: { display: 'flex', flexDirection: 'column' } },
+          React.createElement('span', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
             React.createElement('span', { className: 'cl-title', style: { color: 'var(--dsw-alias-label-primary)', fontSize: 15, fontWeight: 600, lineHeight: 1.4 } }, tt('title')),
             React.createElement('span', { className: 'cl-sub', style: { color: 'var(--dsw-alias-label-secondary)', fontSize: 13 } }, tt('sub') + (stats ? ' · ' + tt('saved') + ' ' + (stats.savedTokens || 0) + ' ' + tt('tokens') + ' (' + (stats.savedPercent || 0) + '%)' : ''))
           ),
           React.createElement(Chevron, { open: expanded })
         ),
-        expanded ? React.createElement('div', { className: 'cl-body', style: { borderTop: '1px solid var(--dsw-alias-border-l2)', margin: '0 16px', paddingBottom: 8 } },
-          budgetWarn ? React.createElement('div', { style: { marginTop: 10, padding: '8px 10px', borderRadius: 8, background: 'rgba(215,58,74,0.12)', color: '#d73a4a', fontSize: 12 } }, '⚠ ' + tt('lowBudget')) : null,
+        expanded ? React.createElement('div', { className: 'cl-body', style: { borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: 12 } },
+          budgetWarn ? React.createElement('div', { className: 'cl-banner-warn', style: { marginBottom: 12 } }, '⚠ ' + tt('lowBudget')) : null,
           status === 'loading' ? React.createElement('div', { style: { padding: 12, color: 'var(--dsw-alias-label-secondary)' } }, 'Loading…') :
           status === 'unavailable' ? React.createElement('div', { style: { padding: 12, color: 'var(--dsw-alias-label-secondary)' } }, 'Settings unavailable — plugin not registered on host yet') :
           React.createElement(React.Fragment, null,
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '8px 0' } },
               React.createElement('label', { style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' } }, tt('mode')),
               React.createElement('select', {
                 className: 'cl-input',
                 value: draft.compressionMode,
-                onChange: (e) => setDraft((d) => ({ ...d, compressionMode: e.target.value })),
-                style: { height: 34, border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)', borderRadius: 8, padding: '0 12px', fontSize: 13 }
+                onChange: (e) => setDraft((d) => ({ ...d, compressionMode: e.target.value }))
               },
                 React.createElement('option', { value: 'raw' }, 'raw'),
                 React.createElement('option', { value: 'balanced' }, 'balanced'),
                 React.createElement('option', { value: 'aggressive' }, 'aggressive')
               )
             ),
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '8px 0' } },
               React.createElement('label', { style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' } }, tt('depth')),
               React.createElement('input', {
                 className: 'cl-input',
                 type: 'number', min: 1, max: 10,
                 value: draft.astSkeletonMaxDepth,
-                onChange: (e) => setDraft((d) => ({ ...d, astSkeletonMaxDepth: parseInt(e.target.value, 10) || 3 })),
-                style: { height: 34, border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)', borderRadius: 8, padding: '0 12px', fontSize: 13 }
+                onChange: (e) => setDraft((d) => ({ ...d, astSkeletonMaxDepth: parseInt(e.target.value, 10) || 3 }))
               })
             ),
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, padding: '8px 0' } },
               React.createElement('input', {
                 type: 'checkbox',
                 checked: !!draft.tokenSavingsTracking,
                 onChange: (e) => setDraft((d) => ({ ...d, tokenSavingsTracking: e.target.checked })),
                 id: 'cl-tracking'
               }),
-              React.createElement('label', { htmlFor: 'cl-tracking', style: { fontSize: 13 } }, tt('tracking'))
+              React.createElement('label', { htmlFor: 'cl-tracking', style: { fontSize: 13, color: 'var(--dsw-alias-label-primary)' } }, tt('tracking'))
             ),
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, padding: '8px 0' } },
               React.createElement('input', {
                 type: 'checkbox',
                 checked: !!draft.autoCollapse,
                 onChange: (e) => setDraft((d) => ({ ...d, autoCollapse: e.target.checked })),
                 id: 'cl-autocollapse'
               }),
-              React.createElement('label', { htmlFor: 'cl-autocollapse', style: { fontSize: 13 } }, tt('autoCollapse'))
+              React.createElement('label', { htmlFor: 'cl-autocollapse', style: { fontSize: 13, color: 'var(--dsw-alias-label-primary)' } }, tt('autoCollapse'))
             ),
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '8px 0' } },
               React.createElement('label', { style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' } }, tt('budget') + ' (tokens)'),
               React.createElement('input', {
                 className: 'cl-input', type: 'number', min: 1000, step: 1000,
                 value: draft.budgetLimit,
-                onChange: (e) => setDraft((d) => ({ ...d, budgetLimit: parseInt(e.target.value, 10) || 100000 })),
-                style: { height: 34, border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)', borderRadius: 8, padding: '0 12px', fontSize: 13 }
+                onChange: (e) => setDraft((d) => ({ ...d, budgetLimit: parseInt(e.target.value, 10) || 100000 }))
               })
             ),
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '8px 0' } },
               React.createElement('label', { style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' } }, tt('threshold')),
               React.createElement('input', {
                 className: 'cl-input', type: 'number', min: 0, step: 500,
                 value: draft.autoCompressThreshold,
-                onChange: (e) => setDraft((d) => ({ ...d, autoCompressThreshold: parseInt(e.target.value, 10) || 0 })),
-                style: { height: 34, border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)', borderRadius: 8, padding: '0 12px', fontSize: 13 }
+                onChange: (e) => setDraft((d) => ({ ...d, autoCompressThreshold: parseInt(e.target.value, 10) || 0 }))
               })
             ),
-            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 0' } },
+            React.createElement('div', { className: 'cl-field', style: { display: 'flex', flexDirection: 'column', gap: 6, padding: '8px 0' } },
               React.createElement('label', { style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' } }, tt('preview') + ' (' + tt('previewApprox') + ')'),
               React.createElement('textarea', {
                 value: previewIn,
                 onChange: (e) => setPreviewIn(e.target.value),
                 placeholder: tt('placeholder'),
                 rows: 5,
-                style: { border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)', borderRadius: 8, padding: 12, fontSize: 12, fontFamily: 'monospace' }
+                style: { border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-2)', color: 'var(--dsw-alias-label-primary)', borderRadius: 8, padding: 12, fontSize: 12, fontFamily: 'monospace' }
               }),
               React.createElement('button', {
+                type: 'button',
+                className: 'cl-btn cl-btn-primary',
                 onClick: onPreview,
-                style: { appearance: 'none', font: 'inherit', cursor: 'pointer', border: '1px solid transparent', borderRadius: 8, padding: '5px 14px', fontSize: 13, background: 'var(--dsw-alias-label-primary)', color: 'var(--dsw-alias-bg-layer-3)', alignSelf: 'flex-start' }
+                style: { alignSelf: 'flex-start', marginTop: 4 }
               }, tt('compress')),
-              previewOut ? React.createElement('pre', { style: { whiteSpace: 'pre-wrap', fontSize: 12, background: 'var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-3))', padding: 12, borderRadius: 8, maxHeight: 200, overflow: 'auto' } }, previewOut) : null
+              previewOut ? React.createElement('pre', { style: { whiteSpace: 'pre-wrap', fontSize: 12, background: 'var(--dsw-alias-bg-layer-2)', padding: 12, borderRadius: 8, maxHeight: 200, overflow: 'auto', border: '1px solid var(--dsw-alias-border-l2)', marginTop: 8 } }, previewOut) : null
             ),
-            saveErr ? React.createElement('div', { style: { color: '#d73a4a', fontSize: 12, padding: '4px 0' } }, saveErr) : null,
-            React.createElement('div', { className: 'cl-foot', style: { borderTop: '1px solid var(--dsw-alias-border-l2)', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, padding: '12px 0 4px' } },
+            saveErr ? React.createElement('div', { style: { color: 'var(--dsw-alias-state-error-primary, #ef4444)', fontSize: 12, padding: '4px 0' } }, saveErr) : null,
+            React.createElement('div', { className: 'cl-foot', style: { borderTop: '1px solid var(--dsw-alias-border-l2)', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, paddingTop: 12 } },
               React.createElement('button', {
-                className: 'cl-save',
+                type: 'button',
+                className: 'cl-btn cl-btn-primary' + (saving ? ' cl-btn-disabled' : ''),
                 onClick: onSave,
-                disabled: saving,
-                style: { appearance: 'none', font: 'inherit', cursor: 'pointer', border: '1px solid transparent', borderRadius: 8, padding: '5px 14px', fontSize: 13, background: 'var(--dsw-alias-label-primary)', color: 'var(--dsw-alias-bg-layer-3)', opacity: saving ? 0.6 : 1 }
+                disabled: saving
               }, saving ? tt('saving') : tt('ready'))
             )
           )
@@ -494,6 +735,12 @@ window.__ModuleLoader__.load({
       );
     }
 
+    function PluginCard(props) {
+      return React.createElement(ErrorBoundary, null,
+        React.createElement(PluginCardInner, props)
+      );
+    }
+
     module.exports.inject = ['slots', 'locale'];
     module.exports.apply = function apply(ctx) {
       try { ctx.locale.register(NS, { en, ru }); } catch (e) { console.warn('[dsh-context-lens] locale register failed', e && e.message || e); }
@@ -511,26 +758,77 @@ window.__ModuleLoader__.load({
           registered = true;
           return dispose;
         } catch (e) {
-          // Do not swallow real registration errors — surface diagnostics
           console.error('[dsh-context-lens] settings.plugin.item register failed', e && e.stack || e);
           throw e;
         }
       };
-      // Declaration-aware: wait for host to declare the slot (alpha2 SlotCore throws if not declared)
       if (typeof ctx.slots.inject === 'function') {
         try {
           const ok = ctx.slots.inject('settings.plugin.item', doRegister);
           if (!ok) console.warn('[dsh-context-lens] settings.plugin.item inject returned false — slot not declared yet');
         } catch (e) {
           console.error('[dsh-context-lens] settings.plugin.item inject failed', e && e.stack || e);
-          // Fallback for older DSH without inject or if inject itself fails — surface error
           try { doRegister(); } catch (e2) { console.error('[dsh-context-lens] fallback register failed', e2 && e2.stack || e2); throw e2; }
           throw e;
         }
       } else {
         try { doRegister(); } catch (e) { console.error('[dsh-context-lens] direct register failed (no inject)', e && e.stack || e); throw e; }
       }
-      // BetterSidebar tab (optional, for dsh-better-sidebar via ctx.inject)
+      if (typeof ctx.inject === "function") {
+        try {
+          ctx.inject(["sidebarRightTabs"], (sctx) => {
+            const tabs = sctx && sctx.sidebarRightTabs;
+            if (!tabs || typeof tabs.register !== "function") return;
+            try {
+              const def = {
+                id: "@goodandready/dsh-context-lens",
+                kind: "context-lens",
+                priority: "extension",
+                title: () => "Lens",
+                guide: [{
+                  order: 50,
+                  title: () => "Context Lens",
+                  description: () => "AST compression, log filtering, token budget",
+                  icon: () => React.createElement("span", null, "◐")
+                }]
+              };
+              if (typeof sctx.effect === "function") {
+                sctx.effect(() => tabs.register(def));
+              } else {
+                tabs.register(def);
+              }
+
+              if (ctx.slots) {
+                const registerPaneTab = () => {
+                  try {
+                    return ctx.slots.register({
+                      name: "sidebar.right.pane.tab",
+                      key: "@goodandready/dsh-context-lens",
+                      locale: NS,
+                      inject: () => ({ ctx })
+                    }, LensTab);
+                  } catch (e) {
+                    console.warn("[dsh-context-lens] native sidebar pane tab register failed", e && e.message || e);
+                  }
+                };
+                if (typeof ctx.slots.inject === "function") {
+                  try {
+                    const ok = ctx.slots.inject("sidebar.right.pane.tab", registerPaneTab);
+                    if (!ok) console.warn("[dsh-context-lens] sidebar.right.pane.tab inject returned false");
+                  } catch (e) {
+                    try { registerPaneTab(); } catch (e2) {}
+                  }
+                } else {
+                  try { registerPaneTab(); } catch (e) {}
+                }
+              }
+            } catch (e) {
+              console.warn("[dsh-context-lens] native sidebar registration failed", e && e.message || e);
+            }
+          });
+        } catch (e) {}
+      }
+
       if (typeof ctx.inject === 'function') {
         try {
           ctx.inject(['betterSidebar'], (sctx) => {
@@ -553,11 +851,9 @@ window.__ModuleLoader__.load({
               console.warn('[dsh-context-lens] betterSidebar registerTab failed', e && e.message || e);
             }
           });
-        } catch (e) {
-          // host without betterSidebar declared or inject failure
-        }
+        } catch (e) {}
       }
-      // Header chip (#31) — telemetry and token guard in conversation session utilities slot
+
       if (ctx.slots) {
         const headerChipRegister = () => {
           try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-context-lens",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "DSH plugin for AST context compression, test log filtering, and token budget guard",
   "type": "module",
   "main": "lib/index.js",