diff --git a/web/src/app.jsx b/web/src/app.jsx
index 11607d8..22f57a4 100644
--- a/web/src/app.jsx
+++ b/web/src/app.jsx
@@ -280,6 +280,8 @@ function App() {
   const [connected, setConnected] = useState(true);
   const [inputHistory, setInputHistory] = useState([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
+  // A channel this client has just joined, whose tab is to be shown.
+  const [joinedChannel, setJoinedChannel] = useState(null);
 
   const lastIdRef = useRef(0);
   const seenIdsRef = useRef(new Set());
@@ -315,6 +317,18 @@ function App() {
     if (tab) setUnread((prev) => ({ ...prev, [tab.name]: 0 }));
   }, [activeTab, tabs]);
 
+  // Show the tab of a channel this client has just joined. The tab is
+  // found by name in the updated tab list, because the user's own JOIN
+  // event may have added it before the join request returned.
+  useEffect(() => {
+    if (!joinedChannel) return;
+    const idx = tabs.findIndex(
+      (t) => t.type === "channel" && t.name === joinedChannel,
+    );
+    if (idx >= 0) setActiveTab(idx);
+    setJoinedChannel(null);
+  }, [tabs, joinedChannel]);
+
   const addMessage = useCallback((tabName, msg) => {
     if (msg.id && seenIdsRef.current.has(msg.id)) return;
     if (msg.id) seenIdsRef.current.add(msg.id);
@@ -864,8 +878,7 @@ function App() {
 
         return [...prev, { type: "channel", name }];
       });
-      const newIdx = tabsRef.current.length;
-      setActiveTab(newIdx);
+      setJoinedChannel(name);
       try {
         const hist = await api(
           `/history?target=${encodeURIComponent(name)}&limit=50`,