kczx-user-management 1.0.0

package/client/bundle.js

@@ -0,0 +1,1799 @@
+/* Generated from client/index.js by scripts/build-client.mjs — do not edit by hand.
+ * Regenerate with: npm run build:client
+ */
+window.__ModuleLoader__.load({
+  id: "kczx-user-management",
+  factory: (require) => {
+    var module = { exports: {} }
+    var exports = module.exports
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
+    var React = require("react")
+    /**
+     * dsh-plugin-user-management - Browser half.
+     *
+     * One React surface: the settings-page section (family convention — the
+     * only management entry). Admins get the full user table plus the login /
+     * access ledgers; plain users get their own profile card, password change
+     * and their own login records. All colors come from the ui-theme
+     * `--dsw-*` token layers so light/dark follows the shell; all copy comes
+     * from the locale registry (`zh`/`en`). No hardcoded colors, no ad-hoc copy.
+     */
+
+    // React is a loader platform module. Under plain Node (contract tests) a
+    // minimal createElement/hook shim keeps the source loadable for assertions.
+    let __React = null
+    try { __React = require('react') } catch {}
+    if (!__React || typeof __React.createElement !== 'function') {
+      __React = {
+        createElement(type, props, ...kids) {
+          return { type, props: props || {}, kids: kids.flat(9).filter((k) => k !== null && k !== undefined && k !== false && k !== true) }
+        },
+        useState(init) { const v = [typeof init === 'function' ? init() : init]; return [v[0], (x) => { v[0] = typeof x === 'function' ? x(v[0]) : x }] },
+        useEffect() {}, useMemo(fn) { return fn() }, useRef(v = null) { return { current: v } },
+      }
+    }
+    const { createElement: h, useState, useEffect, useMemo, useRef } = __React
+
+    // react-dom is a loader platform module (portals + createRoot). Under plain
+    // Node (contract tests) it is absent; every use site guards on it and
+    // degrades (menu renders inline-less null, settings section skips mount).
+    let RDP = null
+    try { RDP = require('react-dom') } catch {}
+
+    const CLIENT_NAME = 'kczx-user-management'
+    const NS = 'user-management'
+
+    // ── locale ────────────────────────────────────────────────────────────────
+
+    const ZH = {
+      title: '用户管理',
+      loading: '加载中…',
+      notLoggedIn: '当前浏览器未登录（会话可能已过期），刷新页面重新登录。',
+      reload: '刷新',
+      tabUsers: '用户',
+      tabLoginLog: '登录记录',
+      tabAccessLog: '访问记录',
+      colUser: '用户名',
+      colRole: '角色',
+      colCreatedAt: '创建时间',
+      colLastLogin: '最后登录',
+      colTime: '时间',
+      colType: '类型',
+      colIp: 'IP',
+      colDetail: '详情',
+      colMethod: '方法',
+      colPath: '路径',
+      colStatus: '状态',
+      tabAuditLog: '操作日志',
+      filterPath: '按路径过滤…',
+      statusAll: '全部状态',
+      statusOk: '成功 (2xx)',
+      statusErr: '失败 (4xx/5xx)',
+      typeWsConn: 'WS 连接',
+      roleAdmin: '管理员',
+      roleUser: '普通用户',
+      you: '（我）',
+      actionResetPwd: '重置密码',
+      actionSetAdmin: '设为管理员',
+      actionSetUser: '降为普通用户',
+      actionDelete: '删除',
+      resetPwdConfirm: '重置 {name} 的密码？该用户的所有登录会话将被强制登出。',
+      deleteConfirm: '删除用户 {name}？此操作不可恢复。',
+      roleConfirm: '将 {name} 的角色变更为 {role}？该用户将被强制重新登录。',
+      tempPwdTitle: '临时密码',
+      tempPwdHint: '已为 {name} 重置密码，请立即保存，仅显示这一次：',
+      copy: '复制',
+      copied: '已复制',
+      filterUser: '按用户名过滤…',
+      filterAll: '全部类型',
+      myInfo: '我的信息',
+      changePwd: '修改密码',
+      oldPwd: '当前密码',
+      newPwd: '新密码（至少 6 位）',
+      confirmPwd: '确认新密码',
+      save: '保存',
+      pwdChanged: '密码已修改，其他会话已登出',
+      pwdMismatch: '两次输入的新密码不一致',
+      empty: '暂无记录',
+      opOk: '操作成功',
+      failed: '操作失败：',
+      clearLog: '清空',
+      clearLogConfirm: '确定清空全部操作日志？此操作不可恢复。',
+      delEntryConfirm: '删除这条操作记录？',
+      auditCleared: '操作日志已清空',
+      entryDeleted: '记录已删除',
+      actionLogout: '退出登录',
+      createUser: '新增用户',
+      createUserTitle: '新增用户',
+      colPassword: '密码（至少 6 位）',
+      colRolePick: '角色',
+      submitCreate: '创建',
+      userCreated: '用户已创建',
+      actionDisable: '禁用',
+      actionEnable: '启用',
+      badgeDisabled: '已禁用',
+      disableConfirm: '禁用 {name}？该用户的登录会话将被立即踢出，且无法再登录。',
+      enableConfirm: '启用 {name}？该用户将可以重新登录。',
+      tabBans: 'IP 封禁',
+      banIpPlaceholder: '输入 IP 地址…',
+      banNotePlaceholder: '备注（可选）',
+      banAction: '封禁',
+      unbanAction: '解封',
+      colNote: '备注',
+      colBannedBy: '封禁者',
+      banConfirm: '封禁 {ip}？该地址将无法访问任何页面与接口。',
+      unbanConfirm: '解封 {ip}？',
+      banned: 'IP 已封禁',
+      unbanned: 'IP 已解封',
+      selfIp: '（当前）',
+      bannedShort: '已封',
+      certTitle: 'HTTPS 证书',
+      certHint: '把证书导入本机信任链后，浏览器不再弹出证书警告。下载前请核对指纹。',
+      certDownloadPem: '下载 PEM (.crt)',
+      certDownloadDer: '下载 DER (.cer)',
+      certFingerprint: '指纹 (SHA-256)',
+      certValid: '有效期',
+      certHosts: '覆盖名称',
+      certInstall: '导入信任链（选择你的系统）',
+      certUnavailable: 'HTTPS 网关未启用，证书信息不可用。',
+      certCopied: '已复制',
+      osMac: 'macOS',
+      osWin: 'Windows',
+      osLinux: 'Linux',
+      typeUserCreated: '创建用户',
+      typeUserDisabled: '禁用用户',
+      typeUserEnabled: '启用用户',
+      typeBanIp: '封禁 IP',
+      typeUnbanIp: '解封 IP',
+      typeLogin: '登录',
+      typeLoginFailed: '登录失败',
+      typeLogout: '登出',
+      typePasswordChange: '修改密码',
+      typeRegister: '注册',
+      typeResetPassword: '重置密码',
+      typeRoleChange: '角色变更',
+      typeDeleteUser: '删除用户',
+      typeAccess: '页面访问',
+      typeTotpEnabled: '开启两步验证',
+      typeTotpDisabled: '关闭两步验证',
+      typeTotpReset: '重置两步验证',
+      totpTitle: '两步验证',
+      totpStatusOn: '已开启',
+      totpStatusOff: '未开启',
+      totpHint: '开启后，登录除密码外还需输入验证器 App 生成的 6 位动态码。',
+      totpEnableAction: '开启两步验证',
+      totpDisableAction: '关闭两步验证',
+      totpScanHint: '用验证器 App（Google Authenticator、1Password、微软验证器等）扫码，或手动输入下方密钥：',
+      totpCodeLabel: '输入 App 显示的 6 位动态码完成绑定',
+      totpCodePlaceholder: '6 位动态码',
+      totpActivateAction: '验证并开启',
+      totpEnabledToast: '两步验证已开启',
+      totpDisabledToast: '两步验证已关闭',
+      totpDisablePwdLabel: '输入登录密码确认关闭',
+      totpDisableConfirmTitle: '关闭两步验证',
+      totpResetAction: '重置两步验证',
+      totpResetConfirm: '重置 {name} 的两步验证？该用户下次登录将只需密码，并可重新绑定。',
+      totpResetDone: '两步验证已重置',
+      totpBadge: '两步',
+      userCount: '{n} 个用户',
+      directAccess: '本页是直连 dsh 端口打开的，用户管理只在登录网关入口提供服务。请改从网关地址访问（默认 http://<主机>:8080）后重试。',
+      colLimits: '权限 / 配额',
+      usageOver: '已超额',
+      usageToday: '今日用量：{summary}',
+      usageMinutes: '{used}/{limit} 分钟',
+      usageMinutesFree: '{used} 分钟',
+      usageTokens: '{used}/{limit} tok/h',
+      usageTokensFree: '{used} tok/h',
+      actionPermissions: '权限/配额',
+      permissionsTitle: '权限与配额',
+      permFolders: '工作区白名单',
+      permFoldersHint: '留空 = 允许访问所有工作区；填写后只允许这些目录下的工作区。',
+      permFoldersAll: '未限制（允许全部工作区）',
+      permFolderPlaceholder: '例如 /srv/work 或 D:\\work',
+      add: '添加',
+      remove: '移除',
+      permTokenLimit: '每小时 token 上限',
+      permMinuteLimit: '每日时长上限（分钟）',
+      permUnlimited: '留空 = 不限',
+      permSandbox: '沙盒档位下限',
+      permSandboxNone: '不限制（用户自选）',
+      permSandboxReadOnly: '只读',
+      permSandboxWorkspace: '可写工作区',
+      permSandboxFull: '完全访问',
+      permAllowUpload: '允许上传文件',
+      permAllowGit: '允许 git 下载',
+      permBanned: '封禁此账号（立即踢出会话并拒绝登录）',
+      permNote: '备注',
+      permUnrestricted: '未限制',
+      permBannedShort: '已封禁',
+      permFoldersShort: '{n} 个目录',
+      permTokensShort: '≤{n} tok/h',
+      permMinutesShort: '≤{n} min/日',
+      permNoUploadShort: '禁上传',
+      permNoGitShort: '禁 git',
+      openPanel: '打开用户管理',
+      panelHint: '用户账号、登录/访问记录、操作日志、IP 封禁、HTTPS 证书与两步验证，都在独立页面中管理。',
+      panelBack: '返回设置',
+    }
+
+    const EN = {
+      title: 'User Management',
+      loading: 'Loading…',
+      notLoggedIn: 'Not signed in (session may have expired) — refresh the page to sign in again.',
+      reload: 'Refresh',
+      tabUsers: 'Users',
+      tabLoginLog: 'Login Records',
+      tabAccessLog: 'Access Records',
+      colUser: 'Username',
+      colRole: 'Role',
+      colCreatedAt: 'Created',
+      colLastLogin: 'Last Login',
+      colTime: 'Time',
+      colType: 'Type',
+      colIp: 'IP',
+      colDetail: 'Detail',
+      colMethod: 'Method',
+      colPath: 'Path',
+      colStatus: 'Status',
+      tabAuditLog: 'Operation Log',
+      filterPath: 'Filter by path…',
+      statusAll: 'All statuses',
+      statusOk: 'Success (2xx)',
+      statusErr: 'Failed (4xx/5xx)',
+      typeWsConn: 'WS connection',
+      roleAdmin: 'Admin',
+      roleUser: 'User',
+      you: ' (me)',
+      actionResetPwd: 'Reset Password',
+      actionSetAdmin: 'Make Admin',
+      actionSetUser: 'Demote to User',
+      actionDelete: 'Delete',
+      resetPwdConfirm: "Reset {name}'s password? All their sessions will be signed out.",
+      deleteConfirm: 'Delete user {name}? This cannot be undone.',
+      roleConfirm: "Change {name}'s role to {role}? They will be signed out.",
+      tempPwdTitle: 'Temporary Password',
+      tempPwdHint: "Password reset for {name}. Save it now — shown only once:",
+      copy: 'Copy',
+      copied: 'Copied',
+      filterUser: 'Filter by username…',
+      filterAll: 'All types',
+      myInfo: 'My Profile',
+      changePwd: 'Change Password',
+      oldPwd: 'Current password',
+      newPwd: 'New password (min 6 chars)',
+      confirmPwd: 'Confirm new password',
+      save: 'Save',
+      pwdChanged: 'Password changed; other sessions signed out',
+      pwdMismatch: 'The two new passwords do not match',
+      empty: 'No records',
+      opOk: 'Done',
+      failed: 'Operation failed: ',
+      clearLog: 'Clear',
+      clearLogConfirm: 'Clear the entire operation log? This cannot be undone.',
+      delEntryConfirm: 'Delete this audit entry?',
+      auditCleared: 'Operation log cleared',
+      entryDeleted: 'Entry deleted',
+      actionLogout: 'Sign out',
+      createUser: 'New User',
+      createUserTitle: 'New User',
+      colPassword: 'Password (min 6 chars)',
+      colRolePick: 'Role',
+      submitCreate: 'Create',
+      userCreated: 'User created',
+      actionDisable: 'Disable',
+      actionEnable: 'Enable',
+      badgeDisabled: 'Disabled',
+      disableConfirm: 'Disable {name}? Their sessions are signed out immediately and they can no longer sign in.',
+      enableConfirm: 'Enable {name}? They will be able to sign in again.',
+      tabBans: 'IP Bans',
+      banIpPlaceholder: 'Enter an IP address…',
+      banNotePlaceholder: 'Note (optional)',
+      banAction: 'Ban',
+      unbanAction: 'Unban',
+      colNote: 'Note',
+      colBannedBy: 'Banned by',
+      banConfirm: 'Ban {ip}? This address will be unable to reach any page or API.',
+      unbanConfirm: 'Unban {ip}?',
+      banned: 'IP banned',
+      unbanned: 'IP unbanned',
+      selfIp: ' (current)',
+      bannedShort: 'Banned',
+      certTitle: 'HTTPS Certificate',
+      certHint: 'Import this certificate into your trust store and browsers stop warning about the self-signed gateway. Verify the fingerprint before importing.',
+      certDownloadPem: 'Download PEM (.crt)',
+      certDownloadDer: 'Download DER (.cer)',
+      certFingerprint: 'Fingerprint (SHA-256)',
+      certValid: 'Valid until',
+      certHosts: 'Covered names',
+      certInstall: 'Import into the trust store (pick your OS)',
+      certUnavailable: 'HTTPS gateway not enabled — certificate info unavailable.',
+      certCopied: 'Copied',
+      osMac: 'macOS',
+      osWin: 'Windows',
+      osLinux: 'Linux',
+      typeUserCreated: 'User created',
+      typeUserDisabled: 'User disabled',
+      typeUserEnabled: 'User enabled',
+      typeBanIp: 'IP banned',
+      typeUnbanIp: 'IP unbanned',
+      typeLogin: 'Login',
+      typeLoginFailed: 'Login failed',
+      typeLogout: 'Logout',
+      typePasswordChange: 'Password change',
+      typeRegister: 'Register',
+      typeResetPassword: 'Password reset',
+      typeRoleChange: 'Role change',
+      typeDeleteUser: 'User deleted',
+      typeAccess: 'Page access',
+      typeTotpEnabled: '2-step enabled',
+      typeTotpDisabled: '2-step disabled',
+      typeTotpReset: '2-step reset',
+      totpTitle: 'Two-Step Verification',
+      totpStatusOn: 'On',
+      totpStatusOff: 'Off',
+      totpHint: 'When enabled, signing in requires a 6-digit code from your authenticator app in addition to the password.',
+      totpEnableAction: 'Enable 2-Step',
+      totpDisableAction: 'Disable 2-Step',
+      totpScanHint: 'Scan with an authenticator app (Google Authenticator, 1Password, Microsoft Authenticator, …), or enter the key manually:',
+      totpCodeLabel: 'Enter the 6-digit code from the app to finish enrollment',
+      totpCodePlaceholder: '6-digit code',
+      totpActivateAction: 'Verify & Enable',
+      totpEnabledToast: 'Two-step verification enabled',
+      totpDisabledToast: 'Two-step verification disabled',
+      totpDisablePwdLabel: 'Enter your login password to confirm',
+      totpDisableConfirmTitle: 'Disable Two-Step Verification',
+      totpResetAction: 'Reset 2-Step',
+      totpResetConfirm: "Reset {name}'s two-step verification? Their next sign-in needs the password only, and they can re-enroll.",
+      totpResetDone: 'Two-step verification reset',
+      totpBadge: '2FA',
+      userCount: '{n} user(s)',
+      directAccess: 'This page was opened on the dsh port directly. User management is only served behind the login gateway — open the gateway address instead (default http://<host>:8080) and retry.',
+      colLimits: 'Permissions / Quota',
+      usageOver: 'Over quota',
+      usageToday: 'Today: {summary}',
+      usageMinutes: '{used}/{limit} min',
+      usageMinutesFree: '{used} min',
+      usageTokens: '{used}/{limit} tok/h',
+      usageTokensFree: '{used} tok/h',
+      actionPermissions: 'Limits',
+      permissionsTitle: 'Permissions & Quota',
+      permFolders: 'Workspace allow-list',
+      permFoldersHint: 'Empty = every workspace is allowed; once filled, only workspaces under these folders are.',
+      permFoldersAll: 'Unrestricted (all workspaces allowed)',
+      permFolderPlaceholder: 'e.g. /srv/work or D:\\work',
+      add: 'Add',
+      remove: 'Remove',
+      permTokenLimit: 'Tokens per hour',
+      permMinuteLimit: 'Minutes per day',
+      permUnlimited: 'Empty = no cap',
+      permSandbox: 'Sandbox floor',
+      permSandboxNone: 'Unrestricted (user chooses)',
+      permSandboxReadOnly: 'Read-only',
+      permSandboxWorkspace: 'Workspace write',
+      permSandboxFull: 'Full access',
+      permAllowUpload: 'Allow file uploads',
+      permAllowGit: 'Allow git downloads',
+      permBanned: 'Ban this account (drops sessions and refuses sign-in)',
+      permNote: 'Note',
+      permUnrestricted: 'Unrestricted',
+      permBannedShort: 'Banned',
+      permFoldersShort: '{n} folder(s)',
+      permTokensShort: '≤{n} tok/h',
+      permMinutesShort: '≤{n} min/day',
+      permNoUploadShort: 'no upload',
+      permNoGitShort: 'no git',
+      openPanel: 'Open User Management',
+      panelHint: 'Accounts, login and access records, the operation log, IP bans, the HTTPS certificate and two-step verification — all in a dedicated page.',
+      panelBack: 'Back to settings',
+    }
+
+    /** Ledger event type → locale key (also the login-log type filter). */
+    const TYPE_LABELS = {
+      login: 'typeLogin',
+      login_failed: 'typeLoginFailed',
+      logout: 'typeLogout',
+      password_change: 'typePasswordChange',
+      register: 'typeRegister',
+      reset_password: 'typeResetPassword',
+      role_change: 'typeRoleChange',
+      delete_user: 'typeDeleteUser',
+      access: 'typeAccess',
+      user_created: 'typeUserCreated',
+      user_disabled: 'typeUserDisabled',
+      user_enabled: 'typeUserEnabled',
+      ban_ip: 'typeBanIp',
+      unban_ip: 'typeUnbanIp',
+      totp_enabled: 'typeTotpEnabled',
+      totp_disabled: 'typeTotpDisabled',
+      totp_reset: 'typeTotpReset',
+    }
+
+    // ── helpers ───────────────────────────────────────────────────────────────
+
+    function api(path, options = {}) {
+      const init = { method: options.method || 'GET', headers: {} }
+      if (options.body !== undefined) {
+        init.headers['content-type'] = 'application/json'
+        init.body = JSON.stringify(options.body)
+      }
+      return fetch('/user-management/api' + path, init).then(async (res) => {
+        const data = await res.json().catch(() => ({}))
+        if (!res.ok) throw new Error((data && data.error) || `HTTP ${res.status}`)
+        return data
+      })
+    }
+
+    function formatTime(ts) {
+      if (!ts) return '-'
+      try { return new Date(ts).toLocaleString() } catch { return '-' }
+    }
+
+    function interpolate(template, vars) {
+      let out = template
+      for (const [key, value] of Object.entries(vars || {})) out = out.split('{' + key + '}').join(String(value))
+      return out
+    }
+
+    /** Client-side tab filters for the admin login-records ledger. */
+    function filterActivity(entries, { username, type } = {}) {
+      return (entries || []).filter((entry) => {
+        if (username && entry.username !== username) return false
+        if (type && entry.type !== type) return false
+        return true
+      })
+    }
+
+    /** Client-side filters for the operation audit ledger. */
+    function filterAudit(entries, { username, method, path, statusClass } = {}) {
+      return (entries || []).filter((entry) => {
+        if (username && entry.username !== username) return false
+        if (method && entry.method !== method) return false
+        if (path && !String(entry.path || '').includes(path)) return false
+        if (statusClass && String(entry.status || '').charAt(0) !== statusClass) return false
+        return true
+      })
+    }
+
+    /** Loopback / self addresses must never be bannable (defense in depth —
+     *  the server refuses them too). */
+    const LOOPBACK_IP_RE = /^127(?:\.\d{1,3}){3}$|^::1$|^\[::1\]$/
+
+    function canBanIp(ip, selfIp) {
+      if (!ip || ip === '-') return false
+      if (LOOPBACK_IP_RE.test(ip)) return false
+      if (selfIp && ip === selfIp) return false
+      return true
+    }
+
+    /** Inline ban button for IP cells in the log tables. Hidden for loopback /
+     *  own-IP entries; disables itself after a successful ban. */
+    function BanIpButton({ ip, selfIp, __t: t, flash }) {
+      const [busy, setBusy] = useState(false)
+      const [done, setDone] = useState(false)
+      if (!canBanIp(ip, selfIp)) return null
+      return h('button', {
+        className: 'um-btn um-btn-danger',
+        style: { marginLeft: 6, padding: '0 7px', fontSize: 11, lineHeight: '18px' },
+        disabled: busy || done,
+        title: interpolate(t('banConfirm'), { ip }),
+        onClick: () => {
+          if (!window.confirm(interpolate(t('banConfirm'), { ip }))) return
+          setBusy(true)
+          api('/bans', { method: 'POST', body: { ip, note: '' } })
+            .then(() => { flash(t('banned')); setDone(true) })
+            .catch((e) => flash(t('failed') + e.message))
+            .finally(() => setBusy(false))
+        },
+      }, done ? t('bannedShort') : t('banAction'))
+    }
+
+    // ── styles ────────────────────────────────────────────────────────────────
+
+    const STYLE = `
+    .um-wrap { font-size: 13px; color: var(--dsw-alias-label-primary); display: flex; flex-direction: column; gap: 14px; }
+    .um-avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.95); font-weight: 600; flex: none; user-select: none; letter-spacing: 0; }
+    .um-brand-name { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 150px; }
+    .um-logout { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 12px; padding: 6px 10px; border-radius: 7px; cursor: pointer; flex: none; }
+    .um-logout:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-state-error-primary); }
+    .um-user-menu { min-width: 216px; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; }
+    .um-user-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
+    .um-user-menu-name { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .um-user-menu-sep { height: 1px; background: var(--dsw-alias-border-l1); margin: 4px 6px; }
+    .um-user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font-size: 12.5px; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
+    .um-user-menu-item:hover { background: var(--dsw-alias-interactive-bg-hover); }
+    .um-user-menu-logout { color: var(--dsw-alias-state-error-primary); }
+    .um-user-menu-logout:hover { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); }
+    .um-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; }
+    .um-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .um-title { font-size: 14px; font-weight: 600; margin: 0; }
+    .um-muted { color: var(--dsw-alias-label-secondary); }
+    .um-btn { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
+    .um-btn:hover { background: var(--dsw-alias-interactive-bg-hover); }
+    .um-btn:disabled { opacity: .45; cursor: default; }
+    .um-btn-primary { background: var(--dsw-alias-state-business-primary); border-color: transparent; color: var(--dsw-alias-label-primary-inverted, #fff); }
+    .um-btn-danger { color: var(--dsw-alias-state-error-primary); }
+    .um-tabs { display: flex; gap: 4px; background: var(--dsw-alias-bg-layer-2); border-radius: 8px; padding: 3px; width: max-content; }
+    .um-tab { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
+    .um-tab.active { background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); }
+    .um-table-wrap { border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; overflow: auto; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+    .um-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
+    .um-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid var(--dsw-alias-border-l2); position: sticky; top: 0; z-index: 1; }
+    .um-table td { padding: 8px 12px; border-bottom: 1px solid var(--dsw-alias-border-l2); vertical-align: middle; color: var(--dsw-alias-label-primary); }
+    .um-table tbody tr:last-child td { border-bottom: 0; }
+    .um-table tbody tr:hover { background: var(--dsw-alias-interactive-bg-hover); }
+    .um-empty { padding: 26px 0; text-align: center; color: var(--dsw-alias-label-tertiary); font-size: 12.5px; }
+    .um-badge { display: inline-block; font-size: 11px; line-height: 1.5; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--dsw-alias-border-l2); color: var(--dsw-alias-label-secondary); }
+    .um-badge-admin { color: var(--dsw-alias-state-business-primary); border-color: var(--dsw-alias-state-business-primary); background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent); }
+    .um-badge-ok { color: var(--dsw-alias-state-success-primary); border-color: var(--dsw-alias-state-success-primary); background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent); }
+    .um-badge-err { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent); }
+    .um-input { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); border-radius: 7px; padding: 5px 9px; font-size: 12px; outline: none; }
+    .um-input:focus { border-color: var(--dsw-alias-state-business-primary); }
+    .um-form { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
+    .um-form label { font-size: 12px; color: var(--dsw-alias-label-secondary); }
+    .um-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+    .um-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--dsw-alias-bg-layer-3); color: var(--dsw-alias-label-primary); border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 8px 16px; font-size: 12px; z-index: 1080; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
+    .um-dlg-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1060; }
+    .um-dlg { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; padding: 18px 20px; width: 420px; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
+    .um-dlg h3 { margin: 0 0 10px; font-size: 14px; }
+    .um-temp-pwd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; background: var(--dsw-alias-bg-layer-2); border: 1px dashed var(--dsw-alias-border-l2); border-radius: 8px; padding: 10px 12px; margin: 10px 0; text-align: center; user-select: all; }
+    .um-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+    .um-kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 13px; }
+    .um-kv dt { color: var(--dsw-alias-label-secondary); }
+    .um-kv dd { margin: 0; }
+    /* QR ground must stay light for scanner contrast — functional, not themed. */
+    .um-qr { background: white; padding: 10px; border-radius: 10px; width: fit-content; border: 1px solid var(--dsw-alias-border-l1); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
+    .um-qr svg { display: block; }
+    /* Settings-section entry: the console is a page of its own, so the slot only
+       offers the door. */
+    .um-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
+    .um-entry-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+    /* Full-page surface: portaled to <body> and pinned above the host settings
+       overlay, which is itself a fixed inset:0 layer at z-index 1000
+       (ui-settings-general SettingsRoot.module.css). Anything below 1000 lands
+       behind the settings panel and is invisible — hence 1050 here. The plugin's
+       own dialogs and toasts then sit above this page (1060 / 1080). */
+    .um-page-backdrop { position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; background: var(--dsw-alias-bg-layer-1); }
+    .um-page-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); }
+    .um-page-title { font-size: 15px; font-weight: 600; margin: 0; }
+    .um-page-body { flex: 1; overflow: auto; padding: 16px 22px 48px; }
+    .um-page-inner { width: 100%; max-width: 1120px; margin: 0 auto; }
+    `
+
+    function ensureStyles() {
+      if (typeof document === 'undefined' || document.getElementById('um-styles')) return
+      // Must be a real <style> element — CSS text inside a <div> never applies.
+      const el = document.createElement('style')
+      el.id = 'um-styles'
+      el.textContent = STYLE
+      document.head.appendChild(el)
+    }
+
+    /** Self-drawn dialog: the host Modal portals to <body> with a z-index below
+     *  full pages, so settings-section surfaces must draw their own. */
+    function UmDialog({ title, onClose, children, footer }) {
+      return h('div', { className: 'um-dlg-backdrop', onClick: onClose },
+        h('div', { className: 'um-dlg', onClick: (e) => e.stopPropagation() },
+          title && h('h3', null, title),
+          children,
+          footer && h('div', { className: 'um-dlg-foot' }, footer)))
+    }
+
+    // ── sidebar brand (avatar + username, top-left) ───────────────────────────
+
+    /** Module-level session cache: the brand row and the settings section share
+     *  one /session fetch per page load. undefined = loading, null = signed out.
+     *  `observer` mirrors the server flag: true means dsh-passwords owns the login
+     *  and this layer is only the ledger observer, so everything that belongs to a
+     *  login door of its own (accounts, bans, certificates, 2FA, sign-out) is
+     *  hidden. Read after the fetch resolves — every consumer re-renders then. */
+    const sessionCache = { me: undefined, observer: false, direct: false }
+    function loadMeCached() {
+      if (sessionCache.me !== undefined) return Promise.resolve(sessionCache.me)
+      return api('/session').then((d) => {
+        sessionCache.me = d.user
+        sessionCache.observer = d.observer === true
+        return d.user
+      })
+        .catch((error) => {
+          sessionCache.me = null
+          // 404 means this page sits on the dsh port itself: the ledger API only
+          // exists behind the gateway listener, so "sign in again" would be
+          // useless advice — the visitor has to switch to the gateway address.
+          sessionCache.direct = String(error && error.message).includes('404')
+          return null
+        })
+    }
+
+    function avatarHue(username) {
+      let hash = 0
+      for (const ch of String(username || '?')) hash = (hash * 31 + ch.codePointAt(0)) % 360
+      return hash
+    }
+
+    /** Initial-letter avatar: deterministic hue per username, theme-safe. */
+    function UserAvatar({ username, size = 22 }) {
+      const label = String(username || '?')
+      return h('div', {
+        className: 'um-avatar',
+        title: label,
+        style: {
+          width: size,
+          height: size,
+          fontSize: Math.max(10, Math.round(size * 0.44)),
+          background: `hsl(${avatarHue(label)}, 42%, 46%)`,
+        },
+      }, label.charAt(0).toUpperCase())
+    }
+
+    /** Sidebar brand mark — host renders it in the expanded brand row AND the
+     *  collapsed rail (owner supplies the square `size`), so fold states adapt
+     *  without us tracking the shell. Clicking it (or the name) opens the
+     *  user menu; sign-out sits at the bottom in red. */
+    function BrandMark({ size, className }) {
+      useEffect(ensureStyles, [])
+      const [me, setMe] = useState(sessionCache.me)
+      useEffect(() => { loadMeCached().then((user) => setMe(user)) }, [])
+      const { toggle, menu, dialog } = useUserMenu(me)
+      if (!me) {
+        return h('div', { className, style: { width: size, height: size, borderRadius: '50%', background: 'var(--dsw-alias-bg-layer-3)' } })
+      }
+      return h('div', {
+        className,
+        style: { cursor: 'pointer', display: 'inline-flex', borderRadius: '50%' },
+        title: me.username,
+        'aria-haspopup': 'menu',
+        onClick: toggle,
+      },
+        h(UserAvatar, { username: me.username, size: size || 24 }),
+        menu,
+        dialog)
+    }
+
+    /** Sidebar brand name — host renders it beside the expanded mark only. */
+    function BrandName() {
+      useEffect(ensureStyles, [])
+      const [me, setMe] = useState(sessionCache.me)
+      useEffect(() => { loadMeCached().then((user) => setMe(user)) }, [])
+      const { toggle, menu, dialog } = useUserMenu(me)
+      return h('span', {
+        className: 'um-brand-name',
+        style: { cursor: 'pointer' },
+        title: me ? me.username : '',
+        'aria-haspopup': 'menu',
+        onClick: toggle,
+      }, me ? me.username : '', menu, dialog)
+    }
+
+    // ── logout ────────────────────────────────────────────────────────────────
+
+    /** Locale accessor for slot components living outside apply()'s closure —
+     *  updated when apply() binds the real dictionary; zh until then. */
+    let localeT = (key) => ZH[key] || key
+
+    function doLogout() {
+      // clearing the session makes the gate bounce the next navigation to /login
+      api('/logout', { method: 'POST' }).catch(() => {}).finally(() => { location.href = '/login' })
+    }
+
+    function PowerIcon({ size = 14 }) {
+      return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'aria-hidden': 'true' },
+        h('path', { d: 'M18.36 6.64a9 9 0 1 1-12.73 0' }),
+        h('line', { x1: 12, y1: 2, x2: 12, y2: 12 }))
+    }
+
+    function KeyIcon({ size = 14 }) {
+      return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true' },
+        h('path', { d: 'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4' }))
+    }
+
+    function LogoutButton({ withLabel, __t: t }) {
+      useEffect(ensureStyles, [])
+      return h('button', {
+        className: 'um-logout',
+        title: t('actionLogout'),
+        'aria-label': t('actionLogout'),
+        onClick: doLogout,
+      }, h(PowerIcon), withLabel ? t('actionLogout') : null)
+    }
+
+    /** Self-service password change — the admin panel has no inline form
+     *  (MyPanel's one is for plain users), so this dialog is the shared
+     *  entry from the user menu. Portaled to <body> like the user menu. */
+    function ChangePasswordDialog({ onClose, __t: t }) {
+      const [oldPwd, setOldPwd] = useState('')
+      const [newPwd, setNewPwd] = useState('')
+      const [confirmPwd, setConfirmPwd] = useState('')
+      const [busy, setBusy] = useState(false)
+      const [err, setErr] = useState('')
+      const [done, setDone] = useState(false)
+
+      const submit = (e) => {
+        e.preventDefault()
+        if (newPwd !== confirmPwd) { setErr(t('pwdMismatch')); return }
+        setBusy(true)
+        setErr('')
+        api('/me/password', { method: 'POST', body: { oldPassword: oldPwd, newPassword: newPwd } })
+          .then(() => { setDone(true); setTimeout(onClose, 1200) })
+          .catch((e2) => setErr(String(e2 && e2.message)))
+          .finally(() => setBusy(false))
+      }
+
+      const dialog = h(UmDialog, {
+        title: t('changePwd'), onClose,
+        footer: [
+          h('button', { className: 'um-btn', onClick: onClose }, '✕'),
+          h('button', { className: 'um-btn um-btn-primary', onClick: submit, disabled: busy || done }, t('save')),
+        ],
+      },
+        done
+          ? h('div', { style: { color: 'var(--dsw-alias-state-success-primary)', fontSize: 13, padding: '6px 0' } }, t('pwdChanged'))
+          : h('form', { className: 'um-form', onSubmit: submit, style: { maxWidth: 'none' } },
+            h('label', { htmlFor: 'um-cp-old' }, t('oldPwd')),
+            h('input', { id: 'um-cp-old', className: 'um-input', type: 'password', autoComplete: 'current-password', value: oldPwd, onChange: (e) => setOldPwd(e.target.value), required: true, autoFocus: true }),
+            h('label', { htmlFor: 'um-cp-new' }, t('newPwd')),
+            h('input', { id: 'um-cp-new', className: 'um-input', type: 'password', autoComplete: 'new-password', minLength: 6, value: newPwd, onChange: (e) => setNewPwd(e.target.value), required: true }),
+            h('label', { htmlFor: 'um-cp-conf' }, t('confirmPwd')),
+            h('input', { id: 'um-cp-conf', className: 'um-input', type: 'password', autoComplete: 'new-password', value: confirmPwd, onChange: (e) => setConfirmPwd(e.target.value), required: true }),
+            err && h('div', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: 12 } }, err)))
+      return RDP && typeof RDP.createPortal === 'function' ? RDP.createPortal(dialog, document.body) : dialog
+    }
+
+    /** The user menu popped from the brand row: identity header, change
+     *  password, separator, and the red sign-out as the last item. Portaled
+     *  to <body> so sidebar overflow can't clip it. */
+    function UserMenu({ anchor, username, role, onClose, onChangePwd }) {
+      const ref = useRef(null)
+      const t = localeT
+      useEffect(() => {
+        const onDoc = (e) => {
+          if (ref.current && !ref.current.contains(e.target) && anchor && !anchor.contains(e.target)) onClose()
+        }
+        const onKey = (e) => { if (e.key === 'Escape') onClose() }
+        document.addEventListener('mousedown', onDoc)
+        document.addEventListener('keydown', onKey)
+        return () => {
+          document.removeEventListener('mousedown', onDoc)
+          document.removeEventListener('keydown', onKey)
+        }
+      }, [anchor, onClose])
+      const rect = anchor ? anchor.getBoundingClientRect() : { left: 8, bottom: 8, right: 8 }
+      const MENU_WIDTH = 216
+      const left = Math.max(8, Math.min(rect.left, window.innerWidth - MENU_WIDTH - 8))
+      const style = { position: 'fixed', left, top: rect.bottom + 6, width: MENU_WIDTH }
+      return RDP && typeof RDP.createPortal === 'function'
+        ? RDP.createPortal(
+          h('div', { className: 'um-user-menu', ref, style, role: 'menu' },
+            h('div', { className: 'um-user-menu-head' },
+              h(UserAvatar, { username, size: 30 }),
+              h('div', { style: { minWidth: 0 } },
+                h('div', { className: 'um-user-menu-name', title: username }, username),
+                h('div', { style: { marginTop: 3 } }, h(RoleBadge, { role, __t: t })))),
+            // Observer mode: password and sign-out live at the door (dsh-passwords),
+            // not here — offering them would promise something this layer can't do.
+            sessionCache.observer ? null : h('div', { className: 'um-user-menu-sep' }),
+            sessionCache.observer ? null : h('button', {
+              className: 'um-user-menu-item',
+              role: 'menuitem',
+              onClick: () => { onClose(); onChangePwd() },
+            }, h(KeyIcon), t('changePwd')),
+            sessionCache.observer ? null : h('div', { className: 'um-user-menu-sep' }),
+            sessionCache.observer ? null : h('button', {
+              className: 'um-user-menu-item um-user-menu-logout',
+              role: 'menuitem',
+              onClick: () => { onClose(); doLogout() },
+            }, h(PowerIcon), t('actionLogout'))),
+          document.body)
+        : null
+    }
+
+    /** Shared click-to-open behaviour for both brand seats. */
+    function useUserMenu(me) {
+      const [anchor, setAnchor] = useState(null)
+      const [pwdOpen, setPwdOpen] = useState(false)
+      const toggle = (e) => {
+        // The menu/dialog are React children of this element but portal their
+        // DOM to <body> — their clicks bubble through the React tree and would
+        // toggle the menu a second time. Only clicks that physically originate
+        // inside the brand element may toggle.
+        if (!e.currentTarget.contains(e.target)) return
+        e.stopPropagation()
+        // React nulls e.currentTarget after dispatch; the updater may run later,
+        // so capture the element first or the anchor silently stays null.
+        const target = e.currentTarget
+        setAnchor((current) => (current ? null : target))
+      }
+      const menu = (anchor && me)
+        ? h(UserMenu, { anchor, username: me.username, role: me.role, onClose: () => setAnchor(null), onChangePwd: () => setPwdOpen(true) })
+        : null
+      const dialog = pwdOpen ? h(ChangePasswordDialog, { onClose: () => setPwdOpen(false), __t: localeT }) : null
+      return { toggle, menu, dialog }
+    }
+
+    // ── components ────────────────────────────────────────────────────────────
+
+    function RoleBadge({ role, __t: t }) {
+      return h('span', { className: role === 'admin' ? 'um-badge um-badge-admin' : 'um-badge' },
+        role === 'admin' ? t('roleAdmin') : t('roleUser'))
+    }
+
+    /** Compact token count for tight table cells. */
+    function formatTokens(value) {
+      const n = Number(value) || 0
+      if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+      if (n >= 1000) return (n / 1000).toFixed(1) + 'k'
+      return String(n)
+    }
+
+    /**
+     * Today's consumption against an account's allowance.
+     *
+     * Shows the number even when no limit is set, so an administrator can see what
+     * an account actually uses before deciding what to cap it at.
+     */
+    function usageSummary(user, t) {
+      const usage = user.usage
+      if (!usage) return ''
+      const perms = user.permissions || {}
+      const minutes = Math.floor((usage.activeSeconds || 0) / 60)
+      const tokens = usage.hourlyTokens || 0
+      const bits = []
+      if (perms.dailyMinuteLimit != null) bits.push(interpolate(t('usageMinutes'), { used: minutes, limit: perms.dailyMinuteLimit }))
+      else if (minutes > 0) bits.push(interpolate(t('usageMinutesFree'), { used: minutes }))
+      if (perms.hourlyTokenLimit != null) bits.push(interpolate(t('usageTokens'), { used: formatTokens(tokens), limit: formatTokens(perms.hourlyTokenLimit) }))
+      else if (tokens > 0) bits.push(interpolate(t('usageTokensFree'), { used: formatTokens(tokens) }))
+      return bits.join(' · ')
+    }
+
+    /** Whether today's consumption has reached a configured limit. */
+    function overQuota(user) {
+      const usage = user.usage
+      if (!usage) return false
+      const perms = user.permissions || {}
+      const byTime = perms.dailyMinuteLimit != null && (usage.activeSeconds || 0) >= perms.dailyMinuteLimit * 60
+      const byTokens = perms.hourlyTokenLimit != null && (usage.hourlyTokens || 0) >= perms.hourlyTokenLimit
+      return byTime || byTokens
+    }
+
+    /** One-line limits summary for the users table. */
+    function permissionSummary(user, t) {
+      const p = user.permissions || {}
+      const bits = []
+      if (p.banned) bits.push(t('permBannedShort'))
+      if (Array.isArray(p.allowedFolders) && p.allowedFolders.length > 0) {
+        bits.push(interpolate(t('permFoldersShort'), { n: p.allowedFolders.length }))
+      }
+      if (p.hourlyTokenLimit != null) bits.push(interpolate(t('permTokensShort'), { n: p.hourlyTokenLimit }))
+      if (p.dailyMinuteLimit != null) bits.push(interpolate(t('permMinutesShort'), { n: p.dailyMinuteLimit }))
+      if (p.sandboxMode) bits.push(p.sandboxMode)
+      if (p.allowUpload === false) bits.push(t('permNoUploadShort'))
+      if (p.allowGit === false) bits.push(t('permNoGitShort'))
+      return bits.length === 0 ? t('permUnrestricted') : bits.join(' · ')
+    }
+
+    /** Per-user permissions & quota editor (admin only).
+     *
+     *  This is the account model that used to live in dsh-passwords: workspace
+     *  scope, an hourly token cap, daily minutes, a sandbox floor, upload/git
+     *  switches and the policy ban. The store's reading is surfaced verbatim in the
+     *  form: an empty folder list means every workspace, an empty limit means no
+     *  cap — so clearing a field is a visible, deliberate act rather than a silent
+     *  default. */
+    function PermissionsDialog({ user, onClose, onSaved, __t: t }) {
+      const p = user.permissions || {}
+      const [folders, setFolders] = useState(Array.isArray(p.allowedFolders) ? p.allowedFolders.slice() : [])
+      const [draft, setDraft] = useState('')
+      const [tokenLimit, setTokenLimit] = useState(p.hourlyTokenLimit == null ? '' : String(p.hourlyTokenLimit))
+      const [minuteLimit, setMinuteLimit] = useState(p.dailyMinuteLimit == null ? '' : String(p.dailyMinuteLimit))
+      const [sandbox, setSandbox] = useState(p.sandboxMode || '')
+      const [allowUpload, setAllowUpload] = useState(p.allowUpload !== false)
+      const [allowGit, setAllowGit] = useState(p.allowGit !== false)
+      const [banned, setBanned] = useState(p.banned === true)
+      const [note, setNote] = useState(typeof p.note === 'string' ? p.note : '')
+      const [busy, setBusy] = useState(false)
+      const [err, setErr] = useState('')
+
+      const addFolder = () => {
+        const value = draft.trim()
+        if (value === '' || folders.includes(value)) { setDraft(''); return }
+        setFolders([...folders, value])
+        setDraft('')
+      }
+      const toLimit = (value) => (String(value).trim() === '' ? null : Number(value))
+
+      const submit = () => {
+        if (busy) return
+        setBusy(true)
+        setErr('')
+        api(`/users/${user.id}/permissions`, {
+          method: 'PUT',
+          body: {
+            allowedFolders: folders,
+            hourlyTokenLimit: toLimit(tokenLimit),
+            dailyMinuteLimit: toLimit(minuteLimit),
+            sandboxMode: sandbox === '' ? null : sandbox,
+            allowUpload,
+            allowGit,
+            banned,
+            note,
+          },
+        })
+          .then(() => { onSaved() })
+          .catch((e) => setErr(String(e && e.message)))
+          .finally(() => setBusy(false))
+      }
+
+      return h(UmDialog, {
+        title: `${t('permissionsTitle')} · ${user.username}`,
+        onClose,
+        footer: [
+          h('button', { className: 'um-btn', onClick: onClose }, '✕'),
+          h('button', { className: 'um-btn um-btn-primary', onClick: submit, disabled: busy }, t('save')),
+        ],
+      },
+        err && h('div', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: 12, marginBottom: 6 } }, err),
+        // Setting a limit is a judgement about consumption, so show it: an
+        // administrator otherwise has to guess what "100k tokens an hour" means for
+        // this particular account.
+        usageSummary(user, t)
+          ? h('div', { className: 'um-muted', style: { fontSize: 11, marginBottom: 8 } }, interpolate(t('usageToday'), { summary: usageSummary(user, t) }))
+          : null,
+        h('div', { className: 'um-form', style: { maxWidth: 'none' } },
+          h('label', null, t('permFolders')),
+          h('div', { className: 'um-muted', style: { fontSize: 11, marginTop: -4 } }, t('permFoldersHint')),
+          folders.length === 0
+            ? h('div', { className: 'um-empty' }, t('permFoldersAll'))
+            : folders.map((folder, index) => h('div', { key: folder, className: 'um-row' },
+              h('code', { style: { flex: 1, wordBreak: 'break-all', fontSize: 12 } }, folder),
+              h('button', {
+                className: 'um-btn um-btn-danger', style: { flex: 'none' },
+                onClick: () => setFolders(folders.filter((_, i) => i !== index)),
+              }, t('remove')))),
+          h('div', { className: 'um-row' },
+            h('input', {
+              className: 'um-input', style: { flex: 1 }, placeholder: t('permFolderPlaceholder'),
+              value: draft, onChange: (e) => setDraft(e.target.value),
+              onKeyDown: (e) => { if (e.key === 'Enter') { e.preventDefault(); addFolder() } },
+            }),
+            h('button', { className: 'um-btn', style: { flex: 'none' }, onClick: addFolder }, t('add'))),
+
+          h('label', { htmlFor: 'um-perm-tokens' }, t('permTokenLimit')),
+          h('input', {
+            id: 'um-perm-tokens', className: 'um-input', inputMode: 'numeric',
+            placeholder: t('permUnlimited'), value: tokenLimit, onChange: (e) => setTokenLimit(e.target.value),
+          }),
+          h('label', { htmlFor: 'um-perm-minutes' }, t('permMinuteLimit')),
+          h('input', {
+            id: 'um-perm-minutes', className: 'um-input', inputMode: 'numeric',
+            placeholder: t('permUnlimited'), value: minuteLimit, onChange: (e) => setMinuteLimit(e.target.value),
+          }),
+
+          h('label', { htmlFor: 'um-perm-sandbox' }, t('permSandbox')),
+          h('select', {
+            id: 'um-perm-sandbox', className: 'um-input', value: sandbox,
+            onChange: (e) => setSandbox(e.target.value),
+          },
+            h('option', { value: '' }, t('permSandboxNone')),
+            h('option', { value: 'read-only' }, t('permSandboxReadOnly')),
+            h('option', { value: 'workspace-write' }, t('permSandboxWorkspace')),
+            h('option', { value: 'danger-full-access' }, t('permSandboxFull'))),
+
+          h('label', { className: 'um-row', style: { gap: 6 } },
+            h('input', { type: 'checkbox', checked: allowUpload, onChange: (e) => setAllowUpload(e.target.checked) }),
+            t('permAllowUpload')),
+          h('label', { className: 'um-row', style: { gap: 6 } },
+            h('input', { type: 'checkbox', checked: allowGit, onChange: (e) => setAllowGit(e.target.checked) }),
+            t('permAllowGit')),
+          h('label', { className: 'um-row', style: { gap: 6 } },
+            h('input', { type: 'checkbox', checked: banned, onChange: (e) => setBanned(e.target.checked) }),
+            t('permBanned')),
+
+          h('label', { htmlFor: 'um-perm-note' }, t('permNote')),
+          h('input', {
+            id: 'um-perm-note', className: 'um-input', maxLength: 200,
+            value: note, onChange: (e) => setNote(e.target.value),
+          })))
+    }
+
+    function UsersTab({ me, __t: t, flash }) {
+      const [users, setUsers] = useState(null)
+      const [temp, setTemp] = useState(null) // {name, pwd}
+      const [busyId, setBusyId] = useState(null)
+      const [copied, setCopied] = useState(false)
+      const [creating, setCreating] = useState(false)
+      const [permUser, setPermUser] = useState(null)
+      const [form, setForm] = useState({ username: '', password: '', role: 'user' })
+
+      const load = () => api('/users').then((d) => setUsers(d.users)).catch((e) => flash(t('failed') + e.message))
+      useEffect(() => { load() }, [])
+
+      const act = async (user, fn) => {
+        setBusyId(user.id)
+        try { await fn() } catch (e) { flash(t('failed') + e.message) } finally { setBusyId(null) }
+      }
+
+      const resetPwd = (user) => {
+        if (!window.confirm(interpolate(t('resetPwdConfirm'), { name: user.username }))) return
+        act(user, async () => {
+          const d = await api(`/users/${user.id}/reset-password`, { method: 'POST' })
+          setTemp({ name: user.username, pwd: d.tempPassword })
+          setCopied(false)
+        })
+      }
+
+      const changeRole = (user) => {
+        const nextRole = user.role === 'admin' ? 'user' : 'admin'
+        const label = nextRole === 'admin' ? t('roleAdmin') : t('roleUser')
+        if (!window.confirm(interpolate(t('roleConfirm'), { name: user.username, role: label }))) return
+        act(user, async () => {
+          await api(`/users/${user.id}/role`, { method: 'POST', body: { role: nextRole } })
+          flash(t('opOk'))
+          await load()
+        })
+      }
+
+      const toggleDisabled = (user) => {
+        const disabling = !user.disabled
+        const key = disabling ? 'disableConfirm' : 'enableConfirm'
+        if (!window.confirm(interpolate(t(key), { name: user.username }))) return
+        act(user, async () => {
+          await api(`/users/${user.id}/disabled`, { method: 'POST', body: { disabled: disabling } })
+          flash(t('opOk'))
+          await load()
+        })
+      }
+
+      const remove = (user) => {
+        if (!window.confirm(interpolate(t('deleteConfirm'), { name: user.username }))) return
+        act(user, async () => {
+          await api(`/users/${user.id}`, { method: 'DELETE' })
+          flash(t('opOk'))
+          await load()
+        })
+      }
+
+      const resetTotp = (user) => {
+        if (!window.confirm(interpolate(t('totpResetConfirm'), { name: user.username }))) return
+        act(user, async () => {
+          await api(`/users/${user.id}/reset-totp`, { method: 'POST' })
+          flash(t('totpResetDone'))
+          await load()
+        })
+      }
+
+      const submitCreate = (e) => {
+        e.preventDefault()
+        api('/users', { method: 'POST', body: form })
+          .then(() => { setCreating(false); setForm({ username: '', password: '', role: 'user' }); flash(t('userCreated')); return load() })
+          .catch((err) => flash(t('failed') + err.message))
+      }
+
+      const copyTemp = () => {
+        try {
+          navigator.clipboard.writeText(temp.pwd).then(() => setCopied(true), () => {})
+        } catch { /* clipboard unavailable */ }
+      }
+
+      if (users === null) return h('div', { className: 'um-card um-muted' }, t('loading'))
+
+      return h('div', { className: 'um-card' },
+        h('div', { className: 'um-head', style: { marginBottom: 10 } },
+          h('h3', { className: 'um-title' }, interpolate(t('userCount'), { n: users.length })),
+          h('div', { className: 'um-row' },
+            h('button', { className: 'um-btn um-btn-primary', onClick: () => setCreating(true) }, t('createUser')),
+            h('button', { className: 'um-btn', onClick: load }, t('reload')))),
+        h('div', { className: 'um-table-wrap' },
+          h('table', { className: 'um-table' },
+            h('thead', null, h('tr', null,
+              h('th', null, t('colUser')),
+              h('th', null, t('colRole')),
+              h('th', null, t('colCreatedAt')),
+              h('th', null, t('colLastLogin')),
+              h('th', null, t('colLimits')),
+              h('th', null, ''))),
+            h('tbody', null, users.map((user) => h('tr', { key: user.id, style: user.disabled ? { opacity: 0.55 } : undefined },
+              h('td', null, user.username, user.id === me.id ? t('you') : null),
+              h('td', null, h('span', { className: 'um-row', style: { gap: 4 } },
+                h(RoleBadge, { role: user.role, __t: t }),
+                user.disabled ? h('span', { className: 'um-badge um-badge-err' }, t('badgeDisabled')) : null,
+                user.totpEnabled ? h('span', { className: 'um-badge um-badge-ok' }, t('totpBadge')) : null)),
+              h('td', { className: 'um-muted' }, formatTime(user.createdAt)),
+              h('td', { className: 'um-muted' }, formatTime(user.lastLoginAt)),
+              h('td', null, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 3 } },
+                h('div', { className: 'um-row', style: { gap: 4 } },
+                  h('span', {
+                    className: user.permissions && user.permissions.banned ? 'um-badge um-badge-err' : 'um-badge',
+                    title: permissionSummary(user, t),
+                  }, permissionSummary(user, t)),
+                  overQuota(user) ? h('span', { className: 'um-badge um-badge-err' }, t('usageOver')) : null),
+                usageSummary(user, t)
+                  ? h('div', { className: 'um-muted', style: { fontSize: 11, whiteSpace: 'nowrap' } }, usageSummary(user, t))
+                  : null)),
+              h('td', null, h('div', { className: 'um-row', style: { justifyContent: 'flex-end' } },
+                h('button', { className: 'um-btn', disabled: busyId === user.id, onClick: () => setPermUser(user) }, t('actionPermissions')),
+                h('button', { className: 'um-btn', disabled: busyId === user.id, onClick: () => resetPwd(user) }, t('actionResetPwd')),
+                h('button', {
+                  className: 'um-btn', disabled: busyId === user.id || user.id === me.id,
+                  title: user.id === me.id ? '-' : undefined, onClick: () => changeRole(user),
+                }, user.role === 'admin' ? t('actionSetUser') : t('actionSetAdmin')),
+                h('button', {
+                  className: user.disabled ? 'um-btn' : 'um-btn um-btn-danger',
+                  disabled: busyId === user.id || user.id === me.id,
+                  title: user.id === me.id ? '-' : undefined,
+                  onClick: () => toggleDisabled(user),
+                }, user.disabled ? t('actionEnable') : t('actionDisable')),
+                user.totpEnabled ? h('button', {
+                  className: 'um-btn', disabled: busyId === user.id,
+                  title: t('totpResetAction'), onClick: () => resetTotp(user),
+                }, t('totpResetAction')) : null,
+                h('button', {
+                  className: 'um-btn um-btn-danger', disabled: busyId === user.id || user.id === me.id,
+                  onClick: () => remove(user),
+                }, t('actionDelete'))))))))),
+        creating && h(UmDialog, {
+          title: t('createUserTitle'), onClose: () => setCreating(false),
+          footer: [
+            h('button', { className: 'um-btn', onClick: () => setCreating(false) }, '✕'),
+            h('button', { className: 'um-btn um-btn-primary', onClick: submitCreate }, t('submitCreate')),
+          ],
+        },
+          h('form', { className: 'um-form', onSubmit: submitCreate },
+            h('label', { htmlFor: 'um-new-username' }, t('colUser')),
+            h('input', { id: 'um-new-username', className: 'um-input', value: form.username, onChange: (e) => setForm({ ...form, username: e.target.value }), required: true, autoFocus: true }),
+            h('label', { htmlFor: 'um-new-password' }, t('colPassword')),
+            h('input', { id: 'um-new-password', className: 'um-input', type: 'password', autoComplete: 'new-password', minLength: 6, value: form.password, onChange: (e) => setForm({ ...form, password: e.target.value }), required: true }),
+            h('label', { htmlFor: 'um-new-role' }, t('colRolePick')),
+            h('select', { id: 'um-new-role', className: 'um-input', value: form.role, onChange: (e) => setForm({ ...form, role: e.target.value }) },
+              h('option', { value: 'user' }, t('roleUser')),
+              h('option', { value: 'admin' }, t('roleAdmin'))))),
+        permUser && h(PermissionsDialog, {
+          user: permUser,
+          onClose: () => setPermUser(null),
+          onSaved: () => { setPermUser(null); flash(t('opOk')); void load() },
+          __t: t,
+        }),
+        temp && h(UmDialog, {
+          title: t('tempPwdTitle'), onClose: () => setTemp(null),
+          footer: [
+            h('button', { className: 'um-btn', onClick: copyTemp }, copied ? t('copied') : t('copy')),
+            h('button', { className: 'um-btn um-btn-primary', onClick: () => setTemp(null) }, 'OK'),
+          ],
+        },
+          h('p', { className: 'um-muted', style: { margin: 0 } }, interpolate(t('tempPwdHint'), { name: temp.name })),
+          h('div', { className: 'um-temp-pwd' }, temp.pwd)))
+    }
+
+    function ActivityTab({ kind, __t: t, flash }) {
+      const [entries, setEntries] = useState(null)
+      const [username, setUsername] = useState('')
+      const [type, setType] = useState('')
+      const [selfIp, setSelfIp] = useState('')
+
+      const load = () => api('/activity?limit=200').then((d) => setEntries(d.entries)).catch((e) => setEntries([]) /* flash handled by empty state */)
+      useEffect(() => {
+        load()
+        api('/bans').then((d) => setSelfIp(d.selfIp)).catch(() => {})
+      }, [])
+
+      const visible = useMemo(
+        () => filterActivity(entries, { username: username.trim() || null, type: type || null })
+          .filter((entry) => (kind === 'accessLog' ? entry.type === 'access' : entry.type !== 'access')),
+        [entries, username, type, kind])
+
+      return h('div', { className: 'um-card' },
+        h('div', { className: 'um-head', style: { marginBottom: 10 } },
+          h('div', { className: 'um-row' },
+            h('input', { className: 'um-input', placeholder: t('filterUser'), value: username, onChange: (e) => setUsername(e.target.value) }),
+            kind === 'loginLog' && h('select', { className: 'um-input', value: type, onChange: (e) => setType(e.target.value) },
+              h('option', { value: '' }, t('filterAll')),
+              Object.entries(TYPE_LABELS).filter(([key]) => key !== 'access').map(([key, labelKey]) =>
+                h('option', { key, value: key }, t(labelKey))))),
+          h('button', { className: 'um-btn', onClick: load }, t('reload'))),
+        entries === null
+          ? h('div', { className: 'um-muted' }, t('loading'))
+          : visible.length === 0
+            ? h('div', { className: 'um-empty' }, t('empty'))
+            : h('div', { className: 'um-table-wrap' },
+              h('table', { className: 'um-table' },
+                h('thead', null, h('tr', null,
+                  h('th', null, t('colTime')),
+                  h('th', null, t('colType')),
+                  h('th', null, t('colUser')),
+                  h('th', null, t('colIp')),
+                  h('th', null, t('colDetail')))),
+                h('tbody', null, visible.map((entry, i) => h('tr', { key: i },
+                  h('td', { className: 'um-muted', style: { whiteSpace: 'nowrap' } }, formatTime(entry.ts)),
+                  h('td', null, t(TYPE_LABELS[entry.type] || entry.type)),
+                  h('td', null, entry.username || '-'),
+                  h('td', { className: 'um-muted', style: { whiteSpace: 'nowrap' } }, entry.ip || '-',
+                    h(BanIpButton, { ip: entry.ip, selfIp, __t: t, flash })),
+                  h('td', { className: 'um-muted' }, entry.detail || '-')))))))
+    }
+
+    /** Admin-only operation audit: every gated API call / WS connection with
+     *  its response status, filterable by username, method, path and status.
+     *  Rows can be deleted individually; the whole ledger can be cleared. */
+    function AuditTab({ __t: t, flash }) {
+      const [entries, setEntries] = useState(null)
+      const [username, setUsername] = useState('')
+      const [method, setMethod] = useState('')
+      const [path, setPath] = useState('')
+      const [statusClass, setStatusClass] = useState('')
+      const [busyId, setBusyId] = useState(null)
+      const [selfIp, setSelfIp] = useState('')
+
+      const load = () => api('/audit?limit=500').then((d) => setEntries(d.entries)).catch(() => setEntries([]))
+      useEffect(() => {
+        load()
+        api('/bans').then((d) => setSelfIp(d.selfIp)).catch(() => {})
+      }, [])
+
+      const del = (entry) => {
+        if (!window.confirm(t('delEntryConfirm'))) return
+        setBusyId(entry.id)
+        api(`/audit/${entry.id}`, { method: 'DELETE' })
+          .then(() => { flash(t('entryDeleted')); return load() })
+          .catch((e) => flash(t('failed') + e.message))
+          .finally(() => setBusyId(null))
+      }
+
+      const clearAll = () => {
+        if (!window.confirm(t('clearLogConfirm'))) return
+        api('/audit', { method: 'DELETE' })
+          .then(() => { flash(t('auditCleared')); return load() })
+          .catch((e) => flash(t('failed') + e.message))
+      }
+
+      const visible = useMemo(
+        () => filterAudit(entries, { username: username.trim() || null, method: method || null, path: path.trim() || null, statusClass: statusClass || null }),
+        [entries, username, method, path, statusClass])
+
+      const statusBadge = (status) => {
+        const cls = status >= 500 ? 'um-badge um-badge-err' : status >= 400 ? 'um-badge um-badge-err' : 'um-badge um-badge-ok'
+        return h('span', { className: cls }, status ?? '-')
+      }
+
+      return h('div', { className: 'um-card' },
+        h('div', { className: 'um-head', style: { marginBottom: 10 } },
+          h('div', { className: 'um-row' },
+            h('input', { className: 'um-input', placeholder: t('filterUser'), value: username, onChange: (e) => setUsername(e.target.value) }),
+            h('select', { className: 'um-input', value: method, onChange: (e) => setMethod(e.target.value) },
+              h('option', { value: '' }, t('filterAll')),
+              ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'WS'].map((m) => h('option', { key: m, value: m }, m))),
+            h('input', { className: 'um-input', placeholder: t('filterPath'), value: path, onChange: (e) => setPath(e.target.value) }),
+            h('select', { className: 'um-input', value: statusClass, onChange: (e) => setStatusClass(e.target.value) },
+              h('option', { value: '' }, t('statusAll')),
+              h('option', { value: '2' }, t('statusOk')),
+              h('option', { value: '4' }, t('statusErr')),
+              h('option', { value: '5' }, t('statusErr')))),
+          h('div', { className: 'um-row' },
+            h('button', { className: 'um-btn', onClick: load }, t('reload')),
+            h('button', { className: 'um-btn um-btn-danger', disabled: !entries || entries.length === 0, onClick: clearAll }, t('clearLog')))),
+        entries === null
+          ? h('div', { className: 'um-muted' }, t('loading'))
+          : visible.length === 0
+            ? h('div', { className: 'um-empty' }, t('empty'))
+            : h('div', { className: 'um-table-wrap' },
+              h('table', { className: 'um-table' },
+                h('thead', null, h('tr', null,
+                  h('th', null, t('colTime')),
+                  h('th', null, t('colMethod')),
+                  h('th', null, t('colPath')),
+                  h('th', null, t('colUser')),
+                  h('th', null, t('colIp')),
+                  h('th', null, t('colStatus')),
+                  h('th', null, ''))),
+                h('tbody', null, visible.map((entry, i) => h('tr', { key: i },
+                  h('td', { className: 'um-muted', style: { whiteSpace: 'nowrap' } }, formatTime(entry.ts)),
+                  h('td', null, entry.type === 'ws' ? t('typeWsConn') : entry.method || '-'),
+                  h('td', { className: 'um-muted', style: { wordBreak: 'break-all' } }, entry.path || '-'),
+                  h('td', null, entry.username || '-'),
+                  h('td', null, entry.ip || '-', h(BanIpButton, { ip: entry.ip, selfIp, __t: t, flash })),
+                  h('td', null, entry.type === 'ws' ? h('span', { className: 'um-badge' }, t('typeWsConn')) : statusBadge(entry.status)),
+                  h('td', null, h('button', {
+                    className: 'um-btn um-btn-danger', disabled: busyId === entry.id,
+                    onClick: () => del(entry),
+                  }, t('actionDelete')))))))))
+    }
+
+    /** Admin-only IP bans: gate-level deny list checked before sessions —
+     *  banned addresses can't even load the login page. */
+    function BansTab({ __t: t, flash }) {
+      const [bans, setBans] = useState(null)
+      const [ip, setIp] = useState('')
+      const [note, setNote] = useState('')
+      const [selfIp, setSelfIp] = useState('')
+      const [busy, setBusy] = useState(false)
+
+      const load = () => api('/bans').then((d) => { setBans(d.bans); setSelfIp(d.selfIp) }).catch(() => setBans([]))
+      useEffect(() => { load() }, [])
+
+      const ban = (e) => {
+        e.preventDefault()
+        const target = ip.trim()
+        if (!target) return
+        if (!window.confirm(interpolate(t('banConfirm'), { ip: target }))) return
+        setBusy(true)
+        api('/bans', { method: 'POST', body: { ip: target, note: note.trim() } })
+          .then(() => { flash(t('banned')); setIp(''); setNote(''); return load() })
+          .catch((err) => flash(t('failed') + err.message))
+          .finally(() => setBusy(false))
+      }
+
+      const unban = (entry) => {
+        if (!window.confirm(interpolate(t('unbanConfirm'), { ip: entry.ip }))) return
+        api(`/bans/${encodeURIComponent(entry.ip)}`, { method: 'DELETE' })
+          .then(() => { flash(t('unbanned')); return load() })
+          .catch((err) => flash(t('failed') + err.message))
+      }
+
+      return h('div', { className: 'um-card' },
+        h('form', { className: 'um-row', style: { marginBottom: 10 }, onSubmit: ban },
+          h('input', { className: 'um-input', placeholder: t('banIpPlaceholder'), value: ip, onChange: (e) => setIp(e.target.value), required: true, style: { width: 220 } }),
+          h('input', { className: 'um-input', placeholder: t('banNotePlaceholder'), value: note, onChange: (e) => setNote(e.target.value), style: { width: 200 } }),
+          h('button', { className: 'um-btn um-btn-danger', type: 'submit', disabled: busy }, t('banAction'))),
+        bans === null
+          ? h('div', { className: 'um-muted' }, t('loading'))
+          : bans.length === 0
+            ? h('div', { className: 'um-empty' }, t('empty'))
+            : h('div', { className: 'um-table-wrap' },
+              h('table', { className: 'um-table' },
+                h('thead', null, h('tr', null,
+                  h('th', null, 'IP'),
+                  h('th', null, t('colNote')),
+                  h('th', null, t('colBannedBy')),
+                  h('th', null, t('colTime')),
+                  h('th', null, ''))),
+                h('tbody', null, bans.map((entry) => h('tr', { key: entry.ip },
+                  h('td', null, entry.ip, entry.ip === selfIp ? h('span', { className: 'um-muted' }, t('selfIp')) : null),
+                  h('td', { className: 'um-muted' }, entry.note || '-'),
+                  h('td', null, entry.createdBy || '-'),
+                  h('td', { className: 'um-muted', style: { whiteSpace: 'nowrap' } }, formatTime(entry.createdAt)),
+                  h('td', null, h('button', { className: 'um-btn um-btn-danger', onClick: () => unban(entry) }, t('unbanAction')))))))))
+    }
+
+    const CERT_FILE_PEM = 'user-management-gateway.crt'
+    const CERT_FILE_DER = 'user-management-gateway.cer'
+
+    /** Trust-store import commands, per OS, against the downloaded files. */
+    const CERT_INSTALL_COMMANDS = {
+      mac: `sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ~/Downloads/${CERT_FILE_PEM}`,
+      win: `certutil -addstore -f Root "%USERPROFILE%\\Downloads\\${CERT_FILE_DER}"`,
+      linux: `sudo cp ~/Downloads/${CERT_FILE_PEM} /usr/local/share/ca-certificates/user-management-gateway.crt && sudo update-ca-certificates`,
+    }
+
+    /** Admin card: download the gateway cert (PEM/DER), verify the fingerprint
+     *  and copy the per-OS trust-store import command. Hidden entirely when the
+     *  gateway is absent (e.g. accessing dsh web directly, not via the HTTPS
+     *  gateway) — there is nothing to bootstrap there. */
+    function CertCard({ __t: t }) {
+      useEffect(ensureStyles, [])
+      const [info, setInfo] = useState(undefined) // undefined = loading, null = unavailable
+      const [os, setOs] = useState('mac')
+      const [copied, setCopied] = useState('')
+
+      useEffect(() => { api('/cert-info').then(setInfo).catch(() => setInfo(null)) }, [])
+      if (info === null) return null
+
+      const copy = (tag, text) => {
+        try {
+          navigator.clipboard.writeText(text).then(() => {
+            setCopied(tag)
+            setTimeout(() => setCopied(''), 2000)
+          }, () => {})
+        } catch { /* clipboard unavailable */ }
+      }
+
+      return h('div', { className: 'um-card' },
+        h('div', { className: 'um-head', style: { marginBottom: 10 } },
+          h('h3', { className: 'um-title' }, t('certTitle')),
+          h('div', { className: 'um-row' },
+            h('a', { className: 'um-btn', href: '/user-management/api/cert', download: CERT_FILE_PEM }, t('certDownloadPem')),
+            h('a', { className: 'um-btn', href: '/user-management/api/cert?format=der', download: CERT_FILE_DER }, t('certDownloadDer')))),
+        h('p', { className: 'um-muted', style: { margin: '0 0 10px' } }, t('certHint')),
+        info === undefined
+          ? h('div', { className: 'um-muted' }, t('loading'))
+          : h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
+            h('div', null,
+              h('div', { className: 'um-muted', style: { fontSize: 11, marginBottom: 3 } }, t('certFingerprint')),
+              h('div', { className: 'um-row' },
+                h('code', { style: { fontSize: 12, wordBreak: 'break-all' } }, info.fingerprint),
+                h('button', { className: 'um-btn', style: { padding: '0 8px', fontSize: 11 }, onClick: () => copy('fp', info.fingerprint) },
+                  copied === 'fp' ? t('certCopied') : t('copy')))),
+            h('div', { className: 'um-row' },
+              h('span', { className: 'um-muted' }, `${t('certValid')}:`),
+              h('span', null, info.notAfter)),
+            h('div', null,
+              h('div', { className: 'um-muted', style: { fontSize: 11, marginBottom: 3 } }, t('certHosts')),
+              h('div', { className: 'um-row' }, (info.hosts || []).map((hostName) =>
+                h('span', { key: hostName, className: 'um-badge' }, hostName)))),
+            h('div', null,
+              h('div', { className: 'um-muted', style: { fontSize: 11, marginBottom: 3 } }, t('certInstall')),
+              h('div', { className: 'um-row', style: { marginBottom: 6 } },
+                ['mac', 'win', 'linux'].map((key) => h('button', {
+                  key, className: os === key ? 'um-tab active' : 'um-tab', onClick: () => setOs(key),
+                }, t(key === 'mac' ? 'osMac' : key === 'win' ? 'osWin' : 'osLinux')))),
+              h('div', { className: 'um-row' },
+                h('code', { style: { fontSize: 12, wordBreak: 'break-all', flex: 1 } }, CERT_INSTALL_COMMANDS[os]),
+                h('button', { className: 'um-btn', style: { flex: 'none' }, onClick: () => copy(os, CERT_INSTALL_COMMANDS[os]) },
+                  copied === os ? t('certCopied') : t('copy'))))))
+    }
+
+    /** Two-step verification self-service card — status, enrollment (QR +
+     *  manual key + live-code check) and password-confirmed disable. Used both
+     *  in MyPanel (plain users) and as its own AdminPanel tab (admins' own). */
+    function TotpCard({ me, __t: t, flash }) {
+      const [enabled, setEnabled] = useState(!!me.totpEnabled)
+      const [settingUp, setSettingUp] = useState(false)
+      const [disabling, setDisabling] = useState(false)
+      return h('div', { className: 'um-card' },
+        h('div', { className: 'um-head' },
+          h('h3', { className: 'um-title' }, t('totpTitle')),
+          h('div', { className: 'um-row' },
+            h('span', { className: enabled ? 'um-badge um-badge-ok' : 'um-badge' }, enabled ? t('totpStatusOn') : t('totpStatusOff')),
+            enabled
+              ? h('button', { className: 'um-btn um-btn-danger', onClick: () => setDisabling(true) }, t('totpDisableAction'))
+              : h('button', { className: 'um-btn um-btn-primary', onClick: () => setSettingUp(true) }, t('totpEnableAction')))),
+        h('p', { className: 'um-muted', style: { margin: '0 0 4px' } }, t('totpHint')),
+        settingUp && h(TotpSetupDialog, {
+          onClose: () => setSettingUp(false),
+          onEnabled: () => { setSettingUp(false); setEnabled(true); flash(t('totpEnabledToast')) },
+          __t: t,
+        }),
+        disabling && h(TotpDisableDialog, {
+          onClose: () => setDisabling(false),
+          onDisabled: () => { setDisabling(false); setEnabled(false); flash(t('totpDisabledToast')) },
+          __t: t,
+        }))
+    }
+
+    /** Enrollment dialog: fetches the pending secret, shows the QR + manual key,
+     *  then activates against a live code from the authenticator. */
+    function TotpSetupDialog({ onClose, onEnabled, __t: t }) {
+      const [info, setInfo] = useState(null) // { secret, otpauth, qrSvg }
+      const [code, setCode] = useState('')
+      const [busy, setBusy] = useState(false)
+      const [err, setErr] = useState('')
+      const [copied, setCopied] = useState(false)
+
+      useEffect(() => {
+        api('/me/totp/setup', { method: 'POST' })
+          .then(setInfo)
+          .catch((e) => setErr(String(e && e.message)))
+      }, [])
+
+      const copySecret = () => {
+        try {
+          navigator.clipboard.writeText(info.secret).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000) }, () => {})
+        } catch { /* clipboard unavailable */ }
+      }
+
+      const activate = () => {
+        if (!code.trim() || busy) return
+        setBusy(true)
+        setErr('')
+        api('/me/totp/activate', { method: 'POST', body: { code: code.trim() } })
+          .then(onEnabled)
+          .catch((e) => setErr(String(e && e.message)))
+          .finally(() => setBusy(false))
+      }
+
+      return h(UmDialog, {
+        title: t('totpEnableAction'), onClose,
+        footer: [
+          h('button', { className: 'um-btn', onClick: onClose }, '✕'),
+          h('button', { className: 'um-btn um-btn-primary', onClick: activate, disabled: busy || !info }, t('totpActivateAction')),
+        ],
+      },
+        !info && !err && h('div', { className: 'um-muted' }, t('loading')),
+        info && h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
+          h('div', { className: 'um-qr', dangerouslySetInnerHTML: { __html: info.qrSvg } }),
+          h('p', { className: 'um-muted', style: { margin: 0 } }, t('totpScanHint')),
+          h('div', { className: 'um-row' },
+            h('code', { style: { fontSize: 12, wordBreak: 'break-all', flex: 1 } }, info.secret),
+            h('button', { className: 'um-btn', style: { flex: 'none' }, onClick: copySecret }, copied ? t('copied') : t('copy'))),
+          h('label', { htmlFor: 'um-totp-code' }, t('totpCodeLabel')),
+          h('input', {
+            id: 'um-totp-code', className: 'um-input', inputMode: 'numeric', maxLength: 6,
+            placeholder: t('totpCodePlaceholder'), value: code, autoFocus: true,
+            onChange: (e) => setCode(e.target.value),
+            onKeyDown: (e) => { if (e.key === 'Enter') activate() },
+          })),
+        err && h('div', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: 12 } }, err))
+    }
+
+    /** Disable dialog — demands the login password so a stolen session alone
+     *  cannot weaken the account. */
+    function TotpDisableDialog({ onClose, onDisabled, __t: t }) {
+      const [pwd, setPwd] = useState('')
+      const [busy, setBusy] = useState(false)
+      const [err, setErr] = useState('')
+
+      const submit = () => {
+        if (!pwd || busy) return
+        setBusy(true)
+        setErr('')
+        api('/me/totp/disable', { method: 'POST', body: { password: pwd } })
+          .then(onDisabled)
+          .catch((e) => setErr(String(e && e.message)))
+          .finally(() => setBusy(false))
+      }
+
+      return h(UmDialog, {
+        title: t('totpDisableConfirmTitle'), onClose,
+        footer: [
+          h('button', { className: 'um-btn', onClick: onClose }, '✕'),
+          h('button', { className: 'um-btn um-btn-danger', onClick: submit, disabled: busy || !pwd }, t('totpDisableAction')),
+        ],
+      },
+        h('form', {
+          className: 'um-form', style: { maxWidth: 'none' },
+          onSubmit: (e) => { e.preventDefault(); submit() },
+        },
+          h('label', { htmlFor: 'um-totp-disable-pwd' }, t('totpDisablePwdLabel')),
+          h('input', {
+            id: 'um-totp-disable-pwd', className: 'um-input', type: 'password',
+            autoComplete: 'current-password', value: pwd, required: true, autoFocus: true,
+            onChange: (e) => setPwd(e.target.value),
+          }),
+          err && h('div', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: 12 } }, err)))
+    }
+
+    function MyPanel({ me, __t: t, flash }) {
+      const [oldPwd, setOldPwd] = useState('')
+      const [newPwd, setNewPwd] = useState('')
+      const [confirmPwd, setConfirmPwd] = useState('')
+      const [busy, setBusy] = useState(false)
+      const [entries, setEntries] = useState(null)
+
+      useEffect(() => { api('/activity?limit=50').then((d) => setEntries(d.entries)).catch(() => setEntries([])) }, [])
+
+      const submit = (e) => {
+        e.preventDefault()
+        if (newPwd !== confirmPwd) { flash(t('pwdMismatch')); return }
+        setBusy(true)
+        api('/me/password', { method: 'POST', body: { oldPassword: oldPwd, newPassword: newPwd } })
+          .then(() => { flash(t('pwdChanged')); setOldPwd(''); setNewPwd(''); setConfirmPwd('') })
+          .catch((err) => flash(t('failed') + err.message))
+          .finally(() => setBusy(false))
+      }
+
+      // Observer mode: the password form and 2FA belong to the login door, so a
+      // trusted non-admin sees their identity and their own login records only.
+      const observer = sessionCache.observer === true
+
+      return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
+        h('div', { className: 'um-card' },
+          h('div', { className: 'um-head' },
+            h('h3', { className: 'um-title' }, t('myInfo')),
+            observer ? null : h(LogoutButton, { withLabel: true, __t: t })),
+          h('dl', { className: 'um-kv', style: { marginTop: 10 } },
+            h('dt', null, t('colUser')), h('dd', null, me.username),
+            h('dt', null, t('colRole')), h('dd', null, h(RoleBadge, { role: me.role, __t: t })),
+            h('dt', null, t('colCreatedAt')), h('dd', null, formatTime(me.createdAt)),
+            h('dt', null, t('colLastLogin')), h('dd', null, formatTime(me.lastLoginAt)))),
+        observer ? null : h('form', { className: 'um-card um-form', onSubmit: submit },
+          h('h3', { className: 'um-title' }, t('changePwd')),
+          h('label', { htmlFor: 'um-old-pwd' }, t('oldPwd')),
+          h('input', { id: 'um-old-pwd', className: 'um-input', type: 'password', autoComplete: 'current-password', value: oldPwd, onChange: (e) => setOldPwd(e.target.value), required: true }),
+          h('label', { htmlFor: 'um-new-pwd' }, t('newPwd')),
+          h('input', { id: 'um-new-pwd', className: 'um-input', type: 'password', autoComplete: 'new-password', value: newPwd, onChange: (e) => setNewPwd(e.target.value), required: true, minLength: 6 }),
+          h('label', { htmlFor: 'um-conf-pwd' }, t('confirmPwd')),
+          h('input', { id: 'um-conf-pwd', className: 'um-input', type: 'password', autoComplete: 'new-password', value: confirmPwd, onChange: (e) => setConfirmPwd(e.target.value), required: true }),
+          h('div', null, h('button', { className: 'um-btn um-btn-primary', type: 'submit', disabled: busy }, t('save')))),
+        observer ? null : h(TotpCard, { me, __t: t, flash }),
+        h('div', { className: 'um-card' },
+          h('h3', { className: 'um-title', style: { marginBottom: 10 } }, t('tabLoginLog')),
+          entries === null
+            ? h('div', { className: 'um-muted' }, t('loading'))
+            : entries.length === 0
+              ? h('div', { className: 'um-empty' }, t('empty'))
+              : h('div', { className: 'um-table-wrap' },
+                h('table', { className: 'um-table' },
+                  h('thead', null, h('tr', null,
+                    h('th', null, t('colTime')),
+                    h('th', null, t('colType')),
+                    h('th', null, t('colIp')))),
+                  h('tbody', null, entries.map((entry, i) => h('tr', { key: i },
+                    h('td', { className: 'um-muted', style: { whiteSpace: 'nowrap' } }, formatTime(entry.ts)),
+                    h('td', null, t(TYPE_LABELS[entry.type] || entry.type)),
+                    h('td', { className: 'um-muted' }, entry.ip || '-'))))))))
+    }
+
+    function UserManagementSection({ __t: t }) {
+      useEffect(ensureStyles, [])
+      const [me, setMe] = useState(undefined) // undefined = loading, null = signed out
+      const [toast, setToast] = useState('')
+      const toastTimer = useRef(null)
+      const flash = (msg) => {
+        setToast(msg)
+        if (toastTimer.current) clearTimeout(toastTimer.current)
+        toastTimer.current = setTimeout(() => setToast(''), 2400)
+      }
+      useEffect(() => {
+        loadMeCached().then((user) => setMe(user))
+      }, [])
+
+      return h('div', { className: 'um-wrap' },
+        toast && h('div', { className: 'um-toast' }, toast),
+        me === undefined && h('div', { className: 'um-card um-muted' }, t('loading')),
+        me === null && (sessionCache.direct
+          ? h('div', { className: 'um-card um-muted' }, t('directAccess'))
+          : h('div', { className: 'um-card um-muted' }, t('notLoggedIn'))),
+        me && (me.role === 'admin'
+          ? h(AdminPanel, { me, __t: t, flash })
+          : h(MyPanel, { me, __t: t, flash })))
+    }
+
+    function AdminPanel({ me, __t: t, flash }) {
+      // Observer mode (merged deployment): dsh-passwords owns accounts, bans,
+      // certificates and 2FA — what is left for this layer is the record: who
+      // signed in, what was opened, what was called. So the tab strip is exactly
+      // the three ledgers, and there is no sign-out here to offer.
+      const observer = sessionCache.observer === true
+      const [tab, setTab] = useState(observer ? 'loginLog' : 'users')
+      const tabs = observer
+        ? [['loginLog', t('tabLoginLog')], ['accessLog', t('tabAccessLog')], ['auditLog', t('tabAuditLog')]]
+        : [['users', t('tabUsers')], ['loginLog', t('tabLoginLog')], ['accessLog', t('tabAccessLog')], ['auditLog', t('tabAuditLog')], ['bans', t('tabBans')], ['cert', t('certTitle')], ['totp', t('totpTitle')]]
+      return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+        h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 } },
+          h('div', { className: 'um-tabs' }, tabs.map(([key, label]) =>
+            h('button', { key, className: tab === key ? 'um-tab active' : 'um-tab', onClick: () => setTab(key) }, label))),
+          observer ? null : h(LogoutButton, { withLabel: true, __t: t })),
+        tab === 'users' ? h(UsersTab, { me, __t: t, flash })
+          : tab === 'auditLog' ? h(AuditTab, { __t: t, flash })
+            : tab === 'bans' ? h(BansTab, { __t: t, flash })
+              : tab === 'cert' ? h(CertCard, { __t: t })
+                : tab === 'totp' ? h(TotpCard, { me, __t: t, flash })
+                  : h(ActivityTab, { kind: tab, __t: t, flash }))
+    }
+
+    /**
+     * Invisible token-usage reporter, mounted on the session-scoped
+     * 'conversation.composer.dock' slot (whose standard props carry
+     * `useProjection`, the framework's projection read seat).
+     *
+     * Why the browser reports at all: the gateway cannot see provider accounting,
+     * and dsh's projection is the only trustworthy source of it. The projection is
+     * a per-session CUMULATIVE value, so this keeps the last observed total and
+     * reports only the difference — the first observation is a baseline and is
+     * never billed, which is what stops a session switch from re-charging the same
+     * tokens.
+     *
+     * Only `uncachedInputTokens + outputTokens` are counted: dsh's projection
+     * reports cacheReadTokens as a per-step cumulative and its aggregation replays
+     * it as if incremental, which inflates it by orders of magnitude. Billing a
+     * quota against that would burn a user's allowance for cached reads.
+     *
+     * Renders null — it exists only for its effect.
+     */
+    function TokenReporter({ useProjection }) {
+      const read = typeof useProjection === 'function' ? useProjection : null
+      const usage = read ? read('tokenUsage') : undefined
+      const lastTotal = useRef(null)
+      const pending = useRef(0)
+      const inFlight = useRef(false)
+
+      useEffect(() => {
+        if (!usage) return
+        const total = (usage.uncachedInputTokens || 0) + (usage.outputTokens || 0)
+        if (lastTotal.current === null) {
+          lastTotal.current = total
+          return
+        }
+        const delta = total - lastTotal.current
+        if (delta > 0) pending.current += delta
+        lastTotal.current = total
+      }, [usage])
+
+      useEffect(() => {
+        const flush = () => {
+          if (inFlight.current) return // a request is still in flight: retry next tick
+          const amount = pending.current
+          if (amount <= 0) return
+          pending.current = 0
+          inFlight.current = true
+          api('/usage/report', { method: 'POST', body: { tokens: amount } })
+            // Put the count back so a failed report is retried rather than lost.
+            .catch(() => { pending.current += amount })
+            .finally(() => { inFlight.current = false })
+        }
+        const timer = setInterval(flush, 15000)
+        return () => { clearInterval(timer); flush() }
+      }, [])
+
+      return null
+    }
+
+    /** Settings-section entry. The console used to render inline here, which buried
+     *  a whole management surface inside the settings list; the slot now offers a
+     *  one-line door instead and the console opens as a full-page layer pinned
+     *  above the settings area. Escape or 返回 walks back to the entry. */
+    function UserManagementEntry({ __t: t }) {
+      useEffect(ensureStyles, [])
+      const [open, setOpen] = useState(false)
+
+      useEffect(() => {
+        if (!open) return undefined
+        const onKey = (e) => { if (e.key === 'Escape') setOpen(false) }
+        document.addEventListener('keydown', onKey)
+        return () => document.removeEventListener('keydown', onKey)
+      }, [open])
+
+      const entry = h('div', { className: 'um-card um-entry' },
+        h('div', { className: 'um-entry-text' },
+          h('h3', { className: 'um-title' }, t('title')),
+          h('div', { className: 'um-muted', style: { fontSize: 12, lineHeight: 1.5 } }, t('panelHint'))),
+        h('button', { className: 'um-btn um-btn-primary', style: { flex: 'none' }, onClick: () => setOpen(true) }, t('openPanel')))
+
+      if (!open) return entry
+
+      const page = h('div', { className: 'um-page-backdrop', role: 'dialog', 'aria-label': t('title') },
+        h('div', { className: 'um-page-head' },
+          h('h3', { className: 'um-page-title' }, t('title')),
+          h('button', { className: 'um-btn', onClick: () => setOpen(false) }, t('panelBack'))),
+        h('div', { className: 'um-page-body' },
+          h('div', { className: 'um-page-inner' }, h(UserManagementSection, { __t: t }))))
+
+      return h('div', null,
+        entry,
+        RDP && typeof RDP.createPortal === 'function' ? RDP.createPortal(page, document.body) : page)
+    }
+
+    // ── module wiring ─────────────────────────────────────────────────────────
+
+    function __boot(container) {
+      if (!RDP || typeof RDP.createRoot !== 'function') return
+      RDP.createRoot(container).render(h(UserManagementSection, { __t: (key, vars) => interpolate(ZH[key] || key, vars) }))
+    }
+
+    module.exports = {
+      name: CLIENT_NAME,
+      inject: ['slots', 'locale'],
+      __boot,
+      __internals: { NS, ZH, EN, TYPE_LABELS, api, formatTime, interpolate, filterActivity, filterAudit, avatarHue, UserAvatar, BrandMark, BrandName, canBanIp, BanIpButton, ChangePasswordDialog, UserMenu, CertCard, CERT_INSTALL_COMMANDS, UserManagementSection, UserManagementEntry, AdminPanel, TotpCard, TotpSetupDialog, TotpDisableDialog },
+      apply(ctx) {
+        ctx.locale.register(NS, 'zh', ZH)
+        ctx.locale.register(NS, 'en', EN)
+        const t = ctx.locale.bind(NS)
+        localeT = t
+        ctx.effect(() => {
+          // Official-brand pattern: nested injects claim both brand seats, one
+          // generator registers them. The mark shows in expanded row + collapsed
+          // rail (fold-adaptive), the name only beside the expanded mark.
+          // priority: -1 shadows the host's default brand registration at 0
+          // ("lowest renders"); uninstalling this plugin restores the official
+          // brand with no residue.
+          ctx.slots.inject('sidebar.brand.mark', () => ctx.slots.inject('sidebar.brand.name', function* () {
+            yield ctx.slots.register({ name: 'sidebar.brand.mark', priority: -1 }, BrandMark)
+            yield ctx.slots.register({ name: 'sidebar.brand.name', priority: -1 }, BrandName)
+          }))
+        }, 'user-management: sidebar brand')
+        // Token accounting: the session-scoped dock slot is the one seat whose
+        // standard props carry `useProjection` — the only place the browser can
+        // read the host's own token totals.
+        ctx.effect(() => {
+          ctx.slots.inject('conversation.composer.dock', () => ctx.slots.register({
+            name: 'conversation.composer.dock',
+            id: `${CLIENT_NAME}:token-reporter`,
+            order: 90,
+            locale: NS,
+          }, TokenReporter))
+        }, 'user-management: token reporter')
+        ctx.effect(() => {
+          ctx.slots.inject('settings.section', () => ctx.slots.register({
+            name: 'settings.section',
+            id: CLIENT_NAME,
+            order: 92,
+            locale: NS,
+            label: () => t('title'),
+            inject: () => ({}),
+          }, function UserManagementSlot() {
+            return h(UserManagementEntry, { __t: t })
+          }))
+        }, 'user-management: settings section')
+      },
+    }
+
+    return module.exports
+  }
+})