feat: force pin listening tab with fixed left section (#2890)

* feat: force pin listening tab and stop on close

- Auto-pin session tab when listening starts
- Allow closing active listening tabs (removed canClose restriction)
- Stop listening and trigger auto-enhance when closing an active session tab

Co-Authored-By: [email protected] <[email protected]>

* feat: move listening tab to fixed section on far left

- Listening tab is now rendered in a separate fixed section before navigation buttons
- Tab is always visible when actively listening
- Filtered out from the regular reorderable tab group

Co-Authored-By: [email protected] <[email protected]>

* Move pinned listening tab next to navigation buttons

Place the pinned listening tab (listeningTab TabItem) to the left of the back/forward navigation buttons so the <- and -> controls appear on the left of the pinned listening tab. This reorders the JSX so the listening tab is rendered immediately after the navigation button group, achieving the requested UI placement change.

* refactor(tabs): optimize tabs state management

* refactor(tabs): optimize scroll state and active tab handling

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: John Jeong <[email protected]>

Author: devin-ai-integration[bot]

apps/desktop/src/components/main/body/index.tsx

@@ -14,6 +14,7 @@ import { useShallow } from "zustand/shallow";
 import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
+import { useListener } from "../../../contexts/listener";
 import { useNotifications } from "../../../contexts/notifications";
 import { useShell } from "../../../contexts/shell";
 import {
@@ -105,15 +106,31 @@ function Header({ tabs }: { tabs: Tab[] }) {
       unpin: state.unpin,
     })),
   );
+
+  const liveSessionId = useListener((state) => state.live.sessionId);
+  const liveStatus = useListener((state) => state.live.status);
+  const isListening = liveStatus === "active" || liveStatus === "finalizing";
+
+  const listeningTab =
+    isListening && liveSessionId
+      ? tabs.find((t) => t.type === "sessions" && t.id === liveSessionId)
+      : null;
+  const regularTabs = listeningTab
+    ? tabs.filter((t) => !(t.type === "sessions" && t.id === liveSessionId))
+    : tabs;
+
   const tabsScrollContainerRef = useRef<HTMLDivElement>(null);
   const handleNewEmptyTab = useNewEmptyTab();
   const [isSearchManuallyExpanded, setIsSearchManuallyExpanded] =
     useState(false);
   const { ref: rightContainerRef, hasSpace: hasSpaceForSearch } =
     useHasSpaceForSearch();
-  const scrollState = useScrollState(tabsScrollContainerRef, [tabs]);
+  const scrollState = useScrollState(
+    tabsScrollContainerRef,
+    regularTabs.length,
+  );
 
-  const setTabRef = useScrollActiveTabIntoView(tabs);
+  const setTabRef = useScrollActiveTabIntoView(regularTabs);
   useTabsShortcuts();
 
   return (
@@ -158,6 +175,21 @@ function Header({ tabs }: { tabs: Tab[] }) {
         </Button>
       </div>
 
+      {listeningTab && (
+        <div className="flex items-center h-full shrink-0 mr-1">
+          <TabItem
+            tab={listeningTab}
+            handleClose={close}
+            handleSelect={select}
+            handleCloseOthersCallback={closeOthers}
+            handleCloseAll={closeAll}
+            handlePin={pin}
+            handleUnpin={unpin}
+            tabIndex={1}
+          />
+        </div>
+      )}
+
       <div className="relative h-full min-w-0">
         <div
           ref={tabsScrollContainerRef}
@@ -171,14 +203,23 @@ function Header({ tabs }: { tabs: Tab[] }) {
             key={leftsidebar.expanded ? "expanded" : "collapsed"}
             as="div"
             axis="x"
-            values={tabs}
+            values={regularTabs}
             onReorder={reorder}
             className="flex w-max gap-1 h-full"
           >
-            {tabs.map((tab, index) => {
-              const isLastTab = index === tabs.length - 1;
-              const shortcutIndex =
-                index < 8 ? index + 1 : isLastTab ? 9 : undefined;
+            {regularTabs.map((tab, index) => {
+              const isLastTab = index === regularTabs.length - 1;
+              const shortcutIndex = listeningTab
+                ? index < 7
+                  ? index + 2
+                  : isLastTab
+                    ? 9
+                    : undefined
+                : index < 8
+                  ? index + 1
+                  : isLastTab
+                    ? 9
+                    : undefined;
 
               return (
                 <Reorder.Item
@@ -566,7 +607,7 @@ function useHasSpaceForSearch() {
 
 function useScrollState(
   ref: React.RefObject<HTMLDivElement | null>,
-  deps: unknown[] = [],
+  tabCount: number,
 ) {
   const [scrollState, setScrollState] = useState({
     atStart: true,
@@ -578,9 +619,15 @@ function useScrollState(
     if (!container) return;
 
     const { scrollLeft, scrollWidth, clientWidth } = container;
-    setScrollState({
+    const newState = {
       atStart: scrollLeft <= 1,
       atEnd: scrollLeft + clientWidth >= scrollWidth - 1,
+    };
+    setScrollState((prev) => {
+      if (prev.atStart === newState.atStart && prev.atEnd === newState.atEnd) {
+        return prev;
+      }
+      return newState;
     });
   }, [ref]);
 
@@ -599,19 +646,19 @@ function useScrollState(
     return () => {
       container.removeEventListener("scroll", updateScrollState);
     };
-  }, [updateScrollState, ...deps]);
+  }, [updateScrollState, tabCount]);
 
   return scrollState;
 }
 
 function useScrollActiveTabIntoView(tabs: Tab[]) {
   const tabRefsMap = useRef<Map<string, HTMLDivElement>>(new Map());
+  const activeTab = tabs.find((tab) => tab.active);
+  const activeTabKey = activeTab ? uniqueIdfromTab(activeTab) : null;
 
   useEffect(() => {
-    const activeTab = tabs.find((tab) => tab.active);
-    if (activeTab) {
-      const tabKey = uniqueIdfromTab(activeTab);
-      const tabElement = tabRefsMap.current.get(tabKey);
+    if (activeTabKey) {
+      const tabElement = tabRefsMap.current.get(activeTabKey);
       if (tabElement) {
         tabElement.scrollIntoView({
           behavior: "smooth",
@@ -620,7 +667,7 @@ function useScrollActiveTabIntoView(tabs: Tab[]) {
         });
       }
     }
-  }, [tabs]);
+  }, [activeTabKey]);
 
   const setTabRef = useCallback((tab: Tab, el: HTMLDivElement | null) => {
     if (el) {

apps/desktop/src/routes/app/main/_layout.tsx

@@ -3,6 +3,7 @@ import {
   Outlet,
   useRouteContext,
 } from "@tanstack/react-router";
+import { usePrevious } from "@uidotdev/usehooks";
 import { useCallback, useEffect, useRef } from "react";
 
 import { events as deeplink2Events } from "@hypr/plugin-deeplink2";
@@ -28,9 +29,15 @@ function Component() {
   const { persistedStore, aiTaskStore, toolRegistry } = useRouteContext({
     from: "__root__",
   });
-  const { registerOnEmpty, registerCanClose, openNew, tabs } = useTabs();
+  const { registerOnEmpty, registerCanClose, registerOnClose, openNew, pin } =
+    useTabs();
+  const tabs = useTabs((state) => state.tabs);
   const hasOpenedInitialTab = useRef(false);
+  const liveSessionId = useListener((state) => state.live.sessionId);
+  const liveStatus = useListener((state) => state.live.status);
+  const prevLiveStatus = usePrevious(liveStatus);
   const getSessionMode = useListener((state) => state.getSessionMode);
+  const stop = useListener((state) => state.stop);
 
   useDeeplinkHandler();
 
@@ -48,14 +55,34 @@ function Component() {
   }, [tabs.length, openDefaultEmptyTab, registerOnEmpty]);
 
   useEffect(() => {
-    registerCanClose((tab) => {
+    const justStartedListening =
+      prevLiveStatus !== "active" && liveStatus === "active";
+    if (justStartedListening && liveSessionId) {
+      const currentTabs = useTabs.getState().tabs;
+      const sessionTab = currentTabs.find(
+        (t) => t.type === "sessions" && t.id === liveSessionId,
+      );
+      if (sessionTab && !sessionTab.pinned) {
+        pin(sessionTab);
+      }
+    }
+  }, [liveStatus, prevLiveStatus, liveSessionId, pin]);
+
+  useEffect(() => {
+    registerOnClose((tab) => {
       if (tab.type !== "sessions") {
-        return true;
+        return;
       }
       const mode = getSessionMode(tab.id);
-      return mode !== "active" && mode !== "finalizing";
+      if (mode === "active" || mode === "finalizing") {
+        stop();
+      }
     });
-  }, [registerCanClose, getSessionMode]);
+  }, [registerOnClose, getSessionMode, stop]);
+
+  useEffect(() => {
+    registerCanClose(() => true);
+  }, [registerCanClose]);
 
   if (!aiTaskStore) {
     return null;