@goodandready/dsh-context-lens 0.1.8 → 0.1.10

package/README.md

@@ -127,6 +127,14 @@ dsh-context-lens:
 
 ## 📝 Version History
 
+### v0.1.10
+* **Fix**: Register session header chip in `conversation.session.header.utilities` (`order: 7`).
+* **Fix**: Ensure chip is always visible (`◐ Lens` on initial session, `◐ <N>%` when savings available, `⚠` on low budget).
+* **Feature**: Interactive dropdown Popover on chip click: token savings breakdown, budget progress bar, recent operations, and refresh button.
+
+### v0.1.9
+* **Fix**: Remove obsolete kernel modules from client injects for DSH 0.1.2-rc.1 compatibility.
+
 ### v0.1.8
 * **Fix**: Support both `text` and `log` parameter names in `context_lens_compress_log`.
 * **Fix**: Cross-platform path resolution in unit tests on Windows (`fileURLToPath`).

package/README.ru.md

@@ -124,6 +124,14 @@ dsh-context-lens:
 
 ## 📝 История версий
 
+### v0.1.10
+* **Fix**: Регистрация индикатора сессии в актуальном слоте ядра `conversation.session.header.utilities` (`order: 7`).
+* **Fix**: Чип теперь отображается всегда (`◐ Lens` при отсутствии сжатий, `◐ <N>%` при наличии сэкономленных токенов, `⚠` при низком остатке бюджета).
+* **Feature**: Интерактивный выпадающий Popover по клику на чип: детальные метрики токенов, шкала прогресса бюджета, последние 3 операции и кнопка обновления.
+
+### v0.1.9
+* **Fix**: Удаление устаревших модулей ядра из инъекций клиента для совместимости с DSH 0.1.2-rc.1.
+
 ### v0.1.8
 * **Fix**: Поддержка как `text`, так и `log` в параметрах инструмента `context_lens_compress_log`.
 * **Fix**: Кроссплатформенное разрешение путей в тестах на Windows (`fileURLToPath`).

package/lib/client.js

@@ -81,17 +81,163 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function HeaderBadge({ ctx: _ctx }) {
+    function HeaderChip({ ctx: _ctx }) {
       const [stats, setStats] = React.useState(null);
+      const [history, setHistory] = React.useState([]);
+      const [open, setOpen] = React.useState(false);
+      const ref = React.useRef(null);
+
+      const fetchStatus = () => {
+        fetch('/dsh-context-lens/status', { headers: { accept: 'application/json' } })
+          .then(r => r.ok ? r.json() : null)
+          .then(j => {
+            if (j && j.stats) setStats(j.stats);
+            if (j && j.history) setHistory(j.history);
+          })
+          .catch(() => {});
+      };
+
       React.useEffect(() => {
-        const tick = () => fetch('/dsh-context-lens/status').then(r => r.ok ? r.json() : null).then(j => { if (j && j.stats) setStats(j.stats); }).catch(() => {});
-        tick();
-        const id = setInterval(tick, 5000);
-        return () => clearInterval(id);
+        let alive = true;
+        fetchStatus();
+        const id = setInterval(() => { if (alive) fetchStatus(); }, 5000);
+        return () => { alive = false; clearInterval(id); };
       }, []);
-      if (!stats || !stats.savedTokens) return null;
-      const warn = !!stats.lowBudget;
-      return React.createElement('span', { style: { fontSize: 11, padding: '2px 6px', borderRadius: 999, background: 'var(--dsw-alias-bg-layer-2)', color: warn ? '#d73a4a' : 'var(--dsw-alias-label-secondary)', border: '1px solid ' + (warn ? '#d73a4a' : 'var(--dsw-alias-border-l2)'), marginLeft: 8 } }, `Lens ${stats.savedPercent}%${warn ? ' ⚠' : ''}`);
+
+      React.useEffect(() => {
+        if (!open) return;
+        const onDocClick = (e) => {
+          if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+        };
+        document.addEventListener('click', onDocClick);
+        return () => document.removeEventListener('click', onDocClick);
+      }, [open]);
+
+      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 popover = open ? React.createElement('div', {
+        style: {
+          position: 'absolute',
+          top: 'calc(100% + 6px)',
+          right: 0,
+          width: 270,
+          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'
+        },
+        onClick: (e) => e.stopPropagation()
+      },
+        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
+          React.createElement('div', { style: { fontWeight: 600, fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 } },
+            React.createElement('span', { style: { opacity: 0.8 } }, '◐'),
+            'Context Lens'
+          ),
+          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)')
+            }
+          }, warn ? 'Low Budget ⚠' : (stats ? 'Active' : 'Ready'))
+        ),
+        hasSavings
+          ? React.createElement('div', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', marginBottom: 8 } },
+              `Saved ${stats.savedTokens} tokens (${stats.savedPercent}%) · ${stats.calls} ops`
+            )
+          : React.createElement('div', { style: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary)', marginBottom: 8 } },
+              'No compression yet · Monitoring active'
+            ),
+        stats && stats.budgetLimit ? React.createElement('div', { style: { marginTop: 6, marginBottom: 8 } },
+          React.createElement('div', {
+            style: {
+              display: 'flex',
+              justifyContent: 'space-between',
+              fontSize: 11,
+              color: warn ? '#d73a4a' : 'var(--dsw-alias-label-tertiary)',
+              marginBottom: 4
+            }
+          },
+            React.createElement('span', null, 'Budget'),
+            React.createElement('span', null, `${stats.budgetUsed || 0} / ${stats.budgetLimit} (${stats.budgetPercent || 0}%)`)
+          ),
+          React.createElement('div', { style: { height: 5, borderRadius: 3, background: 'var(--dsw-alias-bg-layer-1)', overflow: 'hidden' } },
+            React.createElement('div', {
+              style: {
+                height: '100%',
+                width: Math.min(100, stats.budgetPercent || 0) + '%',
+                background: warn ? '#d73a4a' : 'var(--dsw-alias-label-primary)',
+                transition: 'width .2s'
+              }
+            })
+          )
+        ) : null,
+        history && history.length ? React.createElement('div', { style: { marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--dsw-alias-border-l3)' } },
+          React.createElement('div', { style: { fontSize: 11, color: 'var(--dsw-alias-label-tertiary)', marginBottom: 4 } }, 'Recent operations'),
+          ...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: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
+          }, `−${h.savedTokens} tk (${h.savedPercent}%) · ${(h.preview || '').slice(0, 28)}`))
+        ) : null,
+        React.createElement('div', { style: { marginTop: 10, display: 'flex', justifyContent: 'flex-end' } },
+          React.createElement('button', {
+            type: 'button',
+            onClick: fetchStatus,
+            style: {
+              appearance: 'none',
+              cursor: 'pointer',
+              fontSize: 11,
+              padding: '3px 8px',
+              borderRadius: 6,
+              border: '1px solid var(--dsw-alias-border-l2)',
+              background: 'var(--dsw-alias-bg-layer-2)',
+              color: 'var(--dsw-alias-label-secondary)'
+            }
+          }, 'Refresh')
+        )
+      ) : null;
+
+      return React.createElement('div', { ref, style: { position: 'relative', display: 'inline-flex', alignItems: 'center' } },
+        React.createElement('button', {
+          type: 'button',
+          title: hasSavings ? `Context Lens: Saved ${stats.savedTokens} tk (${stats.savedPercent}%)` : 'Context Lens: Active',
+          onClick: () => setOpen((v) => !v),
+          style: {
+            appearance: 'none',
+            font: 'inherit',
+            cursor: 'pointer',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 4,
+            padding: '2px 8px',
+            borderRadius: 999,
+            fontSize: 11,
+            lineHeight: '16px',
+            background: open ? 'var(--dsw-alias-bg-layer-3)' : 'var(--dsw-alias-bg-layer-2)',
+            color,
+            border: '1px solid ' + borderColor,
+            marginLeft: 6
+          }
+        },
+          React.createElement('span', { style: { fontSize: 10, opacity: 0.8 } }, '◐'),
+          label,
+          warn ? React.createElement('span', { style: { color: '#d73a4a' } }, ' ⚠') : null
+        ),
+        popover
+      );
     }
 
     function PluginCard({ ctx: _ctx, t }) {
@@ -308,24 +454,29 @@ window.__ModuleLoader__.load({
           console.warn('[dsh-context-lens] betterSidebar registerTab failed', e && e.message || e);
         }
       }
-      // Header badge (#20) — compact savings in conversation header
+      // Header chip (#31) — telemetry and token guard in conversation session utilities slot
       if (ctx.slots) {
-        const headerBadgeRegister = () => {
+        const headerChipRegister = () => {
           try {
             return ctx.slots.register({
-              name: 'conversation.header',
-              id: 'dsh-context-lens:header-badge',
-              order: 50,
+              name: 'conversation.session.header.utilities',
+              id: 'dsh-context-lens-header-chip',
+              order: 7,
               inject: () => ({ ctx })
-            }, HeaderBadge);
+            }, HeaderChip);
           } catch (e) {
-            console.warn('[dsh-context-lens] header badge register failed', e && e.message || e);
+            console.warn('[dsh-context-lens] header chip register failed', e && e.message || e);
           }
         };
         if (typeof ctx.slots.inject === 'function') {
-          try { ctx.slots.inject('conversation.header', headerBadgeRegister); } catch (e) { console.warn('[dsh-context-lens] header inject failed', e && e.message || e); try { headerBadgeRegister(); } catch (e2) {} }
+          try {
+            ctx.slots.inject('conversation.session.header.utilities', headerChipRegister);
+          } catch (e) {
+            console.warn('[dsh-context-lens] utilities inject failed', e && e.message || e);
+            try { headerChipRegister(); } catch (e2) {}
+          }
         } else {
-          try { headerBadgeRegister(); } catch (e) {}
+          try { headerChipRegister(); } catch (e) {}
         }
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-context-lens",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "DSH plugin for AST context compression, test log filtering, and token budget guard",
   "type": "module",
   "main": "lib/index.js",
@@ -44,7 +44,6 @@
       "platform": "web",
       "inject": [
         "@deepseek-ai/dsh-client-locale",
-        "@deepseek-ai/dsh-client-ui-slots",
         "@deepseek-ai/dsh-client-ui-settings"
       ]
     }