dsh-sidebar-browser-agent 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.2.8
+
+- The plugin page now follows the official plugin-page style: the configuration
+  form is built on the platform's shared settings primitives (`SettingsForm`,
+  `Switch`), with the official footer save action, token-based typography and
+  spacing, and a switch list plus allowlist field. A carrier without those
+  primitives keeps the previous self-contained form as a fallback, and
+  `sidebar_browser status` reports which path is active.
+
+## 0.2.7
+
+- Redrew the plugin icon in the official plugin style: a transparent 36x36
+  gradient glyph (browser window, sidebar list, agent cursor) using the same
+  palette and stroke language as the built-in plugin icons.
+- Declared `icon` in `package.json`, the field the Plugin Manager reads for a
+  plugin row, and added a GitHub-hosted 180px raster for storefront tiles.
+
 ## 0.2.6
 
 - Publishing is now token-free: the publish workflow authenticates to npm with

package/icon.svg

@@ -1,8 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Sidebar browser agent">
-  <rect x="2" y="2" width="60" height="60" rx="14" fill="#1f6feb"/>
-  <circle cx="31" cy="29" r="15" fill="none" stroke="#ffffff" stroke-width="2.4"/>
-  <ellipse cx="31" cy="29" rx="6.5" ry="15" fill="none" stroke="#ffffff" stroke-width="2.4"/>
-  <path d="M16 29h30" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/>
-  <circle cx="47" cy="47" r="9.5" fill="#0b2a4a" stroke="#7ee787" stroke-width="2"/>
-  <path d="M42.5 47h9M47 42.5v9" stroke="#7ee787" stroke-width="2" stroke-linecap="round"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="sidebar-browser-page" x1="8" y1="9" x2="29" y2="27" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#67C7FE" />
+      <stop offset="1" stop-color="#3F77D8" />
+    </linearGradient>
+    <linearGradient id="sidebar-browser-side" x1="10" y1="11" x2="15" y2="25" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6AECB6" />
+      <stop offset="1" stop-color="#37A6B1" />
+    </linearGradient>
+  </defs>
+  <rect x="7.7" y="8.7" width="20.6" height="18.6" rx="3.4" stroke="url(#sidebar-browser-page)" stroke-width="2.4" />
+  <rect x="10.4" y="12.2" width="3.6" height="1.8" rx="0.9" fill="url(#sidebar-browser-side)" />
+  <rect x="10.4" y="15.7" width="2.8" height="1.8" rx="0.9" fill="url(#sidebar-browser-side)" fill-opacity="0.65" />
+  <rect x="10.4" y="19.2" width="3.2" height="1.8" rx="0.9" fill="url(#sidebar-browser-side)" fill-opacity="0.45" />
+  <path d="M17.4 15.4L17.4 24.9L19.9 22.5L21.8 26.1L24.1 25.1L22.2 21.5L25.4 21.4Z" fill="url(#sidebar-browser-page)" stroke="#FFFFFF" stroke-width="0.7" stroke-linejoin="round" />
 </svg>

package/lib/client.js

@@ -23,12 +23,31 @@ window.__ModuleLoader__.load({
   id: 'dsh-sidebar-browser-agent',
   factory(require) {
     const React = require('react')
+
+    /**
+     * Official settings UI primitives are platform seed modules of the browser
+     * bundle, so a dynamic plugin can require them without a build step. The
+     * loader is defensive: a carrier without them keeps the plugin alive and
+     * the configuration page falls back to the plugin-defined form.
+     */
+    let officialPrimitives = null
+    try {
+      const candidate = require('@deepseek-ai/dsh-client-ui-primitives')
+      if (candidate !== null && typeof candidate === 'object'
+        && typeof candidate.SettingsForm === 'function'
+        && typeof candidate.Switch === 'function') {
+        officialPrimitives = candidate
+      }
+    } catch (error) {
+      void error
+      officialPrimitives = null
+    }
     const PLUGIN_ROOT = 'plugin/sidebar-browser-agent'
     const MAX_BACKOFF_MS = 5_000
     const BASE_BACKOFF_MS = 400
     const MAX_EVAL_CHARS = 100_000
     /** Plugin version reported by diagnostics; keep in sync with package.json. */
-    const PLUGIN_VERSION = '0.2.6'
+    const PLUGIN_VERSION = '0.2.8'
     const MAX_SCREENSHOT_WIDTH = 1_400
     const MAX_SCREENSHOT_BASE64 = 12_000_000
     /**
@@ -1051,6 +1070,7 @@ window.__ModuleLoader__.load({
         webviews: document.querySelectorAll('webview').length,
         tabWrappers: document.querySelectorAll('[data-sidebar-right-tab]').length,
       }
+      checks.settingsForm = officialPrimitives === null ? 'fallback' : 'official'
       try {
         const configForms = ctx.get?.('configForms')
         const form = configForms?.get?.(CONFIG_ENTRY_ID)
@@ -1206,6 +1226,42 @@ window.__ModuleLoader__.load({
         cursor: 'pointer',
         font: 'inherit',
       },
+      // --- official-style settings page (shared SettingsForm + Switch) ---
+      switchList: { display: 'flex', flexDirection: 'column' },
+      switchRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        minHeight: '44px',
+        padding: '8px 0',
+        borderBottom: '0.5px solid var(--dsw-alias-border-l2)',
+      },
+      switchRowLast: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        minHeight: '44px',
+        padding: '8px 0',
+      },
+      switchText: { display: 'flex', flexDirection: 'column', gap: '2px', flex: '1 1 auto', minWidth: 0 },
+      switchLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: '20px', fontWeight: 500 },
+      switchHint: { color: 'var(--dsw-alias-label-secondary)', fontSize: '13px', lineHeight: '18px' },
+      fieldLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: '20px' },
+      textareaOfficial: {
+        boxSizing: 'border-box',
+        width: '100%',
+        minHeight: '96px',
+        color: 'var(--dsw-alias-label-primary)',
+        background: 'var(--dsw-alias-bg-base)',
+        border: '0.5px solid var(--dsw-alias-border-l4)',
+        borderRadius: 'var(--dsw-radius-md, 8px)',
+        font: 'inherit',
+        fontSize: '13px',
+        lineHeight: '20px',
+        padding: '8px 10px',
+        resize: 'vertical',
+      },
+      noticeOfficial: { color: 'var(--dsw-alias-label-secondary)', margin: 0, fontSize: '13px', lineHeight: '20px' },
     }
 
     /**
@@ -1353,6 +1409,111 @@ window.__ModuleLoader__.load({
       )
     }
 
+    /**
+     * Project the staged row form onto the shared Plugins settings-form model.
+     * @param formState - `form.state` handed to `plugins.row.config`.
+     * @param dirty - whether the local draft differs from Host values.
+     * @param busy - whether a save is in flight.
+     * @param failed - whether the last save was rejected.
+     * @returns the `state` prop the shared `SettingsForm` renders.
+     */
+    function settingsFormState(formState, dirty, busy, failed) {
+      const ready = formState !== null && typeof formState === 'object'
+        && formState.status === 'ready' && formState.value !== undefined
+      return {
+        available: ready,
+        writable: ready && formState.writable !== false,
+        dirty: ready && dirty === true,
+        invalid: false,
+        saving: busy === true,
+        failed: ready && failed === true,
+      }
+    }
+
+    /**
+     * Official-style configuration page: the shared SettingsForm footer plus a
+     * switch list and the allowlist field, matching the built-in plugin pages.
+     * @param props - `{ form, t }` from the Plugins page.
+     */
+    function OfficialConfigEditor(props) {
+      const t = props.t
+      const SettingsForm = officialPrimitives.SettingsForm
+      const Switch = officialPrimitives.Switch
+      const formState = props.form.state
+      const accepted = formState.value ?? {}
+      const [draft, setDraft] = React.useState(() => draftOf(accepted))
+      const [busy, setBusy] = React.useState(false)
+      const [failed, setFailed] = React.useState(false)
+      React.useEffect(() => {
+        setDraft(draftOf(accepted))
+        setFailed(false)
+      }, [formState.revision, formState.status])
+      const ready = formState !== null && typeof formState === 'object' && formState.status === 'ready' && formState.value !== undefined
+      const writable = ready && formState.writable !== false
+      const ops = configOps(draft, accepted)
+      const model = settingsFormState(formState, ops.length > 0, busy, failed)
+      const labels = {
+        unavailable: formState?.status === 'loading' ? t('config.loading') : t('config.unavailable'),
+        readOnly: t('config.readOnly'),
+        save: t('config.save'),
+        saving: t('config.saving'),
+        saveFailed: t('config.failed'),
+      }
+      const save = async () => {
+        if (busy === true || ops.length === 0) return
+        setBusy(true)
+        setFailed(false)
+        try {
+          const acceptedChange = await props.form.mutate(ops, formState.revision)
+          if (acceptedChange !== true) setFailed(true)
+        } catch (error) {
+          void error
+          setFailed(true)
+        } finally {
+          setBusy(false)
+        }
+      }
+      const discard = () => {
+        setDraft(draftOf(accepted))
+        setFailed(false)
+      }
+      const toggleRow = (field, labelKey, hintKey, last) => React.createElement('div', {
+        style: last === true ? configStyles.switchRowLast : configStyles.switchRow,
+      },
+        React.createElement('div', { style: configStyles.switchText },
+          React.createElement('span', { style: configStyles.switchLabel }, t(labelKey)),
+          React.createElement('span', { style: configStyles.switchHint }, t(hintKey)),
+        ),
+        React.createElement(Switch, {
+          checked: draft[field] !== false,
+          onChange: (next) => setDraft({ ...draft, [field]: next }),
+          label: t(labelKey),
+          disabled: writable !== true,
+        }),
+      )
+      return React.createElement(SettingsForm, { labels, state: model, onSave: save, onDiscard: discard },
+        React.createElement('p', { style: configStyles.noticeOfficial }, t('config.intro')),
+        React.createElement('div', { style: configStyles.switchList },
+          toggleRow('enabled', 'config.enabled', 'config.enabledHint', false),
+          toggleRow('allowEval', 'config.allowEval', 'config.allowEvalHint', false),
+          toggleRow('allowNativeInput', 'config.allowNativeInput', 'config.allowNativeInputHint', true),
+        ),
+        React.createElement('div', { style: configStyles.field },
+          React.createElement('span', { style: configStyles.fieldLabel }, t('config.hosts')),
+          React.createElement('textarea', {
+            style: configStyles.textareaOfficial,
+            rows: 4,
+            spellCheck: false,
+            disabled: writable !== true,
+            placeholder: t('config.hostsPlaceholder'),
+            value: draft.hostsText,
+            onChange: (event) => setDraft({ ...draft, hostsText: event.target.value }),
+          }),
+          React.createElement('span', { style: configStyles.hint }, t('config.hostsHint')),
+        ),
+      )
+    }
+
     /**
      * The `plugins.row.config` page: a summary line and the staged form.
      * @param props - `{ view, form, t }` from the Plugins page.
@@ -1361,6 +1522,7 @@ window.__ModuleLoader__.load({
     function ConfigPage(props) {
       if (props.view === 'summary') return props.t('config.summary')
       if (props.form === undefined) return React.createElement('p', { style: configStyles.hint }, props.t('config.unavailable'))
+      if (officialPrimitives !== null) return React.createElement(OfficialConfigEditor, { form: props.form, t: props.t })
       return React.createElement(ConfigEditor, { form: props.form, t: props.t })
     }
 
@@ -1645,7 +1807,7 @@ window.__ModuleLoader__.load({
           locale: UI_NS,
         }, ConfigPage)), 'sidebar-browser-agent: config page')
       },
-      __test: { hostsToText, textToHosts, configOps, draftOf, withTimeout, TIMEOUTS, CONFIG_ROW_KEY, CONFIG_ENTRY_ID },
+      __test: { hostsToText, textToHosts, configOps, draftOf, settingsFormState, withTimeout, TIMEOUTS, CONFIG_ROW_KEY, CONFIG_ENTRY_ID, usesOfficialForm: officialPrimitives !== null },
     }
   },
 })

package/lib/{entry-0.2.6.js → entry-0.2.8.js}

@@ -20,7 +20,7 @@ import z from '../vendor/schemastery/index.mjs'
 export const name = 'dsh-sidebar-browser-agent'
 
 /** Plugin version reported by diagnostics; keep in sync with package.json. */
-export const PLUGIN_VERSION = '0.2.6'
+export const PLUGIN_VERSION = '0.2.8'
 
 /** Services that must exist before this plugin mounts. */
 export const inject = ['webServer', 'connection', 'tools']

package/lib/index.js

@@ -20,7 +20,7 @@ import z from '../vendor/schemastery/index.mjs'
 export const name = 'dsh-sidebar-browser-agent'
 
 /** Plugin version reported by diagnostics; keep in sync with package.json. */
-export const PLUGIN_VERSION = '0.2.6'
+export const PLUGIN_VERSION = '0.2.8'
 
 /** Services that must exist before this plugin mounts. */
 export const inject = ['webServer', 'connection', 'tools']

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "dsh-sidebar-browser-agent",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
+  "icon": "./icon.svg",
   "description": "Native agent control for the DSH right-sidebar browser: manage tabs, and read, click, type, scroll, run JavaScript in and screenshot the real page through its Electron guest.",
   "license": "MIT",
   "repository": {
@@ -19,7 +20,7 @@
     "electron-webview"
   ],
   "exports": {
-    ".": "./lib/entry-0.2.6.js",
+    ".": "./lib/entry-0.2.8.js",
     "./client": "./lib/client.js",
     "./locale/*.json": "./locale/*.json",
     "./icon": "./icon.svg"

package/test/client-harness.mjs

@@ -574,6 +574,20 @@ async function main() {
     && pageNodes.filter((node) => node.type === 'input' && node.props.type === 'checkbox').length === 3
     && pageNodes.some((node) => node.type === 'textarea'), pageNodes.map((node) => node.type).join(','))
 
+  // --- official settings-form projection ---
+  check('official form flag is reported', testHook.usesOfficialForm === false, testHook.usesOfficialForm)
+  const readyModel = testHook.settingsFormState({ status: 'ready', writable: true, value: {} }, true, false, false)
+  check('settings form state projects a dirty editable form',
+    readyModel.available === true && readyModel.writable === true && readyModel.dirty === true
+    && readyModel.invalid === false && readyModel.saving === false && readyModel.failed === false, JSON.stringify(readyModel))
+  const cleanModel = testHook.settingsFormState({ status: 'ready', writable: true, value: {} }, false, true, true)
+  check('settings form state projects saving and failure',
+    cleanModel.dirty === false && cleanModel.saving === true && cleanModel.failed === true, JSON.stringify(cleanModel))
+  const readOnlyModel = testHook.settingsFormState({ status: 'ready', writable: false, value: {} }, false, false, false)
+  check('settings form state projects read-only', readOnlyModel.writable === false && readOnlyModel.available === true, JSON.stringify(readOnlyModel))
+  const unavailableModel = testHook.settingsFormState({ status: 'loading' }, false, false, false)
+  check('settings form state projects unavailable', unavailableModel.available === false && unavailableModel.dirty === false && unavailableModel.writable === false, JSON.stringify(unavailableModel))
+
   // --- tab management ---
   const open = await send({ id: 'o1', action: 'open', sessionId: 'session-1', url: 'https://example.test/new' })
   check('open result', open.ok === true && open.value.tabId === 'tab-2' && open.value.url === 'https://example.test/new', open.value)

package/test/host-harness.mjs

@@ -370,6 +370,14 @@ async function main() {
   // --- version consistency and the versioned Host entry ---
   check('package version matches host constant', packageJson.version === PLUGIN_VERSION, `${packageJson.version} vs ${PLUGIN_VERSION}`)
   check('client version matches package', clientSource.includes(`PLUGIN_VERSION = '${packageJson.version}'`), packageJson.version)
+  const iconReference = packageJson.icon
+  check('package declares a relative icon', typeof iconReference === 'string' && iconReference.startsWith('./') && !iconReference.includes('..'), iconReference)
+  const iconFile = typeof iconReference === 'string' ? path.resolve(here, '..', iconReference) : ''
+  check('declared icon exists', iconFile !== '' && fs.existsSync(iconFile), iconFile)
+  const iconSource = iconFile !== '' && fs.existsSync(iconFile) ? fs.readFileSync(iconFile, 'utf8') : ''
+  check('declared icon is a 36x36 svg', iconSource.startsWith('<svg') && iconSource.includes('viewBox="0 0 36 36"'), iconSource.slice(0, 60))
+  check('declared icon ships with the package', Array.isArray(packageJson.files) && packageJson.files.includes('icon.svg'), JSON.stringify(packageJson.files))
+
   const expectedEntry = `./lib/entry-${packageJson.version}.js`
   check('package entry is versioned', packageJson.exports?.['.'] === expectedEntry, packageJson.exports?.['.'])
   const entryFile = path.join(here, '..', 'lib', `entry-${packageJson.version}.js`)