♻️ refactor(client): 浏览器半拆成 src 模块，client.js 改由构建产出

src/client/ui/ConfigSection.js

@@ -0,0 +1,98 @@
+/**
+ * This plugin's configuration, rendered on its own page in the plugin
+ * manager (`plugins.bundle.config`, keyed by this package's name).
+ *
+ * The owner asks for two views: `summary` (a one-liner that stands in for the
+ * row's description) and `page` (the whole form). Everything visible here
+ * belongs to this package, including the platform-specific permission hint.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/ConfigSection
+ */
+
+import * as React from 'react'
+import { KINDS } from '../constants.js'
+import { windowIsAway } from '../platform.js'
+import { KindRow } from './KindRow.js'
+import { seatTranslator, useOwnStore } from './hooks.js'
+import { CSS } from './styles.js'
+
+const h = React.createElement
+
+export function ConfigSection(props) {
+  const snapshot = useOwnStore(props.store)
+  const tr = seatTranslator(props, props.fallbackT)
+  if (props.view === 'summary') return h(React.Fragment, null, tr('settings.description'))
+  const permission = snapshot.permission
+  const supported = permission !== 'unsupported'
+  const failed = permission === 'denied' || snapshot.promptError !== ''
+  const statusKey = permission === 'granted'
+    ? 'settings.permission.granted'
+    : permission === 'denied'
+      ? 'settings.permission.denied'
+      : supported
+        ? 'settings.permission.default'
+        : 'settings.permission.unsupported'
+  const permissionText = snapshot.promptError === ''
+    ? `${tr(statusKey)}${permission === 'denied' || !supported ? ` · ${tr(`settings.permission.hint.${props.platform}`)}` : ''}`
+    : snapshot.promptError
+  const health = snapshot.health
+  const healthText = health.state === 'watching'
+    ? tr('settings.health.watching')
+    : health.state === 'noHooks'
+      ? tr('settings.health.noHooks')
+      : health.state === 'error'
+        ? tr('settings.health.error', { message: health.message })
+        : tr('settings.health.starting')
+  const healthFailed = health.state !== 'watching' && health.state !== 'starting'
+  return h(React.Fragment, null,
+    h('style', null, CSS),
+    h('div', { className: 'dsn-sections' },
+      // The page header already shows this bundle's title and description, so
+      // this section opens with what the header cannot say: how alerts are
+      // carried, and what this form changes.
+      h('section', { className: 'dsn-section' },
+        h('p', { className: 'dsn-section-desc' }, tr('config.intro'))),
+      h('section', { className: 'dsn-section' },
+        h('h3', { className: 'dsn-section-title' }, tr('config.section.kinds')),
+        KINDS.map((kind) => h(KindRow, {
+          key: kind,
+          label: tr(`settings.kind.${kind}`),
+          checked: snapshot.kinds[kind] === true,
+          disabled: false,
+          onToggle: () => props.setKind(kind, snapshot.kinds[kind] !== true),
+        })),
+        h('p', { className: 'dsn-section-desc' }, tr('config.saveNote'))),
+      h('section', { className: 'dsn-section' },
+        h('h3', { className: 'dsn-section-title' }, tr('config.section.permission')),
+        h('div', { className: 'dsn-row' },
+          h('div', { className: 'dsn-row-text' },
+            h('p', {
+              className: `dsn-status${failed ? ' dsn-status-error' : ''}`,
+              role: failed ? 'alert' : 'status',
+            }, permissionText)),
+          h('button', {
+            type: 'button',
+            className: 'dsn-button',
+            disabled: !supported,
+            onClick: permission === 'granted' ? props.testSystem : props.ask,
+          }, tr(!supported
+            ? 'settings.action.unsupported'
+            : permission === 'granted' ? 'settings.action.testSystem' : 'settings.action.allow'))),
+        h('p', { className: 'dsn-section-desc' }, tr('config.testHint'))),
+      h('section', { className: 'dsn-section' },
+        h('h3', { className: 'dsn-section-title' }, tr('config.section.status')),
+        h('div', { className: 'dsn-row' },
+          h('div', { className: 'dsn-row-text' },
+            h('p', { className: 'dsn-status' }, `${tr('config.diag.window')}: ${tr(windowIsAway() ? 'config.diag.away' : 'config.diag.inFront')}`),
+            h('p', {
+              className: `dsn-status${healthFailed ? ' dsn-status-error' : ''}`,
+              role: healthFailed ? 'alert' : 'status',
+            }, healthText),
+            h('p', { className: 'dsn-status' }, props.copy.describeDelivery(snapshot.lastDelivery, tr)),
+            h('p', { className: 'dsn-status' }, props.copy.describeReplay(props.replayCount(), tr))),
+          h('button', {
+            type: 'button',
+            className: 'dsn-button',
+            onClick: props.testAny,
+          }, tr('settings.action.testAny'))))))
+}

src/client/ui/KindRow.js

@@ -0,0 +1,25 @@
+/**
+ * One trigger switch row: the label says which notification it governs and
+ * the switch is the control, so the row never needs a second description.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/KindRow
+ */
+
+import * as React from 'react'
+
+const h = React.createElement
+
+export function KindRow(props) {
+  return h('div', { className: 'dsn-row' },
+    h('div', { className: 'dsn-row-text' },
+      h('div', { className: 'dsn-row-title' }, props.label)),
+    h('button', {
+      type: 'button',
+      role: 'switch',
+      className: 'dsn-switch',
+      'aria-checked': props.checked,
+      'aria-label': props.label,
+      disabled: props.disabled,
+      onClick: props.onToggle,
+    }, h('span', { className: 'dsn-thumb' })))
+}

src/client/ui/NotifyObserver.js

@@ -0,0 +1,42 @@
+/**
+ * The resident observer: one invisible entry in a root-scope slot, which is
+ * how a plugin reaches the session hooks without occupying visible UI. It
+ * renders `null`, and any failure in its own derivation is contained here so
+ * a slot entry can never crash.
+ *
+ * It subscribes to the window state only so a foreground/background change
+ * re-derives promptly; the delivery itself re-reads that state, so a missed
+ * event can no longer pick the wrong channel.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/NotifyObserver
+ */
+
+import * as React from 'react'
+import { text } from '../core/log.js'
+import { useWindowState } from './hooks.js'
+
+export function NotifyObserver(props) {
+  useWindowState()
+  const useSessions = props.useSessions
+  const useSessionStatus = props.useSessionStatus
+  const select = React.useCallback((snapshot) => snapshot, [])
+  const list = typeof useSessions === 'function' ? useSessions(select) : undefined
+  const status = typeof useSessionStatus === 'function' ? useSessionStatus(select) : undefined
+  React.useEffect(() => {
+    try {
+      if (typeof props.useSessions !== 'function' || typeof props.useSessionStatus !== 'function') {
+        props.observation.reportHealth({ state: 'noHooks', message: '' })
+        return
+      }
+      if (list === undefined || status === undefined) {
+        props.observation.reportHealth({ state: 'starting', message: '' })
+        return
+      }
+      props.observation.observe(list, status)
+      props.observation.reportHealth({ state: 'watching', message: '' })
+    } catch (error) {
+      props.observation.reportHealth({ state: 'error', message: text(error) })
+    }
+  })
+  return null
+}

src/client/ui/ToastLayer.js

@@ -0,0 +1,62 @@
+/**
+ * The light popup stack: the frame-wide overlay entry this package owns.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/ToastLayer
+ */
+
+import * as React from 'react'
+import { KindIcon, CloseIcon } from './icons.js'
+import { seatTranslator, useOwnStore } from './hooks.js'
+import { CSS } from './styles.js'
+
+const h = React.createElement
+
+export function ToastLayer(props) {
+  const snapshot = useOwnStore(props.store)
+  const toasts = snapshot.toasts
+  const tr = seatTranslator(props, props.fallbackT)
+  React.useEffect(() => {
+    if (toasts.length === 0) return undefined
+    const onKeyDown = (event) => {
+      if (event.key !== 'Escape' || event.defaultPrevented) return
+      const top = toasts[0]
+      if (top === undefined) return
+      event.preventDefault()
+      props.dismiss(top.id)
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [toasts, props])
+  if (toasts.length === 0) return null
+  return h(React.Fragment, null,
+    h('style', null, CSS),
+    h('div', { className: 'dsn-stack', role: 'region', 'aria-live': 'polite' },
+      toasts.map((toast) => h('div', {
+        key: toast.id,
+        className: 'dsn-toast',
+        role: toast.kind === 'completion' ? 'status' : 'alert',
+        onMouseEnter: () => props.hold(toast.id),
+        onMouseLeave: () => props.arm(toast.id),
+      },
+      h('span', { className: `dsn-toast-icon is-${toast.kind}` }, h(KindIcon, { kind: toast.kind, size: 16 })),
+      h('div', { className: 'dsn-toast-text' },
+        h('div', { className: 'dsn-toast-title' }, toast.title),
+        h('div', { className: 'dsn-toast-desc' }, toast.body)),
+      h('div', { className: 'dsn-toast-actions' },
+        h('button', {
+          type: 'button',
+          className: 'dsn-toast-action',
+          onClick: () => {
+            props.dismiss(toast.id)
+            props.open(toast.sessionId)
+          },
+        }, tr('toast.view')),
+        h('button', {
+          type: 'button',
+          className: 'dsn-toast-close',
+          'aria-label': tr('toast.dismiss'),
+          onClick: () => props.dismiss(toast.id),
+        }, h(CloseIcon, { size: 14 })))))))
+}

src/client/ui/hooks.js

@@ -0,0 +1,49 @@
+/**
+ * The React seams the components share: two subscriptions this plugin needs
+ * beyond the ones the slot owner already provides, plus the seat rule for
+ * translation.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/hooks
+ */
+
+import * as React from 'react'
+import { windowIsAway } from '../platform.js'
+
+/** Subscribe to this plugin's own store from inside a component. */
+export function useOwnStore(source) {
+  return React.useSyncExternalStore(source.subscribe, source.getSnapshot, source.getSnapshot)
+}
+
+/**
+ * Subscribe to every browser signal that says whether the app is visible:
+ * the window's focus events and the document's visibility change. The value
+ * itself is a boolean, so the observer re-renders once per transition.
+ */
+export function useWindowState() {
+  const subscribe = React.useCallback((listener) => {
+    try {
+      window.addEventListener('focus', listener)
+      window.addEventListener('blur', listener)
+      document.addEventListener('visibilitychange', listener)
+    } catch {
+      return () => {}
+    }
+    return () => {
+      window.removeEventListener('focus', listener)
+      window.removeEventListener('blur', listener)
+      document.removeEventListener('visibilitychange', listener)
+    }
+  }, [])
+  return React.useSyncExternalStore(subscribe, () => !windowIsAway(), () => true)
+}
+
+/**
+ * Every component translates through this: the slot's own seat when the owner
+ * supplies one, else this package's own translator.
+ * @param props - the slot entry's props, which carry the owner's `t` when it has one.
+ * @param fallback - the plugin's own translator, used when the seat has none.
+ * @returns the translate function this render should use.
+ */
+export function seatTranslator(props, fallback) {
+  return typeof props.t === 'function' ? props.t : fallback
+}

src/client/ui/icons.js

@@ -0,0 +1,72 @@
+/**
+ * This bundle's own artwork, drawn like the shipped outline set.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/icons
+ */
+
+import * as React from 'react'
+
+const h = React.createElement
+
+/** Bell glyph: used for a finished conversation. */
+export function BellIcon({ size = 16 }) {
+  return h('svg', {
+    width: size, height: size, viewBox: '0 0 16 16', fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg', 'aria-hidden': true,
+  },
+  h('path', {
+    d: 'M8 2.35C5.7 2.35 3.83 4.22 3.83 6.52V9.02L3.06 11.1C2.99 11.29 3.13 11.48 3.33 11.48H12.67C12.87 11.48 13.01 11.29 12.94 11.1L12.17 9.02V6.52C12.17 4.22 10.3 2.35 8 2.35Z',
+    stroke: 'currentColor', strokeWidth: 1.2, strokeLinejoin: 'round',
+  }),
+  h('path', {
+    d: 'M6.3 12.75C6.52 13.66 7.2 14.28 8 14.28C8.8 14.28 9.48 13.66 9.7 12.75',
+    stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round',
+  }))
+}
+
+/** Shield glyph for an approval request. */
+export function ShieldIcon({ size = 16 }) {
+  return h('svg', {
+    width: size, height: size, viewBox: '0 0 16 16', fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg', 'aria-hidden': true,
+  },
+  h('path', {
+    d: 'M8 1.9 13.1 3.7V7.9C13.1 11 11 13.3 8 14.2C5 13.3 2.9 11 2.9 7.9V3.7L8 1.9Z',
+    stroke: 'currentColor', strokeWidth: 1.2, strokeLinejoin: 'round',
+  }),
+  h('path', {
+    d: 'M5.9 8.05L7.35 9.5L10.15 6.6',
+    stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round', strokeLinejoin: 'round',
+  }))
+}
+
+/** Question glyph for a pending question or plan review. */
+export function QuestionIcon({ size = 16 }) {
+  return h('svg', {
+    width: size, height: size, viewBox: '0 0 16 16', fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg', 'aria-hidden': true,
+  },
+  h('circle', { cx: 8, cy: 8, r: 6.15, stroke: 'currentColor', strokeWidth: 1.2 }),
+  h('path', {
+    d: 'M6.35 6.35C6.35 5.44 7.09 4.7 8 4.7C8.91 4.7 9.65 5.44 9.65 6.35C9.65 7.75 8 7.7 8 9.15',
+    stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round',
+  }),
+  h('circle', { cx: 8, cy: 11.3, r: 0.85, fill: 'currentColor' }))
+}
+
+/** Close glyph, matching the primitives' own stroke weight and geometry. */
+export function CloseIcon({ size = 12 }) {
+  return h('svg', {
+    width: size, height: size, viewBox: '0 0 16 16', fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg', 'aria-hidden': true,
+  },
+  h('path', { d: 'M2.5 2.5L13.5 13.5', stroke: 'currentColor', strokeWidth: 1.4 }),
+  h('path', { d: 'M13.5 2.5L2.5 13.5', stroke: 'currentColor', strokeWidth: 1.4 }))
+}
+
+/** Select the per-trigger glyph. */
+export function KindIcon({ kind, size }) {
+  if (kind === 'approval') return h(ShieldIcon, { size })
+  if (kind === 'question') return h(QuestionIcon, { size })
+  return h(BellIcon, { size })
+}

src/client/ui/styles.js

@@ -0,0 +1,59 @@
+/**
+ * Every style declaration this package owns.
+ *
+ * The popup copies the shipped toast surface (a fixed entry in the frame-wide
+ * overlay, the `--dsw-alias-toast-bg` / `--dsw-alias-toast-label` pair,
+ * `--dsw-radius-lg`, `--dsw-shadow-lv3`) and adds a title line above the text;
+ * the switch copies `Switch.module.css` behavior and proportion; the
+ * configuration sections follow the Plugin Manager page's own section rhythm
+ * (a column, 32px apart). Class names are renamed under `dsn-`; only the popup
+ * glyphs carry their own artwork colors.
+ *
+ * A plugin must not import a Harness Client package, so the declarations are
+ * this package's own text and reference theme tokens only.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/styles
+ */
+
+export const CSS = `
+.dsn-stack{position:fixed;top:40px;right:24px;z-index:1100;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
+@media (max-width:520px){.dsn-stack{right:12px}}
+.dsn-toast{box-sizing:border-box;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:min(420px,calc(100vw - 48px));padding:12px 12px 12px 16px;border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-toast-bg);color:var(--dsw-alias-toast-label);font-size:14px;line-height:22px;box-shadow:var(--dsw-shadow-lv3);animation:dsn-toast-in 160ms ease-out}
+@keyframes dsn-toast-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
+@media (prefers-reduced-motion: reduce){.dsn-toast{animation:none}}
+.dsn-toast-icon{display:grid;place-items:center;flex:none;height:22px;color:var(--dsw-alias-state-warn-label)}
+.dsn-toast-icon.is-completion{color:var(--dsw-alias-state-success-primary)}
+.dsn-toast-icon.is-question{color:var(--dsw-alias-brand-primary)}
+.dsn-toast-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.dsn-toast-title{font-weight:500;font-size:14px;line-height:22px}
+.dsn-toast-desc{color:var(--dsw-alias-toast-label);opacity:.8;font-size:13px;line-height:20px;overflow-wrap:break-word}
+.dsn-toast-actions{display:flex;align-items:center;gap:2px;flex:none}
+.dsn-toast-action{display:inline-flex;align-items:center;height:28px;padding:0 8px;border:0;border-radius:var(--dsw-radius-sm);background:none;color:var(--dsw-static-deepseek-400);font:inherit;font-size:13px;line-height:20px;cursor:pointer}
+.dsn-toast-action:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dsn-toast-action:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsn-toast-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-toast-label);opacity:.8;cursor:pointer}
+.dsn-toast-close:hover{background:var(--dsw-alias-interactive-bg-hover);opacity:1}
+.dsn-toast-close:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsn-sections{display:flex;flex-direction:column;gap:24px}
+.dsn-section{display:flex;flex-direction:column;gap:10px}
+.dsn-section-title{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
+.dsn-section-desc{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.dsn-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.dsn-row:last-child{border-bottom:0}
+.dsn-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dsn-row-title{color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.dsn-row-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.dsn-status{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.dsn-status-error{color:var(--dsw-alias-state-error-primary)}
+.dsn-switch{box-sizing:border-box;position:relative;flex:0 0 auto;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--dsw-alias-border-l3);cursor:pointer}
+.dsn-switch[aria-checked='true']{background:var(--dsw-alias-brand-primary)}
+.dsn-switch:disabled{cursor:default;opacity:.5}
+.dsn-switch:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsn-thumb{display:block;width:16px;height:16px;border-radius:50%;background:var(--dsw-alias-label-primary-foreground);transition:transform 120ms ease}
+.dsn-switch[aria-checked='false'] .dsn-thumb{background:var(--dsw-alias-switch-thumb)}
+.dsn-switch[aria-checked='true'] .dsn-thumb{transform:translateX(16px)}
+.dsn-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:0 14px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);cursor:pointer;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);background:transparent;flex:none}
+.dsn-button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.dsn-button:disabled{cursor:not-allowed;opacity:.4}
+.dsn-button:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+`