diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..3111c9d
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{ts,tsx,js,json,css,html,md,yaml,yml}]
+indent_style = space
+indent_size = 2
+
+[*.{rs,toml}]
+indent_style = space
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..79ad020
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,8 @@
+.git/
+**/dist/
+**/node_modules/
+**/target/
+vendor/
+config.toml
+*.png
+*.svg
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..e667257
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "printWidth": 100,
+  "proseWrap": "always",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}
diff --git a/README.md b/README.md
index cfda4da..11a8fa6 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,36 @@
 # 洛星瓷直播组件服务
 
-这是一个多用户 Rust/Axum 直播组件后端。目前内建 `danmaku_overlay` 弹幕姬，后端已经按“直播源 → 强类型事件 → 组件实例”的方式拆分，后续可以继续增加礼物展示、点歌姬等组件。镜像构建阶段会编译 React 前端，运行时由 Rust 同域托管控制台和 OBS 页面。
+这是一个多用户 Rust/Axum 直播组件后端。目前内建 `danmaku_overlay`
+弹幕姬，后端已经按“直播源 → 强类型事件 → 组件实例”的方式拆分，后续可以继续增加礼物展示、点歌姬等组件。镜像构建阶段会编译 React 前端，运行时由 Rust 同域托管控制台和 OBS 页面。
 
-直播连接使用 [`blivedm_rs`](https://github.com/isomoes/blivedm_rs) 的 `blivedm` crate。项目在 `vendor/blivedm` 固定了保留原始 JSON 的小补丁，避免 UID、礼物价格和上游事件 ID 被简化消息结构丢弃。
+直播连接使用 [`blivedm_rs`](https://github.com/isomoes/blivedm_rs) 的 `blivedm` crate。项目在
+`vendor/blivedm` 固定了保留原始 JSON 的小补丁，避免 UID、礼物价格和上游事件 ID 被简化消息结构丢弃。
+
+## 文档索引
+
+- [总体架构与事件流](docs/architecture.md)
+- [Rust 后端模块](apps/server-rust/README.md)
+- [React 控制台、OBS 与 PWA](apps/overlay/README.md)
+- [组件开发指南](docs/components/README.md)
+- [`danmaku_overlay` 弹幕姬](docs/components/danmaku-overlay.md)
+- [WebSocket 实时协议](docs/protocol.md)
+- [租户、Secret 与部署安全](docs/security.md)
+- [完整配置注释](config.toml.example)
 
 ## 后端结构
 
 `src/main.rs` 只负责配置、组装、监听和优雅退出，可复用核心由 `src/lib.rs` 导出：
 
-- `live/` 中的 provider adapter 把 Bilibili 消息归一化为 `domain.rs` 的强类型事件；`SourceSupervisor` 保证每个用户的固定直播源只有一个 listener。
-- `components.rs` 注册组件定义、设置 schema/迁移、事件订阅、纯投影和独立副作用 handler；新礼物展示或点歌姬不需要修改弹幕姬队列核心。
-- `realtime.rs` 按 component UUID 建立独立广播通道，路由时同时校验 owner 与 source；副作用 handler 不依赖 OBS WebSocket 是否在线。
-- `auth.rs`、`repository.rs` 和 PostgreSQL RLS 共同实现身份、凭据、直播源、组件与 token 的用户隔离；`http_api.rs` 从服务端会话推导 owner，不接受客户端自报 owner ID。
+- `live/` 中的 provider adapter 把 Bilibili 消息归一化为 `domain.rs`
+  的强类型事件；`SourceSupervisor` 保证每个用户的固定直播源只有一个 listener。
+- `components.rs`
+  注册组件定义、设置 schema/迁移、事件订阅、纯投影和独立副作用 handler；新礼物展示或点歌姬不需要修改弹幕姬队列核心。
+- `realtime.rs` 按 component
+  UUID 建立独立广播通道，路由时同时校验 owner 与 source；副作用 handler 不依赖 OBS
+  WebSocket 是否在线。
+- `auth.rs`、`repository.rs` 和 PostgreSQL
+  RLS 共同实现身份、凭据、直播源、组件与 token 的用户隔离；`http_api.rs`
+  从服务端会话推导 owner，不接受客户端自报 owner ID。
 
 ## 部署
 
@@ -25,13 +44,43 @@ openssl rand -hex 32      # 填入兼容字段 admin.session_secret
 docker compose up --build -d
 ```
 
-Compose 将 `config.toml` 只读挂载到 `/app/config.toml`，应用通过 `--config` 读取它。容器使用 host 网络，默认只在 `127.0.0.1:9719` 监听，供同机 Nginx 访问；不要把 `9719` 直接暴露到公网。
+Compose 将 `config.toml` 只读挂载到 `/app/config.toml`，应用通过 `--config`
+读取它。容器使用 host 网络，默认只在 `127.0.0.1:9719` 监听，供同机 Nginx 访问；不要把 `9719`
+直接暴露到公网。
 
-容器默认以 `1000:1000` 非 root 身份、只读根文件系统运行，并丢弃全部 Linux capabilities。请将 `config.toml` 设为 `chmod 600`，并确保容器用户可读；如宿主机用户不是 `1000:1000`，启动前设置 `APP_UID` 与 `APP_GID`。
+容器默认以 `1000:1000` 非 root 身份、只读根文件系统运行，并丢弃全部 Linux capabilities。请将
+`config.toml` 设为 `chmod 600`，并确保容器用户可读；如宿主机用户不是 `1000:1000`，启动前设置
+`APP_UID` 与 `APP_GID`。
 
-`[database].url` 指向 PostgreSQL。应用启动时自动执行版本化迁移，数据库保存账户、一次性邀请码、TOTP 注册状态、可撤销会话、恢复码摘要、用户直播源、组件设置、OBS 令牌摘要和审计记录。租户表同时使用 owner 复合外键与 PostgreSQL RLS 约束，HTTP API 也始终从当前会话取得 owner，客户端不能自行指定其他用户。
+`[database].url`
+指向 PostgreSQL。应用启动时自动执行版本化迁移，数据库保存账户、一次性邀请码、TOTP 注册状态、可撤销会话、恢复码摘要、用户直播源、组件设置、OBS 令牌摘要和审计记录。租户表同时使用 owner 复合外键与 PostgreSQL
+RLS 约束，HTTP API 也始终从当前会话取得 owner，客户端不能自行指定其他用户。
 
-`security.data_encryption_key` 必须是独立生成并妥善备份的 32 字节 Base64 密钥。TOTP Secret 与每个用户的 CookieCloud Key/密码会在写入 PostgreSQL 前用它加密；丢失或擅自更换该密钥会导致已有账户和 CookieCloud 凭据无法解密。
+`security.data_encryption_key` 必须是独立生成并妥善备份的 32 字节 Base64 密钥。TOTP
+Secret 与每个用户的 CookieCloud
+Key/密码会在写入 PostgreSQL 前用它加密；丢失或擅自更换该密钥会导致已有账户和 CookieCloud 凭据无法解密。
+
+## 开发与代码质量
+
+Rust 使用仓库内 `rustfmt.toml`，前端和文档使用固定版本 Prettier。推荐提交前执行：
+
+```sh
+cargo fmt --manifest-path apps/server-rust/Cargo.toml
+cargo clippy --manifest-path apps/server-rust/Cargo.toml --all-targets --no-deps -- -D warnings
+cargo test --manifest-path apps/server-rust/Cargo.toml --all-targets
+
+npm --prefix apps/overlay run format
+npm --prefix apps/overlay run format:check
+npm --prefix apps/overlay run docs:check
+npm --prefix apps/overlay run build
+
+docker compose config --quiet
+git diff --check
+```
+
+`.editorconfig` 统一换行、缩进和文件末尾规则；`.prettierignore` 与 Docker/Git
+ignore 会排除依赖、构建产物、第三方 vendor、PNG/SVG 和包含真实 Secret 的 `config.toml`。不要对
+`vendor/blivedm` 做无关的批量风格改写，以便继续审查上游补丁。
 
 ## 首次初始化与登录
 
@@ -41,7 +90,8 @@ Compose 将 `config.toml` 只读挂载到 `/app/config.toml`，应用通过 `--c
 https://danmaku.luoxingci.com/control/setup
 ```
 
-填写系统管理员用户名和 `config.toml` 中的 `admin.password`，扫描页面生成的 TOTP 二维码，再输入验证器中的 6 位动态码完成初始化。页面只显示一次恢复码，请立即离线保存。
+填写系统管理员用户名和 `config.toml` 中的
+`admin.password`，扫描页面生成的 TOTP 二维码，再输入验证器中的 6 位动态码完成初始化。页面只显示一次恢复码，请立即离线保存。
 
 `admin.password` 只是“允许创建第一个系统管理员”的一次性 bootstrap proof：
 
@@ -50,9 +100,14 @@ https://danmaku.luoxingci.com/control/setup
 - 所有账户都是 passwordless 账户，以“用户名 + TOTP”登录；丢失验证器时可使用一次性恢复码。
 - 会话使用随机令牌，数据库只保存摘要，可在服务端到期或撤销。
 
-系统管理员可在 `/control/invitations` 创建和撤销邀请码。每个邀请码只能使用一次，并在创建时固定绑定一个尚未占用的 Bilibili `room_id`；注册者不能修改该房间，账户创建后房间绑定也不可更改。受邀用户打开注册链接，选择用户名、扫描自己的 TOTP 二维码并确认动态码即可完成注册。普通用户不能创建邀请码。
+系统管理员可在 `/control/invitations`
+创建和撤销邀请码。每个邀请码只能使用一次，并在创建时固定绑定一个尚未占用的 Bilibili
+`room_id`；注册者不能修改该房间，账户创建后房间绑定也不可更改。受邀用户打开注册链接，选择用户名、扫描自己的 TOTP 二维码并确认动态码即可完成注册。普通用户不能创建邀请码。
 
-每个用户在 `/control/` 配置自己的 CookieCloud 同步 UUID/Key 和密码，地址必须位于部署管理员配置的 `security.cookiecloud_allowed_hosts` 白名单。服务禁止 HTTP 重定向并安全编码 Key 路径，避免用户凭据导致服务端任意请求。服务会先验证凭据，再将敏感字段按用户独立加密保存；Cookie、Key 和明文密码不会返回浏览器，也不会与其他账户共享。CookieCloud 中需要存在 Bilibili `SESSDATA`。
+每个用户在 `/control/` 配置自己的 CookieCloud 同步 UUID/Key 和密码，地址必须位于部署管理员配置的
+`security.cookiecloud_allowed_hosts`
+白名单。服务禁止 HTTP 重定向并安全编码 Key 路径，避免用户凭据导致服务端任意请求。服务会先验证凭据，再将敏感字段按用户独立加密保存；Cookie、Key 和明文密码不会返回浏览器，也不会与其他账户共享。CookieCloud 中需要存在 Bilibili
+`SESSDATA`。
 
 ### 旧单用户配置迁移
 
@@ -67,7 +122,8 @@ https://danmaku.luoxingci.com/control/setup
 
 ## 必须使用 HTTPS
 
-公开部署账号、TOTP 和会话功能时必须在 Nginx（或可信反向代理）终止 HTTPS，并保持 `security.secure_cookies = true`。下面是核心反代设置；证书路径按实际 Certbot 配置填写：
+公开部署账号、TOTP 和会话功能时必须在 Nginx（或可信反向代理）终止 HTTPS，并保持
+`security.secure_cookies = true`。下面是核心反代设置；证书路径按实际 Certbot 配置填写：
 
 ```nginx
 map $http_upgrade $connection_upgrade {
@@ -103,36 +159,54 @@ server {
 }
 ```
 
-只有在本机、无敏感数据的纯 HTTP 开发环境中才能临时设置 `secure_cookies = false`。不要用该选项把登录页面直接发布到公网。
+只有在本机、无敏感数据的纯 HTTP 开发环境中才能临时设置
+`secure_cookies = false`。不要用该选项把登录页面直接发布到公网。
 
 ## 控制台 PWA
 
-通过 HTTPS 打开 `/control/` 后，受支持的浏览器会在控制台顶部显示“安装到设备”。`/control` 会由服务端永久重定向到这个规范地址。安装后的应用使用独立窗口，并继续采用“用户名 + TOTP”登录；登录、注册与首次初始化在 PWA 内分别使用 `/control/login`、`/control/register` 和 `/control/setup`。原有 `/login`、`/register`、`/setup` 地址仍兼容普通浏览器书签。
+通过 HTTPS 打开 `/control/` 后，受支持的浏览器会在控制台顶部显示“安装到设备”。`/control`
+会由服务端永久重定向到这个规范地址。安装后的应用使用独立窗口，并继续采用“用户名 +
+TOTP”登录；登录、注册与首次初始化在 PWA 内分别使用 `/control/login`、`/control/register` 和
+`/control/setup`。原有 `/login`、`/register`、`/setup` 地址仍兼容普通浏览器书签。
 
-PWA 只控制 `/control/`，不会控制、缓存或刷新 `/obs/*` 浏览器源。离线缓存仅包含 React 应用外壳、本地图标和构建后带哈希的静态资源；账户、TOTP、邀请码、CookieCloud、组件设置、OBS 令牌、直播事件和所有 `/api/*` 响应始终在线直连且由服务端返回 `Cache-Control: no-store`。离线时写操作会在浏览器端直接拒绝，不会排队或在恢复网络后重放。
+PWA 只控制 `/control/`，不会控制、缓存或刷新 `/obs/*`
+浏览器源。离线缓存仅包含 React 应用外壳、本地图标和构建后带哈希的静态资源；账户、TOTP、邀请码、CookieCloud、组件设置、OBS 令牌、直播事件和所有
+`/api/*` 响应始终在线直连且由服务端返回
+`Cache-Control: no-store`。离线时写操作会在浏览器端直接拒绝，不会排队或在恢复网络后重放。
 
 部署新版本后，已打开的控制台会显示“更新可用”。更新不会自动接管或刷新页面，必须由用户点击确认；确认前请先保存设置以及只显示一次的邀请码、恢复码或刚轮换的 OBS 令牌。
 
 ## 组件与 OBS 地址
 
-登录 `/control/` 后可以配置当前账户的直播源、管理组件、测试事件、调整弹幕样式，以及为每个组件单独生成或轮换只读 OBS 令牌。新的浏览器源地址格式是：
+登录 `/control/`
+后可以配置当前账户的直播源、管理组件、测试事件、调整弹幕样式，以及为每个组件单独生成或轮换只读 OBS 令牌。新的浏览器源地址格式是：
 
 ```text
 https://danmaku.luoxingci.com/obs/<publicId>#token=<component-token>
 ```
 
-`publicId` 是组件 UUID。`#token=...` 位于 URL fragment，不会随最初的 HTTP 请求发送到 Nginx；OBS 页面随后通过 WebSocket 的第一帧向 `/api/v1/components/<publicId>/stream` 完成认证。令牌只带 `events:subscribe` 权限，不能调用管理或写入接口；轮换后旧令牌立即失效。
+`publicId` 是组件 UUID。`#token=...` 位于 URL
+fragment，不会随最初的 HTTP 请求发送到 Nginx；OBS 页面随后通过 WebSocket 的第一帧向
+`/api/v1/components/<publicId>/stream` 完成认证。令牌只带 `events:subscribe`
+权限，不能调用管理或写入接口；轮换后旧令牌立即失效。
 
-旧格式 `/obs?token=...` 与 `/ws?token=...` 已移除，避免 bearer token 进入 Nginx 访问日志。升级后请在控制台为组件轮换令牌，并把旧 OBS 源替换为上述新地址；旧令牌一旦轮换便立即失效。
+旧格式 `/obs?token=...` 与 `/ws?token=...` 已移除，避免 bearer
+token 进入 Nginx 访问日志。升级后请在控制台为组件轮换令牌，并把旧 OBS 源替换为上述新地址；旧令牌一旦轮换便立即失效。
 
-OBS 页面保持透明根背景，不使用固定 1920×1080 画布，并根据浏览器源的实际宽高自动适配。常用尺寸可从 `360×600`、`440×760` 或 `600×1080` 开始，也可以在 OBS 中自由拖拽缩放。
+OBS 页面保持透明根背景，不使用固定 1920×1080 画布，并根据浏览器源的实际宽高自动适配。常用尺寸可从
+`360×600`、`440×760` 或 `600×1080` 开始，也可以在 OBS 中自由拖拽缩放。
 
 ## 弹幕姬展示
 
 每张消息卡片会从六套花纹组合中稳定选择一套，轮换使用对称花枝、横向自然藤纹和雏菊花簇，并改变上下、左右、镜像、配色与局部背景。连续的新卡避免使用相同款式，礼物连击更新保持原样式；透明消息墙本身不铺设全局装饰背景。粒子数量与速度、字号、事件类别、最大条数、自动收缩、卷轴展开时长、动效强度、低性能模式和礼物高亮阈值均可按组件在控制台调整，并实时推送给对应 OBS 源。
 
-花边 SVG 已本地打包，来源及公版/CC0 许可记录在 `apps/overlay/public/assets/NOTICE.md`，OBS 运行时不会访问素材站点。
+花边 SVG 已本地打包，来源及公版/CC0 许可记录在
+`apps/overlay/public/assets/NOTICE.md`，OBS 运行时不会访问素材站点。
 
-后端会为每个活动直播源缓存 Bilibili 礼物图片、GIF、币种和价格。目录刷新失败时保留上一次成功缓存；缺失条目会降级为直播事件自带的名称与价格。刷新间隔和请求超时可通过 `[gifts]` 调整。
+后端会为每个活动直播源缓存 Bilibili 礼物图片、GIF、币种和价格。目录刷新失败时保留上一次成功缓存；缺失条目会降级为直播事件自带的名称与价格。刷新间隔和请求超时可通过
+`[gifts]` 调整。
 
-普通混排表情和整条大表情会作为安全的文字/图片分段推送。消息自带图片地址优先；服务还会使用该用户 CookieCloud 中的 `SESSDATA` 刷新对应直播间的表情目录，在消息只提供唯一标识时补齐图片。加载失败时前端退回原始表情文字，刷新参数可通过 `[emoticons]` 调整。
+普通混排表情和整条大表情会作为安全的文字/图片分段推送。消息自带图片地址优先；服务还会使用该用户 CookieCloud 中的
+`SESSDATA`
+刷新对应直播间的表情目录，在消息只提供唯一标识时补齐图片。加载失败时前端退回原始表情文字，刷新参数可通过
+`[emoticons]` 调整。
diff --git a/apps/overlay/README.md b/apps/overlay/README.md
new file mode 100644
index 0000000..2de215e
--- /dev/null
+++ b/apps/overlay/README.md
@@ -0,0 +1,61 @@
+# React 控制台与 OBS 前端
+
+Vite 在 Docker build stage 编译本目录，最终静态文件由 Rust 同域托管。生产容器不包含 Node。
+
+## 路由
+
+| 路由                   | 权限            | 作用                                 |
+| ---------------------- | --------------- | ------------------------------------ |
+| `/control/`            | 登录用户        | 直播源、组件、测试、设置和 OBS token |
+| `/control/invitations` | system admin    | 创建/撤销绑定房间的邀请码            |
+| `/control/login`       | 匿名            | 用户名 + TOTP/恢复码登录             |
+| `/control/register`    | 匿名受邀用户    | 邀请码注册与 TOTP enrollment         |
+| `/control/setup`       | 首次部署        | 创建唯一 system admin                |
+| `/obs/:publicId`       | component token | 透明 OBS 浏览器源                    |
+
+`main.tsx` 在初始化控制台前先识别 OBS 路由，因此 OBS 不会注册 PWA 或请求账户 session。
+
+## 文件职责
+
+| 文件                | 职责                                                 |
+| ------------------- | ---------------------------------------------------- |
+| `src/api.ts`        | same-origin fetch、错误模型和兼容性 normalizer       |
+| `src/auth.tsx`      | passwordless login、TOTP QR 与恢复码                 |
+| `src/control.tsx`   | tenant component studio 和 system-admin 邀请码页面   |
+| `src/overlay.tsx`   | WebSocket、消息队列、礼物/表情和 OBS 自适应渲染      |
+| `src/pwa.tsx`       | install prompt、离线状态、显式更新和敏感状态 blocker |
+| `src/types.ts`      | sanitized API view model 与 overlay settings         |
+| `pwa/control-sw.js` | `/control/` 静态壳层的缓存策略                       |
+
+## Secret 与状态
+
+- TOTP Secret、恢复码、邀请码和新 OBS 地址只保存在当前 React state。
+- API normalizer 不把未知对象直接传播到组件。
+- API mutation 离线时立即失败，不进入 Background Sync。
+- PWA 更新在 dirty form 或一次性 secret 可见时被阻止。
+- OBS token 从 URL fragment 读取，只在 WebSocket 第一帧发送。
+- OBS 收到坏 JSON、坏图片或未知事件时局部降级，不让浏览器源崩溃。
+
+## PWA
+
+manifest、start URL 与 Service Worker scope 均为 `/control/`。worker 使用 network-first
+HTML 和 cache-first build assets；`/api/*`、`/obs/*`、WebSocket 和用户数据永不缓存。每次 Vite
+build 把同一个 build ID 注入浏览器 bundle 与 worker，发现更新后等待用户确认激活。
+
+## 格式化与构建
+
+```bash
+npm run format
+npm run format:check
+npm run docs:check
+npm run build
+```
+
+`npm run format`
+使用仓库根目录的 Prettier 配置，同时格式化 TypeScript、TSX、CSS、HTML、JSON、Markdown、Compose
+YAML 和项目文档。
+
+组件协议与弹幕姬行为分别见：
+
+- [实时协议](../../docs/protocol.md)
+- [弹幕姬组件](../../docs/components/danmaku-overlay.md)
diff --git a/apps/overlay/package-lock.json b/apps/overlay/package-lock.json
index 56c49b6..9e1a799 100644
--- a/apps/overlay/package-lock.json
+++ b/apps/overlay/package-lock.json
@@ -15,6 +15,7 @@
         "@types/react": "19.1.10",
         "@types/react-dom": "19.1.7",
         "@vitejs/plugin-react": "5.0.2",
+        "prettier": "3.9.5",
         "typescript": "5.9.2",
         "vite": "7.3.6"
       }
@@ -1573,6 +1574,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.5.tgz",
+      "integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
diff --git a/apps/overlay/package.json b/apps/overlay/package.json
index f742dcd..f94a6b8 100644
--- a/apps/overlay/package.json
+++ b/apps/overlay/package.json
@@ -2,7 +2,23 @@
   "name": "lxc-stream-overlay",
   "private": true,
   "version": "0.1.0",
-  "scripts": { "build": "tsc -b && vite build", "dev": "vite" },
-  "dependencies": { "react": "19.1.1", "react-dom": "19.1.1" },
-  "devDependencies": { "@types/react": "19.1.10", "@types/react-dom": "19.1.7", "@vitejs/plugin-react": "5.0.2", "typescript": "5.9.2", "vite": "7.3.6" }
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "docs:check": "node scripts/check-doc-links.mjs ../..",
+    "format": "prettier --ignore-path ../../.prettierignore --write . ../server-rust/README.md ../../README.md ../../docs ../../compose.yaml",
+    "format:check": "prettier --ignore-path ../../.prettierignore --check . ../server-rust/README.md ../../README.md ../../docs ../../compose.yaml"
+  },
+  "dependencies": {
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "19.1.10",
+    "@types/react-dom": "19.1.7",
+    "@vitejs/plugin-react": "5.0.2",
+    "prettier": "3.9.5",
+    "typescript": "5.9.2",
+    "vite": "7.3.6"
+  }
 }
diff --git a/apps/overlay/public/assets/NOTICE.md b/apps/overlay/public/assets/NOTICE.md
index df83647..0a984d8 100644
--- a/apps/overlay/public/assets/NOTICE.md
+++ b/apps/overlay/public/assets/NOTICE.md
@@ -7,8 +7,7 @@
 - License: CC0 1.0 / public domain
 - Retrieved: 2026-07-15
 
-`floral-vine.svg` is a metadata-stripped copy of “Floral border 04 element by
-Paul Bürck”.
+`floral-vine.svg` is a metadata-stripped copy of “Floral border 04 element by Paul Bürck”.
 
 - Source: https://commons.wikimedia.org/wiki/File:Floral_border_04_element_by_Paul_B%C3%BCrck.svg
 - Original artist: Paul Bürck, 1899
@@ -16,8 +15,7 @@ Paul Bürck”.
 - License: original public domain; SVG adaptation CC0 1.0
 - Retrieved: 2026-07-15
 
-`floral-cluster.svg` is a metadata-stripped copy of “Floral border 01 corner by
-Paul Bürck”.
+`floral-cluster.svg` is a metadata-stripped copy of “Floral border 01 corner by Paul Bürck”.
 
 - Source: https://commons.wikimedia.org/wiki/File:Floral_border_01_corner_by_Paul_B%C3%BCrck.svg
 - Original artist: Paul Bürck, 1899
@@ -25,5 +23,5 @@ Paul Bürck”.
 - License: original public domain; SVG adaptation CC0 1.0
 - Retrieved: 2026-07-15
 
-The overlay uses these SVGs as recolorable CSS masks inside message cards and
-bundles them locally, so OBS never needs to load the source websites.
+The overlay uses these SVGs as recolorable CSS masks inside message cards and bundles them locally,
+so OBS never needs to load the source websites.
diff --git a/apps/overlay/pwa/control-sw.js b/apps/overlay/pwa/control-sw.js
index 99a5099..ad6bb5e 100644
--- a/apps/overlay/pwa/control-sw.js
+++ b/apps/overlay/pwa/control-sw.js
@@ -1,4 +1,11 @@
-/* __PWA_BUILD_ID__ is replaced by the Vite build before this file is emitted. */
+/**
+ * Network policy for the `/control/` application shell.
+ *
+ * `__PWA_BUILD_ID__` is replaced by Vite before emission. Navigations use a
+ * network-first strategy so fresh HTML can reference the newest hashed bundle;
+ * known static assets use cache-first. The worker never handles API, WebSocket
+ * or OBS routes because they are outside both this fetch policy and its scope.
+ */
 const buildId = '__PWA_BUILD_ID__'
 const cacheName = `lxc-control-v2-shell-${buildId}`
 const shellPath = '/control/'
@@ -24,8 +31,9 @@ async function precacheShell() {
 
   const html = await response.clone().text()
   await Promise.all(shellRoutes.map(route => cache.put(route, response.clone())))
-  const generatedAssets = [...html.matchAll(/(?:src|href)="(\/assets\/[^"?#]+)"/g)]
-    .map(match => match[1])
+  const generatedAssets = [...html.matchAll(/(?:src|href)="(\/assets\/[^"?#]+)"/g)].map(
+    match => match[1],
+  )
   await cache.addAll([...new Set([...stableAssets, ...generatedAssets])])
 }
 
@@ -34,13 +42,17 @@ self.addEventListener('install', event => {
 })
 
 self.addEventListener('activate', event => {
-  event.waitUntil((async () => {
-    const names = await caches.keys()
-    await Promise.all(names
-      .filter(name => name.startsWith('lxc-control-v2-shell-') && name !== cacheName)
-      .map(name => caches.delete(name)))
-    await self.clients.claim()
-  })())
+  event.waitUntil(
+    (async () => {
+      const names = await caches.keys()
+      await Promise.all(
+        names
+          .filter(name => name.startsWith('lxc-control-v2-shell-') && name !== cacheName)
+          .map(name => caches.delete(name)),
+      )
+      await self.clients.claim()
+    })(),
+  )
 })
 
 self.addEventListener('message', event => {
@@ -52,9 +64,11 @@ function isControlShell(pathname) {
 }
 
 function isStaticAsset(pathname) {
-  return pathname.startsWith('/assets/')
-    || pathname.startsWith('/pwa/')
-    || pathname === '/control/manifest.webmanifest'
+  return (
+    pathname.startsWith('/assets/') ||
+    pathname.startsWith('/pwa/') ||
+    pathname === '/control/manifest.webmanifest'
+  )
 }
 
 async function navigationResponse(request) {
@@ -62,16 +76,20 @@ async function navigationResponse(request) {
   const pathname = new URL(request.url).pathname
   try {
     const response = await fetch(request)
-    if (shellRoutes.includes(pathname)
-        && response.ok
-        && response.headers.get('content-type')?.includes('text/html')) {
+    if (
+      shellRoutes.includes(pathname) &&
+      response.ok &&
+      response.headers.get('content-type')?.includes('text/html')
+    ) {
       await cache.put(pathname, response.clone())
     }
     return response
   } catch {
-    return (await cache.match(request, { ignoreSearch: true }))
-      || (await cache.match(shellPath))
-      || Response.error()
+    return (
+      (await cache.match(request, { ignoreSearch: true })) ||
+      (await cache.match(shellPath)) ||
+      Response.error()
+    )
   }
 }
 
diff --git a/apps/overlay/scripts/check-doc-links.mjs b/apps/overlay/scripts/check-doc-links.mjs
new file mode 100644
index 0000000..b3e76c6
--- /dev/null
+++ b/apps/overlay/scripts/check-doc-links.mjs
@@ -0,0 +1,56 @@
+/**
+ * Verify repository-local Markdown links without making network requests.
+ *
+ * External URLs are intentionally skipped: CI should not fail because an
+ * upstream website is temporarily unavailable. Local documentation links are
+ * deterministic and catch renamed component guides or incorrect relative paths.
+ */
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { dirname, extname, resolve } from 'node:path'
+
+const root = resolve(process.argv[2] ?? new URL('../../..', import.meta.url).pathname)
+const ignoredDirectories = new Set([
+  '.agents',
+  '.codex',
+  '.git',
+  'dist',
+  'node_modules',
+  'target',
+  'vendor',
+])
+const markdownFiles = []
+
+function collect(directory) {
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    if (entry.isDirectory() && ignoredDirectories.has(entry.name)) continue
+    const path = resolve(directory, entry.name)
+    if (entry.isDirectory()) collect(path)
+    else if (extname(entry.name).toLowerCase() === '.md') markdownFiles.push(path)
+  }
+}
+
+collect(root)
+
+const failures = []
+const markdownLink = /\[[^\]]*\]\(([^)]+)\)/g
+for (const file of markdownFiles) {
+  const source = readFileSync(file, 'utf8')
+  for (const match of source.matchAll(markdownLink)) {
+    const rawTarget = match[1].trim().replace(/^<|>$/g, '')
+    if (!rawTarget || rawTarget.startsWith('#') || /^[a-z][a-z+.-]*:/i.test(rawTarget)) continue
+
+    // The project does not currently use titled local links. Splitting here
+    // still handles the conventional `(path "title")` form if one is added.
+    const target = decodeURI(rawTarget.split(/\s+["']/)[0].split('#')[0])
+    if (!target) continue
+    const destination = resolve(dirname(file), target)
+    if (!existsSync(destination)) failures.push(`${file}: ${rawTarget}`)
+  }
+}
+
+if (failures.length > 0) {
+  console.error(`Broken local documentation links:\n${failures.join('\n')}`)
+  process.exitCode = 1
+} else {
+  console.log(`Checked ${markdownFiles.length} Markdown files; local links are valid.`)
+}
diff --git a/apps/overlay/src/api.ts b/apps/overlay/src/api.ts
index c568932..b396b9a 100644
--- a/apps/overlay/src/api.ts
+++ b/apps/overlay/src/api.ts
@@ -1,3 +1,12 @@
+/**
+ * Same-origin API client and defensive wire-format normalizers.
+ *
+ * The backend is authoritative and may evolve response wrappers independently
+ * from a deployed frontend. Normalizers accept those compatible wrappers while
+ * producing strict UI models. Mutations are refused while offline and are never
+ * queued for background replay, which avoids applying an old user's action
+ * after logout or tenant switching.
+ */
 import type {
   AuthUser,
   ComponentSummary,
@@ -13,7 +22,12 @@ export class ApiError extends Error {
   readonly code?: string
   readonly fieldErrors?: Record<string, string>
 
-  constructor(status: number, message: string, code?: string, fieldErrors?: Record<string, string>) {
+  constructor(
+    status: number,
+    message: string,
+    code?: string,
+    fieldErrors?: Record<string, string>,
+  ) {
     super(message)
     this.name = 'ApiError'
     this.status = status
@@ -36,7 +50,8 @@ export async function api<T>(path: string, init: RequestInit = {}): Promise<T> {
     throw new ApiError(0, '当前处于离线状态，操作没有提交；联网后请重试。', 'offline')
   }
   const headers = new Headers(init.headers)
-  if (init.body != null && !headers.has('content-type')) headers.set('content-type', 'application/json')
+  if (init.body != null && !headers.has('content-type'))
+    headers.set('content-type', 'application/json')
   headers.set('accept', 'application/json')
 
   const response = await fetch(path, {
@@ -49,13 +64,13 @@ export async function api<T>(path: string, init: RequestInit = {}): Promise<T> {
     if (response.status === 401 && !path.startsWith('/api/v1/auth/')) {
       window.dispatchEvent(new Event('lxc:session-expired'))
     }
-    const error = payload && typeof payload === 'object' ? payload as Record<string, unknown> : {}
+    const error = payload && typeof payload === 'object' ? (payload as Record<string, unknown>) : {}
     throw new ApiError(
       response.status,
       String(error.message ?? error.error ?? `请求失败（HTTP ${response.status}）`),
       typeof error.code === 'string' ? error.code : undefined,
       error.fieldErrors && typeof error.fieldErrors === 'object'
-        ? error.fieldErrors as Record<string, string>
+        ? (error.fieldErrors as Record<string, string>)
         : undefined,
     )
   }
@@ -71,24 +86,29 @@ export function json(method: string, body?: unknown): RequestInit {
 
 function object(value: unknown): Record<string, unknown> {
   return value != null && typeof value === 'object' && !Array.isArray(value)
-    ? value as Record<string, unknown>
+    ? (value as Record<string, unknown>)
     : {}
 }
 
 export function normalizeSession(value: unknown): Session {
   const root = object(value)
-  const candidate = root.user
-    ?? (root.authenticated === true || typeof root.id === 'string' || typeof root.username === 'string' ? root : null)
+  const candidate =
+    root.user ??
+    (root.authenticated === true || typeof root.id === 'string' || typeof root.username === 'string'
+      ? root
+      : null)
   const raw = object(candidate)
   const hasUser = typeof raw.id === 'string' || typeof raw.username === 'string'
-  const user: AuthUser | null = hasUser ? {
-    id: String(raw.id ?? ''),
-    username: String(raw.username ?? ''),
-    roomId: typeof raw.roomId === 'string' ? raw.roomId : undefined,
-    displayName: typeof raw.displayName === 'string' ? raw.displayName : undefined,
-    role: typeof raw.role === 'string' ? raw.role : 'user',
-    totpEnabled: typeof raw.totpEnabled === 'boolean' ? raw.totpEnabled : undefined,
-  } : null
+  const user: AuthUser | null = hasUser
+    ? {
+        id: String(raw.id ?? ''),
+        username: String(raw.username ?? ''),
+        roomId: typeof raw.roomId === 'string' ? raw.roomId : undefined,
+        displayName: typeof raw.displayName === 'string' ? raw.displayName : undefined,
+        role: typeof raw.role === 'string' ? raw.role : 'user',
+        totpEnabled: typeof raw.totpEnabled === 'boolean' ? raw.totpEnabled : undefined,
+      }
+    : null
   return { user, setupRequired: root.setupRequired === true }
 }
 
@@ -98,19 +118,26 @@ export function normalizeEnrollment(value: unknown): TotpEnrollment {
   const enrollmentToken = root.enrollmentToken ?? totp.enrollmentToken ?? root.flowId ?? root.id
   return {
     enrollmentToken: String(enrollmentToken ?? ''),
-    qrSvg: typeof totp.qrSvg === 'string' ? totp.qrSvg : typeof root.qrSvg === 'string' ? root.qrSvg : undefined,
-    qrDataUrl: typeof totp.qrDataUrl === 'string'
-      ? totp.qrDataUrl
-      : typeof totp.qrCodeDataUrl === 'string'
-        ? totp.qrCodeDataUrl
-        : typeof root.qrDataUrl === 'string'
-          ? root.qrDataUrl
+    qrSvg:
+      typeof totp.qrSvg === 'string'
+        ? totp.qrSvg
+        : typeof root.qrSvg === 'string'
+          ? root.qrSvg
+          : undefined,
+    qrDataUrl:
+      typeof totp.qrDataUrl === 'string'
+        ? totp.qrDataUrl
+        : typeof totp.qrCodeDataUrl === 'string'
+          ? totp.qrCodeDataUrl
+          : typeof root.qrDataUrl === 'string'
+            ? root.qrDataUrl
+            : undefined,
+    otpauthUri:
+      typeof totp.otpauthUri === 'string'
+        ? totp.otpauthUri
+        : typeof root.otpauthUri === 'string'
+          ? root.otpauthUri
           : undefined,
-    otpauthUri: typeof totp.otpauthUri === 'string'
-      ? totp.otpauthUri
-      : typeof root.otpauthUri === 'string'
-        ? root.otpauthUri
-        : undefined,
     manualKey: String(totp.manualKey ?? totp.secret ?? root.manualKey ?? root.secret ?? ''),
     expiresAt: typeof root.expiresAt === 'string' ? root.expiresAt : undefined,
   }
@@ -119,24 +146,28 @@ export function normalizeEnrollment(value: unknown): TotpEnrollment {
 export function normalizeRecoveryCodes(value: unknown): string[] {
   const root = object(value)
   const codes = root.recoveryCodes ?? object(root.recovery).codes
-  return Array.isArray(codes) ? codes.filter((code): code is string => typeof code === 'string') : []
+  return Array.isArray(codes)
+    ? codes.filter((code): code is string => typeof code === 'string')
+    : []
 }
 
 export function normalizeComponents(value: unknown): ComponentSummary[] {
   const root = object(value)
   const list = Array.isArray(value) ? value : Array.isArray(root.components) ? root.components : []
-  return list.map((entry) => {
-    const item = object(entry)
-    return {
-      id: String(item.id ?? ''),
-      publicId: String(item.publicId ?? item.public_id ?? item.id ?? ''),
-      kind: String(item.kind ?? item.type ?? 'danmaku'),
-      name: String(item.name ?? '弹幕姬'),
-      enabled: typeof item.enabled === 'boolean' ? item.enabled : undefined,
-      settings: item.settings as OverlaySettings | undefined,
-      updatedAt: typeof item.updatedAt === 'string' ? item.updatedAt : undefined,
-    }
-  }).filter(item => item.id)
+  return list
+    .map(entry => {
+      const item = object(entry)
+      return {
+        id: String(item.id ?? ''),
+        publicId: String(item.publicId ?? item.public_id ?? item.id ?? ''),
+        kind: String(item.kind ?? item.type ?? 'danmaku'),
+        name: String(item.name ?? '弹幕姬'),
+        enabled: typeof item.enabled === 'boolean' ? item.enabled : undefined,
+        settings: item.settings as OverlaySettings | undefined,
+        updatedAt: typeof item.updatedAt === 'string' ? item.updatedAt : undefined,
+      }
+    })
+    .filter(item => item.id)
 }
 
 export function normalizeSettings(value: unknown): OverlaySettings {
@@ -147,50 +178,68 @@ export function normalizeSettings(value: unknown): OverlaySettings {
 export function normalizeSource(value: unknown): CookieCloudSource {
   const root = object(value)
   const source = object(root.source ?? root)
-  const cookieCloud = object(source.cookieCloud ?? source.cookiecloud ?? root.cookieCloud ?? root.cookiecloud)
+  const cookieCloud = object(
+    source.cookieCloud ?? source.cookiecloud ?? root.cookieCloud ?? root.cookiecloud,
+  )
   const status = object(source.status)
   return {
     roomId: String(source.roomId ?? root.roomId ?? ''),
     cookieCloud: {
       host: String(cookieCloud.host ?? ''),
       key: '',
-      keyConfigured: cookieCloud.keyConfigured === true
-        || (typeof cookieCloud.key === 'string' && cookieCloud.key.length > 0),
-      passwordConfigured: cookieCloud.passwordConfigured === true
-        || cookieCloud.configured === true
-        || (typeof cookieCloud.password === 'string' && cookieCloud.password.length > 0),
+      keyConfigured:
+        cookieCloud.keyConfigured === true ||
+        (typeof cookieCloud.key === 'string' && cookieCloud.key.length > 0),
+      passwordConfigured:
+        cookieCloud.passwordConfigured === true ||
+        cookieCloud.configured === true ||
+        (typeof cookieCloud.password === 'string' && cookieCloud.password.length > 0),
     },
-    connected: typeof source.connected === 'boolean'
-      ? source.connected
-      : typeof status.connected === 'boolean'
-        ? status.connected
-        : undefined,
-    detail: typeof source.detail === 'string'
-      ? source.detail
-      : typeof status.detail === 'string'
-        ? status.detail
-        : undefined,
+    connected:
+      typeof source.connected === 'boolean'
+        ? source.connected
+        : typeof status.connected === 'boolean'
+          ? status.connected
+          : undefined,
+    detail:
+      typeof source.detail === 'string'
+        ? source.detail
+        : typeof status.detail === 'string'
+          ? status.detail
+          : undefined,
     updatedAt: typeof source.updatedAt === 'string' ? source.updatedAt : undefined,
   }
 }
 
 export function normalizeInvitations(value: unknown): Invitation[] {
   const root = object(value)
-  const list = Array.isArray(value) ? value : Array.isArray(root.invitations) ? root.invitations : []
-  return list.map((entry) => {
-    const item = object(entry)
-    return {
-      id: String(item.id ?? ''),
-      code: typeof item.code === 'string' ? item.code : undefined,
-      codePrefix: typeof item.codePrefix === 'string' ? item.codePrefix : undefined,
-      roomId: String(item.roomId ?? ''),
-      createdBy: typeof item.createdBy === 'string' ? item.createdBy : undefined,
-      createdAt: typeof item.createdAt === 'string' ? item.createdAt : undefined,
-      expiresAt: typeof item.expiresAt === 'string' ? item.expiresAt : undefined,
-      consumedAt: typeof item.consumedAt === 'string' || item.consumedAt === null ? item.consumedAt : undefined,
-      revokedAt: typeof item.revokedAt === 'string' || item.revokedAt === null ? item.revokedAt : undefined,
-    }
-  }).filter(item => item.id)
+  const list = Array.isArray(value)
+    ? value
+    : Array.isArray(root.invitations)
+      ? root.invitations
+      : []
+  return list
+    .map(entry => {
+      const item = object(entry)
+      return {
+        id: String(item.id ?? ''),
+        code: typeof item.code === 'string' ? item.code : undefined,
+        codePrefix: typeof item.codePrefix === 'string' ? item.codePrefix : undefined,
+        roomId: String(item.roomId ?? ''),
+        createdBy: typeof item.createdBy === 'string' ? item.createdBy : undefined,
+        createdAt: typeof item.createdAt === 'string' ? item.createdAt : undefined,
+        expiresAt: typeof item.expiresAt === 'string' ? item.expiresAt : undefined,
+        consumedAt:
+          typeof item.consumedAt === 'string' || item.consumedAt === null
+            ? item.consumedAt
+            : undefined,
+        revokedAt:
+          typeof item.revokedAt === 'string' || item.revokedAt === null
+            ? item.revokedAt
+            : undefined,
+      }
+    })
+    .filter(item => item.id)
 }
 
 export function errorMessage(error: unknown, fallback = '操作失败，请稍后再试'): string {
diff --git a/apps/overlay/src/auth.tsx b/apps/overlay/src/auth.tsx
index 27f2b4f..f31d9b6 100644
--- a/apps/overlay/src/auth.tsx
+++ b/apps/overlay/src/auth.tsx
@@ -1,3 +1,11 @@
+/**
+ * Passwordless login and one-time TOTP enrollment screens.
+ *
+ * QR material, manual keys and recovery codes exist only in React memory and
+ * are dropped as soon as their enrollment phase completes. PWA activation is
+ * blocked while those values or partially completed forms are visible so an
+ * update cannot erase information that the server will not reveal again.
+ */
 import { useMemo, useState } from 'react'
 import type { FormEvent, ReactNode } from 'react'
 import {
@@ -11,7 +19,12 @@ import {
 import { PwaControls, authRoute, usePwaUpdateBlocker } from './pwa'
 import type { TotpEnrollment } from './types'
 
-function AuthShell({ eyebrow, title, children, footer }: {
+function AuthShell({
+  eyebrow,
+  title,
+  children,
+  footer,
+}: {
   eyebrow: string
   title: string
   children: ReactNode
@@ -21,7 +34,9 @@ function AuthShell({ eyebrow, title, children, footer }: {
     <main className="auth-page">
       <section className="auth-card jade-panel">
         <PwaControls />
-        <div className="auth-mark" aria-hidden="true">星</div>
+        <div className="auth-mark" aria-hidden="true">
+          星
+        </div>
         <p className="eyebrow">{eyebrow}</p>
         <h1>{title}</h1>
         {children}
@@ -34,16 +49,19 @@ function AuthShell({ eyebrow, title, children, footer }: {
 function TotpQr({ enrollment }: { enrollment: TotpEnrollment }) {
   const source = useMemo(() => {
     if (enrollment.qrDataUrl) return enrollment.qrDataUrl
-    if (enrollment.qrSvg) return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(enrollment.qrSvg)}`
+    if (enrollment.qrSvg)
+      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(enrollment.qrSvg)}`
     return undefined
   }, [enrollment.qrDataUrl, enrollment.qrSvg])
 
   return (
     <div className="totp-enrollment">
       <div className="totp-qr">
-        {source
-          ? <img src={source} alt="TOTP 验证器绑定二维码" />
-          : <span>二维码暂不可用，请使用右侧密钥手工添加。</span>}
+        {source ? (
+          <img src={source} alt="TOTP 验证器绑定二维码" />
+        ) : (
+          <span>二维码暂不可用，请使用右侧密钥手工添加。</span>
+        )}
       </div>
       <div className="totp-copy">
         <h2>绑定动态验证器</h2>
@@ -57,7 +75,11 @@ function TotpQr({ enrollment }: { enrollment: TotpEnrollment }) {
           <div className="secret-row">
             <code>{enrollment.manualKey || '未提供'}</code>
             {enrollment.manualKey && (
-              <button type="button" className="text-button" onClick={() => void copyToClipboard(enrollment.manualKey)}>
+              <button
+                type="button"
+                className="text-button"
+                onClick={() => void copyToClipboard(enrollment.manualKey)}
+              >
                 复制
               </button>
             )}
@@ -72,12 +94,10 @@ function RecoveryCodes({ codes, onContinue }: { codes: string[]; onContinue: ()
   const [copied, setCopied] = useState(false)
   const text = codes.join('\n')
   const download = () => {
-    const blob = new Blob([
-      '洛星瓷直播组件恢复码\n',
-      '每个恢复码只能使用一次，请离线妥善保存。\n\n',
-      text,
-      '\n',
-    ], { type: 'text/plain;charset=utf-8' })
+    const blob = new Blob(
+      ['洛星瓷直播组件恢复码\n', '每个恢复码只能使用一次，请离线妥善保存。\n\n', text, '\n'],
+      { type: 'text/plain;charset=utf-8' },
+    )
     const url = URL.createObjectURL(blob)
     const anchor = document.createElement('a')
     anchor.href = url
@@ -88,26 +108,45 @@ function RecoveryCodes({ codes, onContinue }: { codes: string[]; onContinue: ()
 
   return (
     <AuthShell eyebrow="安全设置完成" title="保存账户恢复码">
-      <p className="auth-lead">手机丢失或验证器不可用时，可用恢复码登录。服务端不会再次显示这些明文恢复码。</p>
-      {codes.length > 0
-        ? <div className="recovery-grid">{codes.map(code => <code key={code}>{code}</code>)}</div>
-        : <div className="notice warning">服务端没有返回恢复码，请先联系管理员确认恢复策略。</div>}
+      <p className="auth-lead">
+        手机丢失或验证器不可用时，可用恢复码登录。服务端不会再次显示这些明文恢复码。
+      </p>
+      {codes.length > 0 ? (
+        <div className="recovery-grid">
+          {codes.map(code => (
+            <code key={code}>{code}</code>
+          ))}
+        </div>
+      ) : (
+        <div className="notice warning">服务端没有返回恢复码，请先联系管理员确认恢复策略。</div>
+      )}
       <div className="form-actions">
         {codes.length > 0 && (
           <>
-            <button type="button" className="secondary" onClick={() => void copyToClipboard(text).then(setCopied)}>
+            <button
+              type="button"
+              className="secondary"
+              onClick={() => void copyToClipboard(text).then(setCopied)}
+            >
               {copied ? '已复制' : '复制全部'}
             </button>
-            <button type="button" className="secondary" onClick={download}>下载文本</button>
+            <button type="button" className="secondary" onClick={download}>
+              下载文本
+            </button>
           </>
         )}
-        <button type="button" onClick={onContinue}>我已妥善保存</button>
+        <button type="button" onClick={onContinue}>
+          我已妥善保存
+        </button>
       </div>
     </AuthShell>
   )
 }
 
-export function LoginPage({ onAuthenticated, setupRequired }: {
+export function LoginPage({
+  onAuthenticated,
+  setupRequired,
+}: {
   onAuthenticated: () => Promise<void>
   setupRequired: boolean
 }) {
@@ -142,13 +181,19 @@ export function LoginPage({ onAuthenticated, setupRequired }: {
     <AuthShell
       eyebrow="洛星瓷直播组件"
       title="回到你的云台"
-      footer={(
+      footer={
         <p>
-          {setupRequired
-            ? <>首次部署？<a href={authRoute('setup')}>创建系统管理员</a></>
-            : <>持有邀请码？<a href={authRoute('register')}>注册新账户</a></>}
+          {setupRequired ? (
+            <>
+              首次部署？<a href={authRoute('setup')}>创建系统管理员</a>
+            </>
+          ) : (
+            <>
+              持有邀请码？<a href={authRoute('register')}>注册新账户</a>
+            </>
+          )}
         </p>
-      )}
+      }
     >
       <p className="auth-lead">这是无密码账户。输入用户名与验证器中的动态验证码即可登录。</p>
       <form className="stack-form" onSubmit={submit}>
@@ -173,9 +218,13 @@ export function LoginPage({ onAuthenticated, setupRequired }: {
             maxLength={useRecoveryCode ? 64 : 6}
             placeholder={useRecoveryCode ? '输入一个尚未使用的恢复码' : '000000'}
             value={totpCode}
-            onChange={event => setTotpCode(useRecoveryCode
-              ? event.target.value.trimStart().slice(0, 64)
-              : event.target.value.replace(/\D/g, '').slice(0, 6))}
+            onChange={event =>
+              setTotpCode(
+                useRecoveryCode
+                  ? event.target.value.trimStart().slice(0, 64)
+                  : event.target.value.replace(/\D/g, '').slice(0, 6),
+              )
+            }
           />
         </label>
         <button
@@ -188,14 +237,21 @@ export function LoginPage({ onAuthenticated, setupRequired }: {
         >
           {useRecoveryCode ? '改用动态验证码' : '验证器不可用？改用恢复码'}
         </button>
-        {error && <div className="notice error" role="alert">{error}</div>}
+        {error && (
+          <div className="notice error" role="alert">
+            {error}
+          </div>
+        )}
         <button disabled={busy}>{busy ? '正在验证…' : '安全登录'}</button>
       </form>
     </AuthShell>
   )
 }
 
-export function EnrollmentPage({ mode, onAuthenticated }: {
+export function EnrollmentPage({
+  mode,
+  onAuthenticated,
+}: {
   mode: 'setup' | 'register'
   onAuthenticated: () => Promise<void>
 }) {
@@ -214,7 +270,10 @@ export function EnrollmentPage({ mode, onAuthenticated }: {
     enrollment || recoveryCodes
       ? '完成 TOTP 绑定并保存一次性恢复码'
       : '完成或清空正在填写的注册表单',
-    busy || Boolean(inviteCode || username || bootstrapPassword || totpCode || enrollment || recoveryCodes),
+    busy ||
+      Boolean(
+        inviteCode || username || bootstrapPassword || totpCode || enrollment || recoveryCodes,
+      ),
   )
 
   const start = async (event: FormEvent) => {
@@ -276,7 +335,10 @@ export function EnrollmentPage({ mode, onAuthenticated }: {
 
   if (enrollment) {
     return (
-      <AuthShell eyebrow={isSetup ? '系统初始化 · 第二步' : '邀请码注册 · 第二步'} title="强制绑定 TOTP">
+      <AuthShell
+        eyebrow={isSetup ? '系统初始化 · 第二步' : '邀请码注册 · 第二步'}
+        title="强制绑定 TOTP"
+      >
         <TotpQr enrollment={enrollment} />
         <form className="stack-form compact-form" onSubmit={confirm}>
           <label>
@@ -294,8 +356,14 @@ export function EnrollmentPage({ mode, onAuthenticated }: {
               onChange={event => setTotpCode(event.target.value.replace(/\D/g, '').slice(0, 6))}
             />
           </label>
-          {error && <div className="notice error" role="alert">{error}</div>}
-          <button disabled={busy || totpCode.length !== 6}>{busy ? '正在确认…' : '确认绑定并创建账户'}</button>
+          {error && (
+            <div className="notice error" role="alert">
+              {error}
+            </div>
+          )}
+          <button disabled={busy || totpCode.length !== 6}>
+            {busy ? '正在确认…' : '确认绑定并创建账户'}
+          </button>
         </form>
       </AuthShell>
     )
@@ -305,7 +373,11 @@ export function EnrollmentPage({ mode, onAuthenticated }: {
     <AuthShell
       eyebrow={isSetup ? '仅首次部署可用' : '仅限受邀用户'}
       title={isSetup ? '创建系统管理员' : '创建你的账户'}
-      footer={<p>已有账户？<a href={authRoute('login')}>返回登录</a></p>}
+      footer={
+        <p>
+          已有账户？<a href={authRoute('login')}>返回登录</a>
+        </p>
+      }
     >
       <p className="auth-lead">
         {isSetup
@@ -350,7 +422,11 @@ export function EnrollmentPage({ mode, onAuthenticated }: {
             <small>填写部署配置中的旧管理员口令；它仅验证初始化权限，不会保存为用户密码。</small>
           </label>
         )}
-        {error && <div className="notice error" role="alert">{error}</div>}
+        {error && (
+          <div className="notice error" role="alert">
+            {error}
+          </div>
+        )}
         <button disabled={busy}>{busy ? '正在准备 TOTP…' : '下一步：绑定验证器'}</button>
       </form>
     </AuthShell>
diff --git a/apps/overlay/src/control.css b/apps/overlay/src/control.css
index 7d32e34..fab3205 100644
--- a/apps/overlay/src/control.css
+++ b/apps/overlay/src/control.css
@@ -7,7 +7,9 @@ html,
 body,
 #root,
 .copy {
-  font-family: "Noto Serif SC", "Microsoft YaHei", "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji", serif;
+  font-family:
+    'Noto Serif SC', 'Microsoft YaHei', 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji',
+    serif;
 }
 
 .wall {
@@ -19,19 +21,33 @@ body,
 }
 
 .card-decor {
-  --decor-primary-image: url("/assets/floral-divider.svg");
+  --decor-primary-image: url('/assets/floral-divider.svg');
   --decor-primary-position: center 44%;
   --decor-primary-size: 92% auto;
   --decor-primary-transform: none;
-  --decor-primary-opacity: .11;
-  --decor-primary-color: linear-gradient(90deg, #e7d0f4 4%, #75e6cc 35%, #d5fff1 50%, #6adcc6 68%, #f4bfd4 96%);
-  --decor-secondary-image: url("/assets/floral-cluster.svg");
+  --decor-primary-opacity: 0.11;
+  --decor-primary-color: linear-gradient(
+    90deg,
+    #e7d0f4 4%,
+    #75e6cc 35%,
+    #d5fff1 50%,
+    #6adcc6 68%,
+    #f4bfd4 96%
+  );
+  --decor-secondary-image: url('/assets/floral-cluster.svg');
   --decor-secondary-position: right -10px bottom -22px;
   --decor-secondary-size: 34% auto;
   --decor-secondary-transform: none;
-  --decor-secondary-opacity: .065;
+  --decor-secondary-opacity: 0.065;
   --decor-secondary-color: linear-gradient(135deg, #e9c7f1, #79ead3 62%, #fff0bc);
-  --decor-surface: radial-gradient(ellipse at 50% 0, rgba(180, 255, 237, .09), transparent 58%), linear-gradient(90deg, rgba(230, 203, 241, .04), transparent 18% 82%, rgba(244, 190, 214, .04));
+  --decor-surface:
+    radial-gradient(ellipse at 50% 0, rgba(180, 255, 237, 0.09), transparent 58%),
+    linear-gradient(
+      90deg,
+      rgba(230, 203, 241, 0.04),
+      transparent 18% 82%,
+      rgba(244, 190, 214, 0.04)
+    );
   position: absolute;
   inset: 0;
   z-index: 0;
@@ -43,7 +59,7 @@ body,
 
 .card-decor::before,
 .card-decor::after {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -59,7 +75,7 @@ body,
   opacity: var(--decor-primary-opacity);
   transform: var(--decor-primary-transform);
   transform-origin: center;
-  filter: drop-shadow(0 0 6px rgba(105, 255, 224, .28));
+  filter: drop-shadow(0 0 6px rgba(105, 255, 224, 0.28));
 }
 
 .card-decor::after {
@@ -78,12 +94,12 @@ body,
   position: absolute;
   inset: 2px;
   z-index: 0;
-  border: 1px solid rgba(157, 255, 232, .14);
+  border: 1px solid rgba(157, 255, 232, 0.14);
   border-radius: inherit;
   background: var(--decor-surface);
   box-shadow:
-    inset 0 1px rgba(225, 255, 247, .1),
-    inset 0 -1px rgba(82, 224, 198, .08);
+    inset 0 1px rgba(225, 255, 247, 0.1),
+    inset 0 -1px rgba(82, 224, 198, 0.08);
 }
 
 .decor-v1 {
@@ -94,67 +110,82 @@ body,
   --decor-secondary-position: right -12px bottom -20px;
   --decor-secondary-size: 31% auto;
   --decor-secondary-transform: rotate(180deg);
-  --decor-secondary-opacity: .075;
+  --decor-secondary-opacity: 0.075;
   --decor-secondary-color: linear-gradient(145deg, #ffe9aa, #83e9d2 62%, #efd0f5);
-  --decor-surface: radial-gradient(ellipse at 52% 100%, rgba(255, 226, 163, .08), transparent 56%), linear-gradient(90deg, rgba(112, 232, 208, .045), transparent 34% 76%, rgba(236, 200, 243, .04));
+  --decor-surface:
+    radial-gradient(ellipse at 52% 100%, rgba(255, 226, 163, 0.08), transparent 56%),
+    linear-gradient(
+      90deg,
+      rgba(112, 232, 208, 0.045),
+      transparent 34% 76%,
+      rgba(236, 200, 243, 0.04)
+    );
 }
 
 .decor-v2 {
-  --decor-primary-image: url("/assets/floral-vine.svg");
+  --decor-primary-image: url('/assets/floral-vine.svg');
   --decor-primary-position: left -12px bottom -13px;
   --decor-primary-size: 73% auto;
-  --decor-primary-opacity: .105;
+  --decor-primary-opacity: 0.105;
   --decor-primary-color: linear-gradient(110deg, #83ead5, #d8fff3 54%, #cbb9e9);
-  --decor-secondary-image: url("/assets/floral-divider.svg");
+  --decor-secondary-image: url('/assets/floral-divider.svg');
   --decor-secondary-position: right -22px top -18px;
   --decor-secondary-size: 62% auto;
-  --decor-secondary-opacity: .055;
+  --decor-secondary-opacity: 0.055;
   --decor-secondary-color: linear-gradient(90deg, #f5c9dc, #8be9d7 68%, #fff1bd);
-  --decor-surface: radial-gradient(ellipse at 0 74%, rgba(105, 231, 206, .09), transparent 54%), linear-gradient(105deg, rgba(217, 198, 241, .045), transparent 58%);
+  --decor-surface:
+    radial-gradient(ellipse at 0 74%, rgba(105, 231, 206, 0.09), transparent 54%),
+    linear-gradient(105deg, rgba(217, 198, 241, 0.045), transparent 58%);
 }
 
 .decor-v3 {
-  --decor-primary-image: url("/assets/floral-vine.svg");
+  --decor-primary-image: url('/assets/floral-vine.svg');
   --decor-primary-position: left -15px bottom -15px;
   --decor-primary-size: 77% auto;
   --decor-primary-transform: scaleX(-1);
-  --decor-primary-opacity: .115;
+  --decor-primary-opacity: 0.115;
   --decor-primary-color: linear-gradient(100deg, #f2bfd7, #8aead8 48%, #d6fff0);
   --decor-secondary-position: right -12px bottom -20px;
   --decor-secondary-size: 32% auto;
-  --decor-secondary-opacity: .07;
+  --decor-secondary-opacity: 0.07;
   --decor-secondary-color: linear-gradient(145deg, #d9c1ed, #6fe0c9 58%, #ffe8ad);
-  --decor-surface: radial-gradient(ellipse at 100% 24%, rgba(235, 190, 218, .075), transparent 54%), linear-gradient(270deg, rgba(103, 228, 204, .05), transparent 64%);
+  --decor-surface:
+    radial-gradient(ellipse at 100% 24%, rgba(235, 190, 218, 0.075), transparent 54%),
+    linear-gradient(270deg, rgba(103, 228, 204, 0.05), transparent 64%);
 }
 
 .decor-v4 {
-  --decor-primary-image: url("/assets/floral-cluster.svg");
+  --decor-primary-image: url('/assets/floral-cluster.svg');
   --decor-primary-position: left -18px bottom -28px;
   --decor-primary-size: 45% auto;
   --decor-primary-transform: rotate(-5deg);
-  --decor-primary-opacity: .09;
+  --decor-primary-opacity: 0.09;
   --decor-primary-color: linear-gradient(135deg, #9cecd8, #fff0bd 57%, #edc5e4);
   --decor-secondary-position: left -15px bottom -25px;
   --decor-secondary-size: 37% auto;
   --decor-secondary-transform: rotate(180deg);
-  --decor-secondary-opacity: .065;
+  --decor-secondary-opacity: 0.065;
   --decor-secondary-color: linear-gradient(145deg, #dec4ee, #72dfc7 66%, #fff0b6);
-  --decor-surface: radial-gradient(ellipse at 18% 100%, rgba(110, 232, 207, .085), transparent 47%), radial-gradient(ellipse at 84% 0, rgba(239, 199, 223, .06), transparent 44%);
+  --decor-surface:
+    radial-gradient(ellipse at 18% 100%, rgba(110, 232, 207, 0.085), transparent 47%),
+    radial-gradient(ellipse at 84% 0, rgba(239, 199, 223, 0.06), transparent 44%);
 }
 
 .decor-v5 {
-  --decor-primary-image: url("/assets/floral-vine.svg");
+  --decor-primary-image: url('/assets/floral-vine.svg');
   --decor-primary-position: center top -17px;
   --decor-primary-size: 90% auto;
   --decor-primary-transform: scaleY(-1);
-  --decor-primary-opacity: .095;
+  --decor-primary-opacity: 0.095;
   --decor-primary-color: linear-gradient(90deg, #d9c4ed, #82e5d2 44%, #f8e7b5 78%, #efc2d8);
-  --decor-secondary-image: url("/assets/floral-divider.svg");
+  --decor-secondary-image: url('/assets/floral-divider.svg');
   --decor-secondary-position: left 18% top -15px;
   --decor-secondary-size: 55% auto;
-  --decor-secondary-opacity: .06;
+  --decor-secondary-opacity: 0.06;
   --decor-secondary-color: linear-gradient(90deg, #fff0bc, #86e7d5 64%, #e4c6f0);
-  --decor-surface: radial-gradient(ellipse at 50% 50%, rgba(207, 247, 236, .065), transparent 56%), linear-gradient(90deg, rgba(232, 199, 239, .04), transparent 52%, rgba(255, 229, 168, .035));
+  --decor-surface:
+    radial-gradient(ellipse at 50% 50%, rgba(207, 247, 236, 0.065), transparent 56%),
+    linear-gradient(90deg, rgba(232, 199, 239, 0.04), transparent 52%, rgba(255, 229, 168, 0.035));
 }
 
 .card::before {
@@ -173,8 +204,8 @@ body,
   position: absolute;
   inset: 0;
   z-index: 2;
-  opacity: .5;
-  transition: opacity .3s ease;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
 }
 
 .decor-v1 .card-particle-layer,
@@ -208,7 +239,7 @@ body,
 .card-particle.star {
   background: linear-gradient(135deg, #fff7ca, #b7fff0 58%, #f5d4ff);
   clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
-  filter: drop-shadow(0 0 4px rgba(190, 255, 240, .9));
+  filter: drop-shadow(0 0 4px rgba(190, 255, 240, 0.9));
 }
 
 .card-particle.floret {
@@ -219,30 +250,99 @@ body,
     radial-gradient(circle at 50% 83%, #ffd7e5 0 19%, transparent 22%),
     radial-gradient(circle at 18% 50%, #ffd7e5 0 19%, transparent 22%),
     radial-gradient(circle at 50% 50%, #fff0a9 0 18%, transparent 21%);
-  filter: drop-shadow(0 0 4px rgba(255, 202, 226, .72));
+  filter: drop-shadow(0 0 4px rgba(255, 202, 226, 0.72));
 }
 
-.card-particle:nth-child(1) { left: 2%; top: 14%; animation-delay: -.35s; }
-.card-particle:nth-child(2) { right: 3%; top: 16%; --particle-size: 10px; animation-delay: -1.15s; }
-.card-particle:nth-child(3) { left: 4%; bottom: 13%; --particle-size: 7px; animation-delay: -2.4s; }
-.card-particle:nth-child(4) { right: 2%; bottom: 15%; --particle-size: 8px; animation-delay: -.75s; }
-.card-particle:nth-child(5) { left: 22%; top: 5%; --particle-size: 9px; animation-delay: -3.15s; }
-.card-particle:nth-child(6) { right: 24%; top: 8%; --particle-size: 6px; animation-delay: -1.65s; }
-.card-particle:nth-child(7) { left: 47%; bottom: 4%; --particle-size: 8px; animation-delay: -2.75s; }
-.card-particle:nth-child(8) { right: 43%; top: 4%; --particle-size: 7px; animation-delay: -.15s; }
-.card-particle:nth-child(9) { left: 34%; top: 46%; --particle-size: 6px; animation-delay: -1.95s; }
-.card-particle:nth-child(10) { right: 32%; bottom: 30%; --particle-size: 9px; animation-delay: -3.55s; }
-.card-particle:nth-child(11) { left: 12%; top: 48%; --particle-size: 7px; animation-delay: -.95s; }
-.card-particle:nth-child(12) { right: 13%; top: 52%; --particle-size: 6px; animation-delay: -2.2s; }
+.card-particle:nth-child(1) {
+  left: 2%;
+  top: 14%;
+  animation-delay: -0.35s;
+}
+.card-particle:nth-child(2) {
+  right: 3%;
+  top: 16%;
+  --particle-size: 10px;
+  animation-delay: -1.15s;
+}
+.card-particle:nth-child(3) {
+  left: 4%;
+  bottom: 13%;
+  --particle-size: 7px;
+  animation-delay: -2.4s;
+}
+.card-particle:nth-child(4) {
+  right: 2%;
+  bottom: 15%;
+  --particle-size: 8px;
+  animation-delay: -0.75s;
+}
+.card-particle:nth-child(5) {
+  left: 22%;
+  top: 5%;
+  --particle-size: 9px;
+  animation-delay: -3.15s;
+}
+.card-particle:nth-child(6) {
+  right: 24%;
+  top: 8%;
+  --particle-size: 6px;
+  animation-delay: -1.65s;
+}
+.card-particle:nth-child(7) {
+  left: 47%;
+  bottom: 4%;
+  --particle-size: 8px;
+  animation-delay: -2.75s;
+}
+.card-particle:nth-child(8) {
+  right: 43%;
+  top: 4%;
+  --particle-size: 7px;
+  animation-delay: -0.15s;
+}
+.card-particle:nth-child(9) {
+  left: 34%;
+  top: 46%;
+  --particle-size: 6px;
+  animation-delay: -1.95s;
+}
+.card-particle:nth-child(10) {
+  right: 32%;
+  bottom: 30%;
+  --particle-size: 9px;
+  animation-delay: -3.55s;
+}
+.card-particle:nth-child(11) {
+  left: 12%;
+  top: 48%;
+  --particle-size: 7px;
+  animation-delay: -0.95s;
+}
+.card-particle:nth-child(12) {
+  right: 13%;
+  top: 52%;
+  --particle-size: 6px;
+  animation-delay: -2.2s;
+}
 
 @keyframes card-sparkle {
-  0%, 100% { opacity: .04; transform: translate3d(0, 4px, 0) rotate(0) scale(.45); }
-  38% { opacity: .82; transform: translate3d(2px, -2px, 0) rotate(38deg) scale(1.08); }
-  68% { opacity: .22; transform: translate3d(-1px, -7px, 0) rotate(72deg) scale(.7); }
+  0%,
+  100% {
+    opacity: 0.04;
+    transform: translate3d(0, 4px, 0) rotate(0) scale(0.45);
+  }
+  38% {
+    opacity: 0.82;
+    transform: translate3d(2px, -2px, 0) rotate(38deg) scale(1.08);
+  }
+  68% {
+    opacity: 0.22;
+    transform: translate3d(-1px, -7px, 0) rotate(72deg) scale(0.7);
+  }
 }
 
-.narrow .card-particle-layer > :nth-child(n+9),
-.short .card-particle-layer > :nth-child(n+7) {
+.narrow .card-particle-layer > :nth-child(n + 9),
+.short .card-particle-layer > :nth-child(n + 7) {
   display: none;
 }
 
@@ -279,9 +379,9 @@ body,
   width: auto;
   height: 1.4em;
   max-width: 6em;
-  margin-inline: .08em;
+  margin-inline: 0.08em;
   object-fit: contain;
-  vertical-align: -.32em;
+  vertical-align: -0.32em;
   opacity: 1;
   filter: none;
 }
@@ -292,7 +392,7 @@ body,
   height: auto;
   max-width: 100%;
   max-height: 4.8em;
-  margin: .12em 0;
+  margin: 0.12em 0;
   vertical-align: top;
 }
 
@@ -300,8 +400,8 @@ body,
   display: inline-block;
   max-width: 5em;
   max-height: 2.2em;
-  margin: 0 .1em;
-  vertical-align: -.55em;
+  margin: 0 0.1em;
+  vertical-align: -0.55em;
 }
 
 .copy b,
@@ -316,46 +416,52 @@ body,
 .card.danmaku {
   isolation: isolate;
   transform-origin: center center;
-  transition: min-height .24s ease, padding .24s ease, border-radius .24s ease, background .24s ease;
+  transition:
+    min-height 0.24s ease,
+    padding 0.24s ease,
+    border-radius 0.24s ease,
+    background 0.24s ease;
 }
 
 .card.danmaku.expanded {
   min-height: 92px;
   padding: 14px;
-  border-color: rgba(133, 255, 232, .58);
+  border-color: rgba(133, 255, 232, 0.58);
   background:
-    linear-gradient(90deg, rgba(91, 224, 199, .13), transparent 14% 86%, rgba(91, 224, 199, .13)),
-    linear-gradient(115deg, rgba(4, 43, 59, .94), rgba(9, 82, 81, .78));
+    linear-gradient(90deg, rgba(91, 224, 199, 0.13), transparent 14% 86%, rgba(91, 224, 199, 0.13)),
+    linear-gradient(115deg, rgba(4, 43, 59, 0.94), rgba(9, 82, 81, 0.78));
   box-shadow:
-    inset 12px 0 18px -15px rgba(142, 255, 230, .95),
-    inset -12px 0 18px -15px rgba(142, 255, 230, .95),
-    0 10px 28px rgba(0, 15, 25, .32);
-  animation: scroll-unfurl var(--unfold-duration, 1000ms) cubic-bezier(.25, .45, .45, .95) both;
+    inset 12px 0 18px -15px rgba(142, 255, 230, 0.95),
+    inset -12px 0 18px -15px rgba(142, 255, 230, 0.95),
+    0 10px 28px rgba(0, 15, 25, 0.32);
+  animation: scroll-unfurl var(--unfold-duration, 1000ms) cubic-bezier(0.25, 0.45, 0.45, 0.95) both;
 }
 
 .card.danmaku.expanded::after {
-  content: "";
+  content: '';
   position: absolute;
   inset-block: 4px;
   inset-inline: -1px;
   z-index: 2;
   pointer-events: none;
-  border-inline: 4px solid rgba(123, 238, 214, .72);
+  border-inline: 4px solid rgba(123, 238, 214, 0.72);
   border-radius: 11px;
-  background:
-    linear-gradient(90deg,
-      rgba(201, 255, 240, .32) 0,
-      rgba(63, 180, 165, .26) 5px,
-      transparent 5px,
-      transparent calc(100% - 5px),
-      rgba(63, 180, 165, .26) calc(100% - 5px),
-      rgba(201, 255, 240, .32) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(201, 255, 240, 0.32) 0,
+    rgba(63, 180, 165, 0.26) 5px,
+    transparent 5px,
+    transparent calc(100% - 5px),
+    rgba(63, 180, 165, 0.26) calc(100% - 5px),
+    rgba(201, 255, 240, 0.32) 100%
+  );
   box-shadow:
-    inset 6px 0 7px -7px rgba(216, 255, 246, .72),
-    inset -6px 0 7px -7px rgba(216, 255, 246, .72),
-    -2px 0 0 rgba(7, 46, 53, .72),
-    2px 0 0 rgba(7, 46, 53, .72);
-  animation: scroll-rails-open var(--unfold-duration, 1000ms) cubic-bezier(.25, .45, .45, .95) both;
+    inset 6px 0 7px -7px rgba(216, 255, 246, 0.72),
+    inset -6px 0 7px -7px rgba(216, 255, 246, 0.72),
+    -2px 0 0 rgba(7, 46, 53, 0.72),
+    2px 0 0 rgba(7, 46, 53, 0.72);
+  animation: scroll-rails-open var(--unfold-duration, 1000ms) cubic-bezier(0.25, 0.45, 0.45, 0.95)
+    both;
 }
 
 .card.danmaku.expanded .copy {
@@ -370,8 +476,8 @@ body,
 
 .card.danmaku.expanded .copy b {
   color: #f0fffb;
-  font-size: .78em;
-  letter-spacing: .06em;
+  font-size: 0.78em;
+  letter-spacing: 0.06em;
 }
 
 .card.danmaku.expanded .copy span {
@@ -386,7 +492,7 @@ body,
   min-height: 38px;
   padding: 5px 10px;
   border-radius: 10px;
-  background: linear-gradient(115deg, rgba(4, 34, 49, .72), rgba(8, 69, 72, .48));
+  background: linear-gradient(115deg, rgba(4, 34, 49, 0.72), rgba(8, 69, 72, 0.48));
 }
 
 .card.danmaku.compact .copy {
@@ -413,7 +519,7 @@ body,
   white-space: normal;
 }
 
-.short .cards .card:nth-child(n+4) {
+.short .cards .card:nth-child(n + 4) {
   display: flex;
 }
 
@@ -428,7 +534,7 @@ body,
 
 @keyframes scroll-rails-open {
   from {
-    transform: scaleX(.025);
+    transform: scaleX(0.025);
   }
   to {
     transform: scaleX(1);
@@ -436,11 +542,17 @@ body,
 }
 
 @keyframes arrive {
-  from { transform: translateX(38px) scale(.96); }
-  to { transform: none; }
+  from {
+    transform: translateX(38px) scale(0.96);
+  }
+  to {
+    transform: none;
+  }
 }
 
-.overlay.narrow { padding: 6px; }
+.overlay.narrow {
+  padding: 6px;
+}
 
 .narrow .card.danmaku.expanded {
   min-height: 82px;
@@ -478,11 +590,11 @@ body,
 
 .preset-buttons small {
   font-weight: normal;
-  opacity: .72;
+  opacity: 0.72;
 }
 
 .preset-buttons .active {
-  box-shadow: 0 0 0 2px rgba(137, 255, 226, .28);
+  box-shadow: 0 0 0 2px rgba(137, 255, 226, 0.28);
 }
 
 .control .obs-address {
@@ -503,7 +615,7 @@ body,
   max-height: 75vh;
   overflow: auto;
   margin-top: 14px;
-  border: 1px solid rgba(89, 183, 173, .25);
+  border: 1px solid rgba(89, 183, 173, 0.25);
   background: #04131b;
 }
 
@@ -515,7 +627,9 @@ body,
 }
 
 @media (max-width: 720px) {
-  .preview-viewport { max-height: 560px; }
+  .preview-viewport {
+    max-height: 560px;
+  }
 }
 
 /* Multi-user application shell ------------------------------------------------ */
@@ -523,10 +637,10 @@ body,
 :root {
   color-scheme: dark;
   --app-bg: #041219;
-  --app-panel: rgba(7, 32, 42, .88);
-  --app-panel-strong: rgba(7, 39, 48, .96);
-  --app-line: rgba(110, 224, 205, .22);
-  --app-line-strong: rgba(117, 244, 218, .48);
+  --app-panel: rgba(7, 32, 42, 0.88);
+  --app-panel-strong: rgba(7, 39, 48, 0.96);
+  --app-line: rgba(110, 224, 205, 0.22);
+  --app-line-strong: rgba(117, 244, 218, 0.48);
   --app-text: #dcfff7;
   --app-muted: #83b8b0;
   --app-accent: #67e6c5;
@@ -544,20 +658,20 @@ select {
   position: relative;
   border: 1px solid var(--app-line);
   background:
-    radial-gradient(ellipse at 100% 0, rgba(94, 220, 194, .08), transparent 48%),
-    linear-gradient(135deg, rgba(8, 39, 50, .94), rgba(5, 25, 35, .91));
+    radial-gradient(ellipse at 100% 0, rgba(94, 220, 194, 0.08), transparent 48%),
+    linear-gradient(135deg, rgba(8, 39, 50, 0.94), rgba(5, 25, 35, 0.91));
   box-shadow:
-    inset 0 1px rgba(210, 255, 245, .055),
-    0 18px 48px rgba(0, 8, 15, .22);
+    inset 0 1px rgba(210, 255, 245, 0.055),
+    0 18px 48px rgba(0, 8, 15, 0.22);
   backdrop-filter: blur(18px);
 }
 
 .jade-panel::after {
-  content: "";
+  content: '';
   position: absolute;
   inset: 5px;
   z-index: 0;
-  border: 1px solid rgba(122, 237, 216, .06);
+  border: 1px solid rgba(122, 237, 216, 0.06);
   border-radius: inherit;
   pointer-events: none;
 }
@@ -573,7 +687,7 @@ select {
   font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 11px;
   font-weight: 700;
-  letter-spacing: .19em;
+  letter-spacing: 0.19em;
   text-transform: uppercase;
 }
 
@@ -585,15 +699,15 @@ select {
   place-items: center;
   overflow: auto;
   background:
-    radial-gradient(circle at 12% 12%, rgba(50, 145, 139, .2), transparent 30%),
-    radial-gradient(circle at 86% 82%, rgba(67, 105, 143, .18), transparent 33%),
+    radial-gradient(circle at 12% 12%, rgba(50, 145, 139, 0.2), transparent 30%),
+    radial-gradient(circle at 86% 82%, rgba(67, 105, 143, 0.18), transparent 33%),
     linear-gradient(145deg, #04131b, #082b31 55%, #041119);
   color: var(--app-text);
 }
 
 .route-loading {
   color: #93cfc4;
-  letter-spacing: .12em;
+  letter-spacing: 0.12em;
 }
 
 .auth-card {
@@ -607,13 +721,13 @@ select {
   color: #dffff7;
   font-size: clamp(28px, 5vw, 44px);
   font-weight: 600;
-  letter-spacing: .04em;
+  letter-spacing: 0.04em;
 }
 
 .auth-card footer {
   margin-top: 24px;
   padding-top: 16px;
-  border-top: 1px solid rgba(109, 212, 196, .14);
+  border-top: 1px solid rgba(109, 212, 196, 0.14);
 }
 
 .auth-card footer p {
@@ -634,11 +748,11 @@ select {
   height: 54px;
   display: grid;
   place-items: center;
-  border: 1px solid rgba(124, 239, 216, .32);
+  border: 1px solid rgba(124, 239, 216, 0.32);
   border-radius: 50%;
-  color: rgba(190, 255, 241, .8);
-  background: radial-gradient(circle, rgba(62, 173, 155, .23), transparent 72%);
-  box-shadow: 0 0 30px rgba(80, 216, 191, .14);
+  color: rgba(190, 255, 241, 0.8);
+  background: radial-gradient(circle, rgba(62, 173, 155, 0.23), transparent 72%);
+  box-shadow: 0 0 30px rgba(80, 216, 191, 0.14);
 }
 
 .auth-lead {
@@ -676,12 +790,14 @@ select {
   width: 100%;
   min-height: 44px;
   padding: 10px 12px;
-  border: 1px solid rgba(75, 157, 151, .55);
+  border: 1px solid rgba(75, 157, 151, 0.55);
   border-radius: 10px;
   outline: none;
   color: #edfffb;
-  background: rgba(3, 18, 26, .82);
-  transition: border-color .18s ease, box-shadow .18s ease;
+  background: rgba(3, 18, 26, 0.82);
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .stack-form input:focus,
@@ -690,14 +806,14 @@ select {
 .secret-address input:focus,
 .one-time-secret input:focus {
   border-color: #6ee8ce;
-  box-shadow: 0 0 0 3px rgba(92, 225, 198, .12);
+  box-shadow: 0 0 0 3px rgba(92, 225, 198, 0.12);
 }
 
 .otp-input {
   font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
   font-size: 22px !important;
   font-weight: 700;
-  letter-spacing: .35em;
+  letter-spacing: 0.35em;
   text-align: center;
 }
 
@@ -710,12 +826,15 @@ select {
   border-radius: 9px;
   color: #05241f;
   background: linear-gradient(135deg, #86f2d8, #50cdb2);
-  box-shadow: 0 5px 18px rgba(40, 168, 145, .16);
+  box-shadow: 0 5px 18px rgba(40, 168, 145, 0.16);
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
-  transition: filter .16s ease, transform .16s ease, border-color .16s ease;
+  transition:
+    filter 0.16s ease,
+    transform 0.16s ease,
+    border-color 0.16s ease;
 }
 
 .auth-page button:hover:not(:disabled),
@@ -728,23 +847,23 @@ select {
 .auth-page button:disabled,
 .dashboard-shell button:disabled {
   cursor: wait;
-  filter: saturate(.45);
-  opacity: .65;
+  filter: saturate(0.45);
+  opacity: 0.65;
 }
 
 .auth-page button.secondary,
 .dashboard-shell button.secondary,
 .dashboard-shell .ghost-button {
-  border-color: rgba(91, 189, 176, .26);
+  border-color: rgba(91, 189, 176, 0.26);
   color: #cffff4;
-  background: rgba(16, 67, 76, .62);
+  background: rgba(16, 67, 76, 0.62);
   box-shadow: none;
 }
 
 .dashboard-shell button.danger {
-  border-color: rgba(255, 138, 156, .3);
+  border-color: rgba(255, 138, 156, 0.3);
   color: #ffd7dd;
-  background: rgba(102, 32, 48, .58);
+  background: rgba(102, 32, 48, 0.58);
   box-shadow: none;
 }
 
@@ -773,32 +892,32 @@ select {
 
 .recovery-input {
   font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
-  letter-spacing: .08em;
+  letter-spacing: 0.08em;
 }
 
 .notice {
   padding: 11px 13px;
-  border: 1px solid rgba(121, 222, 205, .24);
+  border: 1px solid rgba(121, 222, 205, 0.24);
   border-radius: 10px;
   color: #c9f8ee;
-  background: rgba(17, 73, 76, .42);
+  background: rgba(17, 73, 76, 0.42);
   line-height: 1.45;
 }
 
 .notice.error {
-  border-color: rgba(255, 133, 151, .36);
+  border-color: rgba(255, 133, 151, 0.36);
   color: #ffd6dc;
-  background: rgba(103, 31, 47, .45);
+  background: rgba(103, 31, 47, 0.45);
 }
 
 .notice.warning {
-  border-color: rgba(255, 213, 127, .34);
+  border-color: rgba(255, 213, 127, 0.34);
   color: #ffe4aa;
-  background: rgba(93, 67, 24, .4);
+  background: rgba(93, 67, 24, 0.4);
 }
 
 .notice.success {
-  border-color: rgba(105, 239, 196, .34);
+  border-color: rgba(105, 239, 196, 0.34);
   color: #baffea;
 }
 
@@ -849,10 +968,10 @@ select {
   min-width: 0;
   padding: 8px 10px;
   overflow-wrap: anywhere;
-  border: 1px solid rgba(106, 216, 199, .2);
+  border: 1px solid rgba(106, 216, 199, 0.2);
   border-radius: 8px;
   color: #e8fff9;
-  background: rgba(0, 12, 19, .66);
+  background: rgba(0, 12, 19, 0.66);
 }
 
 .compact-form {
@@ -869,12 +988,12 @@ select {
 
 .recovery-grid code {
   padding: 11px;
-  border: 1px solid rgba(104, 219, 200, .2);
+  border: 1px solid rgba(104, 219, 200, 0.2);
   border-radius: 8px;
   color: #e8fff9;
-  background: rgba(0, 13, 20, .7);
+  background: rgba(0, 13, 20, 0.7);
   text-align: center;
-  letter-spacing: .08em;
+  letter-spacing: 0.08em;
 }
 
 .form-actions {
@@ -899,9 +1018,8 @@ select {
   overflow: auto;
   color: var(--app-text);
   background:
-    radial-gradient(circle at 88% 8%, rgba(30, 119, 114, .17), transparent 28%),
-    radial-gradient(circle at 8% 80%, rgba(58, 83, 126, .12), transparent 32%),
-    var(--app-bg);
+    radial-gradient(circle at 88% 8%, rgba(30, 119, 114, 0.17), transparent 28%),
+    radial-gradient(circle at 8% 80%, rgba(58, 83, 126, 0.12), transparent 32%), var(--app-bg);
 }
 
 .dashboard-topbar {
@@ -914,8 +1032,8 @@ select {
   grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
   gap: 20px;
   align-items: center;
-  border-bottom: 1px solid rgba(84, 178, 166, .16);
-  background: rgba(3, 18, 26, .84);
+  border-bottom: 1px solid rgba(84, 178, 166, 0.16);
+  background: rgba(3, 18, 26, 0.84);
   backdrop-filter: blur(18px);
 }
 
@@ -933,9 +1051,9 @@ select {
   height: 38px;
   display: grid;
   place-items: center;
-  border: 1px solid rgba(111, 232, 210, .35);
+  border: 1px solid rgba(111, 232, 210, 0.35);
   border-radius: 50%;
-  background: rgba(34, 116, 107, .22);
+  background: rgba(34, 116, 107, 0.22);
 }
 
 .brand div,
@@ -949,16 +1067,16 @@ select {
   color: #689b94;
   font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 9px;
-  letter-spacing: .12em;
+  letter-spacing: 0.12em;
 }
 
 .dashboard-topbar nav {
   display: flex;
   gap: 5px;
   padding: 4px;
-  border: 1px solid rgba(89, 181, 169, .14);
+  border: 1px solid rgba(89, 181, 169, 0.14);
   border-radius: 11px;
-  background: rgba(3, 20, 28, .54);
+  background: rgba(3, 20, 28, 0.54);
 }
 
 .dashboard-topbar nav a {
@@ -970,7 +1088,7 @@ select {
 
 .dashboard-topbar nav a.active {
   color: #e4fff9;
-  background: rgba(49, 132, 120, .35);
+  background: rgba(49, 132, 120, 0.35);
 }
 
 .account-menu {
@@ -999,9 +1117,9 @@ select {
 .auth-page .pwa-action {
   min-height: 34px;
   padding: 6px 11px;
-  border-color: rgba(95, 215, 193, .28);
+  border-color: rgba(95, 215, 193, 0.28);
   color: #cffff4;
-  background: rgba(16, 67, 76, .72);
+  background: rgba(16, 67, 76, 0.72);
   box-shadow: none;
   font-size: 12px;
 }
@@ -1012,10 +1130,10 @@ select {
   display: inline-flex;
   gap: 6px;
   align-items: center;
-  border: 1px solid rgba(255, 202, 112, .3);
+  border: 1px solid rgba(255, 202, 112, 0.3);
   border-radius: 999px;
   color: #ffe2a7;
-  background: rgba(83, 55, 20, .48);
+  background: rgba(83, 55, 20, 0.48);
   font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 12px;
   white-space: nowrap;
@@ -1026,29 +1144,31 @@ select {
   height: 7px;
   border-radius: 50%;
   background: #ffca70;
-  box-shadow: 0 0 9px rgba(255, 202, 112, .68);
+  box-shadow: 0 0 9px rgba(255, 202, 112, 0.68);
 }
 
 .dashboard-shell .pwa-action {
   min-height: 30px;
   padding: 5px 10px;
-  border-color: rgba(95, 215, 193, .28);
+  border-color: rgba(95, 215, 193, 0.28);
   color: #cffff4;
-  background: rgba(16, 67, 76, .72);
+  background: rgba(16, 67, 76, 0.72);
   box-shadow: none;
   font-size: 12px;
   white-space: nowrap;
 }
 
 .dashboard-shell .pwa-action.update {
-  border-color: rgba(255, 222, 143, .4);
+  border-color: rgba(255, 222, 143, 0.4);
   color: #ffe8b7;
-  background: rgba(91, 65, 25, .58);
+  background: rgba(91, 65, 25, 0.58);
   animation: pwa-update-glow 2.2s ease-in-out infinite;
 }
 
 @keyframes pwa-update-glow {
-  50% { box-shadow: 0 0 15px rgba(255, 215, 123, .16); }
+  50% {
+    box-shadow: 0 0 15px rgba(255, 215, 123, 0.16);
+  }
 }
 
 @media (display-mode: standalone) {
@@ -1110,8 +1230,8 @@ select {
 }
 
 .component-list button.selected {
-  border-color: rgba(91, 211, 190, .23);
-  background: linear-gradient(110deg, rgba(38, 126, 114, .35), rgba(17, 69, 76, .3));
+  border-color: rgba(91, 211, 190, 0.23);
+  background: linear-gradient(110deg, rgba(38, 126, 114, 0.35), rgba(17, 69, 76, 0.3));
 }
 
 .component-list button > span:nth-child(2) {
@@ -1137,10 +1257,10 @@ select {
   height: 38px;
   display: grid;
   place-items: center;
-  border: 1px solid rgba(106, 225, 203, .2);
+  border: 1px solid rgba(106, 225, 203, 0.2);
   border-radius: 10px;
   color: #a8f0df;
-  background: rgba(45, 135, 121, .2);
+  background: rgba(45, 135, 121, 0.2);
 }
 
 .component-list i {
@@ -1152,7 +1272,7 @@ select {
 
 .component-list i.enabled {
   background: #72ebc9;
-  box-shadow: 0 0 9px rgba(86, 232, 197, .7);
+  box-shadow: 0 0 9px rgba(86, 232, 197, 0.7);
 }
 
 .future-components {
@@ -1160,7 +1280,7 @@ select {
   padding-top: 15px;
   display: grid;
   gap: 4px;
-  border-top: 1px solid rgba(94, 187, 173, .12);
+  border-top: 1px solid rgba(94, 187, 173, 0.12);
   color: #567d78;
 }
 
@@ -1188,24 +1308,24 @@ select {
 .status-chip {
   width: max-content;
   padding: 5px 9px;
-  border: 1px solid rgba(112, 197, 186, .2);
+  border: 1px solid rgba(112, 197, 186, 0.2);
   border-radius: 99px;
   color: #91bcb6;
-  background: rgba(17, 60, 66, .44);
+  background: rgba(17, 60, 66, 0.44);
   font-size: 12px;
   white-space: nowrap;
 }
 
 .status-chip.online {
-  border-color: rgba(99, 236, 199, .3);
+  border-color: rgba(99, 236, 199, 0.3);
   color: #99f3d8;
-  background: rgba(31, 105, 87, .35);
+  background: rgba(31, 105, 87, 0.35);
 }
 
 .status-chip.offline {
-  border-color: rgba(240, 151, 159, .25);
+  border-color: rgba(240, 151, 159, 0.25);
   color: #e9aeb4;
-  background: rgba(91, 39, 48, .34);
+  background: rgba(91, 39, 48, 0.34);
 }
 
 .dashboard-panel {
@@ -1251,7 +1371,7 @@ select {
   font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
 }
 
-.slider-grid input[type="range"] {
+.slider-grid input[type='range'] {
   width: 100%;
   accent-color: #63ddc1;
 }
@@ -1262,7 +1382,7 @@ select {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
-  border: 1px solid rgba(89, 179, 167, .18);
+  border: 1px solid rgba(89, 179, 167, 0.18);
   border-radius: 12px;
 }
 
@@ -1381,9 +1501,9 @@ select {
   padding: 17px;
   display: grid;
   gap: 11px;
-  border: 1px solid rgba(255, 215, 127, .28);
+  border: 1px solid rgba(255, 215, 127, 0.28);
   border-radius: 12px;
-  background: rgba(86, 64, 24, .24);
+  background: rgba(86, 64, 24, 0.24);
 }
 
 .one-time-secret > b {
@@ -1408,7 +1528,7 @@ table {
 th,
 td {
   padding: 12px 10px;
-  border-bottom: 1px solid rgba(85, 169, 158, .12);
+  border-bottom: 1px solid rgba(85, 169, 158, 0.12);
   color: #a9d3cc;
   text-align: left;
   white-space: nowrap;
@@ -1426,10 +1546,10 @@ td:last-child {
 
 .obs-configuration-error {
   padding: 10px 12px;
-  border: 1px solid rgba(255, 143, 157, .42);
+  border: 1px solid rgba(255, 143, 157, 0.42);
   border-radius: 10px;
   color: #ffe1e5;
-  background: rgba(72, 24, 37, .82);
+  background: rgba(72, 24, 37, 0.82);
   font-size: clamp(13px, 3vw, 17px);
 }
 
diff --git a/apps/overlay/src/control.tsx b/apps/overlay/src/control.tsx
index 145eaf1..44ba961 100644
--- a/apps/overlay/src/control.tsx
+++ b/apps/overlay/src/control.tsx
@@ -1,3 +1,11 @@
+/**
+ * Authenticated component studio.
+ *
+ * This module composes tenant-scoped component settings, CookieCloud source
+ * configuration, isolated test events, OBS token rotation and system-admin
+ * invitations. One-time secrets remain local to the panel that created them;
+ * update blockers prevent the PWA from refreshing until they are saved.
+ */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { FormEvent, ReactNode } from 'react'
 import {
@@ -35,7 +43,13 @@ function isDanmakuKind(kind: string): boolean {
 
 type Flash = { kind: 'success' | 'error'; text: string } | undefined
 
-function Panel({ title, description, aside, children, className = '' }: {
+function Panel({
+  title,
+  description,
+  aside,
+  children,
+  className = '',
+}: {
   title: string
   description?: string
   aside?: ReactNode
@@ -58,10 +72,19 @@ function Panel({ title, description, aside, children, className = '' }: {
 
 function FlashMessage({ flash }: { flash: Flash }) {
   if (!flash) return null
-  return <div className={`notice ${flash.kind}`} role={flash.kind === 'error' ? 'alert' : 'status'}>{flash.text}</div>
+  return (
+    <div className={`notice ${flash.kind}`} role={flash.kind === 'error' ? 'alert' : 'status'}>
+      {flash.text}
+    </div>
+  )
 }
 
-function ControlLayout({ user, active, onLogout, children }: {
+function ControlLayout({
+  user,
+  active,
+  onLogout,
+  children,
+}: {
   user: AuthUser
   active: 'components' | 'invitations'
   onLogout: () => Promise<void>
@@ -73,16 +96,30 @@ function ControlLayout({ user, active, onLogout, children }: {
       <header className="dashboard-topbar">
         <a className="brand" href="/control/" aria-label="返回组件控制台">
           <span aria-hidden="true">星</span>
-          <div><b>洛星瓷直播云台</b><small>OBS COMPONENT STUDIO</small></div>
+          <div>
+            <b>洛星瓷直播云台</b>
+            <small>OBS COMPONENT STUDIO</small>
+          </div>
         </a>
         <nav aria-label="控制台导航">
-          <a className={active === 'components' ? 'active' : ''} href="/control/">我的组件</a>
-          {isAdmin && <a className={active === 'invitations' ? 'active' : ''} href="/control/invitations">邀请码</a>}
+          <a className={active === 'components' ? 'active' : ''} href="/control/">
+            我的组件
+          </a>
+          {isAdmin && (
+            <a className={active === 'invitations' ? 'active' : ''} href="/control/invitations">
+              邀请码
+            </a>
+          )}
         </nav>
         <div className="account-menu">
           <PwaControls />
-          <div><b>{user.displayName || user.username}</b><small>{isAdmin ? '系统管理员' : '用户'}</small></div>
-          <button type="button" className="ghost-button" onClick={() => void onLogout()}>退出</button>
+          <div>
+            <b>{user.displayName || user.username}</b>
+            <small>{isAdmin ? '系统管理员' : '用户'}</small>
+          </div>
+          <button type="button" className="ghost-button" onClick={() => void onLogout()}>
+            退出
+          </button>
         </div>
       </header>
       {children}
@@ -90,7 +127,12 @@ function ControlLayout({ user, active, onLogout, children }: {
   )
 }
 
-function SettingsEditor({ settings, onChange, onSave, saving }: {
+function SettingsEditor({
+  settings,
+  onChange,
+  onSave,
+  saving,
+}: {
   settings: OverlaySettings
   onChange: (settings: OverlaySettings) => void
   onSave: () => Promise<void>
@@ -113,32 +155,91 @@ function SettingsEditor({ settings, onChange, onSave, saving }: {
     <div className="settings-editor">
       <div className="slider-grid">
         <label>
-          <span>字号 <output>{settings.fontScale}%</output></span>
-          <input type="range" min="50" max="300" step="5" value={settings.fontScale} onChange={event => edit('fontScale', +event.target.value)} />
+          <span>
+            字号 <output>{settings.fontScale}%</output>
+          </span>
+          <input
+            type="range"
+            min="50"
+            max="300"
+            step="5"
+            value={settings.fontScale}
+            onChange={event => edit('fontScale', +event.target.value)}
+          />
         </label>
         <label>
-          <span>最大可见条数 <output>{settings.maxVisible}</output></span>
-          <input type="range" min="1" max="12" value={settings.maxVisible} onChange={event => edit('maxVisible', +event.target.value)} />
+          <span>
+            最大可见条数 <output>{settings.maxVisible}</output>
+          </span>
+          <input
+            type="range"
+            min="1"
+            max="12"
+            value={settings.maxVisible}
+            onChange={event => edit('maxVisible', +event.target.value)}
+          />
         </label>
         <label>
-          <span>自动收缩 <output>{settings.collapseAfterSeconds}s</output></span>
-          <input type="range" min="2" max="120" value={settings.collapseAfterSeconds} onChange={event => edit('collapseAfterSeconds', +event.target.value)} />
+          <span>
+            自动收缩 <output>{settings.collapseAfterSeconds}s</output>
+          </span>
+          <input
+            type="range"
+            min="2"
+            max="120"
+            value={settings.collapseAfterSeconds}
+            onChange={event => edit('collapseAfterSeconds', +event.target.value)}
+          />
         </label>
         <label>
-          <span>卷轴展开时长 <output>{(settings.unfoldDurationMs / 1000).toFixed(1)}s</output></span>
-          <input type="range" min="200" max="5000" step="100" value={settings.unfoldDurationMs} onChange={event => edit('unfoldDurationMs', +event.target.value)} />
+          <span>
+            卷轴展开时长 <output>{(settings.unfoldDurationMs / 1000).toFixed(1)}s</output>
+          </span>
+          <input
+            type="range"
+            min="200"
+            max="5000"
+            step="100"
+            value={settings.unfoldDurationMs}
+            onChange={event => edit('unfoldDurationMs', +event.target.value)}
+          />
         </label>
         <label>
-          <span>动效强度 <output>{settings.motionIntensity}%</output></span>
-          <input type="range" min="0" max="100" value={settings.motionIntensity} onChange={event => edit('motionIntensity', +event.target.value)} />
+          <span>
+            动效强度 <output>{settings.motionIntensity}%</output>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            value={settings.motionIntensity}
+            onChange={event => edit('motionIntensity', +event.target.value)}
+          />
         </label>
         <label>
-          <span>每卡粒子数量 <output>{settings.particleCount}</output></span>
-          <input type="range" min="0" max="12" value={settings.particleCount} onChange={event => edit('particleCount', +event.target.value)} />
+          <span>
+            每卡粒子数量 <output>{settings.particleCount}</output>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="12"
+            value={settings.particleCount}
+            onChange={event => edit('particleCount', +event.target.value)}
+          />
         </label>
         <label>
-          <span>粒子动画速度 <output>{settings.particleSpeed}%</output></span>
-          <input type="range" min="25" max="300" step="25" value={settings.particleSpeed} onChange={event => edit('particleSpeed', +event.target.value)} />
+          <span>
+            粒子动画速度 <output>{settings.particleSpeed}%</output>
+          </span>
+          <input
+            type="range"
+            min="25"
+            max="300"
+            step="25"
+            value={settings.particleSpeed}
+            onChange={event => edit('particleSpeed', +event.target.value)}
+          />
         </label>
       </div>
 
@@ -155,7 +256,11 @@ function SettingsEditor({ settings, onChange, onSave, saving }: {
           </label>
         ))}
         <label>
-          <input type="checkbox" checked={settings.lowPerformanceMode} onChange={event => edit('lowPerformanceMode', event.target.checked)} />
+          <input
+            type="checkbox"
+            checked={settings.lowPerformanceMode}
+            onChange={event => edit('lowPerformanceMode', event.target.checked)}
+          />
           <span>低性能模式</span>
         </label>
       </fieldset>
@@ -163,15 +268,27 @@ function SettingsEditor({ settings, onChange, onSave, saving }: {
       <div className="field-grid two-columns">
         <label>
           高价值礼物阈值（厘）
-          <input type="number" min="0" value={settings.highValueThreshold} onChange={event => edit('highValueThreshold', +event.target.value)} />
+          <input
+            type="number"
+            min="0"
+            value={settings.highValueThreshold}
+            onChange={event => edit('highValueThreshold', +event.target.value)}
+          />
         </label>
         <label>
           特别高价值阈值（厘）
-          <input type="number" min="0" value={settings.featuredValueThreshold} onChange={event => edit('featuredValueThreshold', +event.target.value)} />
+          <input
+            type="number"
+            min="0"
+            value={settings.featuredValueThreshold}
+            onChange={event => edit('featuredValueThreshold', +event.target.value)}
+          />
         </label>
       </div>
       <div className="form-actions align-end">
-        <button type="button" disabled={saving} onClick={() => void onSave()}>{saving ? '正在保存…' : '保存并实时同步'}</button>
+        <button type="button" disabled={saving} onClick={() => void onSave()}>
+          {saving ? '正在保存…' : '保存并实时同步'}
+        </button>
       </div>
     </div>
   )
@@ -180,7 +297,11 @@ function SettingsEditor({ settings, onChange, onSave, saving }: {
 function OverlayPreview({ settings }: { settings: OverlaySettings }) {
   const [preset, setPreset] = useState(previewPresets[1])
   return (
-    <Panel title="自适应预览" description="预设只改变预览尺寸；OBS 浏览器源仍可使用任意宽高。" className="preview-panel">
+    <Panel
+      title="自适应预览"
+      description="预设只改变预览尺寸；OBS 浏览器源仍可使用任意宽高。"
+      className="preview-panel"
+    >
       <div className="preset-buttons">
         {previewPresets.map(size => (
           <button
@@ -189,7 +310,10 @@ function OverlayPreview({ settings }: { settings: OverlaySettings }) {
             onClick={() => setPreset(size)}
             key={size.label}
           >
-            {size.label}<small>{size.width}×{size.height}</small>
+            {size.label}
+            <small>
+              {size.width}×{size.height}
+            </small>
           </button>
         ))}
       </div>
@@ -202,7 +326,10 @@ function OverlayPreview({ settings }: { settings: OverlaySettings }) {
   )
 }
 
-function SourceEditor({ source, onSaved }: {
+function SourceEditor({
+  source,
+  onSaved,
+}: {
   source: CookieCloudSource
   onSaved: (source: CookieCloudSource) => void
 }) {
@@ -212,10 +339,11 @@ function SourceEditor({ source, onSaved }: {
   const [password, setPassword] = useState('')
   const [busy, setBusy] = useState(false)
   const [flash, setFlash] = useState<Flash>()
-  const sourceDirty = roomId !== source.roomId
-    || host.trim() !== source.cookieCloud.host
-    || key !== source.cookieCloud.key
-    || Boolean(password)
+  const sourceDirty =
+    roomId !== source.roomId ||
+    host.trim() !== source.cookieCloud.host ||
+    key !== source.cookieCloud.key ||
+    Boolean(password)
   usePwaUpdateBlocker('live-source', '保存或还原直播源与 CookieCloud 设置', busy || sourceDirty)
 
   useEffect(() => {
@@ -230,14 +358,17 @@ function SourceEditor({ source, onSaved }: {
     setBusy(true)
     setFlash(undefined)
     try {
-      const payload = await api<unknown>('/api/v1/source', json('PUT', {
-        roomId: roomId.trim(),
-        cookieCloud: {
-          host: host.trim(),
-          key: key.trim(),
-          ...(password ? { password } : {}),
-        },
-      }))
+      const payload = await api<unknown>(
+        '/api/v1/source',
+        json('PUT', {
+          roomId: roomId.trim(),
+          cookieCloud: {
+            host: host.trim(),
+            key: key.trim(),
+            ...(password ? { password } : {}),
+          },
+        }),
+      )
       const next = normalizeSource(payload)
       onSaved(next)
       setPassword('')
@@ -253,29 +384,45 @@ function SourceEditor({ source, onSaved }: {
     <Panel
       title="Bilibili 直播源"
       description="该 CookieCloud 凭据仅属于当前账户，不会与其他用户共享。"
-      aside={source.connected === undefined ? undefined : (
-        <span className={`status-chip ${source.connected ? 'online' : 'offline'}`}>
-          {source.connected ? '已连接' : '未连接'}
-        </span>
-      )}
+      aside={
+        source.connected === undefined ? undefined : (
+          <span className={`status-chip ${source.connected ? 'online' : 'offline'}`}>
+            {source.connected ? '已连接' : '未连接'}
+          </span>
+        )
+      }
     >
       {source.detail && <p className="source-detail">{source.detail}</p>}
       <form className="field-grid two-columns" onSubmit={submit}>
         <label>
           邀请码绑定的直播间 ID
-          <input required readOnly inputMode="numeric" value={roomId} onChange={event => setRoomId(event.target.value)} />
+          <input
+            required
+            readOnly
+            inputMode="numeric"
+            value={roomId}
+            onChange={event => setRoomId(event.target.value)}
+          />
           <small>直播间由系统管理员签发邀请码时固定，用户不能自行切换。</small>
         </label>
         <label>
           CookieCloud 地址
-          <input required type="url" placeholder="https://cookie.example.com" value={host} onChange={event => setHost(event.target.value)} />
+          <input
+            required
+            type="url"
+            placeholder="https://cookie.example.com"
+            value={host}
+            onChange={event => setHost(event.target.value)}
+          />
         </label>
         <label>
           CookieCloud UUID / Key
           <input
             required={!source.cookieCloud.keyConfigured}
             autoComplete="off"
-            placeholder={source.cookieCloud.keyConfigured ? '已设置；留空保持不变' : '请输入同步 UUID / Key'}
+            placeholder={
+              source.cookieCloud.keyConfigured ? '已设置；留空保持不变' : '请输入同步 UUID / Key'
+            }
             value={key}
             onChange={event => setKey(event.target.value)}
           />
@@ -285,7 +432,9 @@ function SourceEditor({ source, onSaved }: {
           <input
             type="password"
             autoComplete="new-password"
-            placeholder={source.cookieCloud.passwordConfigured ? '已设置；留空保持不变' : '请输入同步密码'}
+            placeholder={
+              source.cookieCloud.passwordConfigured ? '已设置；留空保持不变' : '请输入同步密码'
+            }
             required={!source.cookieCloud.passwordConfigured}
             value={password}
             onChange={event => setPassword(event.target.value)}
@@ -308,14 +457,11 @@ type TokenState = {
 }
 
 function tokenState(value: unknown, fallbackPublicId: string): TokenState {
-  const root = value && typeof value === 'object' ? value as Record<string, unknown> : {}
+  const root = value && typeof value === 'object' ? (value as Record<string, unknown>) : {}
   const token = typeof root.token === 'string' ? root.token : undefined
   const publicId = String(root.publicId ?? fallbackPublicId)
-  let address = typeof root.url === 'string'
-    ? root.url
-    : typeof root.path === 'string'
-      ? root.path
-      : undefined
+  let address =
+    typeof root.url === 'string' ? root.url : typeof root.path === 'string' ? root.path : undefined
   if (address) address = new URL(address, location.origin).toString()
   if (!address && token) {
     const url = new URL(`/obs/${encodeURIComponent(publicId)}`, location.origin)
@@ -324,14 +470,21 @@ function tokenState(value: unknown, fallbackPublicId: string): TokenState {
   }
   return {
     publicId,
-    configured: root.configured === true || root.hasToken === true || root.tokenConfigured === true || Boolean(token || address),
+    configured:
+      root.configured === true ||
+      root.hasToken === true ||
+      root.tokenConfigured === true ||
+      Boolean(token || address),
     updatedAt: typeof root.updatedAt === 'string' ? root.updatedAt : undefined,
     address,
   }
 }
 
 function ObsAccessPanel({ component }: { component: ComponentSummary }) {
-  const [state, setState] = useState<TokenState>({ publicId: component.publicId, configured: false })
+  const [state, setState] = useState<TokenState>({
+    publicId: component.publicId,
+    configured: false,
+  })
   const [busy, setBusy] = useState(false)
   const [flash, setFlash] = useState<Flash>()
   usePwaUpdateBlocker(
@@ -345,24 +498,38 @@ function ObsAccessPanel({ component }: { component: ComponentSummary }) {
     setState({ publicId: component.publicId, configured: false })
     setFlash(undefined)
     api<unknown>(`/api/v1/components/${encodeURIComponent(component.id)}/token`)
-      .then(payload => { if (!cancelled) setState(tokenState(payload, component.publicId)) })
+      .then(payload => {
+        if (!cancelled) setState(tokenState(payload, component.publicId))
+      })
       .catch(reason => {
         if (cancelled) return
         setState({ publicId: component.publicId, configured: false })
         setFlash({ kind: 'error', text: errorMessage(reason, '无法读取当前组件的 OBS 令牌状态') })
       })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   }, [component.id, component.publicId])
 
   const rotate = async () => {
-    if (state.configured && !window.confirm('轮换后，所有使用旧地址的 OBS 浏览器源会立即失效。确定继续吗？')) return
+    if (
+      state.configured &&
+      !window.confirm('轮换后，所有使用旧地址的 OBS 浏览器源会立即失效。确定继续吗？')
+    )
+      return
     setBusy(true)
     setFlash(undefined)
     try {
-      const payload = await api<unknown>(`/api/v1/components/${encodeURIComponent(component.id)}/token`, json('POST'))
+      const payload = await api<unknown>(
+        `/api/v1/components/${encodeURIComponent(component.id)}/token`,
+        json('POST'),
+      )
       const next = tokenState(payload, component.publicId)
       setState(next)
-      setFlash({ kind: 'success', text: '新 OBS 令牌已生成。请立即复制，离开本页后不会再次显示明文令牌。' })
+      setFlash({
+        kind: 'success',
+        text: '新 OBS 令牌已生成。请立即复制，离开本页后不会再次显示明文令牌。',
+      })
     } catch (reason) {
       setFlash({ kind: 'error', text: errorMessage(reason, '无法轮换 OBS 令牌') })
     } finally {
@@ -373,13 +540,18 @@ function ObsAccessPanel({ component }: { component: ComponentSummary }) {
   const copy = async () => {
     if (!state.address) return
     const copied = await copyToClipboard(state.address)
-    setFlash(copied
-      ? { kind: 'success', text: 'OBS 浏览器源地址已复制。' }
-      : { kind: 'error', text: '浏览器阻止了复制，请手工选择下方地址。' })
+    setFlash(
+      copied
+        ? { kind: 'success', text: 'OBS 浏览器源地址已复制。' }
+        : { kind: 'error', text: '浏览器阻止了复制，请手工选择下方地址。' },
+    )
   }
 
   return (
-    <Panel title="OBS 只读访问" description="令牌仅能订阅这一组件；轮换不会影响账户登录或其他组件。">
+    <Panel
+      title="OBS 只读访问"
+      description="令牌仅能订阅这一组件；轮换不会影响账户登录或其他组件。"
+    >
       <div className="token-summary">
         <div>
           <small>访问状态</small>
@@ -389,7 +561,12 @@ function ObsAccessPanel({ component }: { component: ComponentSummary }) {
           <small>组件公开标识</small>
           <code>{state.publicId}</code>
         </div>
-        {state.updatedAt && <div><small>最近轮换</small><b>{formatDate(state.updatedAt)}</b></div>}
+        {state.updatedAt && (
+          <div>
+            <small>最近轮换</small>
+            <b>{formatDate(state.updatedAt)}</b>
+          </div>
+        )}
       </div>
       <FlashMessage flash={flash} />
       {state.address && (
@@ -399,10 +576,19 @@ function ObsAccessPanel({ component }: { component: ComponentSummary }) {
         </label>
       )}
       <div className="form-actions">
-        <button type="button" className={state.configured ? 'danger' : ''} disabled={busy} onClick={() => void rotate()}>
+        <button
+          type="button"
+          className={state.configured ? 'danger' : ''}
+          disabled={busy}
+          onClick={() => void rotate()}
+        >
           {busy ? '正在生成…' : state.configured ? '轮换令牌' : '生成 OBS 地址'}
         </button>
-        {state.address && <button type="button" className="secondary" onClick={() => void copy()}>复制地址</button>}
+        {state.address && (
+          <button type="button" className="secondary" onClick={() => void copy()}>
+            复制地址
+          </button>
+        )}
       </div>
     </Panel>
   )
@@ -424,13 +610,16 @@ function TestEvents({ componentId }: { componentId: string }) {
     setBusy(true)
     setFlash(undefined)
     try {
-      await api(`/api/v1/components/${encodeURIComponent(componentId)}/test-events`, json('POST', {
-        kind,
-        uid,
-        name,
-        ...(kind === 'danmaku' ? { text } : {}),
-        ...(kind === 'gift' ? { giftName, quantity, battery } : {}),
-      }))
+      await api(
+        `/api/v1/components/${encodeURIComponent(componentId)}/test-events`,
+        json('POST', {
+          kind,
+          uid,
+          name,
+          ...(kind === 'danmaku' ? { text } : {}),
+          ...(kind === 'gift' ? { giftName, quantity, battery } : {}),
+        }),
+      )
       setFlash({ kind: 'success', text: '测试事件已发送到当前组件。' })
     } catch (reason) {
       setFlash({ kind: 'error', text: errorMessage(reason, '测试事件发送失败') })
@@ -440,7 +629,10 @@ function TestEvents({ componentId }: { componentId: string }) {
   }
 
   return (
-    <Panel title="事件测试" description="模拟事件只进入当前用户、当前组件，不会向 Bilibili 发送消息。">
+    <Panel
+      title="事件测试"
+      description="模拟事件只进入当前用户、当前组件，不会向 Bilibili 发送消息。"
+    >
       <form className="field-grid two-columns" onSubmit={submit}>
         <label>
           事件类型
@@ -450,24 +642,66 @@ function TestEvents({ componentId }: { componentId: string }) {
             <option value="gift">礼物</option>
           </select>
         </label>
-        <label>测试 UID<input required value={uid} onChange={event => setUid(event.target.value)} /></label>
-        <label>测试昵称<input required value={name} onChange={event => setName(event.target.value)} /></label>
-        {kind === 'danmaku' && <label>弹幕内容<input required value={text} onChange={event => setText(event.target.value)} /></label>}
+        <label>
+          测试 UID
+          <input required value={uid} onChange={event => setUid(event.target.value)} />
+        </label>
+        <label>
+          测试昵称
+          <input required value={name} onChange={event => setName(event.target.value)} />
+        </label>
+        {kind === 'danmaku' && (
+          <label>
+            弹幕内容
+            <input required value={text} onChange={event => setText(event.target.value)} />
+          </label>
+        )}
         {kind === 'gift' && (
           <>
-            <label>礼物名称<input required value={giftName} onChange={event => setGiftName(event.target.value)} /></label>
-            <label>数量<input required type="number" min="1" value={quantity} onChange={event => setQuantity(+event.target.value)} /></label>
-            <label>电池数<input required type="number" min="0" value={battery} onChange={event => setBattery(+event.target.value)} /></label>
+            <label>
+              礼物名称
+              <input
+                required
+                value={giftName}
+                onChange={event => setGiftName(event.target.value)}
+              />
+            </label>
+            <label>
+              数量
+              <input
+                required
+                type="number"
+                min="1"
+                value={quantity}
+                onChange={event => setQuantity(+event.target.value)}
+              />
+            </label>
+            <label>
+              电池数
+              <input
+                required
+                type="number"
+                min="0"
+                value={battery}
+                onChange={event => setBattery(+event.target.value)}
+              />
+            </label>
           </>
         )}
         <FlashMessage flash={flash} />
-        <div className="form-actions align-end span-all"><button disabled={busy}>{busy ? '正在发送…' : '触发测试事件'}</button></div>
+        <div className="form-actions align-end span-all">
+          <button disabled={busy}>{busy ? '正在发送…' : '触发测试事件'}</button>
+        </div>
       </form>
     </Panel>
   )
 }
 
-function ComponentList({ components, selectedId, onSelect }: {
+function ComponentList({
+  components,
+  selectedId,
+  onSelect,
+}: {
   components: ComponentSummary[]
   selectedId?: string
   onSelect: (component: ComponentSummary) => void
@@ -478,24 +712,32 @@ function ComponentList({ components, selectedId, onSelect }: {
         <p className="eyebrow">COMPONENTS</p>
         <h2>我的组件</h2>
       </div>
-      {components.length === 0
-        ? <div className="empty-state"><b>还没有组件</b><p>账户初始化完成后，服务会为你创建默认弹幕姬。</p></div>
-        : (
-          <div className="component-list">
-            {components.map(component => (
-              <button
-                type="button"
-                className={component.id === selectedId ? 'selected' : ''}
-                onClick={() => onSelect(component)}
-                key={component.id}
-              >
-                <span className="component-icon" aria-hidden="true">{isDanmakuKind(component.kind) ? '弹' : '件'}</span>
-                <span><b>{component.name}</b><small>{isDanmakuKind(component.kind) ? '直播弹幕姬' : component.kind}</small></span>
-                <i className={component.enabled === false ? 'disabled' : 'enabled'} />
-              </button>
-            ))}
-          </div>
-        )}
+      {components.length === 0 ? (
+        <div className="empty-state">
+          <b>还没有组件</b>
+          <p>账户初始化完成后，服务会为你创建默认弹幕姬。</p>
+        </div>
+      ) : (
+        <div className="component-list">
+          {components.map(component => (
+            <button
+              type="button"
+              className={component.id === selectedId ? 'selected' : ''}
+              onClick={() => onSelect(component)}
+              key={component.id}
+            >
+              <span className="component-icon" aria-hidden="true">
+                {isDanmakuKind(component.kind) ? '弹' : '件'}
+              </span>
+              <span>
+                <b>{component.name}</b>
+                <small>{isDanmakuKind(component.kind) ? '直播弹幕姬' : component.kind}</small>
+              </span>
+              <i className={component.enabled === false ? 'disabled' : 'enabled'} />
+            </button>
+          ))}
+        </div>
+      )}
       <div className="future-components">
         <span>即将支持</span>
         <small>礼物展示 · 点歌姬</small>
@@ -504,7 +746,13 @@ function ComponentList({ components, selectedId, onSelect }: {
   )
 }
 
-export function ComponentsPage({ user, onLogout }: { user: AuthUser; onLogout: () => Promise<void> }) {
+export function ComponentsPage({
+  user,
+  onLogout,
+}: {
+  user: AuthUser
+  onLogout: () => Promise<void>
+}) {
   const [components, setComponents] = useState<ComponentSummary[]>([])
   const [selectedId, setSelectedId] = useState<string>()
   const [settings, setSettings] = useState<OverlaySettings>()
@@ -516,9 +764,11 @@ export function ComponentsPage({ user, onLogout }: { user: AuthUser; onLogout: (
   const settingsRequestRef = useRef(0)
   const savedSettingsRef = useRef<string | undefined>(undefined)
 
-  const selected = useMemo(() => components.find(component => component.id === selectedId), [components, selectedId])
-  const settingsDirty = Boolean(settings)
-    && JSON.stringify(settings) !== savedSettingsRef.current
+  const selected = useMemo(
+    () => components.find(component => component.id === selectedId),
+    [components, selectedId],
+  )
+  const settingsDirty = Boolean(settings) && JSON.stringify(settings) !== savedSettingsRef.current
   usePwaUpdateBlocker('component-settings', '保存或还原当前组件设置', saving || settingsDirty)
 
   const loadComponentSettings = useCallback(async (component: ComponentSummary) => {
@@ -528,7 +778,9 @@ export function ComponentsPage({ user, onLogout }: { user: AuthUser; onLogout: (
     savedSettingsRef.current = undefined
     setFlash(undefined)
     try {
-      const payload = await api<unknown>(`/api/v1/components/${encodeURIComponent(component.id)}/settings`)
+      const payload = await api<unknown>(
+        `/api/v1/components/${encodeURIComponent(component.id)}/settings`,
+      )
       if (requestId !== settingsRequestRef.current || selectedIdRef.current !== component.id) return
       const next = { ...defaultOverlaySettings, ...normalizeSettings(payload) }
       savedSettingsRef.current = JSON.stringify(next)
@@ -553,16 +805,18 @@ export function ComponentsPage({ user, onLogout }: { user: AuthUser; onLogout: (
         setComponents(nextComponents)
         setSource(normalizeSource(sourcePayload))
         const requested = new URLSearchParams(location.search).get('component')
-        const first = nextComponents.find(component => component.id === requested)
-          ?? nextComponents.find(component => isDanmakuKind(component.kind))
-          ?? nextComponents[0]
+        const first =
+          nextComponents.find(component => component.id === requested) ??
+          nextComponents.find(component => isDanmakuKind(component.kind)) ??
+          nextComponents[0]
         if (first) {
           selectedIdRef.current = first.id
           setSelectedId(first.id)
           await loadComponentSettings(first)
         }
       } catch (reason) {
-        if (!cancelled) setFlash({ kind: 'error', text: errorMessage(reason, '控制台数据加载失败') })
+        if (!cancelled)
+          setFlash({ kind: 'error', text: errorMessage(reason, '控制台数据加载失败') })
       } finally {
         if (!cancelled) setLoading(false)
       }
@@ -603,7 +857,8 @@ export function ComponentsPage({ user, onLogout }: { user: AuthUser; onLogout: (
       if (requestId !== settingsRequestRef.current || selectedIdRef.current !== componentId) return
       setFlash({ kind: 'error', text: errorMessage(reason, '组件设置保存失败') })
     } finally {
-      if (requestId === settingsRequestRef.current && selectedIdRef.current === componentId) setSaving(false)
+      if (requestId === settingsRequestRef.current && selectedIdRef.current === componentId)
+        setSaving(false)
     }
   }
 
@@ -617,26 +872,42 @@ export function ComponentsPage({ user, onLogout }: { user: AuthUser; onLogout: (
           {!loading && selected && (
             <>
               <div className="page-heading">
-                <div><p className="eyebrow">{selected.kind.toUpperCase()}</p><h1>{selected.name}</h1></div>
-                <span className={`status-chip ${selected.enabled === false ? 'offline' : 'online'}`}>
+                <div>
+                  <p className="eyebrow">{selected.kind.toUpperCase()}</p>
+                  <h1>{selected.name}</h1>
+                </div>
+                <span
+                  className={`status-chip ${selected.enabled === false ? 'offline' : 'online'}`}
+                >
                   {selected.enabled === false ? '已停用' : '运行中'}
                 </span>
               </div>
-              {isDanmakuKind(selected.kind) && settings
-                ? (
-                  <>
-                    <Panel title="弹幕姬设置" description="每一项都独立保存在当前用户的组件下。">
-                      <SettingsEditor settings={settings} onChange={setSettings} onSave={saveSettings} saving={saving} />
-                    </Panel>
-                    <OverlayPreview settings={settings} />
-                  </>
-                )
-                : <Panel title="组件设置"><div className="empty-state">该组件类型的设置编辑器尚未安装。</div></Panel>}
+              {isDanmakuKind(selected.kind) && settings ? (
+                <>
+                  <Panel title="弹幕姬设置" description="每一项都独立保存在当前用户的组件下。">
+                    <SettingsEditor
+                      settings={settings}
+                      onChange={setSettings}
+                      onSave={saveSettings}
+                      saving={saving}
+                    />
+                  </Panel>
+                  <OverlayPreview settings={settings} />
+                </>
+              ) : (
+                <Panel title="组件设置">
+                  <div className="empty-state">该组件类型的设置编辑器尚未安装。</div>
+                </Panel>
+              )}
               <ObsAccessPanel component={selected} key={selected.id} />
               <TestEvents componentId={selected.id} />
             </>
           )}
-          {!loading && !selected && <Panel title="欢迎来到直播云台"><div className="empty-state">当前账户还没有可配置的组件。</div></Panel>}
+          {!loading && !selected && (
+            <Panel title="欢迎来到直播云台">
+              <div className="empty-state">当前账户还没有可配置的组件。</div>
+            </Panel>
+          )}
           {source && <SourceEditor source={source} onSaved={setSource} />}
         </div>
       </div>
@@ -653,19 +924,30 @@ function formatDate(value?: string): string {
 
 function invitationStatus(invitation: Invitation): { label: string; className: string } {
   if (invitation.revokedAt) return { label: '已撤销', className: 'offline' }
-  if (invitation.expiresAt && new Date(invitation.expiresAt).getTime() <= Date.now()) return { label: '已过期', className: 'offline' }
+  if (invitation.expiresAt && new Date(invitation.expiresAt).getTime() <= Date.now())
+    return { label: '已过期', className: 'offline' }
   if (invitation.consumedAt) return { label: '已使用', className: 'offline' }
   return { label: '可使用', className: 'online' }
 }
 
-export function InvitationsPage({ user, onLogout }: { user: AuthUser; onLogout: () => Promise<void> }) {
+export function InvitationsPage({
+  user,
+  onLogout,
+}: {
+  user: AuthUser
+  onLogout: () => Promise<void>
+}) {
   const [invitations, setInvitations] = useState<Invitation[]>([])
   const [roomId, setRoomId] = useState('')
   const [expiresInHours, setExpiresInHours] = useState(24)
   const [newCode, setNewCode] = useState('')
   const [busy, setBusy] = useState(false)
   const [flash, setFlash] = useState<Flash>()
-  usePwaUpdateBlocker('invitation-code', '复制并妥善保存本次生成的一次性邀请码', busy || Boolean(newCode))
+  usePwaUpdateBlocker(
+    'invitation-code',
+    '复制并妥善保存本次生成的一次性邀请码',
+    busy || Boolean(newCode),
+  )
 
   const load = useCallback(async () => {
     const payload = await api<unknown>('/api/v1/invitations')
@@ -673,7 +955,9 @@ export function InvitationsPage({ user, onLogout }: { user: AuthUser; onLogout:
   }, [])
 
   useEffect(() => {
-    void load().catch(reason => setFlash({ kind: 'error', text: errorMessage(reason, '邀请码读取失败') }))
+    void load().catch(reason =>
+      setFlash({ kind: 'error', text: errorMessage(reason, '邀请码读取失败') }),
+    )
   }, [load])
 
   const create = async (event: FormEvent) => {
@@ -682,11 +966,16 @@ export function InvitationsPage({ user, onLogout }: { user: AuthUser; onLogout:
     setFlash(undefined)
     setNewCode('')
     try {
-      const payload = await api<unknown>('/api/v1/invitations', json('POST', { roomId: roomId.trim(), expiresInHours }))
-      const root = payload && typeof payload === 'object' ? payload as Record<string, unknown> : {}
-      const invitation = root.invitation && typeof root.invitation === 'object'
-        ? root.invitation as Record<string, unknown>
-        : root
+      const payload = await api<unknown>(
+        '/api/v1/invitations',
+        json('POST', { roomId: roomId.trim(), expiresInHours }),
+      )
+      const root =
+        payload && typeof payload === 'object' ? (payload as Record<string, unknown>) : {}
+      const invitation =
+        root.invitation && typeof root.invitation === 'object'
+          ? (root.invitation as Record<string, unknown>)
+          : root
       const code = String(invitation.code ?? root.code ?? '')
       setNewCode(code)
       setFlash({ kind: 'success', text: '邀请码已创建。明文只显示这一次。' })
@@ -721,47 +1010,122 @@ export function InvitationsPage({ user, onLogout }: { user: AuthUser; onLogout:
     <ControlLayout user={user} active="invitations" onLogout={onLogout}>
       <div className="admin-content">
         <div className="page-heading">
-          <div><p className="eyebrow">SYSTEM ADMIN</p><h1>邀请码管理</h1></div>
+          <div>
+            <p className="eyebrow">SYSTEM ADMIN</p>
+            <h1>邀请码管理</h1>
+          </div>
           <span className="status-chip online">仅系统管理员</span>
         </div>
         <FlashMessage flash={flash} />
-        <Panel title="创建邀请码" description="默认单次使用、24 小时有效；邀请码只用于注册，不能用于日常登录。">
+        <Panel
+          title="创建邀请码"
+          description="默认单次使用、24 小时有效；邀请码只用于注册，不能用于日常登录。"
+        >
           <form className="field-grid two-columns" onSubmit={create}>
-            <label>绑定的 Bilibili 直播间 ID<input required inputMode="numeric" value={roomId} onChange={event => setRoomId(event.target.value)} /></label>
-            <label>有效小时数<input type="number" min="1" max="720" value={expiresInHours} onChange={event => setExpiresInHours(+event.target.value)} /></label>
-            <div className="form-actions align-end span-all"><button disabled={busy}>{busy ? '正在创建…' : '创建邀请码'}</button></div>
+            <label>
+              绑定的 Bilibili 直播间 ID
+              <input
+                required
+                inputMode="numeric"
+                value={roomId}
+                onChange={event => setRoomId(event.target.value)}
+              />
+            </label>
+            <label>
+              有效小时数
+              <input
+                type="number"
+                min="1"
+                max="720"
+                value={expiresInHours}
+                onChange={event => setExpiresInHours(+event.target.value)}
+              />
+            </label>
+            <div className="form-actions align-end span-all">
+              <button disabled={busy}>{busy ? '正在创建…' : '创建邀请码'}</button>
+            </div>
           </form>
           {newCode && (
             <div className="one-time-secret">
               <b>仅显示一次</b>
               <code>{newCode}</code>
-              <input readOnly value={registerAddress} onFocus={event => event.currentTarget.select()} />
+              <input
+                readOnly
+                value={registerAddress}
+                onFocus={event => event.currentTarget.select()}
+              />
               <div className="form-actions">
-                <button type="button" className="secondary" onClick={() => void copyToClipboard(newCode)}>复制邀请码</button>
-                <button type="button" className="secondary" onClick={() => void copyToClipboard(registerAddress)}>复制注册链接</button>
+                <button
+                  type="button"
+                  className="secondary"
+                  onClick={() => void copyToClipboard(newCode)}
+                >
+                  复制邀请码
+                </button>
+                <button
+                  type="button"
+                  className="secondary"
+                  onClick={() => void copyToClipboard(registerAddress)}
+                >
+                  复制注册链接
+                </button>
               </div>
             </div>
           )}
         </Panel>
-        <Panel title="历史邀请码" description="列表不包含邀请码明文，只显示可审计的状态和使用次数。">
+        <Panel
+          title="历史邀请码"
+          description="列表不包含邀请码明文，只显示可审计的状态和使用次数。"
+        >
           <div className="table-wrap">
             <table>
-              <thead><tr><th>直播间</th><th>邀请码前缀</th><th>创建时间</th><th>有效期</th><th>状态</th><th /></tr></thead>
+              <thead>
+                <tr>
+                  <th>直播间</th>
+                  <th>邀请码前缀</th>
+                  <th>创建时间</th>
+                  <th>有效期</th>
+                  <th>状态</th>
+                  <th />
+                </tr>
+              </thead>
               <tbody>
                 {invitations.map(invitation => {
                   const status = invitationStatus(invitation)
                   return (
                     <tr key={invitation.id}>
-                      <td><code>{invitation.roomId}</code></td>
-                      <td><code>{invitation.codePrefix || '—'}</code></td>
+                      <td>
+                        <code>{invitation.roomId}</code>
+                      </td>
+                      <td>
+                        <code>{invitation.codePrefix || '—'}</code>
+                      </td>
                       <td>{formatDate(invitation.createdAt)}</td>
                       <td>{formatDate(invitation.expiresAt)}</td>
-                      <td><span className={`status-chip ${status.className}`}>{status.label}</span></td>
-                      <td>{status.className === 'online' && <button type="button" className="danger small" onClick={() => void revoke(invitation)}>撤销</button>}</td>
+                      <td>
+                        <span className={`status-chip ${status.className}`}>{status.label}</span>
+                      </td>
+                      <td>
+                        {status.className === 'online' && (
+                          <button
+                            type="button"
+                            className="danger small"
+                            onClick={() => void revoke(invitation)}
+                          >
+                            撤销
+                          </button>
+                        )}
+                      </td>
                     </tr>
                   )
                 })}
-                {invitations.length === 0 && <tr><td colSpan={6}><div className="empty-state">尚未创建邀请码。</div></td></tr>}
+                {invitations.length === 0 && (
+                  <tr>
+                    <td colSpan={6}>
+                      <div className="empty-state">尚未创建邀请码。</div>
+                    </td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>
@@ -771,10 +1135,23 @@ export function InvitationsPage({ user, onLogout }: { user: AuthUser; onLogout:
   )
 }
 
-export function ForbiddenPage({ user, onLogout }: { user: AuthUser; onLogout: () => Promise<void> }) {
+export function ForbiddenPage({
+  user,
+  onLogout,
+}: {
+  user: AuthUser
+  onLogout: () => Promise<void>
+}) {
   return (
     <ControlLayout user={user} active="components" onLogout={onLogout}>
-      <div className="admin-content"><Panel title="没有访问权限"><p>邀请码管理仅对系统管理员开放。</p><a className="button-link" href="/control/">返回我的组件</a></Panel></div>
+      <div className="admin-content">
+        <Panel title="没有访问权限">
+          <p>邀请码管理仅对系统管理员开放。</p>
+          <a className="button-link" href="/control/">
+            返回我的组件
+          </a>
+        </Panel>
+      </div>
     </ControlLayout>
   )
 }
diff --git a/apps/overlay/src/main.tsx b/apps/overlay/src/main.tsx
index d582dae..b4943c7 100644
--- a/apps/overlay/src/main.tsx
+++ b/apps/overlay/src/main.tsx
@@ -1,3 +1,11 @@
+/**
+ * Browser entry point and intentionally small client-side router.
+ *
+ * `/obs/:publicId` is selected before the control application is initialized.
+ * That early split is a security and reliability boundary: OBS sources never
+ * register the control-console PWA or execute authenticated dashboard requests.
+ * All other routes share the session bootstrap and passwordless auth flow.
+ */
 import { useCallback, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ApiError, api, errorMessage, json, normalizeSession } from './api'
@@ -20,11 +28,15 @@ function NotFoundPage() {
   return (
     <main className="auth-page">
       <section className="auth-card jade-panel not-found">
-        <div className="auth-mark" aria-hidden="true">云</div>
+        <div className="auth-mark" aria-hidden="true">
+          云
+        </div>
         <p className="eyebrow">404 · LOST IN THE CLOUDS</p>
         <h1>这里没有组件</h1>
         <p className="auth-lead">地址可能已经失效，或者组件已被所属用户删除。</p>
-        <a className="button-link" href="/control/">返回控制台</a>
+        <a className="button-link" href="/control/">
+          返回控制台
+        </a>
       </section>
     </main>
   )
@@ -85,9 +97,15 @@ function App() {
           <PwaControls />
           <p className="eyebrow">{offline ? 'OFFLINE SHELL' : 'CONNECTION ERROR'}</p>
           <h1>{offline ? '控制台目前处于离线状态' : '云台暂时无法连接'}</h1>
-          {offline && <p className="auth-lead">应用外壳已离线打开，但账户、直播源和组件数据不会缓存。联网后即可重新验证会话。</p>}
+          {offline && (
+            <p className="auth-lead">
+              应用外壳已离线打开，但账户、直播源和组件数据不会缓存。联网后即可重新验证会话。
+            </p>
+          )}
           <div className="notice error">{loadError}</div>
-          <button type="button" disabled={offline} onClick={() => void refreshSession()}>重新连接</button>
+          <button type="button" disabled={offline} onClick={() => void refreshSession()}>
+            重新连接
+          </button>
         </section>
       </main>
     )
@@ -124,7 +142,8 @@ function App() {
   }
   if (path === '/control/invitations') {
     if (!session.user) return <Redirect to="/control/login" />
-    if (session.user.role !== 'system_admin') return <ForbiddenPage user={session.user} onLogout={logout} />
+    if (session.user.role !== 'system_admin')
+      return <ForbiddenPage user={session.user} onLogout={logout} />
     return <InvitationsPage user={session.user} onLogout={logout} />
   }
   return <NotFoundPage />
diff --git a/apps/overlay/src/overlay.tsx b/apps/overlay/src/overlay.tsx
index 3381e21..e04cb84 100644
--- a/apps/overlay/src/overlay.tsx
+++ b/apps/overlay/src/overlay.tsx
@@ -1,3 +1,12 @@
+/**
+ * Transparent OBS renderer and component WebSocket client.
+ *
+ * The bearer token is read from the URL fragment, then sent as the first
+ * WebSocket frame; fragments never reach Nginx access logs or the initial HTTP
+ * request. Incoming events are treated as untrusted display data, bounded by
+ * component settings, and malformed frames are ignored without terminating a
+ * long-running browser source.
+ */
 import { useEffect, useRef, useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 import { defaultOverlaySettings } from './types'
@@ -55,7 +64,20 @@ type OverlayProps = {
   accessToken?: string
 }
 
-const cardParticles = ['star', 'floret', 'star', 'star', 'floret', 'star', 'floret', 'star', 'star', 'floret', 'star', 'floret'] as const
+const cardParticles = [
+  'star',
+  'floret',
+  'star',
+  'star',
+  'floret',
+  'star',
+  'floret',
+  'star',
+  'star',
+  'floret',
+  'star',
+  'floret',
+] as const
 const decorVariantCount = 6
 
 function stableHash(value: string) {
@@ -95,21 +117,27 @@ function streamUrl(publicId: string) {
 }
 
 function enabled(type: string, settings: OverlaySettings) {
-  return (type === 'live.danmaku' && settings.showDanmaku)
-    || (type === 'live.enter' && settings.showEnter)
-    || (type.startsWith('live.gift') && settings.showGift)
-    || (type === 'live.superchat' && settings.showSuperchat)
-    || (type === 'live.guard.buy' && settings.showGuard)
-    || (type === 'live.like' && settings.showLike)
-    || (type === 'live.share' && settings.showShare)
+  return (
+    (type === 'live.danmaku' && settings.showDanmaku) ||
+    (type === 'live.enter' && settings.showEnter) ||
+    (type.startsWith('live.gift') && settings.showGift) ||
+    (type === 'live.superchat' && settings.showSuperchat) ||
+    (type === 'live.guard.buy' && settings.showGuard) ||
+    (type === 'live.like' && settings.showLike) ||
+    (type === 'live.share' && settings.showShare)
+  )
 }
 
 function parseSettings(value: unknown): OverlaySettings {
   if (!value || typeof value !== 'object') return defaultOverlaySettings
-  return { ...defaultOverlaySettings, ...value as Partial<OverlaySettings> }
+  return { ...defaultOverlaySettings, ...(value as Partial<OverlaySettings>) }
 }
 
-function useEvents(disabled: boolean, publicId?: string, accessToken?: string): {
+function useEvents(
+  disabled: boolean,
+  publicId?: string,
+  accessToken?: string,
+): {
   settings: OverlaySettings
   items: Item[]
   setItems: Dispatch<SetStateAction<Item[]>>
@@ -117,7 +145,9 @@ function useEvents(disabled: boolean, publicId?: string, accessToken?: string):
 } {
   const [settings, setSettings] = useState<OverlaySettings>(defaultOverlaySettings)
   const [items, setItems] = useState<Item[]>([])
-  const [connection, setConnection] = useState<'idle' | 'connecting' | 'connected' | 'denied'>('idle')
+  const [connection, setConnection] = useState<'idle' | 'connecting' | 'connected' | 'denied'>(
+    'idle',
+  )
   const settingsRef = useRef(settings)
 
   useEffect(() => {
@@ -142,7 +172,7 @@ function useEvents(disabled: boolean, publicId?: string, accessToken?: string):
         retries = 0
         socket?.send(JSON.stringify({ type: 'authenticate', token: accessToken }))
       }
-      socket.onclose = (event) => {
+      socket.onclose = event => {
         if (dead) return
         if (event.code === 1008 || event.code === 4401 || event.code === 4403) {
           setConnection('denied')
@@ -166,7 +196,10 @@ function useEvents(disabled: boolean, publicId?: string, accessToken?: string):
             return
           }
           setConnection('connected')
-          if (envelope.type === 'overlay.settings.snapshot' || envelope.type === 'overlay.settings.updated') {
+          if (
+            envelope.type === 'overlay.settings.snapshot' ||
+            envelope.type === 'overlay.settings.updated'
+          ) {
             setSettings(parseSettings(envelope.payload?.settings))
             return
           }
@@ -176,10 +209,13 @@ function useEvents(disabled: boolean, publicId?: string, accessToken?: string):
             const combo = envelope.type === 'live.gift.combo' && envelope.payload?.comboId
             const key = combo ? `combo:${combo}` : envelope.id
             const existing = old.find(item => item.key === key)
-            const decorVariant = existing?.decorVariant
-              ?? chooseDecorVariant(`${envelope.type}:${key}`, old[0]?.decorVariant)
-            return [{ ...envelope, key, received: Date.now(), decorVariant }, ...old.filter(item => item.key !== key)]
-              .slice(0, current.maxVisible)
+            const decorVariant =
+              existing?.decorVariant ??
+              chooseDecorVariant(`${envelope.type}:${key}`, old[0]?.decorVariant)
+            return [
+              { ...envelope, key, received: Date.now(), decorVariant },
+              ...old.filter(item => item.key !== key),
+            ].slice(0, current.maxVisible)
           })
         } catch {
           // A malformed upstream event must not break a long-running OBS source.
@@ -239,49 +275,75 @@ function DanmakuEmoticon({ segment }: { segment: Extract<DanmakuSegment, { type:
 }
 
 function DanmakuBody({ payload }: { payload: LivePayload }) {
-  const segments = Array.isArray(payload.segments) ? payload.segments as DanmakuSegment[] : undefined
+  const segments = Array.isArray(payload.segments)
+    ? (payload.segments as DanmakuSegment[])
+    : undefined
   if (!segments?.length) return <>{payload.text || ''}</>
-  return <>{segments.map((segment, index) => segment.type === 'emoticon' && segment.url
-    ? <DanmakuEmoticon segment={segment} key={`${segment.unique || segment.url}:${index}`} />
-    : <span className="danmaku-text" key={`text:${index}`}>{segment.text}</span>)}</>
+  return (
+    <>
+      {segments.map((segment, index) =>
+        segment.type === 'emoticon' && segment.url ? (
+          <DanmakuEmoticon segment={segment} key={`${segment.unique || segment.url}:${index}`} />
+        ) : (
+          <span className="danmaku-text" key={`text:${index}`}>
+            {segment.text}
+          </span>
+        ),
+      )}
+    </>
+  )
 }
 
-function Card({ item, settings, expanded }: { item: Item; settings: OverlaySettings; expanded: boolean }) {
+function Card({
+  item,
+  settings,
+  expanded,
+}: {
+  item: Item
+  settings: OverlaySettings
+  expanded: boolean
+}) {
   const payload = item.payload || {}
   const viewer = payload.viewer || {}
   const gift = payload.gift
   const isDanmaku = item.type === 'live.danmaku'
   const tier = gift ? giftTier(item, settings) : ''
-  const body = gift
-    ? `献上 ${gift.name || '礼物'} ×${payload.quantity || 1}`
-    : isDanmaku
-      ? <DanmakuBody payload={payload} />
-      : eventRenderers[item.type]?.(payload) || '送来了一份互动'
+  const body = gift ? (
+    `献上 ${gift.name || '礼物'} ×${payload.quantity || 1}`
+  ) : isDanmaku ? (
+    <DanmakuBody payload={payload} />
+  ) : (
+    eventRenderers[item.type]?.(payload) || '送来了一份互动'
+  )
 
   return (
-    <article className={`card ${gift ? 'gift' : ''} ${isDanmaku ? 'danmaku' : ''} ${expanded ? 'expanded' : 'compact'} ${tier}`}>
+    <article
+      className={`card ${gift ? 'gift' : ''} ${isDanmaku ? 'danmaku' : ''} ${expanded ? 'expanded' : 'compact'} ${tier}`}
+    >
       <CardDecor count={settings.particleCount} variant={item.decorVariant} />
       {gift && (
         <div className="gift-art">
-          {gift.animationUrl || gift.imageUrl
-            ? (
-              <img
-                src={gift.animationUrl || gift.imageUrl}
-                alt={gift.name || '礼物'}
-                onError={event => {
-                  const image = event.currentTarget
-                  if (gift.imageUrl && image.src !== gift.imageUrl) image.src = gift.imageUrl
-                  else image.style.display = 'none'
-                }}
-              />
-            )
-            : <span>✦</span>}
+          {gift.animationUrl || gift.imageUrl ? (
+            <img
+              src={gift.animationUrl || gift.imageUrl}
+              alt={gift.name || '礼物'}
+              onError={event => {
+                const image = event.currentTarget
+                if (gift.imageUrl && image.src !== gift.imageUrl) image.src = gift.imageUrl
+                else image.style.display = 'none'
+              }}
+            />
+          ) : (
+            <span>✦</span>
+          )}
         </div>
       )}
       <div className="copy">
         <b>{viewer.name || '直播间观众'}</b>
         <span className={isDanmaku ? 'danmaku-content' : undefined}>{body}</span>
-        {typeof gift?.priceCny === 'number' && gift.priceCny > 0 && <em>¥ {gift.priceCny.toFixed(2)}</em>}
+        {typeof gift?.priceCny === 'number' && gift.priceCny > 0 && (
+          <em>¥ {gift.priceCny.toFixed(2)}</em>
+        )}
       </div>
       {tier === 'featured' && <div className="particles">✦ ✧ ✦</div>}
     </article>
@@ -327,7 +389,13 @@ export function Overlay({ preview = false, previewSettings, publicId, accessToke
           payload: {
             viewer: { name: '星光旅人' },
             quantity: 1,
-            gift: { name: '甜蜜告白', totalPrice: 12_000, priceCny: 12, imageUrl: '', animationUrl: '' },
+            gift: {
+              name: '甜蜜告白',
+              totalPrice: 12_000,
+              priceCny: 12,
+              imageUrl: '',
+              animationUrl: '',
+            },
           },
         },
       ])
@@ -343,7 +411,7 @@ export function Overlay({ preview = false, previewSettings, publicId, accessToke
     setExpandedKey(newest.key)
     const densityFactor = shape === 'short' ? 0.6 : 1
     const timer = window.setTimeout(
-      () => setExpandedKey(key => key === newest.key ? undefined : key),
+      () => setExpandedKey(key => (key === newest.key ? undefined : key)),
       settings.collapseAfterSeconds * 1000 * densityFactor,
     )
     return () => window.clearTimeout(timer)
@@ -365,11 +433,20 @@ export function Overlay({ preview = false, previewSettings, publicId, accessToke
       }}
     >
       <section className="wall">
-        {missingAccess && <div className="obs-configuration-error">OBS 地址不完整，请从控制台重新复制。</div>}
-        {!missingAccess && events.connection === 'denied' && <div className="obs-configuration-error">OBS 访问令牌已失效。</div>}
+        {missingAccess && (
+          <div className="obs-configuration-error">OBS 地址不完整，请从控制台重新复制。</div>
+        )}
+        {!missingAccess && events.connection === 'denied' && (
+          <div className="obs-configuration-error">OBS 访问令牌已失效。</div>
+        )}
         <div className="cards">
           {items.map(item => (
-            <Card item={item} settings={settings} expanded={item.key === expandedKey} key={item.key} />
+            <Card
+              item={item}
+              settings={settings}
+              expanded={item.key === expandedKey}
+              key={item.key}
+            />
           ))}
         </div>
       </section>
diff --git a/apps/overlay/src/pwa.tsx b/apps/overlay/src/pwa.tsx
index 85cc537..abb5d85 100644
--- a/apps/overlay/src/pwa.tsx
+++ b/apps/overlay/src/pwa.tsx
@@ -1,3 +1,12 @@
+/**
+ * Install, offline and explicit-update lifecycle for the control-console PWA.
+ *
+ * Registration is restricted to `/control/`; `/obs/*` is deliberately outside
+ * the scope. The worker caches only the public application shell and static
+ * assets. API responses, WebSockets and secrets remain network-only. A waiting
+ * worker activates only after user confirmation and after every registered
+ * one-time-secret or dirty-form blocker has cleared.
+ */
 import { useEffect, useSyncExternalStore } from 'react'
 
 interface InstallChoice {
@@ -58,9 +67,10 @@ function addManifest() {
 function observeRegistration(registration: ServiceWorkerRegistration) {
   emit({
     registration,
-    waitingWorker: registration.waiting && navigator.serviceWorker.controller
-      ? registration.waiting
-      : snapshot.waitingWorker,
+    waitingWorker:
+      registration.waiting && navigator.serviceWorker.controller
+        ? registration.waiting
+        : snapshot.waitingWorker,
   })
 
   registration.addEventListener('updatefound', () => {
@@ -76,18 +86,23 @@ function observeRegistration(registration: ServiceWorkerRegistration) {
 
 async function removeLegacyRootWorker() {
   const registrations = await navigator.serviceWorker.getRegistrations()
-  await Promise.all(registrations.map(async registration => {
-    const scopePath = new URL(registration.scope).pathname
-    const workers = [registration.installing, registration.waiting, registration.active]
-    const isLegacy = scopePath === '/'
-      && workers.some(worker => worker && new URL(worker.scriptURL).pathname === '/sw.js')
-    if (isLegacy) await registration.unregister()
-  }))
+  await Promise.all(
+    registrations.map(async registration => {
+      const scopePath = new URL(registration.scope).pathname
+      const workers = [registration.installing, registration.waiting, registration.active]
+      const isLegacy =
+        scopePath === '/' &&
+        workers.some(worker => worker && new URL(worker.scriptURL).pathname === '/sw.js')
+      if (isLegacy) await registration.unregister()
+    }),
+  )
 
   const cacheNames = await caches.keys()
-  await Promise.all(cacheNames
-    .filter(name => name.startsWith('lxc-control-shell-'))
-    .map(name => caches.delete(name)))
+  await Promise.all(
+    cacheNames
+      .filter(name => name.startsWith('lxc-control-shell-'))
+      .map(name => caches.delete(name)),
+  )
 }
 
 export function cleanupLegacyPwa() {
@@ -121,18 +136,25 @@ export function initializePwa() {
   const updateDisplayMode = () => emit({ standalone: isStandalone() })
   window.addEventListener('online', updateConnection)
   window.addEventListener('offline', updateConnection)
-  const modernListener = (displayMode as unknown as {
-    addEventListener?: (type: 'change', listener: () => void) => void
-  }).addEventListener
+  const modernListener = (
+    displayMode as unknown as {
+      addEventListener?: (type: 'change', listener: () => void) => void
+    }
+  ).addEventListener
   if (modernListener) modernListener.call(displayMode, 'change', updateDisplayMode)
-  else (displayMode as unknown as { addListener?: (listener: () => void) => void })
-    .addListener?.call(displayMode, updateDisplayMode)
+  else
+    (displayMode as unknown as { addListener?: (listener: () => void) => void }).addListener?.call(
+      displayMode,
+      updateDisplayMode,
+    )
 
   window.addEventListener('beforeinstallprompt', event => {
     event.preventDefault()
     emit({ installPrompt: event as BeforeInstallPromptEvent })
   })
-  window.addEventListener('appinstalled', () => emit({ installPrompt: undefined, standalone: true }))
+  window.addEventListener('appinstalled', () =>
+    emit({ installPrompt: undefined, standalone: true }),
+  )
 
   if (!import.meta.env.PROD || !('serviceWorker' in navigator)) return
 
@@ -151,13 +173,17 @@ export function initializePwa() {
       void snapshot.registration?.update()
     }
   })
-  window.setInterval(() => {
-    if (navigator.onLine) void snapshot.registration?.update()
-  }, 60 * 60 * 1000)
+  window.setInterval(
+    () => {
+      if (navigator.onLine) void snapshot.registration?.update()
+    },
+    60 * 60 * 1000,
+  )
 }
 
 export function authRoute(name: 'login' | 'register' | 'setup'): string {
-  const inControlScope = location.pathname === '/control' || location.pathname.startsWith('/control/')
+  const inControlScope =
+    location.pathname === '/control' || location.pathname.startsWith('/control/')
   return inControlScope ? `/control/${name}` : `/${name}`
 }
 
@@ -165,7 +191,9 @@ export function usePwaUpdateBlocker(key: string, reason: string, active: boolean
   useEffect(() => {
     if (active) updateBlockers.set(key, reason)
     else updateBlockers.delete(key)
-    return () => { updateBlockers.delete(key) }
+    return () => {
+      updateBlockers.delete(key)
+    }
   }, [active, key, reason])
 }
 
@@ -182,10 +210,14 @@ function applyUpdate() {
   if (!worker) return
   const reasons = [...new Set(updateBlockers.values())]
   if (reasons.length > 0) {
-    window.alert(`暂时不能更新，请先处理以下内容：\n\n${reasons.map(reason => `• ${reason}`).join('\n')}`)
+    window.alert(
+      `暂时不能更新，请先处理以下内容：\n\n${reasons.map(reason => `• ${reason}`).join('\n')}`,
+    )
     return
   }
-  const confirmed = window.confirm('更新会刷新控制台。请先保存设置、邀请码、恢复码或刚轮换的 OBS 令牌，确定现在更新吗？')
+  const confirmed = window.confirm(
+    '更新会刷新控制台。请先保存设置、邀请码、恢复码或刚轮换的 OBS 令牌，确定现在更新吗？',
+  )
   if (!confirmed) return
   reloadForUpdate = true
   worker.postMessage({ type: 'SKIP_WAITING' })
@@ -198,7 +230,12 @@ export function PwaControls() {
 
   return (
     <div className="pwa-controls" aria-live="polite">
-      {!state.online && <span className="pwa-state offline"><i aria-hidden="true" />离线</span>}
+      {!state.online && (
+        <span className="pwa-state offline">
+          <i aria-hidden="true" />
+          离线
+        </span>
+      )}
       {state.waitingWorker && (
         <button type="button" className="pwa-action update" onClick={applyUpdate}>
           更新可用
diff --git a/apps/overlay/src/style.css b/apps/overlay/src/style.css
index 17a4873..f50042a 100644
--- a/apps/overlay/src/style.css
+++ b/apps/overlay/src/style.css
@@ -1 +1,274 @@
-*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;font-family:"Noto Serif SC","Microsoft YaHei",serif}body{background:transparent;color:#dcfffa}.overlay{width:100%;height:100%;padding:clamp(8px,2vw,22px);display:flex;align-items:center;justify-content:flex-end;overflow:hidden;background:radial-gradient(ellipse at 100% 50%,rgba(21,94,96,.2),transparent 62%)}.wall{width:min(100%,480px);display:flex;flex-direction:column;gap:9px;filter:drop-shadow(0 10px 28px rgba(0,11,19,.36))}.cards{display:flex;flex-direction:column;gap:8px}.card{position:relative;min-height:58px;padding:11px 14px;border:1px solid rgba(101,226,211,.28);border-radius:14px;overflow:hidden;display:flex;align-items:center;gap:10px;background:linear-gradient(115deg,rgba(4,34,49,.82),rgba(8,69,72,.61));backdrop-filter:blur(15px);animation:arrive calc(.35s + .35s*var(--motion)) cubic-bezier(.19,.9,.3,1) both}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(155,255,232,.14),transparent 65%);transform:translateX(-120%);animation:sheen calc(2.4s - 1.3s*var(--motion)) ease-in-out .25s both}.copy{position:relative;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:clamp(12px,2.7vw,17px)}.copy b{color:#e6fff9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy span{color:#a9dbd4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy em{font-style:normal;color:#ffdc89;font-size:.84em}.gift-art{z-index:1;width:48px;height:48px;flex:none;border-radius:12px;background:radial-gradient(circle,#2e9f9e,transparent 66%);display:grid;place-items:center}.gift-art img{width:100%;height:100%;object-fit:contain}.gift.high{min-height:72px;border-color:rgba(102,255,229,.65);background:linear-gradient(105deg,rgba(5,59,78,.92),rgba(14,119,103,.7))}.gift.featured{min-height:128px;border-color:#b6ffdc;background:radial-gradient(circle at 20% 50%,rgba(69,236,190,.4),transparent 35%),linear-gradient(118deg,rgba(7,63,84,.97),rgba(12,105,89,.85));animation:featured calc(2.8s - 1.5s*var(--motion)) ease-in-out infinite}.gift.featured .gift-art{width:92px;height:92px}.particles{position:absolute;right:9px;top:6px;color:#ceffe4;letter-spacing:9px;animation:float 2.2s ease-in-out infinite}.narrow .overlay{padding:6px}.narrow .wall{gap:5px}.narrow .card{min-height:45px;padding:7px 9px;border-radius:10px}.narrow .gift-art{width:34px;height:34px}.narrow .gift.featured{min-height:90px;align-items:flex-start}.narrow .gift.featured .gift-art{width:58px;height:58px}.short .cards .card:nth-child(n+4){display:none}.low-motion *{animation:none!important}.control{min-height:100%;padding:clamp(20px,5vw,56px);display:grid;grid-template-columns:minmax(300px,520px) minmax(280px,1fr);gap:36px;background:linear-gradient(135deg,#061923,#092c32 55%,#06151f);color:#d9fff6}.control h1{margin:0;color:#bffff0}.control h2{margin:0}.control p{color:#88bdb5}.control label{display:block;margin:14px 0;color:#bcebe3}.control input:not([type=checkbox]):not([type=range]){width:100%;padding:10px;margin-top:5px;border:1px solid #357e79;border-radius:8px;background:#071d28;color:#e6fff9}.control input[type=range]{margin-left:10px;accent-color:#5ae7c6}.control output{margin-left:8px}.control fieldset{border:1px solid #28645f;border-radius:10px;display:flex;flex-wrap:wrap;gap:3px 12px}.control fieldset label{margin:8px 0}.buttons{display:flex;gap:10px;margin-top:20px}.control button{padding:10px 14px;border:0;border-radius:8px;background:#55dcb9;color:#06211e;font-weight:bold;cursor:pointer}.control button.secondary{background:#173e4b;color:#d4fff7}.preview-frame{height:600px;resize:both;overflow:auto;border:1px dashed #4dafa4;background:linear-gradient(135deg,rgba(71,190,172,.12),transparent)}.login{display:grid;place-content:center;grid-template-columns:360px;background:#071923}.login form{display:flex;flex-direction:column;gap:12px}@keyframes arrive{from{opacity:0;transform:translateX(38px) scale(.96)}to{opacity:1;transform:none}}@keyframes sheen{to{transform:translateX(135%)}}@keyframes featured{50%{filter:brightness(1.18);transform:scale(1.015)}}@keyframes float{50%{transform:translateY(-8px);opacity:.5}}@media(max-width:720px){.control{grid-template-columns:1fr}.preview-frame{height:480px}}
+* {
+  box-sizing: border-box;
+}
+html,
+body,
+#root {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  font-family: 'Noto Serif SC', 'Microsoft YaHei', serif;
+}
+body {
+  background: transparent;
+  color: #dcfffa;
+}
+.overlay {
+  width: 100%;
+  height: 100%;
+  padding: clamp(8px, 2vw, 22px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  overflow: hidden;
+  background: radial-gradient(ellipse at 100% 50%, rgba(21, 94, 96, 0.2), transparent 62%);
+}
+.wall {
+  width: min(100%, 480px);
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  filter: drop-shadow(0 10px 28px rgba(0, 11, 19, 0.36));
+}
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.card {
+  position: relative;
+  min-height: 58px;
+  padding: 11px 14px;
+  border: 1px solid rgba(101, 226, 211, 0.28);
+  border-radius: 14px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(115deg, rgba(4, 34, 49, 0.82), rgba(8, 69, 72, 0.61));
+  backdrop-filter: blur(15px);
+  animation: arrive calc(0.35s + 0.35s * var(--motion)) cubic-bezier(0.19, 0.9, 0.3, 1) both;
+}
+.card:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, transparent 25%, rgba(155, 255, 232, 0.14), transparent 65%);
+  transform: translateX(-120%);
+  animation: sheen calc(2.4s - 1.3s * var(--motion)) ease-in-out 0.25s both;
+}
+.copy {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: clamp(12px, 2.7vw, 17px);
+}
+.copy b {
+  color: #e6fff9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.copy span {
+  color: #a9dbd4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.copy em {
+  font-style: normal;
+  color: #ffdc89;
+  font-size: 0.84em;
+}
+.gift-art {
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  flex: none;
+  border-radius: 12px;
+  background: radial-gradient(circle, #2e9f9e, transparent 66%);
+  display: grid;
+  place-items: center;
+}
+.gift-art img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.gift.high {
+  min-height: 72px;
+  border-color: rgba(102, 255, 229, 0.65);
+  background: linear-gradient(105deg, rgba(5, 59, 78, 0.92), rgba(14, 119, 103, 0.7));
+}
+.gift.featured {
+  min-height: 128px;
+  border-color: #b6ffdc;
+  background:
+    radial-gradient(circle at 20% 50%, rgba(69, 236, 190, 0.4), transparent 35%),
+    linear-gradient(118deg, rgba(7, 63, 84, 0.97), rgba(12, 105, 89, 0.85));
+  animation: featured calc(2.8s - 1.5s * var(--motion)) ease-in-out infinite;
+}
+.gift.featured .gift-art {
+  width: 92px;
+  height: 92px;
+}
+.particles {
+  position: absolute;
+  right: 9px;
+  top: 6px;
+  color: #ceffe4;
+  letter-spacing: 9px;
+  animation: float 2.2s ease-in-out infinite;
+}
+.narrow .overlay {
+  padding: 6px;
+}
+.narrow .wall {
+  gap: 5px;
+}
+.narrow .card {
+  min-height: 45px;
+  padding: 7px 9px;
+  border-radius: 10px;
+}
+.narrow .gift-art {
+  width: 34px;
+  height: 34px;
+}
+.narrow .gift.featured {
+  min-height: 90px;
+  align-items: flex-start;
+}
+.narrow .gift.featured .gift-art {
+  width: 58px;
+  height: 58px;
+}
+.short .cards .card:nth-child(n + 4) {
+  display: none;
+}
+.low-motion * {
+  animation: none !important;
+}
+.control {
+  min-height: 100%;
+  padding: clamp(20px, 5vw, 56px);
+  display: grid;
+  grid-template-columns: minmax(300px, 520px) minmax(280px, 1fr);
+  gap: 36px;
+  background: linear-gradient(135deg, #061923, #092c32 55%, #06151f);
+  color: #d9fff6;
+}
+.control h1 {
+  margin: 0;
+  color: #bffff0;
+}
+.control h2 {
+  margin: 0;
+}
+.control p {
+  color: #88bdb5;
+}
+.control label {
+  display: block;
+  margin: 14px 0;
+  color: #bcebe3;
+}
+.control input:not([type='checkbox']):not([type='range']) {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  border: 1px solid #357e79;
+  border-radius: 8px;
+  background: #071d28;
+  color: #e6fff9;
+}
+.control input[type='range'] {
+  margin-left: 10px;
+  accent-color: #5ae7c6;
+}
+.control output {
+  margin-left: 8px;
+}
+.control fieldset {
+  border: 1px solid #28645f;
+  border-radius: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 12px;
+}
+.control fieldset label {
+  margin: 8px 0;
+}
+.buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+.control button {
+  padding: 10px 14px;
+  border: 0;
+  border-radius: 8px;
+  background: #55dcb9;
+  color: #06211e;
+  font-weight: bold;
+  cursor: pointer;
+}
+.control button.secondary {
+  background: #173e4b;
+  color: #d4fff7;
+}
+.preview-frame {
+  height: 600px;
+  resize: both;
+  overflow: auto;
+  border: 1px dashed #4dafa4;
+  background: linear-gradient(135deg, rgba(71, 190, 172, 0.12), transparent);
+}
+.login {
+  display: grid;
+  place-content: center;
+  grid-template-columns: 360px;
+  background: #071923;
+}
+.login form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+@keyframes arrive {
+  from {
+    opacity: 0;
+    transform: translateX(38px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes sheen {
+  to {
+    transform: translateX(135%);
+  }
+}
+@keyframes featured {
+  50% {
+    filter: brightness(1.18);
+    transform: scale(1.015);
+  }
+}
+@keyframes float {
+  50% {
+    transform: translateY(-8px);
+    opacity: 0.5;
+  }
+}
+@media (max-width: 720px) {
+  .control {
+    grid-template-columns: 1fr;
+  }
+  .preview-frame {
+    height: 480px;
+  }
+}
diff --git a/apps/overlay/src/types.ts b/apps/overlay/src/types.ts
index 8168f2a..d1fe256 100644
--- a/apps/overlay/src/types.ts
+++ b/apps/overlay/src/types.ts
@@ -1,3 +1,10 @@
+/**
+ * Shared control-console view models.
+ *
+ * These types describe sanitized API responses and editable settings, not raw
+ * database rows or Bilibili packets. Secret fields are optional because the
+ * server normally returns only `*Configured` flags after initial submission.
+ */
 export type OverlaySettings = {
   fontScale: number
   showDanmaku: boolean
diff --git a/apps/overlay/tsconfig.json b/apps/overlay/tsconfig.json
index 0b4fc59..d1b770e 100644
--- a/apps/overlay/tsconfig.json
+++ b/apps/overlay/tsconfig.json
@@ -1,4 +1,19 @@
 {
-  "compilerOptions": { "target": "ES2022", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ES2022"], "allowJs": false, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "module": "ESNext", "moduleResolution": "Bundler", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" },
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
   "include": ["src"]
 }
diff --git a/apps/overlay/vite.config.ts b/apps/overlay/vite.config.ts
index 293e530..ecef527 100644
--- a/apps/overlay/vite.config.ts
+++ b/apps/overlay/vite.config.ts
@@ -1,3 +1,10 @@
+/**
+ * Vite build configuration and PWA asset emission.
+ *
+ * The same per-build identifier is compiled into the browser bundle and the
+ * service worker. This makes an hourly/visibility update check discover a new
+ * deployment while still leaving activation under explicit user control.
+ */
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { readFileSync } from 'node:fs'
diff --git a/apps/server-rust/README.md b/apps/server-rust/README.md
new file mode 100644
index 0000000..3385170
--- /dev/null
+++ b/apps/server-rust/README.md
@@ -0,0 +1,50 @@
+# Rust 后端
+
+这是多租户直播组件服务的可复用核心和唯一运行时进程。`src/main.rs` 只处理进程启动；主要行为由 library
+crate 导出。
+
+## 模块职责
+
+| 模块          | 职责                                                     |
+| ------------- | -------------------------------------------------------- |
+| `app`         | 依赖组装、迁移、事件队列、源启动与旧配置导入             |
+| `auth`        | 邀请码、TOTP、恢复码、会话、secret 加密和组件 token      |
+| `components`  | 组件定义、设置版本、订阅、projection 与 handler registry |
+| `config`      | TOML 解析、部署策略校验和旧单用户兼容字段                |
+| `credentials` | CookieCloud URL 边界与 Bilibili Cookie 提取              |
+| `db`          | PostgreSQL pool、迁移和 RLS tenant context               |
+| `domain`      | provider-independent event 与 WebSocket envelope         |
+| `http_api`    | REST/WS、会话、权限、same-origin、静态资源与安全响应头   |
+| `live`        | provider trait、Bilibili adapter 与 source supervisor    |
+| `overlay`     | 弹幕姬设置及礼物/表情目录                                |
+| `rate_limit`  | 匿名登录和 enrollment 滥用限制                           |
+| `realtime`    | source event routing 与 component-scoped fanout          |
+| `repository`  | PostgreSQL component facade 和热路径缓存同步             |
+
+## 重要不变量
+
+- handler 不能信任请求体中的 owner；owner 必须来自 session 或 source context。
+- tenant table 查询必须在 `Db::set_tenant` 后的事务中执行。
+- provider 只能输出 canonical、bounded、sanitized `LiveEvent`。
+- projection 无副作用；可靠业务动作必须使用幂等 handler。
+- token、邀请码和恢复码只存摘要，TOTP/CookieCloud Secret 只存认证加密密文。
+- EventHub 的 channel key 是 component ID，不允许增加无权限的全局 receiver。
+
+## 本地质量检查
+
+在仓库根目录执行：
+
+```bash
+cargo fmt --manifest-path apps/server-rust/Cargo.toml --check
+cargo clippy --manifest-path apps/server-rust/Cargo.toml --all-targets --no-deps -- -D warnings
+cargo test --manifest-path apps/server-rust/Cargo.toml --all-targets
+```
+
+第三方 `vendor/blivedm` 不作为本项目风格重写目标；项目只维护保留原始 JSON 所需的小补丁。
+
+更多设计说明：
+
+- [总体架构](../../docs/architecture.md)
+- [组件开发](../../docs/components/README.md)
+- [实时协议](../../docs/protocol.md)
+- [安全模型](../../docs/security.md)
diff --git a/apps/server-rust/rustfmt.toml b/apps/server-rust/rustfmt.toml
new file mode 100644
index 0000000..c0c5cfb
--- /dev/null
+++ b/apps/server-rust/rustfmt.toml
@@ -0,0 +1,4 @@
+edition = "2024"
+max_width = 100
+newline_style = "Unix"
+use_small_heuristics = "Default"
diff --git a/apps/server-rust/src/app.rs b/apps/server-rust/src/app.rs
index 86121fc..0f61743 100644
--- a/apps/server-rust/src/app.rs
+++ b/apps/server-rust/src/app.rs
@@ -1,3 +1,10 @@
+//! Application composition root and process-wide dependencies.
+//!
+//! [`AppState::build`] wires the database, authentication service, component
+//! registry, live-source supervisor and realtime router in dependency order.
+//! Tenant-owned runtime state stays in PostgreSQL or the source supervisor;
+//! this module only owns cloneable handles shared by Axum handlers.
+
 use std::{sync::Arc, time::Duration};
 
 use async_trait::async_trait;
diff --git a/apps/server-rust/src/auth.rs b/apps/server-rust/src/auth.rs
index 017a4f8..935432c 100644
--- a/apps/server-rust/src/auth.rs
+++ b/apps/server-rust/src/auth.rs
@@ -1,3 +1,11 @@
+//! Passwordless authentication, enrollment and secret-storage domain service.
+//!
+//! This module owns invite redemption, TOTP replay protection, recovery codes,
+//! session issuance and tenant credential encryption. Raw sessions, recovery
+//! codes and component tokens are returned only at creation time; persistent
+//! rows contain hashes or authenticated ciphertext. HTTP-specific cookie and
+//! origin policy deliberately live in `http_api`, not here.
+
 use std::{fmt, sync::Arc, time::Duration};
 
 use base64::{Engine, engine::general_purpose::URL_SAFE_NO_PAD};
diff --git a/apps/server-rust/src/components.rs b/apps/server-rust/src/components.rs
index 54cc8b4..0d7c64d 100644
--- a/apps/server-rust/src/components.rs
+++ b/apps/server-rust/src/components.rs
@@ -1,3 +1,10 @@
+//! Extensible component registry and event-processing contracts.
+//!
+//! A component kind supplies a versioned settings definition, a pure browser
+//! projection and optional durable handlers. The live provider and router know
+//! only these traits, so adding a gift wall or song-request component does not
+//! require branching on component kinds in the ingestion pipeline.
+
 use std::{
     collections::{BTreeSet, HashMap},
     error::Error,
diff --git a/apps/server-rust/src/config.rs b/apps/server-rust/src/config.rs
index 8870e30..afded5f 100644
--- a/apps/server-rust/src/config.rs
+++ b/apps/server-rust/src/config.rs
@@ -1,3 +1,10 @@
+//! TOML configuration loading, validation and legacy bootstrap compatibility.
+//!
+//! Deployment-wide policy (bind address, encryption key, allowed CookieCloud
+//! hosts and timeouts) remains in [`Config`]. Room IDs, credentials and component
+//! settings become tenant-owned database records after enrollment; the legacy
+//! TOML fields are import inputs and must not be treated as global live state.
+
 use std::{env, fs, net::IpAddr, path::PathBuf};
 
 use base64::{Engine, engine::general_purpose::STANDARD};
diff --git a/apps/server-rust/src/credentials.rs b/apps/server-rust/src/credentials.rs
index 6309aa7..5d4b801 100644
--- a/apps/server-rust/src/credentials.rs
+++ b/apps/server-rust/src/credentials.rs
@@ -1,3 +1,10 @@
+//! CookieCloud boundary and Bilibili cookie extraction.
+//!
+//! Tenant input reaches an outbound HTTP client only after canonical URL
+//! validation and exact allow-list matching in the caller. Redirects are
+//! disabled by the shared client, the synchronization key is encoded as one
+//! path segment, and only the minimum Bilibili cookie fields leave this module.
+
 use reqwest::{
     Url,
     header::{REFERER, USER_AGENT},
diff --git a/apps/server-rust/src/db.rs b/apps/server-rust/src/db.rs
index 8fa99b4..65b2795 100644
--- a/apps/server-rust/src/db.rs
+++ b/apps/server-rust/src/db.rs
@@ -1,3 +1,10 @@
+//! PostgreSQL pool, migrations and low-level tenant-scoped queries.
+//!
+//! Multi-tenant tables use PostgreSQL row-level security in addition to owner
+//! columns and composite foreign keys. Every tenant query must execute inside a
+//! transaction after [`Db::set_tenant`], which uses `SET LOCAL` so pooled
+//! connections cannot retain the previous request's identity.
+
 use std::{fmt, str::FromStr};
 
 use deadpool_postgres::{Manager, ManagerConfig, Object, Pool, RecyclingMethod, Runtime};
diff --git a/apps/server-rust/src/domain.rs b/apps/server-rust/src/domain.rs
index 8be02f5..f5be164 100644
--- a/apps/server-rust/src/domain.rs
+++ b/apps/server-rust/src/domain.rs
@@ -1,3 +1,10 @@
+//! Provider-independent live events and the versioned component wire envelope.
+//!
+//! Provider adapters normalize platform packets into [`LiveEvent`]. Components
+//! subscribe to stable [`LiveEventKind`] values and project them to
+//! [`ComponentMessage`], keeping Bilibili command names and raw payloads out of
+//! browser contracts and future provider implementations.
+
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
 use uuid::Uuid;
diff --git a/apps/server-rust/src/http_api.rs b/apps/server-rust/src/http_api.rs
index 2a30b95..e11a001 100644
--- a/apps/server-rust/src/http_api.rs
+++ b/apps/server-rust/src/http_api.rs
@@ -1,3 +1,11 @@
+//! Axum HTTP/WebSocket adapter and public trust boundary.
+//!
+//! Handlers derive the tenant from a server-side session cookie; owner IDs from
+//! request bodies are never trusted. This module also enforces same-origin
+//! mutation checks, response cache policy, component-token WebSocket
+//! authentication, bounded request bodies and security headers for the static
+//! control console and OBS entry point.
+
 use std::{sync::Arc, time::Duration};
 
 use axum::{
@@ -326,7 +334,7 @@ async fn login(
         Ok(result) => result,
         Err(error) => {
             state.login_limiter.failure(&body.username, &ip).await;
-            return Err(ApiError::from(error).as_generic_login());
+            return Err(ApiError::from(error).into_generic_login());
         }
     };
     state.login_limiter.success(&body.username, &ip).await;
@@ -1146,7 +1154,7 @@ impl ApiError {
         self
     }
 
-    fn as_generic_login(mut self) -> Self {
+    fn into_generic_login(mut self) -> Self {
         if self.status != StatusCode::TOO_MANY_REQUESTS {
             self.status = StatusCode::UNAUTHORIZED;
             self.code = "invalid_credentials";
@@ -1170,10 +1178,10 @@ impl IntoResponse for ApiError {
             }),
         )
             .into_response();
-        if let Some(retry_after) = self.retry_after {
-            if let Ok(value) = HeaderValue::from_str(&retry_after.as_secs().max(1).to_string()) {
-                response.headers_mut().insert(header::RETRY_AFTER, value);
-            }
+        if let Some(retry_after) = self.retry_after
+            && let Ok(value) = HeaderValue::from_str(&retry_after.as_secs().max(1).to_string())
+        {
+            response.headers_mut().insert(header::RETRY_AFTER, value);
         }
         response
     }
diff --git a/apps/server-rust/src/live/bilibili.rs b/apps/server-rust/src/live/bilibili.rs
index d179038..aa41d5b 100644
--- a/apps/server-rust/src/live/bilibili.rs
+++ b/apps/server-rust/src/live/bilibili.rs
@@ -1,3 +1,10 @@
+//! Bilibili `blivedm_rs` adapter and raw-command normalization.
+//!
+//! The adapter authenticates with a CookieCloud-derived cookie, refreshes gift
+//! and emoticon catalogs, and converts supported Bilibili commands into bounded
+//! domain payloads. Unknown commands expose only sanitized metadata—never the
+//! original unbounded packet or authentication material.
+
 use std::{sync::Arc, time::Duration};
 
 use async_trait::async_trait;
@@ -241,11 +248,11 @@ impl LiveProvider for BilibiliProvider {
                     });
                 }
                 while let Ok(message) = upstream_receiver.try_recv() {
-                    if let Some(message) = normalize(message) {
-                        if raw_sender.blocking_send(message).is_err() {
-                            client.close();
-                            return Ok(());
-                        }
+                    if let Some(message) = normalize(message)
+                        && raw_sender.blocking_send(message).is_err()
+                    {
+                        client.close();
+                        return Ok(());
                     }
                 }
             }
@@ -534,12 +541,12 @@ fn parse_danmaku_emoticons(info: &[Value], text: &str) -> Vec<EmoticonHint> {
         json_object(object.get("extra")?)
     });
     if let Some(extra) = extra {
-        if let Some(emoticons) = extra.get("emots").and_then(json_object) {
-            if let Some(emoticons) = emoticons.as_object() {
-                for (token, metadata) in emoticons {
-                    if let Some(hint) = emoticon_hint(metadata, token, false) {
-                        hints.push(hint);
-                    }
+        if let Some(emoticons) = extra.get("emots").and_then(json_object)
+            && let Some(emoticons) = emoticons.as_object()
+        {
+            for (token, metadata) in emoticons {
+                if let Some(hint) = emoticon_hint(metadata, token, false) {
+                    hints.push(hint);
                 }
             }
         }
@@ -547,22 +554,20 @@ fn parse_danmaku_emoticons(info: &[Value], text: &str) -> Vec<EmoticonHint> {
             .get("emoticon_unique")
             .and_then(Value::as_str)
             .filter(|value| !value.is_empty())
-        {
-            if !hints
+            && !hints
                 .iter()
                 .any(|hint| hint.unique.as_deref() == Some(unique))
-            {
-                hints.push(EmoticonHint {
-                    text: text.to_owned(),
-                    unique: Some(unique.to_owned()),
-                    url: None,
-                    width: None,
-                    height: None,
-                    is_dynamic: false,
-                    bulge_display: value_is_truthy(extra.get("bulge_display")),
-                    standalone: extra.get("dm_type").and_then(Value::as_i64) == Some(1),
-                });
-            }
+        {
+            hints.push(EmoticonHint {
+                text: text.to_owned(),
+                unique: Some(unique.to_owned()),
+                url: None,
+                width: None,
+                height: None,
+                is_dynamic: false,
+                bulge_display: value_is_truthy(extra.get("bulge_display")),
+                standalone: extra.get("dm_type").and_then(Value::as_i64) == Some(1),
+            });
         }
     }
     hints
diff --git a/apps/server-rust/src/live/mod.rs b/apps/server-rust/src/live/mod.rs
index fa17fa2..1a5ced0 100644
--- a/apps/server-rust/src/live/mod.rs
+++ b/apps/server-rust/src/live/mod.rs
@@ -1,3 +1,10 @@
+//! Live-provider abstraction and source lifecycle types.
+//!
+//! A provider receives trusted tenant/source context and emits canonical
+//! [`LiveEvent`] values plus observable connection status. Cancellation and
+//! restart ownership live in [`supervisor::SourceSupervisor`], keeping provider
+//! implementations focused on one upstream connection.
+
 pub mod bilibili;
 pub mod supervisor;
 
diff --git a/apps/server-rust/src/live/supervisor.rs b/apps/server-rust/src/live/supervisor.rs
index 9142ca2..de2618e 100644
--- a/apps/server-rust/src/live/supervisor.rs
+++ b/apps/server-rust/src/live/supervisor.rs
@@ -1,3 +1,9 @@
+//! Per-source task ownership, restart and cancellation.
+//!
+//! The supervisor guarantees at most one provider generation for a source ID.
+//! Reconfiguration cancels the old task before a replacement starts, preventing
+//! duplicate Bilibili listeners and duplicate downstream events.
+
 use std::{collections::HashMap, sync::Arc};
 
 use async_trait::async_trait;
diff --git a/apps/server-rust/src/main.rs b/apps/server-rust/src/main.rs
index 0feb163..4a8c6c6 100644
--- a/apps/server-rust/src/main.rs
+++ b/apps/server-rust/src/main.rs
@@ -1,3 +1,9 @@
+//! Executable entry point for the livestream component host.
+//!
+//! Keep this file limited to process concerns: configuration, logging, socket
+//! binding and graceful shutdown. All application behavior belongs in the
+//! library crate so it can be exercised without starting a real HTTP server.
+
 use lxc_stream_server::{app::AppState, config::Config, http_api};
 use tracing::{info, warn};
 
diff --git a/apps/server-rust/src/overlay.rs b/apps/server-rust/src/overlay.rs
index 2880cfc..6450fd8 100644
--- a/apps/server-rust/src/overlay.rs
+++ b/apps/server-rust/src/overlay.rs
@@ -1,3 +1,10 @@
+//! Danmaku-overlay settings plus Bilibili gift and emoticon metadata caches.
+//!
+//! Settings are sanitized before persistence or projection. Catalog refreshes
+//! replace the in-memory snapshot only after a complete valid response, so a
+//! transient upstream failure preserves the last known gift images, prices and
+//! emoticon URLs instead of breaking live rendering.
+
 use std::{collections::HashMap, sync::Arc};
 
 use serde::{Deserialize, Serialize};
@@ -123,16 +130,30 @@ pub struct EmoticonCatalog {
     by_emoji: Arc<RwLock<HashMap<String, EmoticonMeta>>>,
 }
 
+// Parser return aliases keep the atomic cache-replacement contract visible:
+// both lookup maps and their source count are produced before either lock is
+// updated, so readers never observe a half-refreshed catalog.
+type GiftCatalogSnapshot = (HashMap<i64, GiftMeta>, HashMap<String, GiftMeta>, usize);
+type EmoticonCatalogSnapshot = (
+    HashMap<String, EmoticonMeta>,
+    HashMap<String, EmoticonMeta>,
+    usize,
+);
+
 impl EmoticonCatalog {
     pub async fn len(&self) -> usize {
         self.by_unique.read().await.len()
     }
 
+    pub async fn is_empty(&self) -> bool {
+        self.len().await == 0
+    }
+
     pub async fn get(&self, unique: Option<&str>, emoji: &str) -> Option<EmoticonMeta> {
-        if let Some(unique) = unique.filter(|value| !value.is_empty()) {
-            if let Some(emoticon) = self.by_unique.read().await.get(unique).cloned() {
-                return Some(emoticon);
-            }
+        if let Some(unique) = unique.filter(|value| !value.is_empty())
+            && let Some(emoticon) = self.by_unique.read().await.get(unique).cloned()
+        {
+            return Some(emoticon);
         }
         self.by_emoji.read().await.get(emoji).cloned()
     }
@@ -184,11 +205,15 @@ impl GiftCatalog {
         self.by_id.read().await.len()
     }
 
+    pub async fn is_empty(&self) -> bool {
+        self.len().await == 0
+    }
+
     pub async fn get(&self, id: Option<i64>, name: &str) -> Option<GiftMeta> {
-        if let Some(id) = id {
-            if let Some(gift) = self.by_id.read().await.get(&id).cloned() {
-                return Some(gift);
-            }
+        if let Some(id) = id
+            && let Some(gift) = self.by_id.read().await.get(&id).cloned()
+        {
+            return Some(gift);
         }
         self.by_name
             .read()
@@ -231,9 +256,7 @@ impl GiftCatalog {
     }
 }
 
-fn parse_catalog(
-    payload: &Value,
-) -> Result<(HashMap<i64, GiftMeta>, HashMap<String, GiftMeta>, usize), String> {
+fn parse_catalog(payload: &Value) -> Result<GiftCatalogSnapshot, String> {
     let list = payload
         .pointer("/data/gift_config/base_config/list")
         .and_then(Value::as_array)
@@ -282,16 +305,7 @@ fn string_field(value: &Value, name: &str) -> Option<String> {
         .map(ToOwned::to_owned)
 }
 
-fn parse_emoticon_catalog(
-    payload: &Value,
-) -> Result<
-    (
-        HashMap<String, EmoticonMeta>,
-        HashMap<String, EmoticonMeta>,
-        usize,
-    ),
-    String,
-> {
+fn parse_emoticon_catalog(payload: &Value) -> Result<EmoticonCatalogSnapshot, String> {
     let packages = payload
         .pointer("/data/data")
         .and_then(Value::as_array)
diff --git a/apps/server-rust/src/rate_limit.rs b/apps/server-rust/src/rate_limit.rs
index 35531db..b6a70b4 100644
--- a/apps/server-rust/src/rate_limit.rs
+++ b/apps/server-rust/src/rate_limit.rs
@@ -1,3 +1,9 @@
+//! In-memory abuse limits for anonymous authentication and enrollment routes.
+//!
+//! Limits are evaluated across both account and network-derived keys while
+//! returning one generic result to callers. This reduces brute-force attempts
+//! without turning timing or error messages into a username-enumeration API.
+
 use std::{
     collections::{HashMap, VecDeque},
     sync::Arc,
diff --git a/apps/server-rust/src/realtime.rs b/apps/server-rust/src/realtime.rs
index 630a090..a39fbd0 100644
--- a/apps/server-rust/src/realtime.rs
+++ b/apps/server-rust/src/realtime.rs
@@ -1,3 +1,10 @@
+//! Tenant-aware event routing and component-scoped realtime fanout.
+//!
+//! The router resolves enabled instances by owner and source, validates their
+//! settings/subscriptions, runs durable handlers, then publishes passive
+//! projections. Each component owns a separate broadcast channel; there is no
+//! global receiver that could accidentally observe another tenant's events.
+
 use std::{
     collections::HashMap,
     error::Error,
diff --git a/apps/server-rust/src/repository.rs b/apps/server-rust/src/repository.rs
index b151b95..f533015 100644
--- a/apps/server-rust/src/repository.rs
+++ b/apps/server-rust/src/repository.rs
@@ -1,3 +1,10 @@
+//! Repository facade for tenant components, settings and the routing cache.
+//!
+//! PostgreSQL is authoritative. Successful writes are reflected into the
+//! in-process [`InMemoryComponentStore`] used by the hot event path; startup and
+//! source restarts hydrate that cache from tenant-scoped rows before events are
+//! routed.
+
 use std::{fmt, sync::Arc};
 
 use chrono::{DateTime, Utc};
diff --git a/compose.yaml b/compose.yaml
index c4293a5..9dfc48d 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -3,7 +3,7 @@ services:
     build: .
     restart: unless-stopped
     network_mode: host
-    user: "${APP_UID:-1000}:${APP_GID:-1000}"
+    user: '${APP_UID:-1000}:${APP_GID:-1000}'
     read_only: true
     tmpfs:
       - /tmp:size=16m,noexec,nosuid,nodev
@@ -15,7 +15,7 @@ services:
       # 复制 config.toml.example 为 config.toml 并填入真实配置后再启动。
       - ./config.toml:/app/config.toml:ro
     healthcheck:
-      test: ["CMD", "curl", "--fail", "--silent", "http://127.0.0.1:9719/health"]
+      test: ['CMD', 'curl', '--fail', '--silent', 'http://127.0.0.1:9719/health']
       interval: 30s
       timeout: 5s
       retries: 5
diff --git a/docs/architecture.md b/docs/architecture.md
new file mode 100644
index 0000000..750ba6b
--- /dev/null
+++ b/docs/architecture.md
@@ -0,0 +1,80 @@
+# 系统架构
+
+本文描述直播组件服务的运行边界、数据流和扩展点。实现代码分别位于 `apps/server-rust` 与
+`apps/overlay`。
+
+## 核心目标
+
+- 每个账户固定绑定一个 Bilibili 直播间和一个独立直播源。
+- 一个直播源只建立一条上游连接，但可以把事件投递给多个组件实例。
+- 平台原始命令先转换成稳定的领域事件，组件不直接依赖 Bilibili `CMD`。
+- HTTP 会话、直播源、组件、OBS token 和实时通道均以租户为边界。
+- 新组件可以增加设置、投影和持久化副作用，而不修改直播连接核心。
+
+## 运行时数据流
+
+```mermaid
+flowchart LR
+  CC[CookieCloud] --> PF[ProviderFactory]
+  BL[Bilibili Live] <--> BP[BilibiliProvider]
+  PF --> BP
+  BP --> LE[LiveEvent]
+  LE --> SR[SourceEventRouter]
+  PG[(PostgreSQL)] --> CR[Component repository/cache]
+  CR --> SR
+  SR --> EH[Durable handlers]
+  SR --> PJ[Passive projection]
+  PJ --> HUB[Component-scoped EventHub]
+  HUB --> WS[Authenticated WebSocket]
+  WS --> OBS[OBS overlay]
+```
+
+1. `SourceSupervisor` 为每个 `source_id` 保持至多一个 provider task。
+2. `BilibiliProvider` 使用该用户加密保存的 CookieCloud 凭据获取 Cookie，并把原始消息转换成
+   `LiveEvent`。
+3. `SourceEventRouter` 同时使用 `owner_id` 与 `source_id` 查找启用的组件，并再次检查组件归属。
+4. 匹配订阅后，路由器先执行可持久化的 `EventHandler`，再执行无副作用的 `EventProjection`。
+5. 投影结果只发布到该 `component_id` 的广播通道。没有全局 WebSocket 事件总线。
+6. OBS 使用组件级只读 token 订阅一个组件，不能读取控制台 API。
+
+## 状态所有权
+
+| 状态             | 权威来源     | 内存副本                 | 说明                          |
+| ---------------- | ------------ | ------------------------ | ----------------------------- |
+| 用户、TOTP、会话 | PostgreSQL   | 无                       | Secret 加密，token 只保存摘要 |
+| CookieCloud 凭据 | PostgreSQL   | provider 构建期间解密    | 不返回浏览器                  |
+| 直播源和房间     | PostgreSQL   | `SourceSupervisor`       | 每用户固定一个房间            |
+| 组件实例与设置   | PostgreSQL   | `InMemoryComponentStore` | 写入成功后刷新热路径缓存      |
+| 礼物/表情目录    | Bilibili API | provider catalog         | 刷新失败保留最近成功快照      |
+| 实时消息         | provider     | `EventHub` 有界广播      | 不作为业务持久化机制          |
+| PWA 静态壳层     | Docker 镜像  | Cache Storage            | 不包含 API 或用户数据         |
+
+## 启动顺序
+
+`AppState::build` 按以下顺序启动，避免事件进入未完成的运行时：
+
+1. 创建 PostgreSQL 连接池并执行嵌入式迁移。
+2. 构造加密和 passwordless 鉴权服务。
+3. 注册内建组件定义。
+4. 从 PostgreSQL hydrate 组件热路径缓存。
+5. 创建有界源事件队列、路由器和每组件广播中心。
+6. 为数据库中所有启用的直播源启动 provider。
+7. 最后由 `main.rs` 绑定 HTTP 监听端口。
+
+关机时先停止接收 HTTP，再取消所有 provider task，防止容器退出期间继续拉取上游事件。
+
+## 进程与部署边界
+
+- Node 只存在于 Docker 的前端构建阶段。
+- 最终镜像仅运行 Rust 可执行文件，并从 `/app/web` 同域托管静态资源。
+- 容器使用 host network，但默认只监听 `127.0.0.1:9719`。
+- Nginx 负责公网 TLS、域名和 WebSocket upgrade。
+- CookieCloud 与 PostgreSQL 是外部服务，不由本项目 Compose 创建。
+
+## 代码导航
+
+- 后端模块职责：[`apps/server-rust/README.md`](../apps/server-rust/README.md)
+- 前端路由和状态：[`apps/overlay/README.md`](../apps/overlay/README.md)
+- 组件扩展指南：[`components/README.md`](components/README.md)
+- WebSocket 协议：[`protocol.md`](protocol.md)
+- 安全边界：[`security.md`](security.md)
diff --git a/docs/components/README.md b/docs/components/README.md
new file mode 100644
index 0000000..388f6d9
--- /dev/null
+++ b/docs/components/README.md
@@ -0,0 +1,58 @@
+# 组件开发指南
+
+组件是“一个直播源上的独立功能实例”。当前内建
+`danmaku_overlay`，未来礼物墙、点歌姬或统计组件都应使用同一套契约。
+
+## 一个组件由什么组成
+
+| 部分     | Rust 契约             | 职责                                              |
+| -------- | --------------------- | ------------------------------------------------- |
+| 定义     | `ComponentDefinition` | kind、设置版本、默认值、校验、迁移、订阅          |
+| 投影     | `EventProjection`     | 把 `LiveEvent` 转成浏览器消息，不执行持久化副作用 |
+| Handler  | `EventHandler`        | 可选的数据库写入、点歌或外部动作                  |
+| 实例     | `ComponentInstance`   | owner、source、kind、名称、设置和启用状态         |
+| 实时通道 | `EventHub`            | 按 component ID 隔离的有界广播                    |
+| 前端     | React renderer/editor | 管理设置、测试与 OBS 展示                         |
+
+## 新增组件步骤
+
+1. 选择稳定、全小写的 kind，例如 `gift_wall` 或 `song_request`。
+2. 为设置定义可序列化结构，提供安全默认值和 `sanitize`/校验逻辑。
+3. 实现 `ComponentDefinition`：
+   - `settings_version` 从 `1` 开始。
+   - `migrate_settings` 必须能把已保存的旧版本升级到当前版本。
+   - `subscriptions` 只返回当前设置需要的 `LiveEventKind`。
+4. 实现无副作用的 `EventProjection`。返回 `None` 表示该事件无需发送浏览器。
+5. 若需要可靠业务动作，实现 `EventHandler`：
+   - 即使没有 OBS 客户端也会执行。
+   - 数据库操作必须包含 owner/source/component 条件。
+   - 上游可能重试或出现组合事件，因此 handler 自己负责幂等。
+6. 在 `ComponentRegistry::with_builtin_components` 注册定义与投影，再注册 handler。
+7. 增加数据库创建/设置 API；不要把组件专属关系数据无限塞入 JSON settings。
+8. 在控制台增加设置编辑器，在 OBS 前端增加对应事件渲染器。
+9. 增加以下测试：设置边界、版本迁移、订阅、跨租户拒绝、handler 幂等、投影 wire shape 和 OBS 渲染。
+
+## Projection 与 Handler 的边界
+
+Projection 面向“现在打开的浏览器”。消息丢失或没有接收者都属于正常情况。它必须快速、确定、无副作用。
+
+Handler 面向“业务事实”。例如点歌请求、礼物累计或审计写入必须在这里完成，而不是等待前端收到 WebSocket。一个 handler 失败会记录在
+`RouteReport`，但不会阻止其他 handler 或 OBS 投影。
+
+## 设置版本规则
+
+- 数据库同时保存 `settings` 与 `settings_version`。
+- 每次读取或路由前，通过 registry 迁移并校验设置。
+- 新字段应提供默认值，删除/改义字段必须增加版本并编写迁移。
+- 客户端输入只能作为待校验 JSON；后端返回的 sanitized 设置才是权威值。
+- UI slider 的范围不能代替后端范围检查。
+
+## 租户与 token 规则
+
+- 组件必须属于同一个 owner 与 source。
+- 路由和数据库查询都要重复检查这一关系。
+- 每个组件单独签发 access token，默认只有 `events:subscribe`。
+- 删除组件或轮换 token 时，关闭该组件 channel，使已有 socket 立即失效。
+- 组件 WebSocket 不得暴露其他组件列表或控制 API。
+
+当前组件的具体行为见 [`danmaku-overlay.md`](danmaku-overlay.md)。
diff --git a/docs/components/danmaku-overlay.md b/docs/components/danmaku-overlay.md
new file mode 100644
index 0000000..6d8c2a3
--- /dev/null
+++ b/docs/components/danmaku-overlay.md
@@ -0,0 +1,66 @@
+# `danmaku_overlay` 弹幕姬
+
+弹幕姬把一个租户直播源的互动事件投影为透明 OBS 消息墙。它是被动展示组件：不记账、不回复弹幕，也不把 WebSocket 当作持久化业务通道。
+
+## 订阅事件
+
+组件根据设置动态订阅：
+
+- 弹幕、进房、礼物与礼物连击、醒目留言、舰长、点赞、分享。
+- 关闭类别后，后端不为该组件投影对应事件，前端也会进行一次兼容性过滤。
+- 未归一化的 `live.unknown` 默认不进入弹幕姬。
+
+## 设置
+
+| 字段                     | 范围/单位   | 行为                       |
+| ------------------------ | ----------- | -------------------------- |
+| `fontScale`              | 50–300%     | 展开与收缩字号的统一比例   |
+| `maxVisible`             | 1–12        | 同时保留的消息卡数量       |
+| `collapseAfterSeconds`   | 2–120 秒    | 最新卡从展开态切换到紧凑态 |
+| `unfoldDurationMs`       | 200–5000 ms | 横向卷轴展开动画时间       |
+| `motionIntensity`        | 0–100%      | 卡片、流光与焦点动画强度   |
+| `particleCount`          | 0–12        | 每卡星花粒子数量           |
+| `particleSpeed`          | 25–300%     | 粒子动画速度               |
+| `lowPerformanceMode`     | boolean     | 关闭高成本动态效果         |
+| `highValueThreshold`     | 千分之一元  | 高价值礼物起点             |
+| `featuredValueThreshold` | 千分之一元  | 焦点礼物起点               |
+| `show*`                  | boolean     | 控制各事件类别订阅         |
+
+后端的 `OverlaySettings::sanitize` 是最终边界。控制台 range input 只改善交互，不能取代服务端校验。
+
+## 卡片生命周期
+
+1. 新事件插入队首，以卷轴动画横向展开。
+2. 用户名与内容在展开态分行显示，长内容完整换行。
+3. 新事件到达或超时后，旧卡变成紧凑态；内容不会隐藏。
+4. 紧凑态缩小字号并尽量压缩布局，但仍允许换行避免截断。
+5. 超过 `maxVisible` 的最旧卡才会离开队列。
+
+花纹由事件类型和事件 ID 的稳定 hash 选择。相邻卡会避开完全相同的款式；礼物连击更新沿用原卡片 key 和装饰，避免视觉跳动。
+
+## 礼物展示
+
+- `live.gift` 创建礼物卡；`live.gift.combo` 使用 `comboId` 更新同一张卡。
+- 元数据优先使用礼物目录中的静态图、GIF、币种和价格。
+- GIF 加载失败时降级为静态图片；静态图失败时隐藏图片但保留名称、数量和用户。
+- 普通、高价值和焦点礼物按 `totalPrice` 与两个阈值分级。
+- `priceCny` 只用于人类可读展示；整数 `totalPrice` 用于精确分级。
+
+## 弹幕表情
+
+文字和表情按 `segments` 顺序混排。表情 URL 来自消息本身或用户级表情目录补全；图片使用
+`no-referrer`，失败后显示原始表情文字。整条大表情可通过 `standalone` 使用更合适的尺寸。
+
+## OBS 自适应
+
+- 根背景完全透明，不存在 1920×1080 固定画布。
+- `ResizeObserver` 根据浏览器源实际宽高选择 `narrow`、`short` 或 `standard`。
+- 字号和间距使用 CSS custom properties 与 `clamp()`，OBS 自由缩放时不拉伸素材比例。
+- 建议从 `360×600`、`440×760`、`600×1080` 或 `720×320` 开始测试。
+- 低高度会减少视觉密度，但不会把仍在队列中的文字裁成省略号。
+
+## 测试页面
+
+控制台的事件测试直接构造 canonical
+`LiveEvent`，使用当前账户、source 和 component 走同一套订阅、handler、projection 与 EventHub。测试事件标记为
+`simulated=true`，不会发送到 Bilibili，也不会跨组件广播。
diff --git a/docs/protocol.md b/docs/protocol.md
new file mode 100644
index 0000000..8964b4f
--- /dev/null
+++ b/docs/protocol.md
@@ -0,0 +1,103 @@
+# 组件实时协议
+
+当前协议版本为 `1`。后端的权威定义在 `domain.rs` 的
+`ComponentMessage`，浏览器渲染器只依赖本文列出的稳定字段。
+
+## 连接地址与认证
+
+组件流地址：
+
+```text
+wss://danmaku.luoxingci.com/api/v1/components/<publicId>/stream
+```
+
+OBS 页面地址中的 token 位于 fragment：
+
+```text
+https://danmaku.luoxingci.com/obs/<publicId>#token=<component-token>
+```
+
+fragment 不会进入首次 HTTP 请求或 Nginx access
+log。WebSocket 建立后，客户端必须在 8 秒内发送第一帧：
+
+```json
+{
+  "type": "authenticate",
+  "token": "component-token"
+}
+```
+
+服务端验证 token 摘要、组件归属和 `events:subscribe` scope。认证成功后返回：
+
+```json
+{
+  "version": 1,
+  "type": "authenticated",
+  "componentId": "08d31d19-3e4b-4c11-9cf7-9bd786a39465"
+}
+```
+
+之后立即发送
+`overlay.settings.snapshot`，再开始发送实时事件。token 无效、被轮换或属于其他组件时，服务端以 policy
+close 结束连接。
+
+## 版本化事件信封
+
+```json
+{
+  "version": 1,
+  "id": "d56c1a28-a6f1-4ad9-b02f-4c22dc4d3c27",
+  "componentId": "08d31d19-3e4b-4c11-9cf7-9bd786a39465",
+  "sourceId": "c8087bb0-0dde-40eb-a43d-a9a2574c2717",
+  "occurredAt": "2026-07-15T20:10:30.125Z",
+  "roomId": "123456",
+  "type": "live.danmaku",
+  "payload": {
+    "viewer": { "uid": "42", "name": "观众" },
+    "text": "晚上好",
+    "segments": [{ "type": "text", "text": "晚上好" }]
+  }
+}
+```
+
+`ownerId` 永远不会序列化到浏览器。消费者应按 `version` 和 `type`
+分派，并忽略不认识的 payload 字段，从而允许兼容地增加元数据。
+
+## 事件类型
+
+| `type`                      | 主要 payload                                  | 说明                   |
+| --------------------------- | --------------------------------------------- | ---------------------- |
+| `overlay.settings.snapshot` | `settings`                                    | 认证后当前设置快照     |
+| `overlay.settings.updated`  | `settings`                                    | 控制台保存后的实时设置 |
+| `live.danmaku`              | `viewer`, `text`, `segments`                  | 普通文字和表情分段     |
+| `live.enter`                | `viewer`                                      | 进房事件               |
+| `live.gift`                 | `viewer`, `gift`, `quantity`, `sourceEventId` | 一次可记账的礼物事件   |
+| `live.gift.combo`           | `viewer`, `gift`, `quantity`, `comboId`       | 同一连击的视觉更新     |
+| `live.superchat`            | `viewer`, `message`, `price`, `sourceEventId` | 醒目留言               |
+| `live.guard.buy`            | `viewer`, `guardName`, `quantity`, `price`    | 舰长购买               |
+| `live.like`                 | `viewer`                                      | 点赞                   |
+| `live.share`                | `viewer`                                      | 分享                   |
+| `live.unknown`              | `command`, `metadata`                         | 有界且已清理的未知事件 |
+
+礼物目录价格的原始单位是人民币的千分之一。`gift.totalPrice` 保留该整数单位，`gift.priceCny`
+是供展示使用的人民币数值。
+
+`live.gift` 与 `live.gift.combo` 不是两笔礼物。需要持久化计数的组件通常只消费
+`live.gift`；连击事件用于更新同一张视觉卡片。
+
+## 表情分段
+
+`live.danmaku.payload.segments` 是判别联合：
+
+- `text`：包含可直接显示的文字。
+- `emoticon`：包含回退文字、图片 URL、可选尺寸、动态标记和整条大表情标记。
+
+图片失败时客户端必须回退到 `text`，不能让一张失效图片破坏整条弹幕。
+
+## 背压与重连
+
+- 每个组件使用有界 `tokio::broadcast` channel。
+- 慢客户端发生 `Lagged` 时跳过已经丢失的旧帧，继续接收新事件；实时展示不保证历史重放。
+- 浏览器对非鉴权关闭使用指数退避重连，上限 12 秒。
+- 鉴权失败不会自动重试，避免对已撤销 token 形成无限请求。
+- 需要可靠业务处理的功能必须实现 `EventHandler` 并写入数据库，不能把 WebSocket 当作消息队列。
diff --git a/docs/security.md b/docs/security.md
new file mode 100644
index 0000000..07123e7
--- /dev/null
+++ b/docs/security.md
@@ -0,0 +1,75 @@
+# 安全模型
+
+本服务同时处理 Bilibili 登录 Cookie、TOTP Secret、一次性恢复码、管理员邀请码和 OBS
+token。以下规则是实现约束，而不是可选部署建议。
+
+## 租户隔离
+
+- HTTP handler 只从服务端会话解析 `owner_id`，不接受客户端声明的 owner。
+- 组件查询同时限定 `owner_user_id` 与 `source_id`。
+- 数据库使用 owner 复合外键、RLS 和 `FORCE ROW LEVEL SECURITY`。
+- tenant 查询必须在事务中执行 `SET LOCAL app.user_id`，不能使用会泄漏到连接池的 session-level
+  `SET`。
+- 实时广播按 `component_id` 建立独立 channel，不提供全局订阅。
+- 路由器在投影发布前再次验证 owner、source 和 component ID。
+
+## Secret 生命周期
+
+| Secret               | 浏览器可见性        | 数据库存储              | 轮换/消费        |
+| -------------------- | ------------------- | ----------------------- | ---------------- |
+| TOTP Secret          | 注册时显示一次      | XChaCha20-Poly1305 密文 | 账户绑定         |
+| 恢复码               | 注册完成时显示一次  | SHA-256 摘要            | 单次消费         |
+| 登录 session         | HttpOnly Cookie     | SHA-256 摘要            | 到期、登出或撤销 |
+| CookieCloud Key/密码 | 用户提交时          | XChaCha20-Poly1305 密文 | 覆盖更新         |
+| 邀请码               | 创建时显示一次      | SHA-256 摘要和前缀      | 单次消费或撤销   |
+| OBS token            | 创建/轮换时显示一次 | SHA-256 摘要            | 组件级轮换       |
+
+`security.data_encryption_key`
+是恢复密文所必需的主密钥。它必须独立备份，但不能提交到 Git 或写入镜像。
+
+## Passwordless 认证
+
+- 第一个系统管理员只能通过数据库为空时的 bootstrap 流程创建。
+- bootstrap proof 不成为账户密码，也不能用于日常登录。
+- TOTP 接受有限时钟偏移，并持久化最近使用的 time step，阻止同一码重放。
+- 登录与匿名注册同时按账户维度和网络维度限流，错误消息不暴露用户名是否存在。
+- 注册先写入短期 pending enrollment；只有正确 TOTP 确认后才原子创建账户并消费邀请码。
+
+## CookieCloud 与 SSRF
+
+- 部署者通过 `cookiecloud_allowed_hosts` 指定精确的基础地址白名单。
+- URL 会规范化，并拒绝 embedded credentials、query 和 fragment。
+- Key 编码成单一路径段，不能注入额外路径。
+- HTTP 客户端禁止重定向，防止允许的地址跳转到内网目标。
+- 浏览器只看到 host 和 `keyConfigured`/`passwordConfigured`，不会读回凭据。
+- 日志不得把 `blivedm` 调到可能打印认证响应的详细级别。
+
+## HTTP、WebSocket 与 OBS
+
+- 公开部署必须在受信任反代终止 HTTPS，并保持 `secure_cookies = true`。
+- 生产 session 使用 `__Host-` Cookie、HttpOnly、Secure 与 SameSite 策略。
+- 写 API 执行 same-origin 检查并限制 body 大小。
+- 所有 `/api/*` 响应使用 `Cache-Control: no-store`。
+- OBS token 放在 URL fragment，并作为 WebSocket 第一帧发送。
+- token 只具有 `events:subscribe` scope，且只能订阅其绑定的组件。
+- WebSocket 首帧、frame size、认证时间和全局连接数均有上限。
+
+## PWA 边界
+
+- manifest、Service Worker 和 start URL 都限定在 `/control/`。
+- `/obs/*` 不在 Service Worker scope 内。
+- worker 只缓存静态应用壳层、图标和构建资源；不缓存 API、WebSocket 或直播事件。
+- 离线 mutation 直接失败，不使用 Background Sync。
+- 新 worker 仅在用户确认后激活。
+- TOTP、恢复码、邀请码、新 OBS 地址或未保存设置可见时，更新会被阻止。
+
+## 上线检查表
+
+- [ ] 使用独立随机 `data_encryption_key`，并在安全位置备份。
+- [ ] `config.toml` 权限为 `0600`，且已被 Git 和 Docker build context 排除。
+- [ ] PostgreSQL runtime role 可以执行迁移，但 PUBLIC 无权执行 SECURITY DEFINER helper。
+- [ ] `secure_cookies = true`，Nginx 正确传递 `X-Forwarded-Proto https`。
+- [ ] 应用仅监听 loopback，9719 未直接暴露公网。
+- [ ] CookieCloud 白名单只包含管理员批准的实例。
+- [ ] 日志中没有 Cookie、TOTP、token、邀请码或上游认证响应。
+- [ ] 轮换 OBS token 后，旧浏览器源立即断开且无法重连。