dsh-sidebar-browser-agent 0.2.7 → 0.2.9

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.2.9
+
+- Polished the official-style plugin page rhythm: field/row spacing, tertiary
+  12px hints, the same input surface and radius the built-in settings pages
+  use, and the shared form footer as the only save action.
+
+## 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

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.7'
+    const PLUGIN_VERSION = '0.2.9'
     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,53 @@ window.__ModuleLoader__.load({
         cursor: 'pointer',
         font: 'inherit',
       },
+      // --- official-style settings page (shared SettingsForm + Switch) ---
+      // Mirrors the built-in settings page rhythm: the shared form only stacks
+      // children, so each block below brings its own 12px vertical padding, the
+      // same scale the official fields and rows use.
+      formBody: { display: 'flex', flexDirection: 'column' },
+      noticeOfficial: {
+        margin: '0 0 4px',
+        color: 'var(--dsw-alias-label-secondary)',
+        fontSize: '13px',
+        lineHeight: 1.5,
+      },
+      switchList: { display: 'flex', flexDirection: 'column', padding: '12px 0' },
+      switchRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        minHeight: '40px',
+        padding: '8px 0',
+        borderBottom: '0.5px solid var(--dsw-alias-border-l2)',
+      },
+      switchRowLast: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        minHeight: '40px',
+        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: 1.5, fontWeight: 500 },
+      switchHint: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px', lineHeight: 1.5 },
+      field: { display: 'flex', flexDirection: 'column', gap: '6px', padding: '12px 0' },
+      fieldLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: 1.5, fontWeight: 500 },
+      fieldHint: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px', lineHeight: 1.5 },
+      textareaOfficial: {
+        boxSizing: 'border-box',
+        width: '100%',
+        minHeight: '96px',
+        color: 'var(--dsw-alias-label-primary)',
+        background: 'var(--dsw-alias-bg-layer-3)',
+        border: '0.5px solid var(--dsw-alias-border-l4)',
+        borderRadius: 'var(--dsw-radius-md, 8px)',
+        font: 'inherit',
+        fontSize: '13px',
+        lineHeight: 1.5,
+        padding: '8px 12px',
+        resize: 'vertical',
+      },
     }
 
     /**
@@ -1322,7 +1389,7 @@ window.__ModuleLoader__.load({
         switchRow(t, { label: 'config.enabled', hint: 'config.enabledHint', checked: draft.enabled, disabled: readOnly, onChange: (next) => setDraft({ ...draft, enabled: next }) }),
         React.createElement('div', { style: configStyles.field },
           React.createElement('span', { style: configStyles.checkLabel }, t('config.hosts')),
-          React.createElement('span', { style: configStyles.hint }, t('config.hostsHint')),
+          React.createElement('span', { style: configStyles.fieldHint }, t('config.hostsHint')),
           React.createElement('textarea', {
             style: configStyles.textarea,
             rows: 4,
@@ -1353,6 +1420,113 @@ 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('div', { style: configStyles.formBody },
+          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.fieldHint }, 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 +1535,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 +1820,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.7.js → entry-0.2.9.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.7'
+export const PLUGIN_VERSION = '0.2.9'
 
 /** 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.7'
+export const PLUGIN_VERSION = '0.2.9'
 
 /** Services that must exist before this plugin mounts. */
 export const inject = ['webServer', 'connection', 'tools']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidebar-browser-agent",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "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.",
@@ -20,7 +20,7 @@
     "electron-webview"
   ],
   "exports": {
-    ".": "./lib/entry-0.2.7.js",
+    ".": "./lib/entry-0.2.9.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)