dsh-permission-rules 0.4.2 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-permission-rules",
-  "version": "0.4.2",
-  "description": "Declarative Claude Code-style permission rules for DeepSeek Harness: ordered allow/deny/ask rules with tool-name, argument (glob/regex), and workspace-path matching on the tools/pre-execute waterfall, full session-log audit, and HMR rule reload.",
+  "version": "0.5.0",
+  "description": "Declarative Claude Code-style permission rules plus a Codex-style process-level network policy for DeepSeek Harness: ordered allow/deny/ask rules with tool-name, argument (glob/regex), workspace-path, and network-target (domain/ip/port/scheme) matching on the tools/pre-execute waterfall, a built-in local HTTP/CONNECT proxy governing shell subprocess traffic, three network modes mapped onto the official sandbox presets, full session-log audit, HMR rule reload, and a settings page with a rule editor, block counters, and recent interception lists.",
   "private": false,
   "type": "module",
   "main": "./lib/index.js",
@@ -11,6 +11,14 @@
       "types": "./lib/types/index.d.ts",
       "default": "./lib/index.js"
     },
+    "./typert": {
+      "types": "./lib/types/typert.host.d.ts",
+      "default": "./lib/typert.host.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -31,6 +39,15 @@
   "dsh": {
     "bundle": {
       "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ]
     }
   },
   "dshWorkshop": {
@@ -53,11 +70,13 @@
     "permissions": [
       "files:read",
       "files:watch",
+      "files:write",
       "session:append",
-      "network:none"
+      "network:outbound"
     ],
     "compatibility": {
       "dshVersions": [
+        "0.1.0-rc.5",
         "0.1.0-rc.6"
       ]
     },
@@ -82,7 +101,10 @@
     "policy",
     "allow-deny-ask",
     "approval",
-    "safety"
+    "safety",
+    "network",
+    "network-policy",
+    "proxy"
   ],
   "author": "dsh-permission-rules contributors",
   "repository": {
@@ -103,22 +125,32 @@
     "@deepseek-ai/dsh-llm": "0.1.0-rc.6",
     "@deepseek-ai/dsh-session": "0.1.0-rc.6",
     "@deepseek-ai/dsh-tools": "0.1.0-rc.6",
-    "@deepseek-ai/schemastery": "^3.18.0"
+    "@deepseek-ai/dsh-typert-protocol": "0.1.0-rc.6",
+    "@deepseek-ai/schemastery": "^3.18.0",
+    "react": "^18.2.0"
   },
   "dependencies": {
+    "@types/react": "18.3.31",
     "chokidar": "^5.0.0",
     "tsdown": "^0.22.14",
     "typescript": "^5.9.0",
-    "yaml": "^2.8.0"
+    "yaml": "^2.8.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-agent": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-connection": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-locale": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.0-rc.6",
     "@deepseek-ai/dsh-commands": "0.1.0-rc.6",
     "@deepseek-ai/dsh-llm": "0.1.0-rc.6",
     "@deepseek-ai/dsh-session": "0.1.0-rc.6",
     "@deepseek-ai/dsh-subagent": "0.1.0-rc.6",
     "@deepseek-ai/dsh-tools": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-typert-protocol": "0.1.0-rc.6",
     "@deepseek-ai/dsh-user-approval": "0.1.0-rc.6",
     "@deepseek-ai/schemastery": "^3.18.0",
     "@eslint/js": "^10.0.1",
@@ -127,6 +159,8 @@
     "dsh-auto-review": "file:vendor/dsh-auto-review-0.4.0.tgz",
     "eslint": "^10.8.1",
     "globals": "^17.11.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "typescript-eslint": "^8.67.0",
     "vitest": "^3.2.0"
   },

package/src/client/index.ts

@@ -0,0 +1,111 @@
+/**
+ * `dsh-permission-rules`, browser half: mounts the `permissionRules`
+ * Remote contribution, then registers the "Permission Rules" settings
+ * page (`settings.section`, id `permission-rules`) with the network-policy
+ * summary, block counters, the recent interception list, and the rule
+ * editor. All data arrives through the `remote.permissionRules`
+ * namespace — the page issues no other RPC.
+ *
+ * The slot and remote services are accessed structurally (through
+ * `ctx.get`/`ctx.inject`) so this bundle compiles against the published
+ * rc.6 client peers without hard value imports beyond the platform
+ * modules.
+ * @module dsh-permission-rules/client
+ */
+
+import type { Context } from '@deepseek-ai/cordis'
+import type { RemoteResult } from '@deepseek-ai/dsh-typert-protocol'
+import { PERMISSION_RULES_REMOTE } from './remote.ts'
+import { PermissionRulesSection } from './section.ts'
+import type { PermissionRulesSectionInjected } from './section.ts'
+import { en, zh, type PermissionRulesLocaleKey } from './locales.ts'
+import type { PermissionRulesSnapshot, RulesReadResult, RulesReloadResult, RulesSaveResult } from '../wire.ts'
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'settings.permissionRules'
+
+/** Plugin name: matches the package name, the graph row id, and the bundle id. */
+export const name = 'dsh-permission-rules'
+
+/** Services the page reads; `remote.permissionRules` appears once this plugin mounts its contribution. */
+export const inject = ['slots', 'locale', 'remote']
+
+/** The locale registry face (structural; the real `ctx.locale` satisfies it). */
+interface LocaleLike {
+  register(namespace: string, dictionaries: { en: Record<string, string>; zh: Record<string, string> }): void
+  bind(namespace: string): (key: PermissionRulesLocaleKey, vars?: Record<string, string | number>) => string
+}
+
+/** The remote-contribution host face (structural; the real `ctx.remote` satisfies it). */
+interface RemoteLike {
+  $mount(contribution: unknown): Promise<void>
+}
+
+/** The slots registry face (structural; the real `ctx.slots` satisfies it). */
+interface SlotsLike {
+  inject(slot: string, register: () => unknown): void
+  register(options: object, component: unknown): unknown
+}
+
+/**
+ * Browser plugin body: dictionaries, the Remote contribution mount, and
+ * the settings-section registration.
+ * @param ctx - client root context.
+ */
+export async function apply(ctx: Context): Promise<void> {
+  const locale = ctx.get('locale') as LocaleLike | undefined
+  const remote = ctx.get('remote') as RemoteLike | undefined
+  const slots = ctx.get('slots') as SlotsLike | undefined
+  if (locale === undefined || remote === undefined || slots === undefined) return
+
+  ctx.effect(() => {
+    locale.register(NS, { zh, en })
+    return () => {}
+  })
+
+  // $mount registers the 'remote.permissionRules' namespace service and owns
+  // its removal for this fiber's lifetime.
+  await remote.$mount(PERMISSION_RULES_REMOTE)
+
+  ctx.inject(['remote.permissionRules'], (scope) => {
+    const t = locale.bind(NS)
+    const bridge = scope.get('remote.permissionRules') as {
+      networkStatus: () => Promise<RemoteResult<PermissionRulesSnapshot>>
+      rulesRead: (path: string) => Promise<RemoteResult<RulesReadResult>>
+      rulesSave: (path: string, text: string) => Promise<RemoteResult<RulesSaveResult>>
+      reload: () => Promise<RemoteResult<RulesReloadResult>>
+    } | undefined
+    if (bridge === undefined) return
+    const injected = (): PermissionRulesSectionInjected => ({
+      status: async () => {
+        const result = await bridge.networkStatus()
+        if (!result.ok) throw new Error(`networkStatus failed: ${result.error.code}: ${result.error.message}`)
+        return result.value
+      },
+      rulesRead: async (path) => {
+        const result = await bridge.rulesRead(path)
+        if (!result.ok) throw new Error(`rulesRead failed: ${result.error.code}: ${result.error.message}`)
+        return result.value
+      },
+      rulesSave: async (path, text) => {
+        const result = await bridge.rulesSave(path, text)
+        if (!result.ok) throw new Error(`rulesSave failed: ${result.error.code}: ${result.error.message}`)
+        return result.value
+      },
+      reload: async () => {
+        const result = await bridge.reload()
+        if (!result.ok) throw new Error(`reload failed: ${result.error.code}: ${result.error.message}`)
+        return result.value
+      },
+      t,
+    })
+    slots.inject('settings.section', () => slots.register({
+      name: 'settings.section',
+      id: 'permission-rules',
+      order: 20,
+      label: () => t('nav'),
+      locale: NS,
+      inject: injected,
+    }, PermissionRulesSection))
+  })
+}

package/src/client/locales.ts

@@ -0,0 +1,94 @@
+/**
+ * Settings-page copy for `dsh-permission-rules`, `en`/`zh` (the two UI
+ * language codes the harness locale registry accepts today).
+ * @module dsh-permission-rules/client/locales
+ */
+
+export type PermissionRulesLocaleKey =
+  | 'nav'
+  | 'policyTitle'
+  | 'mode'
+  | 'preset'
+  | 'configured'
+  | 'proxy'
+  | 'proxyActive'
+  | 'proxyInactive'
+  | 'proxyDisabled'
+  | 'counters'
+  | 'denied'
+  | 'askBlocked'
+  | 'recentTitle'
+  | 'noBlocks'
+  | 'blockBy'
+  | 'blockDefault'
+  | 'blockUnattributed'
+  | 'editorTitle'
+  | 'editorPath'
+  | 'editorLoad'
+  | 'editorSave'
+  | 'editorReload'
+  | 'editorEmpty'
+  | 'editorSaved'
+  | 'editorFailed'
+  | 'editorUntitled'
+  | 'unknown'
+
+export const en: Record<PermissionRulesLocaleKey, string> = {
+  nav: 'Permission Rules',
+  policyTitle: 'Network policy',
+  mode: 'Mode',
+  preset: 'Sandbox preset',
+  configured: 'Configured',
+  proxy: 'Proxy',
+  proxyActive: 'active on 127.0.0.1:{port}',
+  proxyInactive: 'INACTIVE (bind failed — shell network policy is not enforced)',
+  proxyDisabled: 'network policy disabled',
+  counters: 'Blocks',
+  denied: 'denied',
+  askBlocked: 'ask-blocked',
+  recentTitle: 'Recent blocks',
+  noBlocks: 'No network blocks recorded yet.',
+  blockBy: 'rule {index}',
+  blockDefault: 'mode default',
+  blockUnattributed: 'unattributed',
+  editorTitle: 'Rule editor',
+  editorPath: 'Rule file',
+  editorLoad: 'Load',
+  editorSave: 'Save',
+  editorReload: 'Reload rules',
+  editorEmpty: 'Choose a rule file to edit. The editor only touches rule files the plugin already loads.',
+  editorSaved: 'Saved and reloaded ({reloaded} workspace(s)).',
+  editorFailed: 'Save rejected: {error}',
+  editorUntitled: '(new file)',
+  unknown: 'Unknown error',
+}
+
+export const zh: Record<PermissionRulesLocaleKey, string> = {
+  nav: '权限规则',
+  policyTitle: '网络策略',
+  mode: '模式',
+  preset: '沙箱预设',
+  configured: '显式配置',
+  proxy: '代理',
+  proxyActive: '运行于 127.0.0.1:{port}',
+  proxyInactive: '未激活（绑定失败——shell 网络策略未生效）',
+  proxyDisabled: '网络策略已停用',
+  counters: '拦截',
+  denied: '拒绝',
+  askBlocked: '待审批阻断',
+  recentTitle: '近期拦截',
+  noBlocks: '尚未记录任何网络拦截。',
+  blockBy: '规则 {index}',
+  blockDefault: '模式默认',
+  blockUnattributed: '未归属',
+  editorTitle: '规则编辑器',
+  editorPath: '规则文件',
+  editorLoad: '载入',
+  editorSave: '保存',
+  editorReload: '重载规则',
+  editorEmpty: '选择要编辑的规则文件。编辑器只能读写插件已加载的规则文件。',
+  editorSaved: '已保存并重载（{reloaded} 个工作区）。',
+  editorFailed: '保存被拒绝：{error}',
+  editorUntitled: '（新文件）',
+  unknown: '未知错误',
+}

package/src/client/remote.ts

@@ -0,0 +1,41 @@
+/**
+ * The client-side Remote face of the `permissionRules` namespace: the
+ * hand-written `TypertRemoteContribution` mounted through
+ * `ctx.remote.$mount`, plus the declaration merging that types
+ * `ctx.remote.permissionRules`. The descriptor list is shared with the
+ * host `./typert` manifest (`../wire.ts`), so the two faces can never
+ * drift.
+ * @module dsh-permission-rules/client/remote
+ */
+
+import type { RemoteResult, TypertRemoteContribution } from '@deepseek-ai/dsh-typert-protocol'
+import { PERMISSION_RULES_INVOCATIONS } from '../wire.ts'
+import type { PermissionRulesSnapshot, RulesReadResult, RulesReloadResult, RulesSaveResult } from '../wire.ts'
+
+declare module '@deepseek-ai/dsh-typert-protocol' {
+  interface TypertRemoteNamespace$permissionRules {
+    /** Read the network-policy snapshot (mode, counters, recent blocks, editable rule sources). */
+    networkStatus: () => Promise<RemoteResult<PermissionRulesSnapshot>>
+    /** Read one known rule file for the editor. */
+    rulesRead: (path: string) => Promise<RemoteResult<RulesReadResult>>
+    /** Validate and write one known rule file. */
+    rulesSave: (path: string, text: string) => Promise<RemoteResult<RulesSaveResult>>
+    /** Re-read every cached workspace chain. */
+    reload: () => Promise<RemoteResult<RulesReloadResult>>
+  }
+  interface TypertRemoteMap {
+    'permissionRules/networkStatus': () => Promise<RemoteResult<PermissionRulesSnapshot>>
+    'permissionRules/rulesRead': (path: string) => Promise<RemoteResult<RulesReadResult>>
+    'permissionRules/rulesSave': (path: string, text: string) => Promise<RemoteResult<RulesSaveResult>>
+    'permissionRules/reload': () => Promise<RemoteResult<RulesReloadResult>>
+  }
+  interface TypertRemoteNamespaceMap {
+    permissionRules: TypertRemoteNamespace$permissionRules
+  }
+}
+
+/** The client Remote contribution for the `permissionRules` namespace. */
+export const PERMISSION_RULES_REMOTE = Object.freeze({
+  package: 'dsh-permission-rules',
+  descriptors: PERMISSION_RULES_INVOCATIONS,
+} satisfies TypertRemoteContribution)

package/src/client/section.ts

@@ -0,0 +1,201 @@
+/**
+ * The "Permission Rules" settings page: network-policy summary (mode
+ * mapping, proxy liveness), block counters, the recent interception list
+ * (source tool + target domain), and the rule editor over known rule
+ * sources. All data arrives through the `permissionRules` Remote
+ * namespace; the page holds no state beyond the selected file and the
+ * draft text. Written with `React.createElement` only — the client
+ * bundle is plain JavaScript.
+ * @module dsh-permission-rules/client/section
+ */
+
+import * as React from 'react'
+import type { ReactElement } from 'react'
+import type { PermissionRulesLocaleKey } from './locales.ts'
+import type { PermissionRulesSnapshot, RulesReadResult, RulesReloadResult, RulesSaveResult } from '../wire.ts'
+
+/** Functions the registration injects (wired to the Remote namespace in `./index.ts`). */
+export interface PermissionRulesSectionInjected {
+  /** Read the network-policy snapshot. */
+  status: () => Promise<PermissionRulesSnapshot>
+  /** Read one known rule file. */
+  rulesRead: (path: string) => Promise<RulesReadResult>
+  /** Validate and write one known rule file. */
+  rulesSave: (path: string, text: string) => Promise<RulesSaveResult>
+  /** Re-read every cached workspace chain. */
+  reload: () => Promise<RulesReloadResult>
+  /** The locale-bound translator. */
+  t: T
+}
+
+/** One bound dictionary. */
+export type T = (key: PermissionRulesLocaleKey, vars?: Record<string, string | number>) => string
+
+/** The shell supplies `close`; everything else arrives through the slot injection. */
+export type PermissionRulesSectionProps = PermissionRulesSectionInjected & {
+  close: () => void
+}
+
+/** One select option for the rule-file picker. */
+interface SourceOption {
+  path: string
+  label: string
+}
+
+const HEADER: React.CSSProperties = { fontSize: 14, fontWeight: 700, margin: '16px 0 8px' }
+const ROW: React.CSSProperties = { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }
+const LABEL: React.CSSProperties = { fontSize: 13, color: 'var(--dsh-color-text-secondary, #666)', minWidth: 110 }
+const VALUE: React.CSSProperties = { fontSize: 13 }
+const MONO: React.CSSProperties = { fontFamily: 'var(--dsh-font-mono, monospace)', fontSize: 12 }
+const TEXTAREA: React.CSSProperties = { width: '100%', minHeight: 260, fontFamily: 'var(--dsh-font-mono, monospace)', fontSize: 12, whiteSpace: 'pre', overflow: 'auto' }
+const NOTICE_OK: React.CSSProperties = { fontSize: 13, color: 'var(--dsh-color-success, #1a7f37)' }
+const NOTICE_ERR: React.CSSProperties = { fontSize: 13, color: 'var(--dsh-color-error, #c62828)' }
+const TABLE: React.CSSProperties = { width: '100%', borderCollapse: 'collapse', fontSize: 12 }
+const CELL: React.CSSProperties = { borderBottom: '1px solid var(--dsh-color-border, #ddd)', padding: '4px 6px', textAlign: 'left', verticalAlign: 'top' }
+
+/** The settings section component. */
+export function PermissionRulesSection({ close, t, ...injected }: PermissionRulesSectionProps): ReactElement {
+  void close
+  const [snapshot, setSnapshot] = React.useState<PermissionRulesSnapshot | undefined>(undefined)
+  const [loadError, setLoadError] = React.useState<string | undefined>(undefined)
+  const [sources, setSources] = React.useState<SourceOption[]>([])
+  const [selected, setSelected] = React.useState<string | undefined>(undefined)
+  const [text, setText] = React.useState('')
+  const [dirty, setDirty] = React.useState(false)
+  const [notice, setNotice] = React.useState<{ ok: boolean; text: string } | undefined>(undefined)
+
+  const refresh = React.useCallback(() => {
+    void injected.status().then(next => {
+      setSnapshot(next)
+      setLoadError(undefined)
+      setSources(next.sources.map(source => ({
+        path: source.path,
+        label: source.cwd === null ? source.path : source.path.replace(source.cwd, '.'),
+      })))
+      setSelected(current => current === undefined && next.sources.length > 0 ? next.sources[0]?.path : current)
+    }).catch(error => {
+      setLoadError(error instanceof Error ? error.message : String(error))
+    })
+  }, [injected.status])
+
+  React.useEffect(() => {
+    refresh()
+    const timer = setInterval(refresh, 5000)
+    return () => clearInterval(timer)
+  }, [refresh])
+
+  const loadFile = React.useCallback((path: string) => {
+    setSelected(path)
+    setDirty(false)
+    setNotice(undefined)
+    void injected.rulesRead(path).then(result => {
+      setText(result.error ?? result.text)
+      if (result.error !== null && result.error !== undefined) setNotice({ ok: false, text: result.error })
+    })
+  }, [injected])
+
+  const saveFile = React.useCallback(() => {
+    if (selected === undefined || !dirty) return
+    setNotice(undefined)
+    void injected.rulesSave(selected, text).then(result => {
+      setNotice(result.ok
+        ? { ok: true, text: t('editorSaved', { reloaded: result.reloaded ?? 0 }) }
+        : { ok: false, text: t('editorFailed', { error: result.error ?? t('unknown') }) })
+      if (result.ok) {
+        setDirty(false)
+        refresh()
+      }
+    })
+  }, [injected, selected, text, dirty, t, refresh])
+
+  const reloadAll = React.useCallback(() => {
+    setNotice(undefined)
+    void injected.reload().then(result => {
+      setNotice(result.ok
+        ? { ok: true, text: t('editorSaved', { reloaded: 0 }) }
+        : { ok: false, text: t('editorFailed', { error: result.error ?? t('unknown') }) })
+      refresh()
+    })
+  }, [injected, t, refresh])
+
+  const picker = React.createElement('select', {
+    style: { ...MONO, maxWidth: 420 },
+    value: selected ?? '',
+    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const path = event.target.value
+      if (path !== '') loadFile(path)
+    },
+  }, sources.map(source => React.createElement('option', { key: source.path, value: source.path }, source.label)))
+
+  const children: React.ReactNode[] = []
+
+  // Policy summary.
+  children.push(React.createElement('div', { key: 'policy-title', style: HEADER }, t('policyTitle')))
+  if (snapshot === undefined) {
+    children.push(React.createElement('div', { key: 'loading', style: VALUE }, loadError === undefined ? '…' : loadError))
+  } else {
+    const modeText = `${snapshot.mode}${snapshot.sandboxMode === null ? '' : ` (${t('preset')}: ${snapshot.sandboxMode})`}${snapshot.configuredMode === 'auto' ? '' : ` — ${t('configured')}: ${snapshot.configuredMode}`}`
+    children.push(React.createElement('div', { key: 'mode', style: ROW },
+      React.createElement('span', { style: LABEL }, t('mode')),
+      React.createElement('span', { style: VALUE }, modeText)))
+    const proxyText = snapshot.enabled
+      ? snapshot.proxyActive ? t('proxyActive', { port: snapshot.proxyPort }) : t('proxyInactive')
+      : t('proxyDisabled')
+    children.push(React.createElement('div', { key: 'proxy', style: ROW },
+      React.createElement('span', { style: LABEL }, t('proxy')),
+      React.createElement('span', { style: VALUE }, proxyText)))
+    children.push(React.createElement('div', { key: 'counters', style: ROW },
+      React.createElement('span', { style: LABEL }, t('counters')),
+      React.createElement('span', { style: VALUE }, `${snapshot.denied} ${t('denied')} · ${snapshot.askBlocked} ${t('askBlocked')}`)))
+  }
+
+  // Recent blocks.
+  children.push(React.createElement('div', { key: 'recent-title', style: HEADER }, t('recentTitle')))
+  if (snapshot === undefined || snapshot.recent.length === 0) {
+    children.push(React.createElement('div', { key: 'no-blocks', style: VALUE }, t('noBlocks')))
+  } else {
+    const rows = snapshot.recent.map(block => React.createElement('tr', { key: `${block.time}-${block.domain}` },
+      React.createElement('td', { style: CELL }, new Date(block.time).toLocaleTimeString()),
+      React.createElement('td', { style: CELL }, block.tool + (block.attributed ? '' : ` (${t('blockUnattributed')})`)),
+      React.createElement('td', { style: CELL }, `${block.scheme ?? '?'}://${block.domain}${block.port === null ? '' : `:${block.port}`}`),
+      React.createElement('td', { style: CELL }, block.matched
+        ? t('blockBy', { index: (block.ruleIndex ?? 0) + 1 })
+        : t('blockDefault')),
+      React.createElement('td', { style: CELL }, block.action),
+      React.createElement('td', { style: CELL }, block.reason ?? '')))
+    children.push(React.createElement('table', { key: 'recent-table', style: TABLE },
+      React.createElement('tbody', undefined, rows)))
+  }
+
+  // Rule editor.
+  children.push(React.createElement('div', { key: 'editor-title', style: HEADER }, t('editorTitle')))
+  children.push(React.createElement('div', { key: 'editor-picker', style: ROW },
+    React.createElement('span', { style: LABEL }, t('editorPath')),
+    picker,
+    React.createElement('button', { type: 'button', onClick: () => { if (selected !== undefined) loadFile(selected) } }, t('editorLoad')),
+    React.createElement('button', { type: 'button', onClick: reloadAll }, t('editorReload'))))
+  if (selected === undefined) {
+    children.push(React.createElement('div', { key: 'editor-empty', style: VALUE }, t('editorEmpty')))
+  } else {
+    children.push(React.createElement('textarea', {
+      key: 'editor-text',
+      style: TEXTAREA,
+      value: text,
+      spellCheck: false,
+      onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setText(event.target.value)
+        setDirty(true)
+        setNotice(undefined)
+      },
+    }))
+    children.push(React.createElement('div', { key: 'editor-actions', style: { ...ROW, marginTop: 8 } },
+      React.createElement('button', { type: 'button', disabled: !dirty, onClick: saveFile }, t('editorSave')),
+      dirty === true ? React.createElement('span', { style: VALUE }, '●') : null,
+      notice === undefined ? null : React.createElement('span', {
+        key: 'notice',
+        style: notice.ok ? NOTICE_OK : NOTICE_ERR,
+      }, notice.text)))
+  }
+
+  return React.createElement('div', { style: { padding: '0 4px 24px' } }, ...children)
+}