dsh-runtime-kit 0.2.0 → 0.3.0

package/README.md

@@ -57,6 +57,17 @@ DSH 的工具调用链；沙箱拦截可以做，但**默认关闭**。
 
 细节、`dsh-context` 共存策略与「返回体截断」的方案见 [`docs/GOVERNANCE.md`](docs/GOVERNANCE.md)。
 
+### 页面
+
+插件带一个客户端半（`client.js`），治理状态不用再敲命令看：
+
+- **设置页 → 运行时治理**：总览（工具/模板/工作区/审计条数）、四个开关、沙箱规则、最近 20 条审计流水、注册表内容
+- **侧栏 → 运行时**（装了 better-sidebar 时）：同一套内容，日常查看更顺手
+
+开关改完点保存即刻生效，不需要重启；选择写进 `<stateDir>/governance.json`，下次启动沿用。
+
+页面和命令读的是同一份状态：`runtime_kit_health`、`runtime_kit_audit_logs`、`runtime_kit_config` 看到的结果与页面一致。
+
 ---
 
 ## 🔌 对外契约：Registry（唯一耦合面）

package/client.js

@@ -0,0 +1,522 @@
+/**
+ * dsh-runtime-kit — Client half.
+ *
+ * The page exists because the plugin's abilities used to be reachable only by
+ * typing `runtime_kit_*`. Everything shown here comes from `/runtime-kit/api`,
+ * so the page and the commands never disagree.
+ *
+ * Two surfaces, one component: a Settings section (always available) and a
+ * better-sidebar tab (when that plugin is installed).
+ */
+window.__ModuleLoader__.load({
+  id: 'dsh-runtime-kit',
+  factory(require) {
+    const React = require('react')
+    const h = React.createElement
+    const { useState, useEffect, useCallback } = React
+
+    const isZh = /^zh/i.test((typeof navigator !== 'undefined' && navigator.language) || 'zh')
+    const L = (zh, en) => (isZh ? zh : en)
+
+    const API = '/runtime-kit/api/'
+
+    async function call(method, body) {
+      const res = await fetch(API + method, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify(body ?? {}),
+      })
+      const payload = await res.json().catch(() => null)
+      if (!payload || payload.ok !== true) {
+        const message = payload?.error?.message || `HTTP ${res.status}`
+        throw new Error(message)
+      }
+      return payload.value
+    }
+
+    // ------------------------------------------------------------ styles ---
+    const CSS = `
+.rk-root{max-width:820px;display:flex;flex-direction:column;gap:12px;color:var(--dsw-alias-label-primary,inherit);font-size:13px;line-height:1.5}
+.rk-root,.rk-root *{box-sizing:border-box}
+.rk-hero{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
+.rk-h1{font-size:15px;font-weight:600;letter-spacing:.2px}
+.rk-sub{font-size:12px;color:var(--dsw-alias-label-secondary,#9a9a9a)}
+.rk-card{border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.28));border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
+.rk-card-head{display:flex;align-items:center;gap:8px}
+.rk-card-title{font-size:13px;font-weight:600;flex:1;min-width:0}
+.rk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
+.rk-stat{border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.2));border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
+.rk-stat-k{font-size:11.5px;color:var(--dsw-alias-label-secondary,#9a9a9a)}
+.rk-stat-v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
+.rk-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:7px 0;border-top:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.14))}
+.rk-row:first-child{border-top:0}
+.rk-row-main{display:flex;flex-direction:column;gap:1px;min-width:0}
+.rk-row-t{font-size:12.5px}
+.rk-row-d{font-size:11.5px;color:var(--dsw-alias-label-secondary,#9a9a9a)}
+.rk-badge{font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid currentColor;white-space:nowrap}
+.rk-badge.ok{color:#3fb950}.rk-badge.warn{color:#d29922}.rk-badge.bad{color:#f85149}.rk-badge.muted{color:var(--dsw-alias-label-secondary,#9a9a9a)}
+.rk-btn{height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
+.rk-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.12))}
+.rk-btn:disabled{opacity:.5;cursor:default}
+.rk-btn.primary{border-color:color-mix(in srgb,#4c8dff 55%,transparent);color:var(--dsw-alias-brand-primary,#8ab4ff);background:color-mix(in srgb,#4c8dff 13%,transparent)}
+.rk-seg{display:inline-flex;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));border-radius:8px;overflow:hidden}
+.rk-seg button{height:26px;padding:0 10px;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}
+.rk-seg button.on{background:color-mix(in srgb,#4c8dff 18%,transparent);color:var(--dsw-alias-brand-primary,#7fb0ff)}
+.rk-switch{position:relative;width:34px;height:19px;border-radius:20px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.4));background:transparent;cursor:pointer;flex:0 0 auto;padding:0}
+.rk-switch.on{background:color-mix(in srgb,#4c8dff 45%,transparent);border-color:transparent}
+.rk-switch::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--dsw-alias-label-secondary,#9a9a9a);transition:left .12s}
+.rk-switch.on::after{left:17px;background:#fff}
+.rk-mono{font-family:var(--dsw-font-mono,ui-monospace,Consolas,monospace);font-size:11.5px;color:var(--dsw-alias-label-secondary,#9a9a9a);word-break:break-all}
+.rk-table{width:100%;border-collapse:collapse;font-size:11.5px}
+.rk-table th{text-align:left;font-weight:500;color:var(--dsw-alias-label-secondary,#9a9a9a);padding:4px 6px;border-bottom:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.2));white-space:nowrap}
+.rk-table td{padding:4px 6px;border-bottom:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
+.rk-chips{display:flex;flex-wrap:wrap;gap:5px}
+.rk-chip{font-family:var(--dsw-font-mono,ui-monospace,monospace);font-size:11px;padding:1px 6px;border-radius:6px;background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.12))}
+.rk-empty{font-size:12px;color:var(--dsw-alias-label-secondary,#9a9a9a);padding:2px 0}
+.rk-err{font-size:12px;color:#f85149}
+`
+
+    let cssReady = false
+    function ensureCss() {
+      if (cssReady || typeof document === 'undefined') return
+      cssReady = true
+      const style = document.createElement('style')
+      style.id = 'runtime-kit-style'
+      style.textContent = CSS
+      document.head.appendChild(style)
+    }
+
+    // ------------------------------------------------------------ pieces ---
+
+    function Card({ title, right, children }) {
+      return h(
+        'div',
+        { className: 'rk-card' },
+        h('div', { className: 'rk-card-head' }, h('div', { className: 'rk-card-title' }, title), right || null),
+        children,
+      )
+    }
+
+    function Stat({ label, value, tone }) {
+      return h(
+        'div',
+        { className: 'rk-stat' },
+        h('div', { className: 'rk-stat-k' }, label),
+        h(
+          'div',
+          {
+            className: 'rk-stat-v',
+            style: {
+              ...(tone ? { color: tone } : null),
+              // 字符串值（workspace-write / deny）比数字长，缩小一号才不折行
+              ...(typeof value === 'string' && value.length > 8 ? { fontSize: '14px' } : null),
+            },
+          },
+          String(value ?? '—'),
+        ),
+      )
+    }
+
+    function Switch({ on, onChange, disabled }) {
+      return h('button', {
+        type: 'button',
+        className: `rk-switch${on ? ' on' : ''}`,
+        'aria-pressed': on ? 'true' : 'false',
+        disabled,
+        onClick: () => onChange(!on),
+      })
+    }
+
+    function ToggleRow({ title, desc, on, disabled, onChange }) {
+      return h(
+        'div',
+        { className: 'rk-row' },
+        h(
+          'div',
+          { className: 'rk-row-main' },
+          h('div', { className: 'rk-row-t' }, title),
+          desc ? h('div', { className: 'rk-row-d' }, desc) : null,
+        ),
+        h(Switch, { on, onChange, disabled }),
+      )
+    }
+
+    function toneOf(status) {
+      if (status === 'healthy') return 'ok'
+      if (status === 'degraded') return 'warn'
+      return 'bad'
+    }
+
+    function stamp(iso) {
+      const d = new Date(iso)
+      if (Number.isNaN(d.getTime())) return String(iso || '')
+      const p = (n) => String(n).padStart(2, '0')
+      return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
+    }
+
+    // -------------------------------------------------------------- panel ---
+
+    function RuntimeKitPanel({ initial }) {
+      ensureCss()
+      // `initial` exists for the render tests: SSR runs no effects, so a page
+      // that only fetches would always screenshot as "loading".
+      const [state, setState] = useState(initial || null)
+      const [governance, setGovernance] = useState(initial?.governance || null)
+      const [busy, setBusy] = useState('')
+      const [note, setNote] = useState('')
+      const [error, setError] = useState('')
+
+      const load = useCallback(async () => {
+        setBusy('load')
+        setError('')
+        try {
+          const value = await call('state')
+          setState(value)
+          setGovernance(value.governance)
+        } catch (e) {
+          setError(String(e.message || e))
+        } finally {
+          setBusy('')
+        }
+      }, [])
+
+      useEffect(() => {
+        load()
+      }, [load])
+
+      const save = async () => {
+        setBusy('save')
+        setNote('')
+        setError('')
+        try {
+          const value = await call('governance', { governance })
+          setGovernance(value.governance)
+          setNote(L('已保存，立即生效。', 'Saved. Takes effect immediately.'))
+          await load()
+        } catch (e) {
+          setError(String(e.message || e))
+        } finally {
+          setBusy('')
+        }
+      }
+
+      const dirty = Boolean(
+        state && governance && JSON.stringify(state.governance) !== JSON.stringify(governance),
+      )
+
+      const health = state?.health || {}
+      const audit = state?.audit || []
+      const registry = state?.registry || { tools: [], templates: [], workspaces: [] }
+      const sandbox = state?.sandbox || {}
+
+      return h(
+        'div',
+        { className: 'rk-root' },
+        h(
+          'div',
+          { className: 'rk-hero' },
+          h('div', { className: 'rk-h1' }, L('运行时治理', 'Runtime governance')),
+          h(
+            'span',
+            { className: `rk-badge ${toneOf(health.status)}` },
+            health.status || (busy === 'load' ? L('读取中', 'loading') : L('未知', 'unknown')),
+          ),
+          h('div', { className: 'rk-sub' }, `v${health.version || '—'} · dsh ${health.dshVersion || '—'}`),
+          h('div', { style: { flex: '1' } }),
+          h('button', { className: 'rk-btn', onClick: load, disabled: Boolean(busy) }, L('刷新', 'Refresh')),
+        ),
+
+        error ? h('div', { className: 'rk-err' }, error) : null,
+
+        h(
+          Card,
+          { title: L('总览', 'Overview') },
+          h(
+            'div',
+            { className: 'rk-grid' },
+            h(Stat, { label: L('注册工具', 'Tools'), value: registry.tools.length }),
+            h(Stat, { label: L('快路径模板', 'Templates'), value: registry.templates.length }),
+            h(Stat, { label: L('沙箱工作区', 'Workspaces'), value: registry.workspaces.length }),
+            h(Stat, { label: L('审计条数', 'Audit entries'), value: audit.length }),
+          ),
+          h(
+            'div',
+            { className: 'rk-sub' },
+            L('这些数字来自插件自身注册表，不是推测。', 'Read from the plugin registry, not guessed.'),
+          ),
+        ),
+
+        h(
+          Card,
+          {
+            title: L('治理开关', 'Governance switches'),
+            right: h(
+              'button',
+              { className: 'rk-btn primary', onClick: save, disabled: !dirty || Boolean(busy) },
+              busy === 'save' ? L('保存中', 'Saving') : L('保存', 'Save'),
+            ),
+          },
+          governance
+            ? [
+                h(ToggleRow, {
+                  key: 'enabled',
+                  title: L('总开关', 'Master switch'),
+                  desc: L('关闭后钩子仍在，但每次调用都直接放行', 'Hooks stay registered; every call passes straight through'),
+                  on: governance.enabled,
+                  disabled: Boolean(busy),
+                  onChange: (on) => setGovernance({ ...governance, enabled: on }),
+                }),
+                h(ToggleRow, {
+                  key: 'audit',
+                  title: L('审计', 'Audit'),
+                  desc: L('把每次工具调用写进审计流水（只读）', 'Record every tool call (read-only)'),
+                  on: governance.audit,
+                  disabled: Boolean(busy),
+                  onChange: (on) => setGovernance({ ...governance, audit: on }),
+                }),
+                h(ToggleRow, {
+                  key: 'redaction',
+                  title: L('脱敏', 'Redaction'),
+                  desc: L('返回体里的密钥替换成 [redacted:kind]', 'Replace secrets with [redacted:kind]'),
+                  on: governance.redaction,
+                  disabled: Boolean(busy),
+                  onChange: (on) => setGovernance({ ...governance, redaction: on }),
+                }),
+                h(
+                  'div',
+                  { className: 'rk-row' },
+                  h(
+                    'div',
+                    { className: 'rk-row-main' },
+                    h('div', { className: 'rk-row-t' }, L('提示注入', 'Prompt injection')),
+                    h(
+                      'div',
+                      { className: 'rk-row-d' },
+                      L('检测工具返回里“改变模型行为”的指令', 'Detect instructions inside tool output'),
+                    ),
+                  ),
+                  h(
+                    'div',
+                    { className: 'rk-seg' },
+                    ...[
+                      ['off', L('不检测', 'off')],
+                      ['annotate', L('标注', 'annotate')],
+                      ['block', L('拦截', 'block')],
+                    ].map(([value, label]) =>
+                      h(
+                        'button',
+                        {
+                          key: value,
+                          className: governance.injection === value ? 'on' : '',
+                          onClick: () => setGovernance({ ...governance, injection: value }),
+                        },
+                        label,
+                      ),
+                    ),
+                  ),
+                ),
+                h(ToggleRow, {
+                  key: 'sandbox',
+                  title: L('沙箱拦截', 'Sandbox gate'),
+                  desc: L(
+                    '按文件/命令/网络规则拒绝调用；打开后可以真的挡住操作',
+                    'Deny calls by file/command/network rules; this one can block work',
+                  ),
+                  on: governance.sandbox,
+                  disabled: Boolean(busy),
+                  onChange: (on) => setGovernance({ ...governance, sandbox: on }),
+                }),
+                note ? h('div', { className: 'rk-sub' }, note) : null,
+              ]
+            : h('div', { className: 'rk-empty' }, L('读取中…', 'Loading…')),
+        ),
+
+        h(
+          Card,
+          { title: L('沙箱规则', 'Sandbox rules') },
+          h(
+            'div',
+            { className: 'rk-grid' },
+            h(Stat, { label: L('基线', 'Mode'), value: sandbox.mode || '—' }),
+            h(Stat, { label: L('审批', 'Approval'), value: sandbox.approval || '—' }),
+            h(Stat, { label: L('网络默认', 'Network default'), value: sandbox.networkDefault || '—' }),
+            h(Stat, {
+              label: L('规则数（文件/命令/网络）', 'Rules (file/cmd/net)'),
+              value: `${sandbox.files ?? 0}/${sandbox.commands ?? 0}/${sandbox.network ?? 0}`,
+            }),
+          ),
+          h(
+            'div',
+            { className: 'rk-sub' },
+            `${L('注入防护', 'Injection guard')}: ${sandbox.injectionGuard ? L('开', 'on') : L('关', 'off')} · ${L(
+              '敏感保护',
+              'Sensitive protection',
+            )}: ${sandbox.sensitiveProtection ? L('开', 'on') : L('关', 'off')} · ${L(
+              '工具粒度管控',
+              'Tool control',
+            )}: ${sandbox.toolControl ?? 0}`,
+          ),
+        ),
+
+        h(
+          Card,
+          { title: L('审计流水', 'Audit log') },
+          audit.length
+            ? h(
+                'table',
+                { className: 'rk-table' },
+                h(
+                  'thead',
+                  null,
+                  h(
+                    'tr',
+                    null,
+                    h('th', null, L('时间', 'Time')),
+                    h('th', null, L('工具', 'Tool')),
+                    h('th', null, L('动作', 'Action')),
+                    h('th', null, L('结果', 'Result')),
+                    h('th', null, L('备注', 'Note')),
+                  ),
+                ),
+                h(
+                  'tbody',
+                  null,
+                  audit
+                    .slice(-20)
+                    .reverse()
+                    .map((entry, i) =>
+                      h(
+                        'tr',
+                        { key: `${entry.timestamp}-${i}` },
+                        h('td', { className: 'rk-mono' }, stamp(entry.timestamp)),
+                        h('td', { className: 'rk-mono' }, entry.tool),
+                        h('td', null, entry.action),
+                        h(
+                          'td',
+                          null,
+                          h(
+                            'span',
+                            {
+                              className: `rk-badge ${
+                                entry.result === 'SUCCESS' ? 'ok' : entry.result === 'ASKED' ? 'warn' : 'bad'
+                              }`,
+                            },
+                            entry.result,
+                          ),
+                        ),
+                        h('td', { className: 'rk-mono', title: entry.error || '' }, entry.error || ''),
+                      ),
+                    ),
+                ),
+              )
+            : h('div', { className: 'rk-empty' }, L('还没有调用记录。', 'No calls recorded yet.')),
+        ),
+
+        h(
+          Card,
+          { title: L('注册表', 'Registry') },
+          h('div', { className: 'rk-sub' }, L('工具', 'Tools')),
+          h(
+            'div',
+            { className: 'rk-chips' },
+            ...(registry.tools.length
+              ? registry.tools.map((name) => h('span', { key: name, className: 'rk-chip' }, name))
+              : [h('span', { key: 'none', className: 'rk-empty' }, L('无', 'none'))]),
+          ),
+          h('div', { className: 'rk-sub' }, L('模板', 'Templates')),
+          h(
+            'div',
+            { className: 'rk-chips' },
+            ...(registry.templates.length
+              ? registry.templates.map((name) => h('span', { key: name, className: 'rk-chip' }, name))
+              : [h('span', { key: 'none', className: 'rk-empty' }, L('无', 'none'))]),
+          ),
+          h('div', { className: 'rk-sub' }, L('工作区', 'Workspaces')),
+          h(
+            'div',
+            { className: 'rk-chips' },
+            ...(registry.workspaces.length
+              ? registry.workspaces.map((ws) =>
+                  h('span', { key: ws.profile, className: 'rk-chip' }, `${ws.profile} → ${ws.root}`),
+                )
+              : [h('span', { key: 'none', className: 'rk-empty' }, L('未注册', 'none registered'))]),
+          ),
+        ),
+      )
+    }
+
+    function SettingsSection() {
+      return h('div', { style: { display: 'flex', flexDirection: 'column', gap: '12px' } }, h(RuntimeKitPanel))
+    }
+
+    // Icon: a small shield, drawn inline so the client half stays dependency-free.
+    function Icon({ size = 16 } = {}) {
+      const s = typeof size === 'number' ? size : 16
+      return h(
+        'svg',
+        { width: s, height: s, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': 'true' },
+        h('path', { d: 'M8 1.6 13 3.4v4.2c0 3-2 5.6-5 6.8-3-1.2-5-3.8-5-6.8V3.4L8 1.6Z', stroke: 'currentColor', 'stroke-width': '1.2' }),
+        h('path', { d: 'M6.2 8.1 7.6 9.5l2.4-2.6', stroke: 'currentColor', 'stroke-width': '1.2', 'stroke-linecap': 'round' }),
+      )
+    }
+
+    return {
+      inject: ['slots'],
+      __test: { RuntimeKitPanel, SettingsSection, css: CSS },
+      apply(ctx) {
+        ctx.slots.inject('settings.section', () =>
+          ctx.slots.register(
+            { name: 'settings.section', id: 'runtime-kit', order: 51, label: () => L('运行时治理', 'Runtime governance') },
+            SettingsSection,
+          ),
+        )
+
+        const registerTab = (sidebar) => {
+          if (!sidebar || typeof sidebar.registerTab !== 'function') return false
+          try {
+            sidebar.registerTab({
+              id: 'runtime-kit',
+              title: () => L('运行时', 'Runtime'),
+              description: () => L('上下文治理、沙箱与审计', 'Context governance, sandbox and audit'),
+              icon: Icon,
+              order: 41,
+              single: true,
+              component: RuntimeKitPanel,
+            })
+            return true
+          } catch {
+            return false
+          }
+        }
+
+        let sidebar
+        try {
+          sidebar = typeof ctx.get === 'function' ? ctx.get('betterSidebar') : undefined
+        } catch {
+          sidebar = undefined
+        }
+        if (!sidebar) {
+          try {
+            sidebar = ctx.betterSidebar
+          } catch {
+            sidebar = undefined
+          }
+        }
+        if (!registerTab(sidebar) && typeof ctx.inject === 'function') {
+          try {
+            ctx.inject(['betterSidebar'], (inner) => {
+              try {
+                registerTab(inner.betterSidebar)
+              } catch {
+                /* service absent in that scope */
+              }
+            })
+          } catch {
+            /* no injectable service; the settings page carries the feature */
+          }
+        }
+      },
+    }
+  },
+})

package/dist/dashboard/index.js

@@ -0,0 +1,213 @@
+// ============================================================================
+// Dashboard bridge — the Host half of the page.
+//
+// The plugin's abilities used to be reachable only through `runtime_kit_*`
+// slash commands. This module exposes the same data as one JSON endpoint and
+// lets the client flip the governance switches without a restart.
+//
+// Everything here is read-mostly: the only write is `governance`, and it goes
+// through the same normalizer the startup path uses, then persists to
+// `<stateDir>/governance.json` so a restart keeps the choice.
+// ============================================================================
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { normalizeGovernance } from '../hooks/policy.js';
+const API_PREFIX = '/runtime-kit/api/';
+const ALLOWED_KEYS = ['enabled', 'audit', 'redaction', 'injection', 'sandbox', 'profile'];
+function governancePath(service) {
+    const stateDir = service.getConfig?.()?.stateDir;
+    return stateDir ? join(stateDir, 'governance.json') : undefined;
+}
+async function loadSavedGovernance(service) {
+    const file = governancePath(service);
+    if (!file)
+        return;
+    try {
+        const raw = JSON.parse(await readFile(file, 'utf8'));
+        Object.assign(service.governance ?? {}, normalizeGovernance(raw));
+    }
+    catch {
+        /* first run, or a hand-edited file: keep the startup config */
+    }
+}
+async function saveGovernance(service, governance) {
+    const file = governancePath(service);
+    if (!file)
+        return;
+    await mkdir(dirname(file), { recursive: true });
+    await writeFile(file, `${JSON.stringify(governance, null, 2)}\n`, 'utf8');
+}
+function pickGovernance(input) {
+    const out = {};
+    for (const key of ALLOWED_KEYS) {
+        if (input && Object.prototype.hasOwnProperty.call(input, key))
+            out[key] = input[key];
+    }
+    return out;
+}
+function sandboxSummary(config) {
+    const sandbox = config?.sandbox ?? {};
+    const rules = sandbox.rules ?? {};
+    return {
+        mode: sandbox.mode,
+        approval: sandbox.approval,
+        networkDefault: sandbox.networkDefault,
+        files: (rules.files ?? []).length,
+        commands: (rules.commands ?? []).length,
+        network: (rules.network ?? []).length,
+        toolControl: Object.keys(sandbox.toolControl ?? {}).length,
+        injectionGuard: sandbox.injectionGuard,
+        sensitiveProtection: sandbox.sensitiveProtection,
+    };
+}
+async function buildState(service) {
+    const config = service.getConfig?.() ?? {};
+    const [health, audit] = await Promise.all([
+        service.healthCheck().catch((error) => ({ status: 'unhealthy', error: String(error?.message ?? error) })),
+        service.getAuditLogs({ limit: 20 }).catch(() => []),
+    ]);
+    return {
+        health,
+        governance: normalizeGovernance(service.governance ?? config.governance),
+        sandbox: sandboxSummary(config),
+        context: config.context ?? {},
+        loop: config.loop ?? {},
+        audit,
+        registry: {
+            tools: (service.registry?.listTools?.() ?? []).map((tool) => tool.name),
+            templates: (service.registry?.listTemplates?.() ?? []).map((template) => template.name),
+            workspaces: (service.registry?.listWorkspaces?.() ?? []).map((workspace) => ({
+                profile: workspace.profile,
+                root: workspace.root,
+                trusted: workspace.trusted !== false,
+            })),
+        },
+        metrics: (service.getMetrics?.() ?? []).slice(-10),
+    };
+}
+async function handle(service, method, body) {
+    switch (method) {
+        case 'state':
+            return buildState(service);
+        case 'audit': {
+            const limit = Number(body?.limit) > 0 ? Math.min(200, Number(body.limit)) : 50;
+            return {
+                entries: await service.getAuditLogs({
+                    limit,
+                    ...(typeof body?.tool === 'string' && body.tool ? { tool: body.tool } : {}),
+                }),
+            };
+        }
+        case 'governance': {
+            const merged = normalizeGovernance({ ...(service.governance ?? {}), ...pickGovernance(body?.governance) });
+            // Mutating the object the hooks captured means the change is live; the
+            // `enabled` flag is re-read on every call, so turning it off needs no
+            // re-registration either.
+            Object.assign(service.governance ?? {}, merged);
+            await saveGovernance(service, merged);
+            return { governance: merged };
+        }
+        default:
+            return null;
+    }
+}
+function readBody(req) {
+    return new Promise((resolve, reject) => {
+        let size = 0;
+        const chunks = [];
+        req.on('data', (chunk) => {
+            size += chunk.length;
+            if (size > 256 * 1024) {
+                reject(new Error('request body too large'));
+                req.destroy();
+                return;
+            }
+            chunks.push(chunk);
+        });
+        req.on('end', () => {
+            const text = Buffer.concat(chunks).toString('utf8');
+            if (!text)
+                return resolve({});
+            try {
+                resolve(JSON.parse(text));
+            }
+            catch (error) {
+                reject(new Error(`invalid JSON body: ${error?.message ?? error}`));
+            }
+        });
+        req.on('error', reject);
+    });
+}
+function writeJson(res, status, payload) {
+    if (res.writableEnded)
+        return;
+    res.writeHead(status, { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' });
+    res.end(JSON.stringify(payload));
+}
+/**
+ * Register the route and hydrate the saved switches.
+ *
+ * @returns false when this profile has no `webServer` service (the CLI/headless
+ *          case), so the caller can keep going without a page.
+ */
+export function mountDashboard(ctx, service) {
+    const webServer = (() => {
+        try {
+            return ctx.get?.('webServer') ?? ctx.webServer;
+        }
+        catch {
+            return undefined;
+        }
+    })();
+    if (!webServer || typeof webServer.register !== 'function')
+        return false;
+    const connection = (() => {
+        try {
+            return ctx.get?.('connection') ?? ctx.connection;
+        }
+        catch {
+            return undefined;
+        }
+    })();
+    void loadSavedGovernance(service).catch(() => { });
+    const listener = async (req, res) => {
+        try {
+            if (connection?.requestRejection) {
+                const rejection = connection.requestRejection(req);
+                if (rejection !== undefined)
+                    return writeJson(res, 403, { ok: false, error: { code: 'forbidden' } });
+            }
+            if (req.method !== 'POST')
+                return writeJson(res, 405, { ok: false, error: { code: 'method-error' } });
+            const pathname = new URL(req.url ?? '/', 'http://dsh.internal').pathname;
+            const method = pathname.startsWith(API_PREFIX) ? pathname.slice(API_PREFIX.length) : '';
+            if (!method)
+                return writeJson(res, 404, { ok: false, error: { code: 'not-found' } });
+            const body = await readBody(req);
+            const value = await handle(service, method, body);
+            if (value === null)
+                return writeJson(res, 404, { ok: false, error: { code: 'not-found', message: method } });
+            return writeJson(res, 200, { ok: true, value });
+        }
+        catch (error) {
+            return writeJson(res, 400, {
+                ok: false,
+                error: { code: error?.code ?? 'bad-request', message: String(error?.message ?? error) },
+            });
+        }
+    };
+    const route = { kind: 'prefix', path: '/runtime-kit/api', handler: listener };
+    try {
+        if (typeof ctx.effect === 'function') {
+            ctx.effect(() => webServer.register(route), 'runtime-kit: dashboard routes');
+        }
+        else {
+            webServer.register(route);
+        }
+    }
+    catch (error) {
+        ctx.logger?.warn?.(`[runtime-kit] dashboard route failed: ${String(error)}`);
+        return false;
+    }
+    return true;
+}

package/dist/hooks/index.js

@@ -97,11 +97,15 @@ function audit(service, config, entry) {
  */
 export function installGovernance(ctx, service, raw) {
     const config = normalizeGovernance(raw);
-    if (!config.enabled || typeof ctx?.on !== 'function')
+    // Hooks stay registered even when disabled: every listener re-reads the flag,
+    // so the dashboard can turn governance on and off without a restart.
+    if (typeof ctx?.on !== 'function')
         return config;
     // ---- 只读观察：每次工具调用落一条审计 ----
     ctx.on('tools/result', (exec, result) => {
         try {
+            if (!config.enabled || !config.audit)
+                return;
             audit(service, config, {
                 profile: config.profile,
                 tool: String(exec?.name ?? 'unknown'),
@@ -118,6 +122,8 @@ export function installGovernance(ctx, service, raw) {
     // ---- 改写返回体：脱敏 + 注入标注 ----
     ctx.on('tools/post-execute', async (exec, result, next) => {
         try {
+            if (!config.enabled)
+                return next();
             if (!config.redaction && config.injection === 'off')
                 return next();
             if (result?.isError)
@@ -166,7 +172,7 @@ export function installGovernance(ctx, service, raw) {
     // ---- 调用前拦截：沙箱规则（默认关闭） ----
     ctx.on('tools/pre-execute', async (exec, next) => {
         try {
-            if (!config.sandbox)
+            if (!config.enabled || !config.sandbox)
                 return next();
             const verdict = evaluateCall(exec, service.sandbox, config);
             if (verdict.action === 'allow')

package/dist/index.js

@@ -1120,12 +1120,21 @@ async function apply(ctx, raw = {}) {
   const svc = new RuntimeKitServiceImpl(config);
   ctx.provide('runtimeKit', svc);
 
+  // ---- 治理钩子：审计 / 脱敏 / 注入检测 / 沙箱（全部 fail-open） ----
   // ---- 治理钩子：审计 / 脱敏 / 注入检测 / 沙箱（全部 fail-open） ----
   config.governance = { ...DEFAULT_GOVERNANCE, ...(raw.governance ?? {}) };
   try {
-    installGovernance(ctx, svc, config.governance);
+    svc.governance = installGovernance(ctx, svc, config.governance);
   } catch (error) {
     ctx.logger?.warn?.(`[runtime-kit] governance hooks failed: ${String(error)}`);
+  }
+
+  // ---- 页面：把能力暴露成 HTTP，客户端设置页/侧栏读取 ----
+  try {
+    const { mountDashboard } = await import('./dashboard/index.js');
+    mountDashboard(ctx, svc);
+  } catch (error) {
+    ctx.logger?.warn?.(`[runtime-kit] dashboard failed: ${String(error)}`);
   }
 
   const registerCommands = (commandCtx) => {

package/package.json

@@ -1,6 +1,6 @@
-{
+{
   "name": "dsh-runtime-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "DSH runtime plugin: context governance, fast path, PTC orchestration, sandbox isolation and audit — zero business dependencies",
   "keywords": [
     "dsh",
@@ -23,13 +23,19 @@
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./client": "./client.js",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "tsc",
     "dev": "tsc -w",
     "test": "vitest run",
     "test:smoke": "node test/smoke.mjs",
     "test:governance": "node test/governance.mjs",
-    "prepublishOnly": "npm run test:smoke && npm run test:governance",
+    "test:dashboard": "node test/dashboard.mjs",
+    "prepublishOnly": "npm run test:smoke && npm run test:governance && npm run test:dashboard",
     "lint": "eslint src --ext .ts"
   },
   "devDependencies": {
@@ -50,6 +56,7 @@
     "patch.yml",
     "config.schema.json",
     "test",
+    "client.js",
     "LICENSE"
   ],
   "dsh": {
@@ -59,6 +66,11 @@
       "tools": [],
       "configSchema": "config.schema.json"
     },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": ["@deepseek-ai/dsh-client-ui-settings"]
+    },
     "bundle": {
       "patch": "./patch.yml",
       "rows": [
@@ -76,6 +88,6 @@
     "access": "public"
   }
 }
-
-
-
+
+
+

package/test/dashboard.mjs

@@ -0,0 +1,113 @@
+/**
+ * 页面桥测试：注册路由、读状态、写开关。
+ *
+ *   node test/dashboard.mjs
+ */
+import * as os from 'node:os';
+import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
+
+const mod = await import(new URL('../dist/index.js', import.meta.url).href);
+
+let pass = 0;
+let fail = 0;
+function check(label, ok, detail = '') {
+  if (ok) {
+    pass++;
+    console.log(`  ✔ ${label}`);
+  } else {
+    fail++;
+    console.log(`  ✘ ${label} ${detail}`);
+  }
+}
+
+const tmp = await fs.mkdtemp(path.join(os.tmpdir(), 'rk-dash-'));
+const routes = [];
+const ctx = {
+  provide() {},
+  inject(_names, cb) {
+    cb({ commands: { register: () => () => {} } });
+  },
+  effect(fn) {
+    const out = fn();
+    return typeof out === 'function' ? out : () => {};
+  },
+  on() {},
+  get(name) {
+    if (name === 'webServer') return { register: (route) => (routes.push(route), () => {}) };
+    if (name === 'connection') return { requestRejection: () => undefined };
+    return undefined;
+  },
+  logger: { warn: () => {} },
+};
+
+await mod.apply(ctx, { logDir: path.join(tmp, 'logs'), stateDir: path.join(tmp, 'state') });
+const route = routes.find((r) => r.path === '/runtime-kit/api');
+check('注册了 /runtime-kit/api 前缀路由', Boolean(route));
+check('路由是 prefix 类型', route?.kind === 'prefix');
+
+function request(method, body) {
+  const listeners = {};
+  const req = {
+    method: 'POST',
+    url: '/runtime-kit/api/' + method,
+    on(event, handler) {
+      listeners[event] = handler;
+      return req;
+    },
+    destroy() {},
+  };
+  const payload = Buffer.from(JSON.stringify(body ?? {}));
+  const res = {
+    statusCode: 0,
+    body: '',
+    writableEnded: false,
+    writeHead(status) {
+      this.statusCode = status;
+    },
+    end(text) {
+      this.body = text;
+      this.writableEnded = true;
+    },
+  };
+  return new Promise((resolve) => {
+    route.handler(req, res).then(() => setTimeout(() => resolve(res), 10));
+    setTimeout(() => {
+      listeners.data?.(payload);
+      listeners.end?.();
+    }, 0);
+  });
+}
+
+console.log('\n[1] state');
+const stateRes = await request('state');
+const state = JSON.parse(stateRes.body);
+check('state 返回 200', stateRes.statusCode === 200, `got ${stateRes.statusCode}`);
+check('包含 health/governance/registry', Boolean(state.value.health && state.value.governance && state.value.registry));
+check('默认治理开关：审计开、沙箱关', state.value.governance.audit === true && state.value.governance.sandbox === false);
+check('注册表里能看到 echo 工具', state.value.registry.tools.includes('echo'));
+
+console.log('\n[2] governance');
+const saveRes = await request('governance', { governance: { sandbox: true, injection: 'block' } });
+const saved = JSON.parse(saveRes.body);
+check('保存返回 200', saveRes.statusCode === 200, saved?.error?.message || '');
+check('沙箱开关被写入', saved.value.governance.sandbox === true);
+check('注入模式被写入', saved.value.governance.injection === 'block');
+check('未提交的字段保持不变', saved.value.governance.audit === true);
+
+const persisted = JSON.parse(await fs.readFile(path.join(tmp, 'state', 'governance.json'), 'utf8'));
+check('落盘到 stateDir/governance.json', persisted.sandbox === true && persisted.injection === 'block');
+
+const afterRes = await request('state');
+const after = JSON.parse(afterRes.body);
+check('再次读状态看到新值', after.value.governance.sandbox === true);
+
+console.log('\n[3] 边界');
+const badRes = await request('nope');
+check('未知方法返回 404', badRes.statusCode === 404);
+const getRes = await request('state');
+check('只接受 POST', getRes.statusCode === 200); // 上面 request() 固定 POST，这里只确认正常路径
+
+console.log(`\n========== 结果: ${pass} 通过, ${fail} 失败 ==========`);
+await fs.rm(tmp, { recursive: true, force: true });
+if (fail > 0) process.exit(1);

package/test/governance.mjs

@@ -112,7 +112,14 @@ const svc = { sandbox: allowSandbox, audit: noopAudit };
 
 const offCtx = makeCtx();
 installGovernance(offCtx, svc, { enabled: false });
-check('enabled=false 时不注册任何钩子', offCtx.handlers.size === 0);
+check('enabled=false 仍注册钩子（便于页面实时开回）', offCtx.handlers.size === 3);
+const offNext = { kind: 'accept', marker: 'off' };
+const offPass = await offCtx.handlers.get('tools/post-execute')(
+  { name: 'fetch', arguments: {} },
+  { isError: false, content: [{ type: 'text', text: 'ghp_abcdefghijklmnopqrstuvwxyz0123456789' }] },
+  async () => offNext
+);
+check('总开关关闭时原样放行，不做脱敏', offPass === offNext);
 
 const ctx = makeCtx();
 installGovernance(ctx, svc, {});