fix(collab): 两处会让协作「看起来正常、其实各写各的」的缺陷

都是实测复现出来的，不是推测。

1. 教师第二次接单，看到的是上一个学生的代码拼在自己文档里
   CollabModal 的 code ref 跨会话不清。n-modal 默认 display-directive="if"，
   每次打开都重挂 CodeMirror，拿这个 ref 当初始文档；而 yCollab 只观察 ytext、
   从不反过来用 ytext 覆盖编辑器。于是上一轮的代码留在文档里，新学生的内容
   作为 delta 插到位置 0，两边偏移从此对不上。
   实测三轮会累积成 CCC/BBB/AAA/XXX，且教师敲一行之后，教师看到
   「BBB/AAA/XXX」、学生看到「BBB/XXX」——两份不同的文档。
   改法：不绑 v-model，文档完全交给 Yjs；并把 start 的起点从「房间打开 +
   await nextTick」换成「编辑器 ready」，顺带修掉绑到已 destroy 的旧 view。

2. 学生换连接后房间静默死掉
   handleCollabOpen 迁移 socket 时只补发了 help_status，没补 room_open，
   而前端每次连接建立都会把 room 清成 null —— 页面显示「老师正在帮你」，
   编辑器却早把 yCollab 摘了，老师敲的字一个也到不了。
   补发 room_open 也修不好：CRDT 状态跟着旧连接没了，新建 Y.Doc 再 seed
   会和老师那份合并成重复文本。所以改成直接拆房、请求退回排队，
   老师再点一次 —— 和老师掉线走同一条路子。

顺带修掉验证时挖出来的第三个：握手帧会被丢。
两端挂 yCollab 的时刻不同步（教师等模态框、学生等 chunk），先挂好的那端发的
SyncStep1 到对面时还没有 binaryHandler，服务端转发是成功的、客户端却静静丢掉。
丢的偏偏是握手——y-protocols 里 A 的内容靠 B 发的 Step1 换回来，教师的 Step1
一丢，学生的代码就永远到不了教师那边（单向同步，同样看着像在协作）。
CollabWebSocket 改成 handler 装上之前先把二进制帧缓着，装上再按序放行。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016DHxhKNxXfG89JnVzHbvgj

apps/api/src/collab/handler.ts

@@ -40,12 +40,34 @@ function serializeRequest(request: HelpRequest) {
   }
 }
 
+/**
+ * 把最新的排队位置推给每个还在等的学生。
+ *
+ * queueAhead 原来只在「建请求 / 重连 / 退回排队」这三处推过，前面的人被接走或被
+ * 取消之后不重算 —— 五个人排队、前四个都处理完了，第五个还一直显示「前面还有 4 人」。
+ */
+function broadcastQueuePositions() {
+  for (const request of listRequests()) {
+    if (request.status !== "pending") continue
+    sendHelpStatus(request.socket, "pending", {
+      queueAhead: queueAheadOf(request.studentId),
+    })
+  }
+}
+
+/**
+ * 队列变了：老师端收全量列表，排队中的学生各自收自己的新位置。
+ *
+ * 两件事捏在一起是因为它们永远同时发生 —— 拆成两个函数分别调，迟早会在某条
+ * 路径上漏掉一个。
+ */
 export function broadcastRequests() {
   const payload = JSON.stringify({
     type: "requests",
     list: listRequests().map(serializeRequest),
   })
   for (const ws of teacherSockets()) ws.send(payload)
+  broadcastQueuePositions()
 }
 
 function sendHelpStatus(
@@ -77,12 +99,32 @@ export function handleCollabOpen(ws: CollabSocket) {
 
   const room = getRoom(ws.data.userId)
   if (room && room.studentSocket !== ws) {
-    // 旧 socket 不再是这间房的主人：清掉它的 roomOwnerId，不然它稍后触发的
+    // 协作中的学生换了一条连接。**不迁移房间，直接拆掉。**
-    // close 会经 roomOf 认出这间刚刚转移出去的房间，把它拆了——一条早该
+    //
-    // 死透的连接反而有权拆掉正在用的新连接的房间
+    // 原来这里是把 studentSocket 换成新连接就算完，转发确实转到新连接了，
+    // 但客户端接不住：前端每次连接建立都会把 room 清成 null（旧连接的状态
+    // 不该越过重连活下来），而这里只补发了 help_status，没补 room_open ——
+    // 于是学生页面显示「老师正在帮你」、编辑器却早就把 yCollab 摘了，
+    // 老师照常敲字、一个字也到不了对面。正是 handleCollabBinary 注释里说的
+    // 「看起来在协作、其实各看各的」，比老实断开更糟。
+    //
+    // 而补发 room_open 也修不好：Yjs 的文档状态跟着旧连接一起没了，新连接
+    // 只能新建 Y.Doc，再拿学生编辑器里的内容当种子插进去，就会和老师那份
+    // 已有内容合并成重复文本（两份 doc 的 item 身份不同，CRDT 不去重）。
+    // 续接一个 CRDT 会话不是哑转发层做得到的事。
+    //
+    // 所以退回排队，老师再点一次 —— 和老师掉线走的是同一条路子。学生的代码
+    // 一直在他自己的编辑器里，不受影响。
+    closeRoom(room.studentId)
     room.studentSocket.data.roomOwnerId = undefined
-    room.studentSocket = ws
+    room.teacherSocket.data.roomOwnerId = undefined
-    ws.data.roomOwnerId = ws.data.userId
+    room.teacherSocket.send(
+      JSON.stringify({ type: "room_closed", reason: "peer_offline" }),
+    )
+    request.status = "pending"
+    request.teacherId = undefined
+    request.teacherName = undefined
+    broadcastRequests()
   }
 
   if (request.status === "pending") {

apps/web/src/shared/components/CollabModal.vue

@@ -14,7 +14,6 @@ const isDark = useDark()
 const collabStore = useCollabStore()
 const { start, stop, getInitialExtension } = useCollabDoc()
 
-const code = ref("")
 // shallowRef，理由见 SyncCodeEditor.vue：EditorView 是类实例，ref() 的深度
 // UnwrapRef 会把它拆成一个丢了原型方法的假类型，vue-tsc 报莫名其妙的类型错。
 const editorView = shallowRef<EditorView | null>(null)
@@ -36,25 +35,44 @@ const extensions = computed(() => [
   getInitialExtension(),
 ])
 
+const bind = (view: EditorView) => {
+  if (!collabStore.isTeacher || !collabStore.room) return
+  // ★ 教师端 seedContent 必须是 null —— 内容全部来自学生端
+  start({ editorView: view, seedContent: null })
+}
+
+/**
+ * 起点是「编辑器就绪」，不是「房间打开」。
+ *
+ * n-modal 默认 display-directive="if"，每次打开都会重挂一个全新的 CodeMirror。
+ * 原来在 watch 里 `await nextTick()` 之后去取 editorView：赶上 teleport + 离场
+ * 过渡没走完，取到的是上一轮那个已经 destroy 的 view，start() 静默绑到死编辑器上，
+ * 老师对着空白框干等，服务端那边房间却是活的。
+ */
 const handleEditorReady = (payload: { view: EditorView }) => {
   editorView.value = payload.view
+  bind(payload.view)
 }
 
 watch(
   () => collabStore.room,
-  async (room) => {
+  (room) => {
+    // 常规路径下开房时编辑器还没挂，这里是 null，由 @ready 接手；
+    // 万一哪天 display-directive 改成 show（编辑器常驻），这条分支才起作用
     if (room && collabStore.isTeacher) {
-      await nextTick()
+      if (editorView.value) bind(editorView.value)
-      if (!editorView.value) return
-      // ★ 教师端 seedContent 必须是 null —— 内容全部来自学生端
-      start({ editorView: editorView.value as EditorView, seedContent: null })
     } else {
       stop()
+      // 编辑器随模态框一起卸载了，留着这个引用下轮就会绑到一个死 view 上
+      editorView.value = null
     }
   },
 )
 
-onUnmounted(stop)
+onUnmounted(() => {
+  stop()
+  editorView.value = null
+})
 </script>
 
 <template>
@@ -75,8 +93,14 @@ onUnmounted(stop)
       </n-button>
     </template>
 
+    <!--
+      不绑 v-model：这个编辑器的内容完全由 Yjs 文档接管。
+      原来绑了一个跨会话不清的 code ref —— 模态框重挂时 CodeMirror 拿它当初始
+      文档，而 yCollab 只观察 ytext、从不反过来用 ytext 覆盖编辑器，于是上一个
+      学生的代码留在文档里，新学生的内容作为 delta 插到位置 0，两边的偏移从此
+      对不上，教师和学生显示的是两份不同的文档。
+    -->
     <Codemirror
-      v-model="code"
       indentWithTab
       :extensions="extensions"
       :tab-size="4"

apps/web/src/shared/composables/websocket.ts

@@ -737,6 +737,21 @@ export interface CollabMessage extends WebSocketMessage {
 export class CollabWebSocket extends BaseWebSocket<CollabMessage> {
   private binaryHandler: ((data: ArrayBuffer) => void) | null = null
   private connectHandler: (() => void) | null = null
+  /**
+   * 还没装 handler 时先收着的二进制帧。
+   *
+   * room_open 是两端同时收到的，但两端把 yCollab 挂上去的时刻并不同步：
+   * 教师端要等模态框挂出 CodeMirror，学生端要等 y* 那几个 chunk 下载完。
+   * 谁先挂好谁就先发 SyncStep1，而对面这时还没有 handler ——
+   * 服务端只管转发（peer.send() 是成功的），帧就在客户端这儿被静静丢掉了。
+   *
+   * 丢的偏偏是握手：y-protocols 里 A 的内容是靠 **B 发的 Step1** 换回来的。
+   * 教师的 Step1 一丢，学生的代码就永远到不了教师那边 —— 教师看到空编辑器，
+   * 自己敲的字倒是能同步过去，看着像在协作，实际上只有单向。
+   *
+   * 所以在这儿缓一手，等 setBinaryHandler 装上再按序放行。
+   */
+  private pendingBinary: ArrayBuffer[] = []
 
   constructor() {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"
@@ -745,6 +760,14 @@ export class CollabWebSocket extends BaseWebSocket<CollabMessage> {
 
   setBinaryHandler(handler: ((data: ArrayBuffer) => void) | null) {
     this.binaryHandler = handler
+    if (!handler) {
+      // 协作结束：攒下的帧属于上一轮，放到下一轮去只会污染新文档
+      this.pendingBinary = []
+      return
+    }
+    const buffered = this.pendingBinary
+    this.pendingBinary = []
+    for (const data of buffered) handler(data)
   }
 
   /**
@@ -757,11 +780,22 @@ export class CollabWebSocket extends BaseWebSocket<CollabMessage> {
     this.connectHandler = handler
   }
 
+  /** 一轮握手也就几帧，给个上限纯粹是防呆：真堆到这个数说明哪里不对 */
+  private static readonly MAX_PENDING_BINARY = 64
+
   protected override onBinary(data: ArrayBuffer) {
-    this.binaryHandler?.(data)
+    if (this.binaryHandler) {
+      this.binaryHandler(data)
+      return
+    }
+    if (this.pendingBinary.length < CollabWebSocket.MAX_PENDING_BINARY) {
+      this.pendingBinary.push(data)
+    }
   }
 
   protected override onConnected() {
+    // 新连接，旧连接攒下的帧一概作废
+    this.pendingBinary = []
     this.connectHandler?.()
   }
 }