第三轮深度测试：修复7个并行agent发现的前端问题，含REASON_MESSAGES系统性补全

派了Ch1-2/3-4/5-6/7/8/9/10-11共7个agent对全部11章重新深度测试。后端问题已核实追加进
docs/IM-后端问题清单-2026-09-04.md（新增6-9条，发给用户）；本次是前端问题的修复。

**REASON_MESSAGES系统性补全（最高优先级，多个agent独立发现同一个缺口）**
im-api.js的REASON_MESSAGES表新增22个条目，最重要的是PERMISSION_DENIED——后端
server/im_http.go里403响应统一用这个reason（30余处调用），但表里原来只有一个从未
被后端实际发送过的死条目FORBIDDEN，导致全站几乎每一个403从工程一开始就在展示原始
英文"permission denied"。一并补上VERSION_CONFLICT/MALFORMED_REQUEST（Ch9 agent实测
命中）、NOT_FOUND、VERIFICATION_RATE_LIMITED（动态文案，同TOO_MANY_ATTEMPTS模式）等。
新增translateReason()导出函数并用于send-message.jsx的sendFavorite——favorites/forward
等几个批量接口恒定200、真实成败包在items[].reason里，imRequest的自动翻译够不到这种
per-item场景，之前直接显示原始reason字符串。tinode-web.jsx同理补了CTRL_ERROR_TEXT_CN
（原生WS {ctrl}协议错误，同样绕开REASON_MESSAGES）并修了原表从未真正匹配过的bug——
CommError会把状态码拼进message变成"authentication failed (401)"，原表按裸文本精确
匹配，看着正常纯粹是因为401/403兜底文案凑巧一样，一旦命中"unknown authentication
scheme"这类会被兜底文案误导、"policy violation"这类会直接漏出英文。uploadLargeFile/
createChatUploader/createFileDownloader同样绕开REASON_MESSAGES（走原生{ctrl}协议），
补了UPLOAD_CTRL_TEXT_CN小词典。已用真实账号端到端验证：favorites/forward到P2P目标
触发的PERMISSION_DENIED现在正确显示"没有权限执行此操作"；draft接口版本冲突正确显示
"内容已被修改，请刷新后重试"。

**编辑消息时打开附件面板会静默覆盖被编辑消息（Ch3-4 agent发现，数据损坏级别）**
sendMessage对editing状态一律用head.replace，但onAttachFile/onAttachImage/onAttachAudio
原来只在forwardMessage时置空，编辑态没有同款门禁——编辑一条消息不改文字、点"+"选张图片
或名片，会直接把附件内容替换掉被编辑消息的原文，无任何确认。messages-view.jsx新增
editingMessage门禁，和forwardMessage一样把三个attach回调置空（等价于隐藏整个"+"按钮）。
已用真实浏览器验证：编辑态下"+"按钮消失，取消编辑后正常恢复。

**草稿防抖单一共享定时器丢字（Ch1-2、Ch3-4两个agent独立发现）**
handleComposerChange用单个this.draftSaveTimer，话题A打字触发600ms保存后300ms内切到
话题B，会把A的定时器clearTimeout掉，那次输入永久丢失；version也在定时器触发时才重新
读state，此时可能已经在别的话题上，退化成硬编码0——叠加后端draft接口对version=0"无条件
跳过乐观锁"的行为（已记入后端清单新增6），可能静默覆盖别的标签页写入的更新草稿。改为
按话题分开的定时器map，version在调用的当下（保证仍在该话题）同步捕获进闭包。

**呼叫状态机两处真实bug（Ch8 agent此前发现，本次重新核实live代码后确认+修复）**
1. 通话中导航离开messages-view.jsx整个组件树（切到工作台/个人设置，或移动端切回会话
   列表）时，没有任何hangup清理——componentSetup已有的"切换话题时正确挂断"逻辑只在
   componentDidUpdate里，组件真正卸载时不会触发。CallPanel自己的componentWillUnmount
   只做本地清理，不通知对方也不重置tinode-web.jsx顶层callState，导致下次切回通话话题
   时remount出一个callState卡在CALL_STATE_IN_PROGRESS的"僵尸"面板——start()走"我们刚
   接听"分支直接return，从不调getUserMedia，本地媒体永久拿不到。补了对称的
   componentWillUnmount挂断逻辑。
2. this.callTimeoutTimer声明后从未被真正setTimeout赋值——呼出无人接听或accept信令
   （fire-and-forget的{note}包）被丢会永久卡在"呼叫中"。补了armCallRingTimeout()，
   60秒未接通按跟手动取消完全一样的路径挂断（不发明新的通话结果语义），在收到对方
   accept信号的两处分支都正确清timer。

**其余前端修复（按文件）**
- messages-view.jsx: @提醒mentionedUsers只在切话题时清空，同一话题内后续消息里字面
  文本"@张三"会被静默解析成真实提醒（发送后清空）；jumpToMessage点开已撤回/删除的
  搜索结果原来只console.error静默失败，补了用户可见的错误提示；批量收藏对
  favorites/batch共享Idempotency-Key导致的静默丢失（已知后端问题）不再照单全收
  "收藏成功"，改为发送后重新拉取真实收藏列表核对每条是否真的落地。
- audio-recorder.jsx: getUserMedia权限弹窗未决出结果时组件被卸载，补_unmounted
  标记避免在死实例上继续跑mediaRecorder.start()。
- send-message.jsx: disabled变为true时（对方拉黑/被禁言等实时ACS变化）没有强制结束
  正在进行的按住录音，可能remount出无用户手势的"自动录音"；mouseup/touchend覆盖不到
  拖出窗口/切换标签页/权限弹窗抢焦点的释放场景，补了blur/visibilitychange兜底。
- tinode-web.jsx: messages-menu视图和messages-home共用MessageCenterView实例无key，
  从messages-home以非整体刷新方式切到messages-menu时菜单打不开，补key={view}。
- message-center-view.jsx: 实名认证驳回提醒的dismiss key只按用户+状态区分，同一状态
  的两次独立驳回会互相误压制，改按submission_id区分。
- contact-management-view.jsx: Profile/Settings靠getUserProfile刷新拉黑状态，但该
  接口对被拉黑对象直接403，导致"之前会话就已拉黑"的场景完全感知不到——叠加
  getConversationContext兜底（该接口对拉黑目标正确返回200+relationship）。
- group-management-view.jsx: AdminList显示群主/管理员姓名漏了group_nickname兜底；
  JoinRequests从聊天页横幅进入时返回按钮硬编码回group-settings（应回聊天本身），
  从Governance进入时返回group-settings而非group-governance（与AdminList/Muted不一致）。
- workplace-collaboration-view.jsx: OrganizationDirectory/DeptNode的部门树加载失败
  被无条件当成"暂无数据"渲染，补loadError区分+重试链接。
- personal-settings-view.jsx: CacheClear对navigator.storage/caches整个不存在的情况
  只有react出了范围的.catch()覆盖不到的同步抛错，加了特性检测+try/catch；
  YouthModeVerify触发TOO_MANY_ATTEMPTS锁定后确定按钮没有禁用/倒计时，会继续发出
  注定失败的请求。
- security-support-view.jsx: 意见反馈category字段在config未加载完成前可为空但没有
  提交前校验，会打到后端400。
- use-cached-data.js: bootstrap等首次拉取失败且无缓存兜底时永久停在undefined，加了
  一次3秒后重试（仅在完全没有缓存值时触发，已有缓存值维持原"显示旧数据"行为不变）。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/widgets/audio-recorder.jsx

@@ -117,6 +117,7 @@ class AudioRecorder extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    this._unmounted = true;
     this.startedOn = null;
     if (this.stream) {
       this.cleanUp();
@@ -288,6 +289,15 @@ class AudioRecorder extends React.PureComponent {
   }
 
   initMediaRecording(stream) {
+    if (this._unmounted) {
+      // getUserMedia()'s permission prompt can still be pending when this component gets torn
+      // down (e.g. the composer became disabled mid-request). Without this guard, the promise
+      // resolving afterwards would go on to call mediaRecorder.start()/visualize() (the latter
+      // reads this.canvasRef, already null post-unmount) against a component nothing can stop
+      // anymore -- the mic would keep running with no UI able to end it.
+      stream.getTracks().forEach(t => t.stop());
+      return;
+    }
     this.stream = stream;
     AUDIO_MIME_TYPES.some(mimeType => {
       if (MediaRecorder.isTypeSupported(mimeType)) {

src/widgets/chat-message.jsx

@@ -17,22 +17,26 @@ import HashNavigation from '../lib/navigation.js';
 // "这条消息本身有没有被看到"，跟"这条语音有没有被真的点开听过"是两回事（文字消息看一眼就算
 // 读过，语音消息可能只是划过去、根本没点开播放）。按话题分别记一份"已播放过的 seq 集合"在
 // localStorage，跟"最近使用表情"是同一类不需要后端参与的本地小状态。
+// Key还要按登录账号分——P2P话题名本身就是对方user_id，跟"我是谁"无关；这个应用已知同一浏览器
+// origin下多个账号共享localStorage（多标签页各自登录不同账号），不带uid会导致账号A点开播放过
+// 的语音，在账号B自己与同一个人/同一个群的独立会话里也显示成"已读"。
 const VOICE_PLAYED_KEY_PREFIX = 'im-voice-played:';
-function isVoicePlayed(topic, seq) {
+function isVoicePlayed(myUid, topic, seq) {
   try {
-    const list = JSON.parse(localStorage.getItem(VOICE_PLAYED_KEY_PREFIX + topic) || '[]');
+    const list = JSON.parse(localStorage.getItem(VOICE_PLAYED_KEY_PREFIX + myUid + ':' + topic) || '[]');
     return Array.isArray(list) && list.includes(seq);
   } catch (_) {
     return false;
   }
 }
-function markVoicePlayed(topic, seq) {
+function markVoicePlayed(myUid, topic, seq) {
   try {
-    const list = JSON.parse(localStorage.getItem(VOICE_PLAYED_KEY_PREFIX + topic) || '[]');
+    const key = VOICE_PLAYED_KEY_PREFIX + myUid + ':' + topic;
+    const list = JSON.parse(localStorage.getItem(key) || '[]');
     const set = Array.isArray(list) ? list : [];
     if (!set.includes(seq)) {
       // Cap so a very long-lived topic doesn't grow this without bound.
-      localStorage.setItem(VOICE_PLAYED_KEY_PREFIX + topic, JSON.stringify(set.concat(seq).slice(-500)));
+      localStorage.setItem(key, JSON.stringify(set.concat(seq).slice(-500)));
     }
   } catch (_) { /* ignore */ }
 }
@@ -43,7 +47,7 @@ class BaseChatMessage extends React.PureComponent {
 
     this.state = {
       progress: 0,
-      voicePlayed: isVoicePlayed(props.topic, props.seq)
+      voicePlayed: isVoicePlayed(props.tinode.getCurrentUserID(), props.topic, props.seq)
     };
 
     if (props.uploader) {
@@ -214,7 +218,7 @@ class BaseChatMessage extends React.PureComponent {
     if (this.state.voicePlayed) {
       return;
     }
-    markVoicePlayed(this.props.topic, this.props.seq);
+    markVoicePlayed(this.props.tinode.getCurrentUserID(), this.props.topic, this.props.seq);
     this.setState({voicePlayed: true});
   }
 

src/widgets/send-message.jsx

@@ -10,7 +10,7 @@ const AudioRecorder = React.lazy(_ => import('./audio-recorder.jsx'));
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
 import { replyFormatter } from '../lib/formatters.js';
-import { forwardFavorites, getFavorites, getFileUrl, getFriends } from '../lib/im-api.js';
+import { forwardFavorites, getFavorites, getFileUrl, getFriends, translateReason } from '../lib/im-api.js';
 
 // 4.5-4.6 表情面板：参考图确认了"只有2个tab"（😊表情 / ♡）和"发送按钮浅蓝禁用、深蓝启用"这两点，
 // 但没有任何一张图能看清第二个tab具体展示什么内容——判断为"常用"（这是这类两tab设计里最常见的
@@ -140,6 +140,7 @@ class SendMessage extends React.PureComponent {
     this.startHoldRecording = this.startHoldRecording.bind(this);
     this.handleHoldMove = this.handleHoldMove.bind(this);
     this.endHoldRecording = this.endHoldRecording.bind(this);
+    this.handleHoldVisibilityChange = this.handleHoldVisibilityChange.bind(this);
     this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this);
     this.insertEmoji = this.insertEmoji.bind(this);
     this.toggleAttachPanel = this.toggleAttachPanel.bind(this);
@@ -174,6 +175,8 @@ class SendMessage extends React.PureComponent {
     window.removeEventListener('mouseup', this.endHoldRecording);
     window.removeEventListener('touchmove', this.handleHoldMove);
     window.removeEventListener('touchend', this.endHoldRecording);
+    window.removeEventListener('blur', this.endHoldRecording);
+    document.removeEventListener('visibilitychange', this.handleHoldVisibilityChange);
   }
 
   componentDidUpdate(prevProps) {
@@ -191,6 +194,16 @@ class SendMessage extends React.PureComponent {
     if (prevProps.topicName != this.props.topicName) {
       this.setState({message: this.props.initMessage || '', audioRec: false, quote: null, mentionQuery: null,
         mentionResults: [], emojiOpen: false, attachOpen: false, cardPicker: null, favPicker: null});
+    } else if (!prevProps.disabled && this.props.disabled && this.state.audioRec) {
+      // isWriter/etc are real-time ACS bits (messages-view.jsx re-derives them from {pres}/{meta}),
+      // so `disabled` can flip to true mid-recording -- the other party blocking you, being removed
+      // from a group, or getting muted, all without the user releasing the hold-to-talk button first.
+      // Unmounting <AudioRecorder> here (rather than leaving it mounted under a now-hidden branch)
+      // is what actually stops the mic via its componentWillUnmount; without this the recording just
+      // sits there with `disabled` true and no surviving UI able to end it, and if `disabled` later
+      // reverts to false in the same topic, this stale `true` would remount a fresh <AudioRecorder>
+      // with no user gesture at all -- silently starting to record again on its own.
+      this.setState({audioRec: false});
     } else if (prevProps.initMessage != this.props.initMessage) {
       const msg = this.props.initMessage || '';
       this.setState({message: msg}, _ => {
@@ -494,7 +507,7 @@ class SendMessage extends React.PureComponent {
     forwardFavorites([item.favorite_id], [this.props.topicName]).then(result => {
       const failed = (result && result.items || []).filter(r => r.status === 'failed');
       if (failed.length && this.props.onError) {
-        this.props.onError('发送失败：' + (failed[0].reason || '未知原因'), 'err');
+        this.props.onError('发送失败：' + (translateReason(failed[0].reason) || failed[0].reason || '未知原因'), 'err');
       }
     }).catch(err => {
       if (this.props.onError) {
@@ -520,6 +533,20 @@ class SendMessage extends React.PureComponent {
     window.addEventListener('mouseup', this.endHoldRecording);
     window.addEventListener('touchmove', this.handleHoldMove, {passive: false});
     window.addEventListener('touchend', this.endHoldRecording);
+    // mouseup/touchend only fire for a release point still inside this window/tab -- dragging the
+    // pointer out of the browser entirely, switching tabs/apps, or a permission prompt stealing
+    // focus (e.g. the very getUserMedia prompt this recording itself triggered, on a second call)
+    // all leave the mic running with no further event this listener pair will ever see. Ending the
+    // recording (same finish-or-cancel logic as a normal release, per the cancel-zone check) on
+    // either signal is a safer default than waiting indefinitely for a mouseup that may never come.
+    window.addEventListener('blur', this.endHoldRecording);
+    document.addEventListener('visibilitychange', this.handleHoldVisibilityChange);
+  }
+
+  handleHoldVisibilityChange() {
+    if (document.hidden) {
+      this.endHoldRecording();
+    }
   }
 
   handleHoldMove(e) {
@@ -538,6 +565,8 @@ class SendMessage extends React.PureComponent {
     window.removeEventListener('mouseup', this.endHoldRecording);
     window.removeEventListener('touchmove', this.handleHoldMove);
     window.removeEventListener('touchend', this.endHoldRecording);
+    window.removeEventListener('blur', this.endHoldRecording);
+    document.removeEventListener('visibilitychange', this.handleHoldVisibilityChange);
     this.holdStartY = null;
     const fakeEvent = {preventDefault: () => {}};
     if (this.audioRecorderInstance) {