@liustack/modlens 3.16.6 → 3.17.0

package/dsh/client.js

@@ -15,7 +15,7 @@
 // host half.
 window.__ModuleLoader__.load({
   id: '@liustack/modlens',
-  factory: () => {
+  factory: (require) => {
     var module = { exports: {} }
     var exports = module.exports
 
@@ -172,7 +172,637 @@ window.__ModuleLoader__.load({
         })
     }
 
+    // The settings card (issue #39). dsh renders a fixed set of plugin cards
+    // and does not enumerate settings namespaces, so a card is contributed
+    // through the `settings.plugin.item` slot rather than by declaring a
+    // schema. It reads and writes the host route above, which owns
+    // ~/.modlens/config.json: the browser never sees an API key, and never
+    // sends a blank one back over a stored key.
+    var ENGINES = ['antigravity-cli', 'gemini-api', 'openai', 'anthropic', 'claude-cli']
+    var REUSE = ['claude', 'codex', 'opencode', 'pi', 'grok']
+
+    // Two short label sets rather than a locale bundle: the card has a dozen
+    // strings, and a bundle would be more machinery than the thing it labels.
+    var TEXT = {
+      en: {
+        title: 'Vision engine (ModLens)',
+        subtitle: 'Vision engine provider configuration.',
+        openConfig: 'Open config file',
+        automatic: 'Automatic (failover chain decides)',
+        pickToConfigure: 'Pick an engine above to configure its key and endpoint.',
+        engine: 'Engine',
+        apiKey: 'API key',
+        baseUrl: 'Base URL',
+        model: 'Model',
+        stored: 'stored, leave empty to keep it',
+        unset: 'not set',
+        fallback: 'provider default',
+        save: 'Save',
+        saving: 'saving...',
+        saved: 'saved',
+        loading: 'loading...',
+        discard: 'Discard',
+        cliNote: 'This engine signs in through its own CLI: no key, no endpoint.',
+        autoTitle: 'Auto mode',
+        autoHint: 'Reuse the vision engines already on this machine.',
+        found: 'found',
+        notLoggedIn: 'found, not signed in',
+        notFound: 'not on this machine',
+        envSourced:
+          'These come from environment variables. Saving copies them into the config file, which then becomes this engine’s only source.',
+      },
+      zh: {
+        title: '视觉引擎（ModLens）',
+        subtitle: '视觉引擎提供商配置。',
+        openConfig: '打开配置文件',
+        automatic: '自动（不固定，由故障转移链决定）',
+        pickToConfigure: '在上面选一个引擎，才能配置它的密钥和地址。',
+        engine: '引擎',
+        apiKey: 'API 密钥',
+        baseUrl: '接口地址',
+        model: '模型',
+        stored: '已保存，留空即不改动',
+        unset: '未设置',
+        fallback: '使用该引擎默认值',
+        save: '保存',
+        saving: '保存中…',
+        saved: '已保存',
+        loading: '加载中…',
+        discard: '放弃修改',
+        cliNote: '该引擎通过自己的 CLI 登录，无需密钥和接口地址。',
+        autoTitle: 'auto 模式',
+        autoHint: '自动复用本机已有视觉引擎。',
+        found: '已找到',
+        notLoggedIn: '已找到，未登录',
+        notFound: '本机没有',
+        envSourced: '这些值来自环境变量。保存会把它们写进配置文件，此后该引擎只认配置文件。',
+      },
+    }
+
+    function labels() {
+      var lang = (document.documentElement.lang || navigator.language || 'en').toLowerCase()
+      return lang.indexOf('zh') === 0 ? TEXT.zh : TEXT.en
+    }
+
+    // The next draft when the engine changes or a summary arrives. The three
+    // engine fields belong to the newly selected engine; the reuse grants are
+    // the user's pending answers and survive an engine switch, since granting
+    // codex has nothing to do with which engine reads the images.
+    function nextDraft(summary, provider, keepReuse) {
+      // provider '' is its own answer: not pinned, the failover chain
+      // decides. There is then no single engine whose key belongs in these
+      // fields, so they stay empty and the card says how to get them back.
+      var engine = summary.engines[provider] || { baseUrl: '', model: '' }
+      return {
+        provider: provider,
+        apiKey: '',
+        baseUrl: engine.baseUrl,
+        model: engine.model,
+        reuse: Object.assign({}, keepReuse || summary.reuse),
+      }
+    }
+
+    // What one save is actually about. The pin travels only when the select
+    // moved; the engine fields only when they were edited. A save that always
+    // carried both pinned an engine nobody chose and wrote the values the
+    // card loaded back over whatever the file holds now.
+    function savePayload(summary, draft) {
+      var payload = { reuse: {} }
+      REUSE.forEach((name) => {
+        if (draft.reuse[name] !== summary.reuse[name]) {
+          payload.reuse[name] = draft.reuse[name]
+        }
+      })
+      if (draft.provider !== summary.provider) {
+        payload.provider = draft.provider
+      }
+      var pristine = nextDraft(summary, draft.provider, draft.reuse)
+      var engineEdited = draft.apiKey !== '' || draft.baseUrl !== pristine.baseUrl || draft.model !== pristine.model
+      if (draft.provider !== '' && engineEdited) {
+        payload.engine = draft.provider
+        payload.apiKey = draft.apiKey
+        payload.baseUrl = draft.baseUrl
+        payload.model = draft.model
+      }
+      return payload
+    }
+
+    function ConfigCard(react, ui) {
+      var h = react.createElement
+      var Input = ui.Input
+
+      // The chrome is the native plugin card's, value for value (border,
+      // layer backgrounds, 12px radius, header row with a rotating chevron,
+      // footer with discard ghost + save primary), so this card reads as a
+      // sibling of the built-in three rather than a lodger.
+      var chevron = (open) =>
+        h(
+          'svg',
+          {
+            width: 16,
+            height: 16,
+            viewBox: '0 0 16 16',
+            style: {
+              color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+              flex: 'none',
+              transition: 'transform .16s',
+              transform: open ? 'rotate(180deg)' : 'none',
+            },
+          },
+          h('path', {
+            d: 'M4 6l4 4 4-4',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeWidth: 1.5,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+          }),
+        )
+
+      return function ModlensCard() {
+        var t = labels()
+        var openState = react.useState(false)
+        var summaryState = react.useState(null)
+        var draftState = react.useState(null)
+        var noteState = react.useState('')
+        var open = openState[0]
+        var summary = summaryState[0]
+        var draft = draftState[0]
+        var note = noteState[0]
+
+        var seed = (next, provider, keepReuse) => nextDraft(next, provider, keepReuse)
+
+        var load = react.useCallback(() => {
+          // discover: the self-check probing which local harnesses exist to
+          // be borrowed. Paid once per expand, cached host-side.
+          fetch('/modlens/config?discover=1')
+            .then((r) =>
+              r.json().then((body) => {
+                if (!r.ok) throw new Error(body.error || 'load failed')
+                return body
+              }),
+            )
+            .then((next) => {
+              summaryState[1](next)
+              draftState[1](seed(next, next.provider))
+              noteState[1]('')
+            })
+            .catch((error) => {
+              noteState[1](String(error.message ? error.message : error))
+            })
+        }, [])
+
+        react.useEffect(() => {
+          if (open && summary === null) load()
+        }, [open, summary, load])
+
+        // A row wrapping ONE control is a label, which names that control. A
+        // row wrapping a set of them must not be: the label becomes the first
+        // checkbox's accessible name and swallows the whole section's prose.
+        // Those rows are a named group instead.
+        var fieldRow = (label, control, key, groupName) =>
+          h(
+            groupName ? 'div' : 'label',
+            {
+              key: key,
+              role: groupName ? 'group' : undefined,
+              'aria-label': groupName || undefined,
+              style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
+                padding: '12px 0',
+                borderTop: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35))',
+              },
+            },
+            h('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary, inherit)' } }, label),
+            control,
+          )
+
+        var body = null
+        if (open) {
+          if (summary === null || draft === null) {
+            body = h(
+              'div',
+              {
+                style: {
+                  padding: '12px 0',
+                  color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                  fontSize: '13px',
+                },
+              },
+              note || t.loading,
+            )
+          } else {
+            var keyless = (summary.keyless || []).indexOf(draft.provider) >= 0
+            var current = summary.engines[draft.provider] || { hasKey: false }
+            var pristine = seed(summary, draft.provider)
+            var dirty =
+              draft.provider !== summary.provider ||
+              draft.apiKey !== '' ||
+              draft.baseUrl !== pristine.baseUrl ||
+              draft.model !== pristine.model ||
+              REUSE.some((name) => draft.reuse[name] !== summary.reuse[name])
+
+            var set = (key, value) => {
+              var next = Object.assign({}, draft)
+              next[key] = value
+              draftState[1](next)
+              noteState[1]('')
+            }
+
+            var textField = (label, key, type, placeholder) =>
+              fieldRow(
+                label,
+                h(Input, {
+                  type: type,
+                  value: draft[key],
+                  placeholder: placeholder,
+                  onChange: (event) => {
+                    set(key, event.target.value)
+                  },
+                }),
+                key,
+              )
+
+            // Auto mode: the probes say which harnesses exist on this
+            // machine. Found ones get a checkbox with their status; missing
+            // ones are named as absent so the list explains itself.
+            var probes = Array.isArray(summary.discovery) ? summary.discovery : null
+            // Being listed means being found: an absent harness is simply
+            // not shown, and only "not signed in" earns a note.
+            var autoRows = REUSE.filter((name) => {
+              if (!probes) return true
+              var probe = probes.find((candidate) => candidate.harness === name)
+              return probe ? probe.cliFound : false
+            }).map((name) => {
+              var probe = probes && probes.find((candidate) => candidate.harness === name)
+              return h(
+                'label',
+                {
+                  key: name,
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    fontSize: '13px',
+                  },
+                },
+                h('input', {
+                  type: 'checkbox',
+                  checked: Boolean(draft.reuse[name]),
+                  onChange: (event) => {
+                    var next = Object.assign({}, draft.reuse)
+                    next[name] = event.target.checked
+                    set('reuse', next)
+                  },
+                }),
+                h('span', null, name),
+                probe && probe.loggedIn === false
+                  ? h(
+                      'span',
+                      {
+                        style: {
+                          color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                          fontSize: '12px',
+                        },
+                      },
+                      t.notLoggedIn,
+                    )
+                  : null,
+              )
+            })
+
+            body = h(
+              'div',
+              null,
+              fieldRow(
+                t.engine,
+                h(
+                  'select',
+                  {
+                    value: draft.provider,
+                    onChange: (event) => {
+                      draftState[1](seed(summary, event.target.value, draft.reuse))
+                      noteState[1]('')
+                    },
+                    style: {
+                      appearance: 'none',
+                      width: '100%',
+                      padding: '8px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35))',
+                      background: 'transparent',
+                      color: 'inherit',
+                      font: 'inherit',
+                      fontSize: '13px',
+                    },
+                  },
+                  [h('option', { key: '', value: '' }, t.automatic)].concat(
+                    ENGINES.map((name) => h('option', { key: name, value: name }, name)),
+                  ),
+                ),
+                'engine',
+              ),
+              draft.provider === ''
+                ? fieldRow(
+                    t.apiKey,
+                    h(
+                      'div',
+                      {
+                        style: {
+                          fontSize: '13px',
+                          color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                        },
+                      },
+                      t.pickToConfigure,
+                    ),
+                    'unpinned',
+                  )
+                : keyless
+                  ? fieldRow(
+                      t.apiKey,
+                      h(
+                        'div',
+                        {
+                          style: { fontSize: '13px', color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))' },
+                        },
+                        t.cliNote,
+                      ),
+                      'clinote',
+                    )
+                  : textField(t.apiKey, 'apiKey', 'password', current.hasKey ? t.stored : t.unset),
+              draft.provider === '' || keyless ? null : textField(t.baseUrl, 'baseUrl', 'text', t.fallback),
+              draft.provider === '' ? null : textField(t.model, 'model', 'text', t.fallback),
+              // Where these values are coming from, said once, because the
+              // first save moves them: an engine the file names takes its
+              // settings from the file alone.
+              draft.provider === '' || current.source !== 'env'
+                ? null
+                : fieldRow(
+                    '',
+                    h(
+                      'div',
+                      {
+                        style: {
+                          fontSize: '13px',
+                          color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                        },
+                      },
+                      t.envSourced,
+                    ),
+                    'envsourced',
+                  ),
+              fieldRow(
+                h(
+                  'span',
+                  null,
+                  t.autoTitle,
+                  h(
+                    'span',
+                    {
+                      style: {
+                        color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                        fontWeight: 400,
+                        marginLeft: '8px',
+                      },
+                    },
+                    t.autoHint,
+                  ),
+                ),
+                h(
+                  'div',
+                  { style: { display: 'flex', flexWrap: 'wrap', gap: '10px 18px', paddingTop: '2px' } },
+                  autoRows,
+                ),
+                'auto',
+                t.autoTitle,
+              ),
+              h(
+                'div',
+                {
+                  key: 'footer',
+                  style: {
+                    borderTop: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35))',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    gap: '8px',
+                    padding: '12px 0 4px',
+                  },
+                },
+                h(
+                  'a',
+                  {
+                    href: '#',
+                    onClick: (event) => {
+                      event.preventDefault()
+                      fetch('/modlens/config', {
+                        method: 'POST',
+                        headers: { 'content-type': 'application/json' },
+                        body: JSON.stringify({ open: true }),
+                      }).catch(() => {})
+                    },
+                    style: {
+                      fontSize: '12px',
+                      color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                      textDecoration: 'underline',
+                      textUnderlineOffset: '2px',
+                    },
+                  },
+                  t.openConfig,
+                ),
+                h(
+                  'span',
+                  {
+                    role: 'status',
+                    style: {
+                      marginRight: 'auto',
+                      marginLeft: '10px',
+                      fontSize: '12px',
+                      color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                    },
+                  },
+                  note,
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: !dirty || note === t.saving,
+                    onClick: () => {
+                      draftState[1](seed(summary, summary.provider))
+                      noteState[1]('')
+                    },
+                    style: {
+                      appearance: 'none',
+                      font: 'inherit',
+                      fontSize: '13px',
+                      lineHeight: 1.5,
+                      cursor: dirty ? 'pointer' : 'default',
+                      border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35))',
+                      borderRadius: '8px',
+                      padding: '5px 14px',
+                      background: 'none',
+                      color: 'var(--dsw-alias-label-secondary, inherit)',
+                      opacity: dirty ? 1 : 0.4,
+                    },
+                  },
+                  t.discard,
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: !dirty || note === t.saving,
+                    onClick: () => {
+                      noteState[1](t.saving)
+                      var payload = savePayload(summary, draft)
+                      fetch('/modlens/config', {
+                        method: 'POST',
+                        headers: { 'content-type': 'application/json' },
+                        body: JSON.stringify(payload),
+                      })
+                        .then((r) =>
+                          r.json().then((payload) => {
+                            if (!r.ok) throw new Error(payload.error || 'save failed')
+                            return payload
+                          }),
+                        )
+                        .then((next) => {
+                          // The save response carries no discovery; keep the
+                          // probes already on screen.
+                          next.discovery = summary.discovery
+                          summaryState[1](next)
+                          draftState[1](seed(next, next.provider))
+                          noteState[1](t.saved)
+                        })
+                        .catch((error) => {
+                          noteState[1](String(error.message ? error.message : error))
+                        })
+                    },
+                    style: {
+                      appearance: 'none',
+                      font: 'inherit',
+                      fontSize: '13px',
+                      lineHeight: 1.5,
+                      cursor: dirty ? 'pointer' : 'default',
+                      border: '1px solid transparent',
+                      borderRadius: '8px',
+                      padding: '5px 14px',
+                      background: 'var(--dsw-alias-label-primary, currentColor)',
+                      color: 'var(--dsw-alias-bg-layer-3, rgba(127,127,127,0.05))',
+                      opacity: dirty ? 1 : 0.4,
+                    },
+                  },
+                  t.save,
+                ),
+              ),
+            )
+          }
+        }
+
+        return h(
+          'div',
+          {
+            style: {
+              border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35))',
+              background: open
+                ? 'var(--dsw-alias-bg-layer-2, rgba(127,127,127,0.10))'
+                : 'var(--dsw-alias-bg-layer-3, rgba(127,127,127,0.05))',
+              borderRadius: '12px',
+              transition: 'border-color .16s, background .16s',
+            },
+          },
+          h(
+            'button',
+            {
+              type: 'button',
+              'aria-expanded': open,
+              onClick: () => {
+                openState[1](!open)
+              },
+              style: {
+                appearance: 'none',
+                width: '100%',
+                font: 'inherit',
+                color: 'inherit',
+                textAlign: 'left',
+                cursor: 'pointer',
+                background: 'none',
+                border: 0,
+                borderRadius: '12px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                padding: '14px 16px',
+              },
+            },
+            h(
+              'div',
+              { style: { flex: 1, minWidth: 0 } },
+              h('div', { style: { fontSize: '14px', fontWeight: 600 } }, t.title),
+              h(
+                'div',
+                {
+                  style: {
+                    color: 'var(--dsw-alias-label-tertiary, rgba(127,127,127,0.8))',
+                    fontSize: '13px',
+                    lineHeight: 1.5,
+                  },
+                },
+                t.subtitle,
+              ),
+            ),
+            chevron(open),
+          ),
+          open ? h('div', { style: { margin: '0 16px', paddingBottom: '8px' } }, body) : null,
+        )
+      }
+    }
+
+    function registerCard(ctx) {
+      // Reaching for an undeclared service throws in cordis, so the optional
+      // dependency rides a scoped ctx.inject: the closure runs where slots
+      // exists and never runs where it does not, exactly as the host half
+      // takes webServer.
+      if (typeof ctx.inject !== 'function') return
+      ctx.inject(['slots'], (scope) => {
+        // The card and its route live and die together: with the host route
+        // off (settingsCard: false, or no web profile) a card would only
+        // render an error, which is not what turning a feature off means.
+        // Any response at all proves the route exists; only a 404 or a
+        // network failure reads as absent.
+        fetch('/modlens/config')
+          .then((response) => {
+            if (response.status === 404) return
+            try {
+              mountCard(scope)
+            } catch (error) {
+              console.error('[modlens] settings card skipped: ' + error)
+            }
+          })
+          .catch(() => {})
+      })
+    }
+
+    function mountCard(ctx) {
+      var react
+      try {
+        react = require('react')
+      } catch (error) {
+        console.error('[modlens] settings card skipped: ' + error)
+        return
+      }
+      var ui = require('@deepseek-ai/dsh-client-ui-primitives')
+      var Card = ConfigCard(react, ui)
+      ctx.slots.inject('settings.plugin.item', function* () {
+        yield ctx.slots.register({ name: 'settings.plugin.item', id: 'modlens', order: 30 }, Card)
+      })
+    }
+
     function apply(ctx) {
+      registerCard(ctx)
       document.addEventListener('paste', onPaste, true)
       document.addEventListener('focusin', onFocusIn, true)
       // cordis effect: unregister on plugin disposal (HMR, profile reload).
@@ -188,6 +818,9 @@ window.__ModuleLoader__.load({
     }
 
     exports.apply = apply
+    // Exposed for the repo's tests only; not part of the plugin contract.
+    exports.__card = { nextDraft: nextDraft, savePayload: savePayload }
+    // `slots` is optional, so it is not required here: registerCard checks.
     exports.inject = []
     return module.exports
   },