@goodandready/dsh-clinebot 0.2.1 → 0.3.1

package/lib/client.js

@@ -10,6 +10,32 @@ window.__ModuleLoader__.load({
     const SUBTITLE = 'ClinePass subscription ($9.99/mo) with curated & custom models.'
     const ROUTE_PREFIX = '/dsh-clinebot'
 
+    const en = {
+      title: 'ClineBot',
+      subtitle: 'ClinePass subscription ($9.99/mo) with curated & custom models.',
+      'settings.loading': 'Loading ClineBot settings…',
+      'settings.unavailable': 'ClineBot settings unavailable (host namespace is not ready).',
+    }
+
+    const ru = {
+      title: 'ClineBot',
+      subtitle: 'Подписка ClinePass ($9.99/мес) с каталогом проверенных моделей.',
+      'settings.loading': 'Загрузка настроек ClineBot…',
+      'settings.unavailable': 'Настройки ClineBot недоступны (пространство хоста ещё не готово).',
+    }
+
+    function makeT(dict, fallback) {
+      return function t(key, vars) {
+        let val = (dict && dict[key]) || (fallback && fallback[key]) || key
+        if (vars && typeof val === 'string') {
+          for (const k of Object.keys(vars)) {
+            val = val.replace(new RegExp('\\{' + k + '\\}', 'g'), String(vars[k]))
+          }
+        }
+        return val
+      }
+    }
+
     function FallbackChevron() {
       return React.createElement(
         'svg',
@@ -30,6 +56,7 @@ window.__ModuleLoader__.load({
       if (document.getElementById('dsh-clinebot-full-css')) return
       const style = document.createElement('style')
       style.id = 'dsh-clinebot-full-css'
+      style.dataset.dshPlugin = NS
       style.textContent = `
 .cb-page{display:flex;flex-direction:column;gap:20px;padding:8px 0 32px;max-width:960px}
 .cb-header{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--dsw-alias-border-l2)}
@@ -52,12 +79,13 @@ window.__ModuleLoader__.load({
 .cb-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}
 .cb-input-group{display:flex;gap:8px;align-items:center}
 
-.cb-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:7px 14px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px}
-.cb-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-1)}
+.cb-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:7px 14px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}
+.cb-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))}
 .cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
-.cb-btn-primary:hover:not(:disabled){opacity:0.9}
+.cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88;visibility:visible !important}
 .cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}
-.cb-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.1)}
+.cb-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.12) !important;border-color:rgba(239,68,68,0.5)}
+.cb-btn:disabled{opacity:0.5;cursor:not-allowed}
 
 .cb-bar-container{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2)}
 .cb-bar-head{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
@@ -72,6 +100,12 @@ window.__ModuleLoader__.load({
 
 .cb-alert-ok{padding:10px 14px;border-radius:8px;background:rgba(16,185,129,0.1);color:var(--dsw-alias-state-success-primary);font-size:13px}
 .cb-alert-bad{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}
+.cb-alert-err{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}
+.cb-banner-warning{padding:12px 16px;border-radius:8px;background:rgba(245,158,11,0.12);border:1px solid var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:500}
+.cb-banner-exhausted{padding:12px 16px;border-radius:8px;background:rgba(239,68,68,0.12);border:1px solid var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:600}
+.cb-stat-box{padding:12px 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:4px}
+.cb-stat-val{font-size:18px;font-weight:700;color:var(--dsw-alias-label-primary)}
+.cb-stat-lbl{font-size:12px;color:var(--dsw-alias-label-secondary)}
 .cb-preview{padding:12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);font-family:monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--dsw-alias-border-l2)}
 `
       document.head.appendChild(style)
@@ -111,7 +145,22 @@ window.__ModuleLoader__.load({
       )
     }
 
-    function SettingsPage() {
+    function SettingsPage(props) {
+      const ctx = props?.ctx
+      const t = props?.t || makeT(ru, en)
+
+      const scope = React.useMemo(
+        () => (ctx && ctx.settingsScope ? ctx.settingsScope.bind({ namespace: NS }) : undefined),
+        [ctx]
+      )
+
+      const snapshot = React.useSyncExternalStore(
+        React.useMemo(() => (cb) => (scope ? scope.subscribe(cb) : () => {}), [scope]),
+        React.useCallback(() => (scope ? scope.getSnapshot() : { status: 'ready' }), [scope]),
+        React.useCallback(() => ({ status: 'loading' }), [])
+      )
+      const snapshotStatus = snapshot?.status || 'ready'
+
       const [status, setStatus] = React.useState(null)
       const [draft, setDraft] = React.useState(null)
       const [busy, setBusy] = React.useState('')
@@ -123,13 +172,6 @@ window.__ModuleLoader__.load({
       const [apiKeyInput, setApiKeyInput] = React.useState('')
       const [showKey, setShowKey] = React.useState(false)
 
-      // Custom model form state
-      const [customId, setCustomId] = React.useState('')
-      const [customName, setCustomName] = React.useState('')
-      const [customContext, setCustomContext] = React.useState('200000')
-      const [customVision, setCustomVision] = React.useState(false)
-      const [customCategory, setCustomCategory] = React.useState('coding')
-
       React.useEffect(() => {
         ensureCss()
       }, [])
@@ -195,6 +237,24 @@ window.__ModuleLoader__.load({
         }
       }
 
+      // Sync official models from ClinePass plan
+      async function handleSyncPlanModels() {
+        setBusy('sync-models')
+        setErr('')
+        setMsg('')
+        try {
+          const res = await fetch(`${ROUTE_PREFIX}/models/sync`, { method: 'POST' })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
+          setMsg(`Синхронизировано моделей подписки: ${data.totalModelsCount} (${data.discoveredCount} получено напрямую из плана ClinePass)`)
+          await load()
+        } catch (e) {
+          setErr(String(e.message || e))
+        } finally {
+          setBusy('')
+        }
+      }
+
       // Register/Sync Provider in DSH
       async function handleRegister() {
         setBusy('register')
@@ -251,6 +311,7 @@ window.__ModuleLoader__.load({
           if (!data.ok) throw new Error(data.error || `HTTP ${res.status}`)
           setSmokeResult(data)
           setMsg(`Smoke тест пройден! Задержка: ${data.latencyMs} мс`)
+          await load()
         } catch (e) {
           setErr(String(e.message || e))
         } finally {
@@ -270,6 +331,9 @@ window.__ModuleLoader__.load({
         const nextList = Array.from(current)
         setDraft({ ...draft, enabledModels: nextList })
 
+        if (scope && snapshotStatus === 'ready') {
+          try { await scope.set('enabledModels', nextList) } catch (_) {}
+        }
         try {
           await fetch(`${ROUTE_PREFIX}/models/toggle`, {
             method: 'POST',
@@ -286,7 +350,7 @@ window.__ModuleLoader__.load({
         if (type === 'all') {
           nextList = status.availableModels.map((m) => m.id)
         } else if (type === 'vision') {
-          nextList = status.availableModels.filter((m) => m.input?.includes('vision')).map((m) => m.id)
+          nextList = status.availableModels.filter((m) => m.input?.includes('image') || m.input?.includes('vision')).map((m) => m.id)
         } else if (type === 'coding') {
           nextList = status.availableModels.filter((m) => m.category === 'coding').map((m) => m.id)
         } else if (type === 'recommended') {
@@ -294,6 +358,9 @@ window.__ModuleLoader__.load({
         }
 
         setDraft({ ...draft, enabledModels: nextList })
+        if (scope && snapshotStatus === 'ready') {
+          try { await scope.set('enabledModels', nextList) } catch (_) {}
+        }
         try {
           await fetch(`${ROUTE_PREFIX}/models/toggle`, {
             method: 'POST',
@@ -303,61 +370,15 @@ window.__ModuleLoader__.load({
         } catch {}
       }
 
-      // Add custom model
-      async function handleAddCustomModel() {
-        if (!customId.trim()) {
-          setErr('Введите Model ID')
-          return
-        }
-        setBusy('add-model')
-        setErr('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/models/custom`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              id: customId.trim(),
-              name: customName.trim() || customId.trim(),
-              contextLength: Number(customContext) || 200000,
-              hasVision: customVision,
-              category: customCategory,
-            }),
-          })
-          const data = await res.json().catch(() => ({}))
-          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
-          setMsg(`Модель ${data.model?.name} успешно добавлена в каталог`)
-          setCustomId('')
-          setCustomName('')
-          await load()
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
-      }
-
-      // Remove custom model
-      async function handleRemoveCustomModel(id) {
-        setBusy(`remove-${id}`)
-        setErr('')
-        try {
-          const res = await fetch(`${ROUTE_PREFIX}/models/custom`, {
-            method: 'DELETE',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ id }),
-          })
-          const data = await res.json().catch(() => ({}))
-          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
-          setMsg(`Модель ${id} удалена`)
-          await load()
-        } catch (e) {
-          setErr(String(e.message || e))
-        } finally {
-          setBusy('')
-        }
+      if (snapshotStatus === 'unavailable') {
+        return React.createElement(
+          'div',
+          { className: 'cb-page' },
+          React.createElement('div', { className: 'cb-banner-warning' }, t('settings.unavailable'))
+        )
       }
 
-      if (!status || !draft) {
+      if (!status || !draft || snapshotStatus === 'loading') {
         if (err) {
           return React.createElement(
             'div',
@@ -490,6 +511,27 @@ window.__ModuleLoader__.load({
           )
         ),
 
+        // Quota Warning Banner
+        status.quotaWarning
+          ? React.createElement(
+              'div',
+              { className: status.quotaWarning.level === 'exhausted' ? 'cb-banner-exhausted' : 'cb-banner-warning' },
+              React.createElement('span', { style: { fontSize: '16px' } }, status.quotaWarning.level === 'exhausted' ? '🚨' : '⚠️'),
+              React.createElement(
+                'div',
+                { style: { flex: 1 } },
+                React.createElement('div', null, status.quotaWarning.message),
+                status.quotaWarning.resetsAt
+                  ? React.createElement(
+                      'div',
+                      { style: { fontSize: '11px', opacity: 0.9, marginTop: '2px' } },
+                      `Ожидаемое время сброса лимита: ${new Date(status.quotaWarning.resetsAt).toLocaleTimeString()}`
+                    )
+                  : null
+              )
+            )
+          : null,
+
         // Card 2: Subscription Limits & Usage Dashboard
         keyPresent
           ? React.createElement(
@@ -536,7 +578,7 @@ window.__ModuleLoader__.load({
             )
           : null,
 
-        // Card 3: Model Picker Management
+        // Card 3: Model Picker Management with Official Plan Sync
         React.createElement(
           'div',
           { className: 'cb-section-card' },
@@ -547,6 +589,16 @@ window.__ModuleLoader__.load({
             React.createElement(
               'div',
               { className: 'cb-row' },
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cb-btn',
+                  disabled: !!busy || !keyPresent,
+                  onClick: handleSyncPlanModels,
+                },
+                busy === 'sync-models' ? 'Синхронизация…' : '🔄 Получить модели из плана'
+              ),
               React.createElement(
                 'button',
                 { type: 'button', className: 'cb-btn', onClick: () => handleSetModelsFilter('all') },
@@ -572,7 +624,7 @@ window.__ModuleLoader__.load({
           React.createElement(
             'div',
             { className: 'cb-section-desc' },
-            'Отметьте галочками модели, которые должны отображаться в выпадающем списке выбора моделей в чате DeepSeek Harness.'
+            'Список формируется напрямую из официальной подписки ClinePass без ручного ввода. Отметьте модели, которые должны отображаться в выпадающем списке выбора моделей в чате DeepSeek Harness.'
           ),
           React.createElement(
             'table',
@@ -612,9 +664,6 @@ window.__ModuleLoader__.load({
                     React.createElement('strong', null, m.name),
                     m.recommended
                       ? React.createElement('span', { className: 'cb-badge cb-badge-ok', style: { marginLeft: '6px' } }, 'Star')
-                      : null,
-                    m.isCustom
-                      ? React.createElement('span', { className: 'cb-badge cb-badge-warn', style: { marginLeft: '6px' } }, 'Custom')
                       : null
                   ),
                   React.createElement('td', null, React.createElement('code', null, m.id)),
@@ -623,7 +672,7 @@ window.__ModuleLoader__.load({
                     'td',
                     null,
                     React.createElement('span', { className: 'cb-badge' }, m.category || 'general'),
-                    m.input?.includes('vision')
+                    m.input?.includes('image') || m.input?.includes('vision')
                       ? React.createElement('span', { className: 'cb-badge', style: { marginLeft: '4px' } }, 'Vision')
                       : null
                   )
@@ -633,134 +682,48 @@ window.__ModuleLoader__.load({
           )
         ),
 
-        // Card 4: Add New Custom Model Form
+        // Card 4: Session Metrics & Usage Tracking
         React.createElement(
           'div',
           { className: 'cb-section-card' },
           React.createElement(
             'div',
             { className: 'cb-section-title' },
-            '➕ Добавить новую модель в подписку'
+            '📈 Статистика текущей сессии DSH'
           ),
           React.createElement(
             'div',
             { className: 'cb-section-desc' },
-            'Если в сервисе ClinePass появилась новая модель, добавьте её идентификатор сюда — она мгновенно станет доступна в DSH без обновления плагина.'
+            'Локальный мониторинг запросов, задержек сети и ориентировочного расхода токенов через ClinePass.'
           ),
           React.createElement(
             'div',
             { className: 'cb-grid-2' },
             React.createElement(
               'div',
-              null,
-              React.createElement('label', { className: 'cb-section-desc' }, 'Model ID (напр. cline-pass/deepseek-v4-moe)'),
-              React.createElement('input', {
-                className: 'cb-input',
-                placeholder: 'cline-pass/...',
-                value: customId,
-                onChange: (e) => setCustomId(e.target.value),
-              })
+              { className: 'cb-stat-box' },
+              React.createElement('div', { className: 'cb-stat-val' }, `${status.sessionStats?.successfulRequests || 0} / ${status.sessionStats?.totalRequests || 0}`),
+              React.createElement('div', { className: 'cb-stat-lbl' }, 'Успешных запросов / Всего')
             ),
             React.createElement(
               'div',
-              null,
-              React.createElement('label', { className: 'cb-section-desc' }, 'Отображаемое имя (Display Name)'),
-              React.createElement('input', {
-                className: 'cb-input',
-                placeholder: 'Например: DeepSeek V4 MoE',
-                value: customName,
-                onChange: (e) => setCustomName(e.target.value),
-              })
+              { className: 'cb-stat-box' },
+              React.createElement('div', { className: 'cb-stat-val' }, `~${status.sessionStats?.totalTokensEst || 0}`),
+              React.createElement('div', { className: 'cb-stat-lbl' }, 'Оценка токенов сессии')
             ),
             React.createElement(
               'div',
-              null,
-              React.createElement('label', { className: 'cb-section-desc' }, 'Контекст (токенов)'),
-              React.createElement('input', {
-                className: 'cb-input',
-                type: 'number',
-                value: customContext,
-                onChange: (e) => setCustomContext(e.target.value),
-              })
+              { className: 'cb-stat-box' },
+              React.createElement('div', { className: 'cb-stat-val' }, status.sessionStats?.lastLatencyMs ? `${status.sessionStats.lastLatencyMs} мс` : '—'),
+              React.createElement('div', { className: 'cb-stat-lbl' }, 'Последняя задержка (Latency)')
             ),
             React.createElement(
               'div',
-              null,
-              React.createElement('label', { className: 'cb-section-desc' }, 'Категория'),
-              React.createElement(
-                'select',
-                {
-                  className: 'cb-input',
-                  value: customCategory,
-                  onChange: (e) => setCustomCategory(e.target.value),
-                },
-                React.createElement('option', { value: 'coding' }, 'Кодинг (Coding)'),
-                React.createElement('option', { value: 'reasoning' }, 'Рассуждения (Reasoning)'),
-                React.createElement('option', { value: 'multimodal' }, 'Мультимодальная'),
-                React.createElement('option', { value: 'general' }, 'Общая (General)')
-              )
+              { className: 'cb-stat-box' },
+              React.createElement('div', { className: 'cb-stat-val' }, status.sessionStats?.lastRequestAt ? new Date(status.sessionStats.lastRequestAt).toLocaleTimeString() : '—'),
+              React.createElement('div', { className: 'cb-stat-lbl' }, 'Время последнего запроса')
             )
-          ),
-          React.createElement(
-            'div',
-            { className: 'cb-row', style: { marginTop: '4px' } },
-            React.createElement(
-              'label',
-              { className: 'cb-row', style: { cursor: 'pointer', fontSize: '13px' } },
-              React.createElement('input', {
-                type: 'checkbox',
-                checked: customVision,
-                onChange: (e) => setCustomVision(e.target.checked),
-              }),
-              ' Модель поддерживает изображения (Vision)'
-            ),
-            React.createElement(
-              'button',
-              {
-                type: 'button',
-                className: 'cb-btn cb-btn-primary',
-                style: { marginLeft: 'auto' },
-                disabled: !!busy || !customId.trim(),
-                onClick: handleAddCustomModel,
-              },
-              busy === 'add-model' ? 'Добавление…' : 'Добавить модель'
-            )
-          ),
-          // Custom models list with remove button
-          draft.customModels?.length > 0
-            ? React.createElement(
-                'div',
-                { style: { marginTop: '10px' } },
-                React.createElement('div', { className: 'cb-section-desc' }, 'Добавленные вами модели:'),
-                React.createElement(
-                  'div',
-                  { className: 'cb-row', style: { marginTop: '6px' } },
-                  draft.customModels.map((cm) =>
-                    React.createElement(
-                      'span',
-                      { key: cm.id, className: 'cb-badge' },
-                      `${cm.name} (${cm.id})`,
-                      React.createElement(
-                        'button',
-                        {
-                          type: 'button',
-                          style: {
-                            background: 'none',
-                            border: 'none',
-                            cursor: 'pointer',
-                            color: 'var(--dsw-alias-state-error-primary)',
-                            padding: 0,
-                            marginLeft: '4px',
-                          },
-                          onClick: () => handleRemoveCustomModel(cm.id),
-                        },
-                        '×'
-                      )
-                    )
-                  )
-                )
-              )
-            : null
+          )
         ),
 
         // Card 5: Diagnostics & Sync with DSH
@@ -826,8 +789,9 @@ window.__ModuleLoader__.load({
     }
 
     // Accordion item for Plugins section
-    function PluginCard() {
+    function PluginCard(props) {
       const [open, setOpen] = React.useState(false)
+      const t = props?.t || makeT(ru, en)
       React.useEffect(() => {
         ensureCss()
       }, [])
@@ -855,41 +819,61 @@ window.__ModuleLoader__.load({
           React.createElement(
             'div',
             { style: { flex: 1 } },
-            React.createElement('div', { style: { fontWeight: 600, fontSize: '15px' } }, TITLE),
-            React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, SUBTITLE)
+            React.createElement('div', { style: { fontWeight: 600, fontSize: '15px' } }, t('title')),
+            React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
           ),
           React.createElement('span', { style: { transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .16s' } },
             React.createElement(Chevron)
           )
         ),
-        open ? React.createElement('div', { style: { marginTop: '16px' } }, React.createElement(SettingsPage)) : null
+        open ? React.createElement('div', { style: { marginTop: '16px' } }, React.createElement(SettingsPage, { ...props, ctx: props?.ctx })) : null
       )
     }
 
     function apply(ctx) {
-      // 1. Register as dedicated Settings Section (Settings -> ClineBot)
-      ctx.slots.inject('settings.section', () => {
-        return ctx.slots.register(
-          {
-            name: 'settings.section',
-            id: '@goodandready/dsh-clinebot',
-            order: 28,
-            label: () => TITLE,
-          },
-          SettingsPage
-        )
-      })
+      if (ctx.locale && ctx.locale.register) {
+        try { ctx.locale.register(NS, { en, ru }) } catch (_) {}
+      }
+      const t = (ctx.locale && ctx.locale.bind) ? ctx.locale.bind(NS) : makeT(ru, en)
+
+      let placed = false
+      try {
+        placed = !!ctx.slots.inject('settings.plugin.item', () => {
+          return ctx.slots.register(
+            {
+              name: 'settings.plugin.item',
+              key: NS,
+              locale: NS,
+              inject: () => ({ ctx }),
+            },
+            PluginCard
+          )
+        })
+      } catch (_) {
+        placed = false
+      }
 
-      // 2. Also register in settings.plugin.item (Settings -> Plugins)
-      ctx.slots.inject('settings.plugin.item', () => {
-        return ctx.slots.register(
-          { name: 'settings.plugin.item', key: NS },
-          PluginCard
-        )
-      })
+      // Fallback to settings.section if settings.plugin.item is not declared
+      if (!placed) {
+        try {
+          ctx.slots.inject('settings.section', () => {
+            return ctx.slots.register(
+              {
+                name: 'settings.section',
+                id: '@goodandready/dsh-clinebot',
+                order: 28,
+                locale: NS,
+                label: () => t('title'),
+                inject: () => ({ ctx }),
+              },
+              SettingsPage
+            )
+          })
+        } catch (_) {}
+      }
     }
 
-    module.exports = { apply, inject: ['slots'] }
+    module.exports = { apply, inject: ['slots', 'locale', 'settingsScope'] }
     return module.exports
   },
 })