@dsh-cove/dsh-web-all 0.0.0-stage → 0.4.4

package/src/client/settings/notify.tsx

@@ -0,0 +1,288 @@
+/**
+ * 通知设置页（DSH 0.2）。
+ *
+ * 位置：设置 → 内置插件 的「通知」标签页（官方 `settings.plugins.tab`），只在宿主
+ * 确实提供 `notify` 命名空间时才出现（`configForms.whileServed`，与「飞书」页同一
+ * 套机制）。
+ *
+ * 数据：表单走官方 `SettingsFormModel` + `SettingsForm`（staged 编辑、保存时才落盘、
+ * 写入带 revision 闸门）。凭据字段只写不读：宿主把 appSecret 存进设置文档后不在任何
+ * 应答里回显，所以这里不提供「当前密钥」的展示，也不给它一个假的占位值。
+ */
+import { type ReactNode } from 'react'
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
+import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
+import {
+  Checkbox,
+  SettingsForm,
+  SettingsFormModel,
+  SettingsValueField,
+  settingsNumberField,
+  settingsTextField,
+  type SettingsFieldSpec,
+  type SettingsFieldState,
+  type SettingsFormScope,
+  type SettingsFormShell,
+} from './primitives-0.2.ts'
+import { makeT, type Translate } from '../notify/i18n.ts'
+import { FAMILY_SETTINGS_NAMESPACE, familyNamespaceScope } from './family-scope.ts'
+import css from './settings-shell.module.css'
+import { NOTIFY_FEED_PATH } from '../../core/notify/contract.ts'
+
+/** 条目里通知能力域的子键（host 的 family namespace）。 */
+export const NOTIFY_NAMESPACE = 'notify'
+
+/** 面板编辑的字段子集。 */
+export interface NotifySettings {
+  enabled?: boolean
+  feedLimit?: number
+  feishuEnabled?: boolean
+  feishuAppId?: string
+  feishuAppSecret?: string
+  feishuDomain?: 'feishu' | 'lark'
+  feishuRecipients?: string[]
+  feishuMode?: 'idle' | 'each-turn'
+  feishuOutcomes?: string[]
+}
+
+/** 布尔字段：草稿文本用 'true'/'false'，空草稿表示恢复默认。 */
+function booleanField(field: string): SettingsFieldSpec {
+  return {
+    field,
+    format: value => value === true ? 'true' : value === false ? 'false' : '',
+    parse: (text) => {
+      if (text === 'true') return { kind: 'set', value: true }
+      if (text === 'false') return { kind: 'set', value: false }
+      return text === '' ? { kind: 'clear' } : undefined
+    },
+  }
+}
+
+/**
+ * 字符串列表字段：一行一个，也接受逗号/分号分隔。
+ *
+ * 收件人与结果集合共用同一形状，所以共用同一解析：两者的空值语义都是「恢复默认」，
+ * 而默认由宿主 schema 决定，客户端不复制一份。
+ */
+function listField(field: string): SettingsFieldSpec {
+  return {
+    field,
+    format: value => Array.isArray(value) ? value.join('\n') : '',
+    parse: (text) => {
+      const trimmed = text.trim()
+      if (trimmed === '') return { kind: 'clear' }
+      return { kind: 'set', value: trimmed.split(/[\n,;]+/u).map(item => item.trim()).filter(Boolean) }
+    },
+  }
+}
+
+/** 设置页投影给组件的状态。 */
+interface NotifyCardState extends SettingsFormShell {
+  enabled: SettingsFieldState
+  feedLimit: SettingsFieldState
+  feishuEnabled: SettingsFieldState
+  feishuAppId: SettingsFieldState
+  feishuAppSecret: SettingsFieldState
+  feishuDomain: SettingsFieldState
+  feishuRecipients: SettingsFieldState
+  feishuMode: SettingsFieldState
+  feishuOutcomes: SettingsFieldState
+}
+
+/** 组件读取的 store 面（SnapshotStore 的结构子集）。 */
+interface NotifyCardStore {
+  getSnapshot(): NotifyCardState
+  subscribe(listener: () => void): () => void
+}
+
+/** 页面控制器：把 `notify` 命名空间桥到官方 staged 表单。 */
+export class NotifySettingsController {
+  private readonly form: SettingsFormModel<NotifySettings>
+  private readonly store: NotifyCardStore
+
+  constructor(scope: SettingsFormScope<NotifySettings>) {
+    this.form = new SettingsFormModel<NotifySettings>(scope, [
+      booleanField('enabled'),
+      settingsNumberField('feedLimit'),
+      booleanField('feishuEnabled'),
+      settingsTextField('feishuAppId'),
+      settingsTextField('feishuAppSecret'),
+      settingsTextField('feishuDomain'),
+      listField('feishuRecipients'),
+      settingsTextField('feishuMode'),
+      listField('feishuOutcomes'),
+    ])
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): NotifyCardState {
+    return {
+      ...this.form.shell(),
+      enabled: this.form.field('enabled'),
+      feedLimit: this.form.field('feedLimit'),
+      feishuEnabled: this.form.field('feishuEnabled'),
+      feishuAppId: this.form.field('feishuAppId'),
+      feishuAppSecret: this.form.field('feishuAppSecret'),
+      feishuDomain: this.form.field('feishuDomain'),
+      feishuRecipients: this.form.field('feishuRecipients'),
+      feishuMode: this.form.field('feishuMode'),
+      feishuOutcomes: this.form.field('feishuOutcomes'),
+    }
+  }
+
+  /** 槽注入面：投影 store + 表单动作。 */
+  inject(): Record<string, unknown> {
+    return { hooks: { notifyCard: this.store }, ...this.form.actions() }
+  }
+
+  dispose(): void {
+    this.form.dispose()
+  }
+}
+
+interface NotifyPageProps {
+  view?: 'summary' | 'full'
+  useNotifyCard<T>(select: (state: NotifyCardState) => T): T
+  edit(field: string, text: string): void
+  resetField(field: string): void
+  save(): void
+  discard(): void
+  t: Translate
+}
+
+/** 一个布尔开关行。 */
+function BooleanRow({ id, label, hint, field, state, disabled, edit, resetField, t }: {
+  id: string
+  label: string
+  hint: string
+  field: 'enabled' | 'feishuEnabled'
+  state: NotifyCardState
+  disabled: boolean
+  edit(field: string, text: string): void
+  resetField(field: string): void
+  t: Translate
+}): ReactNode {
+  const cell = state[field]
+  const checked = cell.text === '' ? false : cell.text === 'true'
+  return (
+    <div className={css.row} data-dsh-part="field" data-field={field}>
+      <div className={css.rowHead}>
+        <Checkbox
+          checked={checked}
+          disabled={disabled}
+          label={label}
+          onChange={(next) => { edit(field, next ? 'true' : 'false') }}
+        />
+        {cell.overridden
+          ? <button type="button" className={css.reset} disabled={disabled} onClick={() => { resetField(field) }}>{t('settings.reset')}</button>
+          : null}
+      </div>
+      <p className={css.hint} id={id}>{hint}</p>
+    </div>
+  )
+}
+
+/** 一个文本/数字字段行。 */
+function FieldRow({ id, field, label, hint, state, disabled, numeric, edit, resetField, t }: {
+  id: string
+  field: keyof NotifySettings & string
+  label: string
+  hint: string
+  state: NotifyCardState
+  disabled: boolean
+  numeric?: boolean
+  edit(field: string, text: string): void
+  resetField(field: string): void
+  t: Translate
+}): ReactNode {
+  const cell = state[field as keyof NotifyCardState] as SettingsFieldState
+  return (
+    <SettingsValueField
+      id={id}
+      label={label}
+      hint={hint}
+      overriddenLabel={t('settings.overridden')}
+      resetLabel={t('settings.reset')}
+      invalidLabel={numeric === true ? t('settings.invalidNumber') : t('settings.invalid')}
+      disabled={disabled}
+      numeric={numeric}
+      {...cell}
+      onEdit={(text) => { edit(field, text) }}
+      onReset={() => { resetField(field) }}
+    />
+  )
+}
+
+/** 设置标签页主体。 */
+export function NotifySettingsPage(props: NotifyPageProps): ReactNode {
+  const state = props.useNotifyCard(value => value)
+  if (props.view === 'summary') return props.t('settings.summary')
+  const t = props.t
+  const disabled = !state.writable
+  return (
+    <div className={css.page} data-dsh-plugin="notify" data-dsh-part="settings">
+      <h3 className={css.title}>{t('settings.title')}</h3>
+      <p className={css.intro}>{t('settings.intro')}</p>
+      <SettingsForm
+        labels={{
+          unavailable: t('settings.unavailable'),
+          readOnly: t('settings.readOnly'),
+          saveFailed: t('settings.saveFailed'),
+          save: t('settings.save'),
+          saving: t('settings.saving'),
+        }}
+        state={state}
+        onSave={props.save}
+        onDiscard={props.discard}
+      >
+        <BooleanRow id="notify-enabled-hint" label={t('settings.enabled')} hint={t('settings.enabledHint')} field="enabled" state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feed-limit" field="feedLimit" label={t('settings.feedLimit')} hint={t('settings.feedLimitHint')} state={state} disabled={disabled} numeric edit={props.edit} resetField={props.resetField} t={t}/>
+        <p className={css.hint} data-dsh-part="feed-path">
+          {t('settings.feed')}：<code>{NOTIFY_FEED_PATH}</code>
+          <br/>
+          {t('settings.feedHint')}
+        </p>
+        <BooleanRow id="notify-feishu-enabled-hint" label={t('settings.feishuEnabled')} hint={t('settings.feishuEnabledHint')} field="feishuEnabled" state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feishu-app-id" field="feishuAppId" label={t('settings.feishuAppId')} hint={t('settings.feishuAppIdHint')} state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feishu-app-secret" field="feishuAppSecret" label={t('settings.feishuAppSecret')} hint={t('settings.feishuAppSecretHint')} state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feishu-domain" field="feishuDomain" label={t('settings.feishuDomain')} hint={t('settings.feishuDomainHint')} state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feishu-recipients" field="feishuRecipients" label={t('settings.feishuRecipients')} hint={t('settings.feishuRecipientsHint')} state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feishu-mode" field="feishuMode" label={t('settings.feishuMode')} hint={t('settings.feishuModeHint')} state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+        <FieldRow id="notify-feishu-outcomes" field="feishuOutcomes" label={t('settings.feishuOutcomes')} hint={t('settings.feishuOutcomesHint')} state={state} disabled={disabled} edit={props.edit} resetField={props.resetField} t={t}/>
+      </SettingsForm>
+    </div>
+  )
+}
+
+/** 官方 configForms 服务的结构面（未装载设置界面时整页不注册）。 */
+interface ConfigFormsFace {
+  get(entryId: string): SettingsFormScope<Record<string, unknown>>
+  whileServed(namespaces: readonly string[], register: (served: ReadonlySet<string>) => () => void): () => void
+}
+
+function optionalConfigForms(ctx: ClientContext): ConfigFormsFace | undefined {
+  try { return (ctx.get as unknown as (id: string, strict?: boolean) => unknown)('configForms', false) as ConfigFormsFace | undefined } catch { return undefined }
+}
+
+/** 注册「内置插件 → 通知」标签页；宿主不再提供该命名空间时自动撤下。 */
+export function mountNotifySettings(ctx: ClientContext): () => void {
+  const configForms = optionalConfigForms(ctx)
+  if (configForms === undefined) return () => {}
+  const t = makeT()
+  const controller = new NotifySettingsController(familyNamespaceScope<NotifySettings>(configForms.get(FAMILY_SETTINGS_NAMESPACE), NOTIFY_NAMESPACE))
+  const offPage = configForms.whileServed([FAMILY_SETTINGS_NAMESPACE], () => ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
+    name: 'settings.plugins.tab',
+    id: NOTIFY_NAMESPACE,
+    order: 61,
+    label: () => t('settings.tab'),
+    inject: () => ({ ...controller.inject(), t }),
+  } as never, NotifySettingsPage as never) as unknown as () => void))
+  let disposed = false
+  return () => {
+    if (disposed) return
+    disposed = true
+    offPage()
+    controller.dispose()
+  }
+}

package/src/client/settings/primitives-0.2.ts

@@ -0,0 +1,148 @@
+/**
+ * `@deepseek-ai/dsh-client-ui-primitives` 的 0.2 设置表单原语出口。
+ *
+ * 本仓 node_modules 里的 SDK cohort 仍是 0.1.5-rc.2（类型里没有 0.2 的
+ * `SettingsForm` / `SettingsFormModel` / `Checkbox` 等导出），而运行时由 DSH 0.2
+ * 提供这些成员——与 `*Medium` 图标同一类版本差。这里按 0.2 的 d.ts 声明需要的
+ * 最小面，并按名取运行时值，既不让本地类型滞后挡住实现，也不改动模块本身。
+ */
+import type { ReactElement, ReactNode } from 'react'
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+
+/** 一次字段写入的转换结果。 */
+export type SettingsFieldWrite = { kind: 'set'; value: unknown } | { kind: 'clear' }
+
+/** 字段在存储值与草稿文本之间的转换规则。 */
+export interface SettingsFieldSpec {
+  field: string
+  format(value: unknown): string
+  parse(text: string): SettingsFieldWrite | undefined
+}
+
+/** 单个控件的渲染状态。 */
+export interface SettingsFieldState {
+  /** 控件渲染的草稿文本。 */
+  text: string
+  /** 保存后该字段是否会在用户层留下覆盖。 */
+  overridden: boolean
+  /** 草稿是否是本字段接受的值（不接受时阻止保存）。 */
+  invalid: boolean
+}
+
+/** 每个配置页共享的表单状态。 */
+export interface SettingsFormShell {
+  available: boolean
+  writable: boolean
+  dirty: boolean
+  invalid: boolean
+  saving: boolean
+  failed: boolean
+}
+
+/** 表单动作面（槽注入用）。 */
+export interface SettingsFormActions {
+  edit(field: string, text: string): void
+  resetField(field: string): void
+  save(): void
+  discard(): void
+}
+
+/** 命名空间快照。 */
+export interface SettingsFormScopeSnapshot<T> {
+  status: 'loading' | 'ready' | 'unavailable'
+  value: T | undefined
+  base: unknown
+  user: unknown
+  writable: boolean
+  revision: number | undefined
+}
+
+/** 一个宿主条目/命名空间的读写面（由 `configForms.get` 返回）。 */
+export interface SettingsFormScope<T> {
+  getSnapshot(): SettingsFormScopeSnapshot<T>
+  subscribe(listener: () => void): () => void
+  mutate(ops: readonly SettingsFormPathOp[], expectedRevision?: number): Promise<boolean>
+}
+
+/** 一次 revision 闸门内的路径编辑。 */
+export type SettingsFormPathOp =
+  | { op: 'set'; path: readonly string[]; value: unknown }
+  | { op: 'unset'; path: readonly string[] }
+
+/** staged 表单模型：读侧投影 + 保存时才落盘。 */
+export interface SettingsFormModel<T> {
+  bind<S>(project: () => S): { getSnapshot(): S; subscribe(listener: () => void): () => void }
+  shell(): SettingsFormShell
+  field(field: string): SettingsFieldState
+  actions(): SettingsFormActions
+  save(): Promise<void>
+  dispose(): void
+}
+
+interface SettingsFormModelCtor {
+  new <T>(scope: SettingsFormScope<T>, specs: SettingsFieldSpec[], secrets?: readonly unknown[]): SettingsFormModel<T>
+}
+
+/** 值控件的 props。 */
+export interface SettingsValueFieldProps {
+  id: string
+  label: string
+  hint?: string
+  text: string
+  overridden: boolean
+  invalid: boolean
+  overriddenLabel: string
+  resetLabel: string
+  invalidLabel: string
+  disabled: boolean
+  numeric?: boolean
+  placeholder?: string
+  onEdit(text: string): void
+  onReset(): void
+}
+
+/** 复选框的 props。 */
+export interface CheckboxProps {
+  checked: boolean
+  onChange(next: boolean): void
+  label: string
+  disabled?: boolean
+  title?: string
+  className?: string
+}
+
+/** 表单框架文案。 */
+export interface SettingsFormLabels {
+  unavailable: string
+  readOnly: string
+  saveFailed: string
+  save: string
+  saving: string
+}
+
+/** 表单框架的 props。 */
+export interface SettingsFormProps {
+  labels: SettingsFormLabels
+  state: SettingsFormShell
+  onSave(): void
+  onDiscard(): void
+  children: ReactNode
+}
+
+type Component<P> = (props: P) => ReactElement | null
+
+const table = primitives as unknown as {
+  Checkbox: Component<CheckboxProps>
+  SettingsForm: Component<SettingsFormProps>
+  SettingsFormModel: SettingsFormModelCtor
+  SettingsValueField: Component<SettingsValueFieldProps>
+  settingsTextField(field: string): SettingsFieldSpec
+  settingsNumberField(field: string): SettingsFieldSpec
+}
+
+export const Checkbox = table.Checkbox
+export const SettingsForm = table.SettingsForm
+export const SettingsFormModel = table.SettingsFormModel
+export const SettingsValueField = table.SettingsValueField
+export const settingsTextField = table.settingsTextField
+export const settingsNumberField = table.settingsNumberField

package/src/client/settings/settings-shell.module.css

@@ -0,0 +1,56 @@
+/* 家族设置标签页外壳：只补官方 SettingsForm 之外的页面、开关行与只读说明样式。 */
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+.intro {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 0;
+}
+
+.rowHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.reset {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.reset:disabled {
+  opacity: 0.5;
+  cursor: default;
+}

package/src/client/sidebar/RenderBoundary.tsx

@@ -0,0 +1,17 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+import css from './sidebar.module.css'
+
+/** Contain one native page crash without blanking the official right sidebar. */
+export class RenderBoundary extends Component<{ children?: ReactNode }, { error: string | null }> {
+  state = { error: null as string | null }
+  static getDerivedStateFromError(error: unknown): { error: string } {
+    return { error: error instanceof Error ? error.message : String(error) }
+  }
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    console.error('[dsh-web-all/sidebar] render error:', error, info.componentStack)
+  }
+  render(): ReactNode {
+    if (this.state.error === null) return this.props.children
+    return <div className={css.boundaryError} role="alert" data-dsh-part="boundary"><span>{this.state.error}</span><button type="button" onClick={() => { this.setState({ error: null }) }}>Retry</button></div>
+  }
+}

package/src/client/sidebar/agent-browser.tsx

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { PlaywrightConnectionStatus } from '../../core/playwright-sessions/control.ts'
+import { PLAYWRIGHT_CONTROL_API_PREFIX } from '../../core/playwright-sessions/control.ts'
+import css from './sidebar.module.css'
+
+const EXTENSION_URL = 'https://chromewebstore.google.com/detail/playwright-extension/mmlmfjhmonkocbjadbfplnigmagldckm'
+
+type T = (key: import('./right-pane-i18n.ts').RightPaneLocaleKey) => string
+interface Envelope<TValue> { ok: boolean; value?: TValue; error?: { code?: string; message?: string } }
+
+/** One control-plane failure carrying the HTTP status, so a refused request
+ *  (the host access fence answering 403) reads differently from a connection
+ *  error inside an accepted request. */
+class ControlError extends Error {
+  constructor(message: string, readonly status: number) { super(message); this.name = 'ControlError' }
+}
+
+async function control(path: string, sessionId: string, signal?: AbortSignal): Promise<PlaywrightConnectionStatus> {
+  const response = path === 'status'
+    ? await fetch(`${PLAYWRIGHT_CONTROL_API_PREFIX}/status?sessionId=${encodeURIComponent(sessionId)}`, { cache: 'no-store', credentials: 'same-origin', signal })
+    : await fetch(`${PLAYWRIGHT_CONTROL_API_PREFIX}/${path}`, {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+        signal,
+      })
+  const envelope = await response.json().catch(() => null) as Envelope<PlaywrightConnectionStatus> | null
+  if (!response.ok || envelope === null || !envelope.ok || envelope.value === undefined) {
+    throw new ControlError(envelope?.error?.message ?? `${response.status} ${response.statusText}`, response.status)
+  }
+  return envelope.value
+}
+
+export function AgentBrowserPanel({ sessionId, visible = true, signal, t }: { sessionId?: string; visible?: boolean; signal?: AbortSignal; t: T }) {
+  const [status, setStatus] = useState<PlaywrightConnectionStatus>()
+  const [working, setWorking] = useState(false)
+  const [error, setError] = useState('')
+  const [errorStatus, setErrorStatus] = useState<number>()
+
+  const refresh = useCallback(async (controller?: AbortController) => {
+    if (!sessionId) { setStatus(undefined); return }
+    try {
+      const next = await control('status', sessionId, controller?.signal ?? signal)
+      setStatus(next)
+      setError('')
+      setErrorStatus(undefined)
+    } catch (cause) {
+      if ((cause as { name?: unknown })?.name === 'AbortError') return
+      setError(cause instanceof Error ? cause.message : String(cause))
+      setErrorStatus(cause instanceof ControlError ? cause.status : undefined)
+    }
+  }, [sessionId, signal])
+
+  useEffect(() => {
+    if (!visible || !sessionId) return
+    const abort = new AbortController()
+    void refresh(abort)
+    const timer = setInterval(() => { void refresh(abort) }, status?.state === 'connecting' ? 1_000 : 5_000)
+    const stop = () => abort.abort()
+    signal?.addEventListener('abort', stop, { once: true })
+    return () => { clearInterval(timer); abort.abort(); signal?.removeEventListener('abort', stop) }
+  }, [refresh, sessionId, signal, status?.state, visible])
+
+  const act = async (path: 'connect' | 'disconnect') => {
+    if (!sessionId || working) return
+    setWorking(true); setError(''); setErrorStatus(undefined)
+    if (path === 'connect') setStatus(current => current ? { ...current, state: 'connecting' } : current)
+    try { setStatus(await control(path, sessionId, signal)) }
+    catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+      setErrorStatus(cause instanceof ControlError ? cause.status : undefined)
+      await refresh()
+    }
+    finally { setWorking(false) }
+  }
+
+  const unavailable = status?.mode !== 'extension'
+  const connected = status?.ownedByThisSession && status.state === 'connected'
+  /** A refused control-plane call (403 from the host access fence) is an
+   *  admission problem, not the isolated-browser default. */
+  const denied = errorStatus === 403
+  const message = !sessionId ? t('agentBrowser.noSession')
+    : error !== '' ? (denied ? t('agentBrowser.denied') : t('agentBrowser.error'))
+      : status?.busy ? t('agentBrowser.busy')
+        : unavailable ? t('agentBrowser.notEnabled')
+          : status?.state === 'connecting' ? t('agentBrowser.connecting')
+            : connected ? t('agentBrowser.live')
+              : t('agentBrowser.closed')
+  const failure = error === '' ? status?.errorMessage : denied ? t('agentBrowser.denied') : error
+
+  return <div className={css.agentBrowser} data-dsh-plugin="better-sidebar" data-dsh-part="agent-browser">
+    <header className={css.agentBrowserHeader}>
+      <div>
+        <strong>{t('agentBrowser.title')}</strong>
+        <p>{t('agentBrowser.description')}</p>
+      </div>
+      <span className={css.agentBrowserState} data-state={error !== '' ? 'error' : connected ? 'connected' : status?.state ?? 'disconnected'}>{message}</span>
+    </header>
+    <div className={css.agentBrowserBody}>
+      <div className={css.agentBrowserGraphic} aria-hidden="true"><span/><span/><span/></div>
+      <p>{t('agentBrowser.hint')}</p>
+      {!connected && !unavailable && <p>{t('agentBrowser.installHint')} <a href={EXTENSION_URL} target="_blank" rel="noreferrer">{t('agentBrowser.install')}</a></p>}
+      <p className={css.agentBrowserSecurity}>{t('agentBrowser.security')}</p>
+      {failure !== undefined && failure !== '' && <div className={css.agentBrowserError} role="alert">{failure}</div>}
+    </div>
+    <footer className={css.agentBrowserActions}>
+      <button type="button" onClick={() => void refresh()} disabled={!sessionId || working}>{t('agentBrowser.refresh')}</button>
+      {connected
+        ? <button type="button" className={css.agentBrowserPrimary} onClick={() => void act('disconnect')} disabled={working}>{t('agentBrowser.disconnect')}</button>
+        : <button type="button" className={css.agentBrowserPrimary} onClick={() => void act('connect')} disabled={!sessionId || unavailable || status?.busy || working}>{t('agentBrowser.connect')}</button>}
+    </footer>
+  </div>
+}