kczx-user-management 1.5.6 → 1.6.0

package/README.md

@@ -87,10 +87,11 @@ node scripts/ensure-deps.mjs                     # 仅当上述解析不到 sche
 | 能力 | 说明 |
 |---|---|
 | 用户增删改查 | 用户表每行一个「编辑」**全屏页**：基本资料（部门 / 角色）+ 账号操作（重置密码 / 重置两步验证 / 禁用启用 / 删除）+ 权限与配额，集中一屏；改动类走「保存」，破坏性操作仍是各自带确认的按钮 |
-| 所属部门 | 账号资料字段（trim 后 ≤ 64 字，控制字符剔除）：新增用户时可填，编辑页可随时改或清空；变更写进操作日志 |
-| 新建账号即建工作区 | 新增用户时勾选「同时创建该用户的工作区」：路径预填 `<harness 根>/<部门>/<用户名>`（可改成任意绝对路径）；提交后目录按需创建、登记进 dsh 工作区列表，并把该路径写进这个账号的工作区白名单 |
+| 所属部门（1.6.0 起支持多层级） | 账号资料字段，支持**多层级路径**：用 `/` 分层，例如 `和平分局/刑侦大队/一中队`（`\` 也认，存的时候统一成 `/`）。新增用户时可填，编辑页可随时改或清空；编辑时框下会把层级摊开显示，并列出**已在用的层级**供一键接续；变更写进操作日志。规则（服务端为准，界面同款提示在前面）：最多 **5 级**、每一级 ≤ **24 字**、整串 ≤ **64 字**（含分隔符）；层级里不能有 `\ / : * ? " < > |`，也不能是 `.` / `..`——因为这些层级要变成目录名。写不进去的值**报错而不是悄悄改写**（理由同长度上限） |
+| 新建账号即建工作区 | 新增用户时勾选「同时创建该用户的工作区」：路径预填 `<harness 根>/<部门各级>/<用户名>`，**一级部门一个目录**（`…\和平分局\刑侦大队\zhang`；可改成任意绝对路径）；提交后目录按需创建、登记进 dsh 工作区列表，并把该路径写进这个账号的工作区白名单。部门不合法时**先报 400，再建目录**——不会留下半棵树 |
 | 工作区白名单 | **留空 = 不允许任何工作区**（白名单默认拒绝）；填写后只允许这些目录下的工作区；条目 `*` = 允许全部。Windows 路径折叠大小写，末尾斜杠自动忽略 |
 | 工作区归属跟踪 | 谁创建的工作区归谁：别人看不到、也不能删改；删除后释放，账号删除后清理 |
+| 会话可见性（1.6.0 起） | 会话按**会话自己的工作目录**判定：目录不在本账号白名单内、或落在别人认领的工作区里，这个会话就不下发。**为什么必须有**：前端把「没有被任何可见工作区认领」的会话统统塞进「未分组」那一组——只藏工作区行的话，里面的会话会带着标题、点开即读的历史原地复活。**三个入口一起堵**：① `session.list`（0.1.1）/ `session/list`（0.1.2+）的一元响应；② 0.1.1 的 `host/session-added` 实时推送（`GET /api/events.host` 的 SSE——每个新建会话都会被推给所有在线浏览器，只改一元响应的话，别人新建一条就会把行实时推回来）；③ 0.1.2+ 的 `api-session/added`（`$events` mux 流上的 emit 帧）。`session.search` 沿用列表刚藏掉的 id 清单摘命中片段。判定只看 `cwd`：`blank` **不**豁免（别人目录里的「新建会话」行也还是别人的目录），只有子代理行（`origin: subagent`，前端本来就不列）和**读不到 cwd** 的行保留——「判断不了」不等于「不该看」 |
 | 每小时 token 配额 | 由浏览器上报 dsh 自身的用量投影增量，服务端按小时窗口累计并拦截 |
 | 每日时长配额 | 按真实活跃时间累计（不是请求数），限流不因轮询膨胀 |
 | 沙盒档位下限 | read-only / workspace-write / danger-full-access：AI 无法通过设置、slash 命令或审批把自己提权 |
@@ -112,6 +113,43 @@ node scripts/ensure-deps.mjs                     # 仅当上述解析不到 sche
 默认 50）。筛选同样在服务端执行，所以「共 N 条」永远是**匹配总数**而不是当前页条数。账号表只有在调用方
 传了 `limit` 时才分页，不传仍然整份返回（后端脚本的老用法不受影响）。
 
+## dsh 版本适配（1.6.0 起）
+
+dsh 有两代 API，本插件两代都认——这曾经是个坑：老代码只认第一代的路径，换到新宿主上**不会报错**，
+只是那些请求永远匹配不上，于是三条强制悄悄失效。
+
+| | 0.1.1-rc.2（第一代） | 0.1.2-rc.1+ / 0.1.5-rc.2（第二代） |
+|---|---|---|
+| 一元 RPC | `POST /api/<ns>.<method>` | `POST /api/<ns>/<method>` |
+| 工作区列表 | `workspace.list` 一元响应 | `workspace/follow` **流**（走 `/api/remote.mux`） |
+| 会话历史 | `session.history` 一元响应 | `session/page` 一元 + `session/follow` 的开场 `snapshot` |
+| 审批应答 | `POST /api/respond` | `POST /api/$events/result`（事件 id 由 mux 上的 `waterfall` 帧给出） |
+| 大文件外带 | —— | `workspaceFiles/readAll`、`readRelated`（整文件 base64） |
+
+因此在 0.1.2-rc.1 及更新的宿主上：
+
+- **工作区白名单 / 归属**：过滤 `workspace/follow` 的 baseline / upsert / order 帧（别人的工作区不下发，
+  且 upsert 会被整帧丢弃，否则被过滤掉的条目会立刻长回来）；
+- **沙盒档位下限**：钳制 `session/page` 的 records、`session/follow` 的 snapshot 与逐条事件、
+  以及 `session/control` 上 `permissions` 投影的 `currentValue`；
+- **审批一律拒绝**：把 `$events/result` 的 outcome 改写成 `{kind:'result', value:'rejected'}`。
+  判断「这是不是审批」有两条独立依据：mux 上 `approval/request` 的 waterfall 帧记下的 eventId，
+  以及 `allowed-once`（审批词表里唯一的放行值，问答的答案不可能是这个字符串）；
+- **整文件读取**：`workspaceFiles/readAll|readRelated` 归到「git / 下载」开关下。窗口化的 `read`/`readBytes`
+  与 `stat`/`list` 不拦——文件浏览器要靠它们画那一页，否则没开 git 的账号连文件都看不了。
+- **会话可见性**：三个入口共用一条判定（见上表）。两代的一元返回值都是 `{ items: SessionSummary[] }`，
+  但**都包在连接信封里**（`{ type:'server-response', rpcId, result:{ ok, value } }`）——只看顶层 `items`
+  在真流量上什么都匹配不到（这插件在对话内容台账上踩过一次，1.6.0 又踩了一次，所以
+  `dsh-wire.js` 现在带一个信封感知的定位器，测试也一律用真实信封而不是手写的裸形状）。
+  `session.search` 沿用同一份「刚被藏掉的 id」清单把命中片段一并去掉（列表是整份快照，每次响应
+  **覆盖**该清单而不是累加）。判定走 `workspaceVisibility`，与工作区列表同一套「白名单 + 归属」语义；
+  归属按**包含**该目录的最深认领算，所以 `…/mty/src` 里的会话算 `…/mty` 的。
+- **实时推送**：0.1.1 走 `src/sse-filter.js`（逐 SSE 块解析，只丢 `host/session-added` 且判定为不可见的那种块，
+  其余字节原样放行）；0.1.2+ 复用 mux 拦截器丢 `api-session/added` 帧。两条路都只在**确认识别**时动手，
+  认不出来就放行——这条流里跑着整个实时会话（含助手增量），绝不能因为它变哑。
+
+宿主源码级的核对记录（每条形状的文件:行）在 [`docs/dsh-wire-notes.md`](docs/dsh-wire-notes.md)。
+
 ## 配置
 
 走 `~/.dsh/settings.yaml` 的 `user-management:` 段。改完即时生效的字段无需重启；只有监听器字段
@@ -191,6 +229,22 @@ user-management:
 - 隐私开关：`user-management.auditConversationText: false`（设置页「会话与请求策略」里也有这一项）关掉即完全不抓。台账是
   `$DSH_HOME/user-management/audit.jsonl` 明文文件，提示词可能含口令 / 密钥时请关闭。
 
+### 部门层级（1.6.0 起）
+
+部门的「多层级」不是一张独立的部门表，而是**一个字符串里的路径**：`和平分局/刑侦大队/一中队`。这么定有两个好处——老数据不用迁移（原来的 `平台组` 就是单级），而且它正好就是工作区目录的形状：勾了「同时创建该用户的工作区」的账号，目录会一级一个文件夹地铺开。
+
+| 规则 | 值 |
+|---|---|
+| 层级分隔符 | `/`（`\` 也接受，存成 `/`） |
+| 最多层级 | 5 |
+| 每一级最长 | 24 字 |
+| 整串最长 | 64 字（含分隔符） |
+| 层级里禁止 | `\ / : * ? " < > |`，以及 `.` / `..` |
+
+空层级会被丢掉，两端空格会被裁掉：`" 和平分局 / 刑侦大队 // 一中队 "` 存成 `和平分局/刑侦大队/一中队`。**不合法就报错**，不会把非法字符悄悄折成 `-`：这条标签同时也是目录名，标签和目录不一致比报错更糟。
+
+编辑页与新建对话框里，部门框下面是层级摊开预览（`和平分局 › 刑侦大队`）、已在用层级的快捷前缀（点一下就把框变成 `该路径/`，接着往下敲一级即可），以及和上面同一套规则的即时校验提示。已用层级来自 `GET /user-management/api/departments`（管理员专用，返回**所有前缀**，不只是叶子节点——有人正好挂在中间层时，父级不能消失）。
+
 ### 新建用户时一并创建工作区（1.5.0 起）
 
 「用户 → 新增用户」多了一个复选框「同时创建该用户的工作区」。勾上后出现路径框，**预填**默认路径
@@ -326,13 +380,25 @@ node scripts/import-from-dsh-passwords.mjs --from E:\path\to\dsh-passwords --ove
 ## 测试
 
 ```bash
-npm test          # 203 项：策略纯函数、store、API 层、客户端契约、以及真实网关的端到端用例
+npm test          # 248 项：策略纯函数、store、API 层、客户端契约、以及真实网关的端到端用例
 npm run check     # 全量语法检查
 ```
 
 端到端用例会起真实网关（明文模式 + 假上游）验证：工作区过滤含 gzip、目录门与请求体重放、沙盒提权拦截与审批改写、
 上传 / git / 运维面门控、历史降级与隐藏字符清洗、配额拦截、归属认领与释放。
 
+`test/dsh-0.1.5-wire.test.mjs` 另外覆盖第二代 wire：假的 dsh 上游在 `/api/remote.mux` 上做真实的
+WebSocket 握手，按 `streamId` 收发 JSON 文本帧，验证 `workspace/follow` 的 baseline / upsert / order 过滤、
+`session/follow` 的 snapshot 与逐条事件钳制、`$events` waterfall 记录 + `$events/result` 审批拒绝、
+`session/page` 改写、`session/control` 的权限投影钳制、以及 `workspaceFiles/readAll` 门控；
+纯函数部分（`dsh-wire.js` 的帧计划、`mux-filter.js` 的编解码）单独覆盖丢弃 / 透传 / 分片放行语义。
+
+`test/session-visibility.test.mjs` 覆盖会话可见性：越界 cwd 的行被摘掉、没 cwd 与子代理行保留、
+别人认领目录（含其子目录）里的会话被摘掉（`blank` 也照摘）、自己认领的共享目录不摘、管理员原样、
+空白名单全摘、`session.search` 跟随列表的隐藏清单、以及 **SSE 那一路**——假上游按真实
+`data: {…}\n\n` 写 `host/session-added`，且**故意从块中间切成两个 chunk** 写出来，验证缓冲与逐块判定。
+所有响应都用真实信封形状，裸 `{ items }` 只作为兼容形状另测一次。
+
 ## 卸载 / 回滚
 
 ```bash
@@ -353,6 +419,18 @@ dsh plugin --profile web remove kczx-user-management
 - **会话历史要缓冲后才能改写**：历史响应是**一个 JSON 文档**（长会话实测 9–16 MB），网关必须先缓冲才能做沙盒降级与隐藏字符
   清洗，因此有 `historyMaxBytes` 上限（默认 64 MiB）。超过上限的会话会 **fail-closed 返回 502**，UI 显示「历史加载失败」——
   调大该值即可；1.0.0 之前用代理默认的 8 MiB，长会话必然踩中。
+- **第二代 wire 的强制有两条前提**：一是浏览器走本网关（直连宿主端口没有任何强制，见上），二是帧是
+  **单帧 JSON 文本**。分片的 WebSocket 消息、二进制帧、以及 ping/pong 控制帧一律原样放行——为了一个分片帧去缓冲
+  别人整条流不划算；`ws` 宿主与浏览器发这些控制消息都不分片，所以这条边界在实践中碰不到。
+- **SSE 过滤会「认输」**：一个块迟迟不结束、或缓冲超过 1 MiB，就原样转发并停止改写这条连接（宁可漏拦，不能把实时流卡住）。
+- **A 方案只挡「看得到」**：知道 sessionId 仍然能通过 `session/page` / `session/follow`（0.1.1 是 `session.history`）
+  读别人的会话——那是 B 方案的事。
+- **审批记忆是进程内的**：网关在 mux 上看到 `approval/request` 的 waterfall 帧后记住它的 eventId。
+  网关重启期间若浏览器重连，宿主会重放未决的 waterfall（同一个 eventId），记忆随之重建；万一两条依据都没命中
+  （既没记住、值也不是 `allowed-once`），该次应答按原样放行——这是有意的取舍：把 `$events/result` 一律拒掉
+  会连 `ask_user_question` 的答案一起吃掉。
+- **整文件读取按「整文件」划界**：`readAll` / `readRelated` 受开关管，窗口化的 `readBytes` 不受管——反复调它理论上
+  也能把文件搬走，但它是图片预览与分页阅读的底座，关掉会连文件浏览器一起关掉。
 - 上游 `@weibaohui/user-management`（0.9.5）与本包 `kczx-user-management` 是两个不同的包，互不覆盖，`pnpm update` 不会把两者串在一起。
 
 ## License

package/client/bundle.js

@@ -124,10 +124,20 @@ window.__ModuleLoader__.load({
       colPassword: '密码（至少 6 位）',
       colRolePick: '角色',
       colDepartment: '所属部门',
-      departmentPlaceholder: '所属部门（可选，最多 64 字）',
+      departmentPlaceholder: '所属部门（可选，用 / 分层）',
       departmentUnset: '未设置',
-      editDepartmentHint: '留空表示清除该用户的所属部门。',
+      editDepartmentHint: '留空表示清除该用户的所属部门；用 / 分层，例如「和平分局/刑侦大队/一中队」。',
       departmentUpdated: '所属部门已更新',
+      departmentLevelsLabel: '层级',
+      departmentPickHint: '点一个已有层级接着往下分：',
+      departmentNoSuggestions: '还没有任何部门层级，直接输入第一级即可。',
+      departmentClear: '清除',
+      departmentBadChar: '层级里不能有 \\ / : * ? " < > | 这些字符',
+      departmentBadDot: '层级不能是 . 或 ..',
+      departmentTooDeep: '最多 {n} 级',
+      departmentLevelTooLong: '每一级最多 {n} 字',
+      departmentTooLong: '整串最多 {n} 字（含 /）',
+      departmentAddChild: '＋ 下一级',
       // ── 新建用户时一并建工作区 ────────────────────────────────────────────────
       createWorkspace: '同时创建该用户的工作区',
       workspacePathLabel: '工作区路径',
@@ -381,10 +391,20 @@ window.__ModuleLoader__.load({
       colPassword: 'Password (min 6 chars)',
       colRolePick: 'Role',
       colDepartment: 'Department',
-      departmentPlaceholder: 'Department (optional, max 64 chars)',
+      departmentPlaceholder: 'Department (optional, levels separated by /)',
       departmentUnset: 'Not set',
-      editDepartmentHint: 'Leave empty to clear this account’s department.',
+      editDepartmentHint: 'Leave empty to clear this account’s department; separate levels with / — e.g. “HQ/Criminal/Team 1”.',
       departmentUpdated: 'Department updated',
+      departmentLevelsLabel: 'Levels',
+      departmentPickHint: 'Pick an existing level to extend it:',
+      departmentNoSuggestions: 'No department levels yet — just type the first one.',
+      departmentClear: 'Clear',
+      departmentBadChar: 'A level cannot contain \\ / : * ? " < > |',
+      departmentBadDot: 'A level cannot be . or ..',
+      departmentTooDeep: 'At most {n} levels',
+      departmentLevelTooLong: 'Each level is at most {n} characters',
+      departmentTooLong: 'At most {n} characters in total (including /)',
+      departmentAddChild: '+ add a level',
       // ── workspace created together with the account ───────────────────────────
       createWorkspace: 'Also create this account’s workspace',
       workspacePathLabel: 'Workspace path',
@@ -607,12 +627,59 @@ window.__ModuleLoader__.load({
       return out
     }
 
+    /**
+     * Department shape the store enforces (src/store.js). Mirrored rather than
+     * imported: this half is a browser bundle and cannot reach the host module, so
+     * the constants are repeated HERE and in the server, and the server stays the
+     * one that decides.
+     */
+    const DEPARTMENT_MAX_DEPTH = 5
+    const DEPARTMENT_MAX_LEVEL_LEN = 24
+    const DEPARTMENT_MAX_LEN = 64
+
+    /**
+     * The levels of a department label.
+     *
+     * Client twin of the store's `departmentLevels`: both separators are accepted,
+     * every level is trimmed, empties are dropped. Tolerant on purpose — this side
+     * only previews and warns; the server's normalized answer is what gets stored.
+     */
+    function departmentLevels(value) {
+      return String(value === undefined || value === null ? '' : value)
+        .replace(/[\u0000-\u001f\u007f]/g, '')
+        .split(/[\\/]+/)
+        .map((level) => level.trim())
+        .filter((level) => level !== '')
+    }
+
+    /**
+     * The first thing wrong with a department label, or null.
+     *
+     * Mirrors the store's refusals so the admin sees the problem while typing
+     * instead of after a round trip. The server still validates — this is advice,
+     * not the gate.
+     */
+    function departmentProblem(levels, t) {
+      if (levels.length > DEPARTMENT_MAX_DEPTH) return interpolate(t('departmentTooDeep'), { n: DEPARTMENT_MAX_DEPTH })
+      for (const level of levels) {
+        if (level === '.' || level === '..') return t('departmentBadDot')
+        if (/[\\/:*?"<>|]/.test(level)) return t('departmentBadChar')
+        if (level.length > DEPARTMENT_MAX_LEVEL_LEN) {
+          return interpolate(t('departmentLevelTooLong'), { n: DEPARTMENT_MAX_LEVEL_LEN })
+        }
+      }
+      if (levels.join('/').length > DEPARTMENT_MAX_LEN) {
+        return interpolate(t('departmentTooLong'), { n: DEPARTMENT_MAX_LEN })
+      }
+      return null
+    }
+
     /**
      * The default workspace path, as the create-user dialog shows it:
-     * `<root>/<department>/<username>`.
+     * `<root>/<一级>/<二级>/…/<username>`.
      *
      * This is the DISPLAY twin of the host half's rule (src/workspace-create.js):
-     * the same folding of a free-text department into one directory name, joined
+     * one folder PER department level, each folded into a directory name, joined
      * with the separator the server reported. The server recomputes the path from
      * its own module on submit and its answer is the one that counts — the two must
      * agree, which is why the box shows the default rather than inventing one.
@@ -623,7 +690,8 @@ window.__ModuleLoader__.load({
       // showing a path relative to nothing.
       if (base === '') return ''
       const parts = [base]
-      for (const raw of [department, username]) {
+      // The username is folded by the same rule as a level: it is one segment too.
+      for (const raw of [...departmentLevels(department), username]) {
         const segment = String(raw === undefined || raw === null ? '' : raw)
           .replace(/[\\/:*?"<>|\u0000-\u001f\u007f]/g, '-')
           .replace(/-{2,}/g, '-')
@@ -634,6 +702,53 @@ window.__ModuleLoader__.load({
       return parts.join(sep || '/')
     }
 
+    /**
+     * The department box: one text field, its levels spelled out underneath, and the
+     * levels already in use as one-click prefixes.
+     *
+     * The stored value stays a single string — the tree lives in the '/' separators,
+     * which is what the workspace folders are built from — so the picker's job is
+     * only to make the next level cheap to type: click a known path and the field
+     * becomes `path/`, ready for the new level.
+     */
+    function DepartmentField({ id, value, onChange, suggestions, __t: t }) {
+      const levels = departmentLevels(value)
+      const problem = departmentProblem(levels, t)
+      const known = Array.isArray(suggestions) ? suggestions : []
+      return h('div', { className: 'um-dept' },
+        h('input', {
+          id,
+          className: 'um-input',
+          value,
+          maxLength: DEPARTMENT_MAX_LEN,
+          list: problem === null ? `${id}-known` : undefined,
+          placeholder: t('departmentPlaceholder'),
+          onChange: (e) => onChange(e.target.value),
+        }),
+        problem === null ? null : h('div', { className: 'um-dept-problem' }, problem),
+        levels.length === 0 ? null : h('div', { className: 'um-dept-levels' },
+          h('span', { className: 'um-muted' }, `${t('departmentLevelsLabel')}：`),
+          levels.map((level, index) => h('span', { key: `${index}-${level}`, className: 'um-dept-level' }, level))),
+        h('datalist', { id: `${id}-known` }, known.map((path) => h('option', { key: path, value: path }))),
+        known.length === 0
+          ? h('div', { className: 'um-muted um-dept-hint' }, t('departmentNoSuggestions'))
+          : h('div', { className: 'um-dept-hint' },
+              h('span', { className: 'um-muted' }, t('departmentPickHint')),
+              known.map((path) => h('button', {
+                key: path,
+                type: 'button',
+                className: 'um-dept-pick',
+                title: `${path}/`,
+                onClick: () => onChange(`${path}/`),
+              }, path))),
+        levels.length === 0 ? null : h('button', {
+          type: 'button',
+          className: 'um-dept-clear',
+          onClick: () => onChange(''),
+        }, t('departmentClear')),
+      )
+    }
+
     /** A blank create-user form. A factory, not a shared literal: closing the
      *  dialog must hand back a fresh object, or React would keep rendering the
      *  previous edit's values. */
@@ -737,6 +852,17 @@ window.__ModuleLoader__.load({
     .um-form { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
     .um-form label { font-size: 12px; color: var(--dsw-alias-label-secondary); }
     /* Create-user dialog: the optional workspace block (checkbox → path + hints). */
+    /* Department box: the field, its levels, and the known-level prefixes. */
+    .um-dept { display: flex; flex-direction: column; gap: 6px; }
+    .um-dept .um-input { width: 100%; }
+    .um-dept-problem { font-size: 11px; line-height: 1.5; color: var(--dsw-alias-state-error-primary); }
+    .um-dept-levels { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; }
+    .um-dept-level { padding: 1px 6px; border-radius: 4px; background: var(--dsw-alias-bg-layer-3); color: var(--dsw-alias-label-primary); }
+    .um-dept-level + .um-dept-level::before { content: '›'; margin-right: 4px; color: var(--dsw-alias-label-tertiary); }
+    .um-dept-hint { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; line-height: 1.6; }
+    .um-dept-pick { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-secondary); border-radius: 4px; padding: 1px 6px; font-size: 11px; cursor: pointer; }
+    .um-dept-pick:hover { border-color: var(--dsw-alias-state-business-primary); color: var(--dsw-alias-state-business-primary); }
+    .um-dept-clear { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-state-business-primary); padding: 0; font-size: 11px; cursor: pointer; }
     .um-ws { display: flex; flex-direction: column; gap: 6px; }
     .um-ws .um-input { width: 100%; }
     .um-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); }
@@ -1220,7 +1346,7 @@ window.__ModuleLoader__.load({
      *  workspace (the whitelist denies by default, and '*' is the wide grant), an
      *  empty limit means no cap — clearing a field is a visible, deliberate act
      *  rather than a silent default. */
-    function EditUserPage({ user, me, onClose, onDone, onTempPassword, __t: t }) {
+    function EditUserPage({ user, me, departments, onClose, onDone, onTempPassword, __t: t }) {
       const p = user.permissions || {}
       const isSelf = user.id === me.id
       const [department, setDepartment] = useState(user.department || '')
@@ -1344,10 +1470,9 @@ window.__ModuleLoader__.load({
                 h('label', { htmlFor: 'um-edit-username' }, t('colUser')),
                 h('input', { id: 'um-edit-username', className: 'um-input', value: user.username, disabled: true }),
                 h('label', { htmlFor: 'um-edit-department' }, t('colDepartment')),
-                h('input', {
-                  id: 'um-edit-department', className: 'um-input', value: department, maxLength: 64,
-                  placeholder: t('departmentPlaceholder'),
-                  onChange: (e) => setDepartment(e.target.value),
+                h(DepartmentField, {
+                  id: 'um-edit-department', value: department, onChange: setDepartment,
+                  suggestions: departments, __t: t,
                 }),
                 h('div', { className: 'um-muted', style: { fontSize: 11, marginTop: -4 } }, t('editDepartmentHint')),
                 h('label', { htmlFor: 'um-edit-role' }, t('colRolePick')),
@@ -1461,7 +1586,7 @@ window.__ModuleLoader__.load({
      * could not be read: the dialog then asks for an absolute path rather than
      * showing a path relative to nothing.
      */
-    function CreateUserDialog({ form, setForm, wsDefault, wsTouched, onTypePath, onResetPath, onClose, onSubmit, __t: t }) {
+    function CreateUserDialog({ form, setForm, wsDefault, wsTouched, departments, onTypePath, onResetPath, onClose, onSubmit, __t: t }) {
       // Untouched means "the default" — shown, but sent to the server as blank so it
       // builds the path itself from its own root and its own sanitizing rules.
       const path = wsTouched ? form.workspacePath : wsDefault
@@ -1478,10 +1603,12 @@ window.__ModuleLoader__.load({
           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-department' }, t('colDepartment')),
-          h('input', {
-            id: 'um-new-department', className: 'um-input', value: form.department, maxLength: 64,
-            placeholder: t('departmentPlaceholder'),
-            onChange: (e) => setForm({ ...form, department: e.target.value }),
+          h(DepartmentField, {
+            id: 'um-new-department',
+            value: form.department,
+            onChange: (department) => setForm({ ...form, department }),
+            suggestions: departments,
+            __t: t,
           }),
           // The optional workspace: one checkbox, then the folder it will live in.
           h('label', { className: 'um-row', style: { gap: 6 } },
@@ -1523,6 +1650,10 @@ window.__ModuleLoader__.load({
       // reported it ({root, sep}); null until it answers. A path is not something to
       // guess at, so the dialog asks rather than assuming a layout.
       const [wsRoot, setWsRoot] = useState(null)
+      // The department paths in use, for the level picker in both dialogs. Derived
+      // from EVERY account, so it is fetched rather than scraped off the current
+      // page of the paged roster.
+      const [departments, setDepartments] = useState([])
       // Whether the admin typed in the path box. Untouched means "the default",
       // which is recomputed from the username/department as they are typed and left
       // for the server to build for real on submit.
@@ -1556,12 +1687,25 @@ window.__ModuleLoader__.load({
        */
       const openCreate = () => {
         setCreating(true)
+        loadDepartments()
         if (wsRoot !== null) return
         api('/workspace-root')
           .then((d) => setWsRoot({ root: String(d.root || ''), sep: String(d.sep || '/') }))
           .catch(() => setWsRoot({ root: '', sep: '/' }))
       }
 
+      /**
+       * Refresh the known department paths.
+       *
+       * Called whenever a form that can change them opens or submits, so the picker
+       * offers what the roster actually contains — a stale list would quietly drop
+       * the level somebody just created.
+       */
+      const loadDepartments = () =>
+        api('/departments')
+          .then((d) => setDepartments(Array.isArray(d.departments) ? d.departments : []))
+          .catch(() => setDepartments([]))
+
       const closeCreate = () => {
         setCreating(false)
         setForm(NEW_USER_FORM())
@@ -1580,6 +1724,9 @@ window.__ModuleLoader__.load({
 
       const submitCreate = (e) => {
         e.preventDefault()
+        // A new account may introduce a level; the picker should learn it without a
+        // page reload.
+        loadDepartments()
         // An untouched path box sends an EMPTY path: the server then builds the
         // default from its own root and its own sanitizing rules, so the folder can
         // never be a stale copy of what this form happened to display.
@@ -1640,7 +1787,10 @@ window.__ModuleLoader__.load({
                   ? 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 um-btn-primary', onClick: () => setEditUser(user) }, t('actionEdit'))))))))),
+                h('button', {
+                                  className: 'um-btn um-btn-primary',
+                                  onClick: () => { loadDepartments(); setEditUser(user) },
+                                }, t('actionEdit'))))))))),
         h(Pager, {
           page,
           pages: auditPageCount(total, pageSize),
@@ -1658,6 +1808,7 @@ window.__ModuleLoader__.load({
           // department and the username as they are typed); the dialog only draws it.
           wsDefault,
           wsTouched,
+          departments,
           onTypePath: () => setWsTouched(true),
           onResetPath: () => setWsTouched(false),
           onClose: closeCreate,
@@ -1667,6 +1818,7 @@ window.__ModuleLoader__.load({
         editUser && h(EditUserPage, {
           user: editUser,
           me,
+          departments,
           onClose: () => setEditUser(null),
           // The page closes on any write that changes the account, so the row behind
           // it is re-read instead of being reconciled field by field.
@@ -2742,7 +2894,7 @@ window.__ModuleLoader__.load({
       __internals: {
         NS, ZH, EN, TYPE_LABELS, api, formatTime, interpolate, auditPageCount,
         AUDIT_PAGE_SIZES, AUDIT_PAGE_SIZE_DEFAULT, AuditTab, UsersTab, ActivityTab, Pager, avatarHue,
-        workspaceDefaultPath, NEW_USER_FORM, CreateUserDialog, ConsoleHead, ConsoleCorner, BackToSettings, ShellUserMenu,
+        workspaceDefaultPath, departmentLevels, departmentProblem, DepartmentField, NEW_USER_FORM, CreateUserDialog, ConsoleHead, ConsoleCorner, BackToSettings, ShellUserMenu,
         setFullPageOverlay, fullPageOverlayOpen,
         UserAvatar, HeaderUserMenu, canBanIp, BanIpButton, ChangePasswordDialog, UserMenu, CertCard, LogoutButton, doLogout,
         CERT_INSTALL_COMMANDS, UserManagementSection, UserManagementEntry, AdminPanel, MyPanel, EditUserPage, TotpCard, AuditTextCell,