diff --git a/web/src/app.jsx b/web/src/app.jsx
index 6c1d112..8d97eaf 100644
--- a/web/src/app.jsx
+++ b/web/src/app.jsx
@@ -948,16 +948,23 @@ function App() {
 
   const openDM = (targetNick) => {
     if (targetNick === nickRef.current) return;
+    // Show the direct-message tab. Preact runs this update at once on
+    // the newest tab list, so the tab is found there by name: the
+    // server's copy of the user's message may already have added it,
+    // and other tabs may have opened or closed.
     setTabs((prev) => {
-      if (prev.find((t) => t.type === "dm" && t.name === targetNick))
+      const idx = prev.findIndex(
+        (t) => t.type === "dm" && t.name === targetNick,
+      );
+      if (idx >= 0) {
+        setActiveTab(idx);
+
         return prev;
+      }
+      setActiveTab(prev.length);
 
       return [...prev, { type: "dm", name: targetNick }];
     });
-    const idx = tabs.findIndex(
-      (t) => t.type === "dm" && t.name === targetNick,
-    );
-    setActiveTab(idx >= 0 ? idx : tabs.length);
   };
 
   const handleCommand = async (text) => {