feat(chat): add transient presence flash and 5s reconnect grace period

frontend/src/main.test.ts

@@ -105,6 +105,7 @@ beforeEach(() => {
             <span id="room-name">Main Channel</span>
             <button type="button" onclick="togglePrivateDM()">New DM</button>
           </div>
+          <div id="chat-flash" class="chat-flash" aria-live="polite" hidden></div>
           <section id="messages" class="chat-messages" aria-live="polite"></section>
           <section id="presence-panel" class="presence-panel">
             <div id="presence-list" class="presence-list"></div>
@@ -581,3 +582,23 @@ describe("responsive layout", () => {
     expect(np?.getAttribute("aria-live")).toBe("polite");
   });
 });
+
+describe("presence flash", () => {
+  it("flashes join/leave messages instead of appending chat rows", async () => {
+    await import("../src/main").then((mod) => mod.initPlayerAndChat(async () => ({ default: HlsMock }) as any));
+
+    const ws = websocketInstances[0];
+    ws.onmessage?.({ data: JSON.stringify({ type: "system", text: "alice joined the room", username: "system" }) });
+
+    const flash = document.getElementById("chat-flash")!;
+    expect(flash.textContent).toBe("alice joined");
+    expect(flash.hidden).toBe(false);
+
+    // Join/leave must not be rendered as chat rows.
+    const messages = document.getElementById("messages")!;
+    expect(messages.textContent).not.toContain("joined");
+
+    ws.onmessage?.({ data: JSON.stringify({ type: "system", text: "alice left the room", username: "system" }) });
+    expect(flash.textContent).toBe("alice left");
+  });
+});