@goodandready/dsh-context-lens 0.1.15 → 0.1.17

package/lib/client.js

@@ -5,7 +5,7 @@ window.__ModuleLoader__.load({
     const React = require('react');
     const NS = '@goodandready/dsh-context-lens';
 
-    const en = {
+        const en = {
       title: 'Context Lens & Token Guard',
       sub: 'AST compression, log filtering, token budget',
       mode: 'Compression mode',
@@ -23,62 +23,289 @@ window.__ModuleLoader__.load({
       lowBudget: 'Budget nearly exhausted',
       threshold: 'Auto-compress threshold (chars)',
       autoCollapse: 'Warn when budget is nearly exhausted',
+      budgetAlertPercent: 'Budget alert threshold (%)',
       previewApprox: 'Server preview',
       noData: 'No data yet',
       refresh: 'Refresh',
       ops: 'ops',
       active: 'Active',
       readyState: 'Ready',
-      lowBudgetBadge: 'Low Budget ⚠'
+      lowBudgetBadge: 'Low Budget ⚠',
+      focusPaths: 'Active focus',
+      noFocus: 'No focus paths set',
+      clearFocus: 'Clear focus'
     };
-    const ru = {
-      title: 'Context Lens & Token Guard',
-      sub: 'Сжатие AST, фильтрация логов, контроль токенов',
-      mode: 'Режим сжатия',
-      depth: 'Глубина AST',
-      tracking: 'Считать экономию',
-      preview: 'Предпросмотр лога',
-      compress: 'Сжать',
-      saved: 'Сэкономлено',
-      tokens: 'токенов',
-      placeholder: 'Вставьте лог Jest/Pytest…',
-      saving: 'Сохранение…',
-      ready: 'Готово',
-      budget: 'Бюджет',
-      history: 'Последние операции',
-      lowBudget: 'Бюджет почти исчерпан',
-      threshold: 'Порог авто-сжатия (символы)',
-      autoCollapse: 'Предупреждать при почти исчерпанном бюджете',
-      previewApprox: 'Серверный предпросмотр',
-      noData: 'Пока нет данных',
-      refresh: 'Обновить',
-      ops: 'оп.',
-      active: 'Активен',
-      readyState: 'Готов',
-      lowBudgetBadge: 'Мало бюджета ⚠'
+
+    const zh = {
+      title: 'Context Lens 上下文镜头与 Token 守卫',
+      sub: 'AST 代码精简、日志过滤与 Token 预算监控',
+      mode: '压缩模式',
+      depth: 'AST 最大深度',
+      tracking: '追踪 Token 节省',
+      preview: '日志预览',
+      compress: '压缩',
+      saved: '已节省',
+      tokens: 'Token',
+      placeholder: '在此粘贴 Jest/Pytest 等测试日志…',
+      saving: '保存中…',
+      ready: '已就绪',
+      budget: '预算',
+      history: '近期操作',
+      lowBudget: 'Token 预算即将耗尽',
+      threshold: '自动压缩阈值 (字符数)',
+      autoCollapse: '预算偏低时在界面提示警告',
+      budgetAlertPercent: '预算警告阈值 (%)',
+      previewApprox: '服务端压缩预览',
+      noData: '暂无数据',
+      refresh: '刷新',
+      ops: '次操作',
+      active: '运行中',
+      readyState: '已就绪',
+      lowBudgetBadge: '预算紧张 ⚠',
+      focusPaths: '当前聚焦路径',
+      noFocus: '未设置聚焦路径',
+      clearFocus: '清除聚焦'
     };
 
-    // #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-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: monospace;
+  color: var(--dsw-alias-label-secondary);
+}
+.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();
-          if (snap && snap.active && snap.active.startsWith('ru')) return ru;
+          if (snap && snap.active && snap.active.startsWith('zh')) return zh;
         }
       } catch {}
       return en;
     }
 
-    function StatusPanel({ stats, history, labels, onRefresh, title, showBadge, compact }) {
+    function StatusPanel({ stats, history, focus, sessionId, labels, onRefresh, onClearFocus, 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 +319,113 @@ 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 }
+            })
           )
         ));
       }
+
+            // Active focus paths section
+      const focusPaths = (focus && focus.paths) || [];
+      if (focusPaths.length > 0 || onClearFocus) {
+        children.push(React.createElement('div', {
+          key: 'focus',
+          style: { marginTop: 10, paddingTop: 8, borderTop: '1px solid var(--dsw-alias-border-l2)' }
+        },
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }
+          },
+            React.createElement('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--dsw-alias-label-secondary)' } }, L.focusPaths),
+            focusPaths.length > 0 && onClearFocus
+              ? React.createElement('button', {
+                  type: 'button',
+                  onClick: onClearFocus,
+                  style: { background: 'none', border: 'none', padding: 0, fontSize: 10, color: 'var(--dsw-alias-label-tertiary)', cursor: 'pointer', textDecoration: 'underline' }
+                }, L.clearFocus)
+              : null
+          ),
+          focusPaths.length > 0
+            ? React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 4 } },
+                ...focusPaths.slice(0, 4).map((p, i) => React.createElement('span', { key: i, className: 'cl-tag' }, p))
+              )
+            : React.createElement('div', { style: { fontSize: 11, color: 'var(--dsw-alias-label-tertiary)', fontStyle: 'italic' } }, L.noFocus)
+        ));
+      }
+
       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,26 +434,47 @@ window.__ModuleLoader__.load({
         .then((r) => r.ok ? r.json() : null);
     }
 
-    function LensTab({ ctx: _ctx, scope }) {
+    function clearLensFocus(sessionId) {
+      const q = sessionId ? '?sessionId=' + encodeURIComponent(sessionId) : '';
+      return fetch('/dsh-context-lens/clear-focus' + q, { method: 'POST', headers: { accept: 'application/json' } })
+        .then((r) => r.ok ? r.json() : null);
+    }
+
+    function LensTabInner({ ctx: _ctx, scope }) {
+      ensureCss();
       const [stats, setStats] = React.useState(null);
       const [history, setHistory] = React.useState([]);
+      const [focus, setFocus] = React.useState(null);
+      const [sessionId, setSessionId] = React.useState(null);
       const L = React.useMemo(() => getActiveLocale(_ctx), [_ctx]);
       const apply = (j) => {
         if (j && j.stats) setStats(j.stats);
         if (j && j.history) setHistory(j.history || []);
+        if (j && j.focus) setFocus(j.focus);
+        if (j && j.sessionId) setSessionId(j.sessionId);
       };
       const refresh = () => fetchLensStatus().then(apply).catch(() => {});
+      const handleClearFocus = () => clearLensFocus(sessionId).then(() => refresh()).catch(() => {});
       React.useEffect(() => { refresh(); }, []);
       return React.createElement('div', { style: { padding: 12 } },
         React.createElement(StatusPanel, {
-          stats, history, labels: L, onRefresh: refresh, title: 'Context Lens', showBadge: false, compact: false
+          stats, history, focus, sessionId, labels: L, onRefresh: refresh, onClearFocus: handleClearFocus, title: 'Context Lens', showBadge: false, compact: false
         })
       );
     }
 
+    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 [focus, setFocus] = React.useState(null);
+      const [sessionId, setSessionId] = React.useState(null);
       const [open, setOpen] = React.useState(false);
       const ref = React.useRef(null);
       const L = React.useMemo(() => getActiveLocale(_ctx), [_ctx]);
@@ -199,12 +482,15 @@ window.__ModuleLoader__.load({
       const fetchStatus = () => fetchLensStatus().then((j) => {
         if (j && j.stats) setStats(j.stats);
         if (j && j.history) setHistory(j.history || []);
+        if (j && j.focus) setFocus(j.focus);
+        if (j && j.sessionId) setSessionId(j.sessionId);
       }).catch(() => {});
 
+      const handleClearFocus = () => clearLensFocus(sessionId).then(() => fetchStatus()).catch(() => {});
+
       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 +527,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'
@@ -254,7 +540,7 @@ window.__ModuleLoader__.load({
         onClick: (e) => e.stopPropagation()
       },
         React.createElement(StatusPanel, {
-          stats, history, labels: L, onRefresh: fetchStatus, title: 'Context Lens', showBadge: true, compact: true
+          stats, history, focus, sessionId, labels: L, onRefresh: fetchStatus, onClearFocus: handleClearFocus, title: 'Context Lens', showBadge: true, compact: true
         })
       ) : null;
 
@@ -272,16 +558,24 @@ 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,
+        budgetAlertPercent: 90,
+        autoCollapse: true,
+        autoCompressThreshold: 4000
+      });
       const [status, setStatus] = React.useState('loading');
       const [saving, setSaving] = React.useState(false);
       const [saveErr, setSaveErr] = React.useState('');
@@ -293,8 +587,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 +598,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 +617,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 +641,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 +697,111 @@ 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: '8px 0' } },
+              React.createElement('label', { style: { fontSize: 13, color: 'var(--dsw-alias-label-secondary)' } }, tt('budgetAlertPercent')),
+              React.createElement('input', {
+                className: 'cl-input', type: 'number', min: 50, max: 99, step: 1,
+                value: draft.budgetAlertPercent,
+                onChange: (e) => setDraft((d) => ({ ...d, budgetAlertPercent: parseInt(e.target.value, 10) || 90 }))
               })
             ),
-            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,9 +809,15 @@ 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); }
+      try { ctx.locale.register(NS, { en, zh }); } catch (e) { console.warn('[dsh-context-lens] locale register failed', e && e.message || e); }
       if (!ctx.slots) return;
       let registered = false;
       const doRegister = () => {
@@ -511,26 +832,22 @@ 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; }
       }
-      // Native DSH Right Sidebar (#54, DSH 0.1.5-alpha.1+)
       if (typeof ctx.inject === "function") {
         try {
           ctx.inject(["sidebarRightTabs"], (sctx) => {
@@ -555,7 +872,6 @@ window.__ModuleLoader__.load({
                 tabs.register(def);
               }
 
-              // Register body in sidebar.right.pane.tab slot
               if (ctx.slots) {
                 const registerPaneTab = () => {
                   try {
@@ -584,12 +900,9 @@ window.__ModuleLoader__.load({
               console.warn("[dsh-context-lens] native sidebar registration failed", e && e.message || e);
             }
           });
-        } catch (e) {
-          // host without sidebarRightTabs declared or inject failure
-        }
+        } catch (e) {}
       }
 
-      // BetterSidebar tab (optional, for dsh-better-sidebar via ctx.inject)
       if (typeof ctx.inject === 'function') {
         try {
           ctx.inject(['betterSidebar'], (sctx) => {
@@ -612,11 +925,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 {